Weboldal betöltés sebesség, és sebességoptimalizálási pontszámok  

Számos esetben merült fel az ügyfelek részéről az a kérdéskör, hogy miképp kell értelmezni a Google PageSpeed Insights és az ehhez hasonló weboldal sebességmérő szolgáltatásokat. Körbejártuk ezt a kérdést is és minden beszerzett eredményt most leírunk.

Nézzük, mi is az a Google PageSpeed Insights és mit lehet tudni a hasonló elven működő, más weboldal sebességekről.

Először is azt leszögezhetjük, hogy a weboldal sebességmérő rendszerek, szuper szolgáltatások, hiszen nagy segítséget nyújtanak a fejlesztők részére, mert esetenként feltárnak olyan hibákat, amik fejlesztés közben nem derültek ki. DE! 100%-ban nem szabad rájuk hagyatkozni. A sebességmérők némileg más értékeket és szabványokat vesznek figyelembe, éppen ezért más-más eredmény adatokat mutatnak. Több esetben találkozunk olyan értékkel, amikor a sebességmérő szembe megy a SEO beállításokkal és számos esetben fordul elő, hogy az egyik feltétel kioltja a másikat. Erre talán a legjobb példa, hogy a rendszerek a betöltési időt is mérik, viszont sok esetben kérik a képek betöltésének késleltetését. Nem nehéz kikövetkeztetni, hogy a késleltetéssel, betöltési időt veszítünk valamint terheljük a böngészőt, így más-más scriptosztályokat is szükséges meghívni. Ilyenkor a fejlesztőnek szigorú szabályok figyelembevételével kell eldöntenie, hogy „melyik karjába harapjon”.

Számos esetben találkozunk olyan sebességmérő rendszerrel, aminél a segítségnyújtás helyett a kereskedelem áll. Ezek a rendszerek igyekeznek úgy forgatni a számokat, hogy további fizetős szolgáltatásra ösztönözzék a fejlesztőt, és vagy oldal tulajdonosát. Éppen ezért is szükséges körültekintően megválogatni a mérő rendszer megválasztását és a kapott értékek figyelembevételét.

Szükséges azt is eldönteni, hogy a betöltési sebesség csökkentésére miért van szükség és melyik országot vegyük viszonyítási alapként.

A Google PageSpeed Insights sebességmérőbe betöltöttük az index.hu Magyarország talán legnagyobb média és hírközlési oldalát.

A kapott eredmények a mérőrendszerek szempontjából aggasztóak, viszont érdemes körbejárni a MIÉRT kérdést.

Mobil nézet:

Asztali gépes nézet:

Egy weboldal üzemeltetésekor az elsődleges eldöntendő kérdés, hogy melyik országból kívánjuk fogadni a látogatókat. Mivel rengeteg megbízó Magyarországot határozza meg, ezért a szerver magyar hosting szobába van elhelyezve. Ahhoz, hogy nemzetközileg is elérhető legyen a weboldal, szükséges biztosítani bizonyos nemzetközi sávszélességet. Ezek a sávszélességek jóval alacsonyabbak, mint a magyar sávszélesség. Nem beszélve arról, hogy még drága is. Tehát, máris megoldódott egy rejtély. Mégpedig az, hogy egy Magyarországra szánt weboldalt ne amerikai, vagy épp angol tartományból mérjük.

A Google PageSpeed Insights rendszere jól kitalálta, hogy a weboldal betöltési ideje lassú, viszont azt nem látja át, hogy ahhoz, hogy a weboldal életbe maradhasson, lehetőség szerint minél több adatot megjelenítsen. Tehát a fejlesztőnek és a döntéshozónak jól át kell gondolni azt a kérdést, hogy kevés adat jelenjen-e meg és cserébe a Google PageSpeed Insights rendszer jó pontozást adjon, viszont ilyenkor a látogatók száma csökken, vagy a Google PageSpeed Insights rendszer adjon rossz értéket, viszont növelje a látogatókat.

Egy online szoftver, mint pl. egy weboldal esetében, nem szabad hagyatkozni csak a betöltési időre, hiszen a működéshez kapcsolt időt is figyelembe kell venni. Pl. egy rosszul megírt weboldal lehet, hogy gyorsan betöltődik, viszont scrollozás esetén rángatás érzékelhető vagy alkalmanként hallható, hogy felpörög a laptop ventilátora.

A betöltési sebesség után következik a script értelmezési és megjelenítési idő. Ezt talán szemléltetni a leghatékonyabban úgy lehet, ha azt szeretnénk, hogy a böngésző kiszámolja, hogy mennyi 1+1, akkor a folyamat úgy néz ki, hogy:

1. Kódokat elkérjük a webszervertől, aminek van egy letöltési ideje.
2. A böngésző értelmezi a kapott kódokat, aminek van egy feldolgozási ideje.
3. A böngésző kiszámolja az 1+1 értékét, aminek van egy kalkulálási ideje.
4. A böngésző kiíratja az eredményt, aminek van egy kiíratási ideje.

És ha ezt még tovább szeretnénk fokozni, akkor úgy lehetne szemléltetni, hogy a kiírt 2 szám után a böngésző várjon 5 másodpercet, majd az értéket szorozza fel 2-vel.

Elgondolkodtató, hogy ez esetben mennyi lesz a weboldal betöltési ideje? Erre a kérdésre nincs egyértelmű válasz, hiszen ez viszonyítás kérdése.

Egy böngészőbe helyezett és automatikusan elindított 1.5 órás mozifilm esetében 90+pár mp lesz a betöltési idő? Ennek megválaszolása is csak nézőpont kérdése.

Nekiálltunk feldolgozni néhány értéket, amiről részletesebben alább beszélünk.

Jelenítse meg a képeket következő generációs formátumokban:

A fejlesztőnek erősen át kell gondolnia, hogy ha a weboldal képeit az új formátum szabványai szerint

jeleníti meg, akkor a megbízóval kell szembe mennie, hiszen ez a formátum számos böngészőben nem támogatott. Ha viszont nem a Google PageSpeed Insights rendszer által javasolt formátum kerül beállításra, akkor mínusz pontozást kap az oldal. Ön mit gondol? Melyik az ideális irány?

A webp típusú képeket a zölddel jelölt böngészők támogatják:

Tehát, mint látható, az Apple Inc. vállalat által használt Safari böngésző nem.

Viszont ennek kiküszöbölésére is van megoldás, hiszen egy plusz program fejlesztésével le lehet kérni a böngésző típusát és a típus / verzióhoz mérten megmondani a szervernek, hogy ekkor jpg, akkor pedig webp kiterjesztésű képeket generáljon. Ezzel a probléma inkább az, hogy emeli a weboldal előállítási költségét, valamint további szervererőforrást igénnyel és terhelésre kerül a szerver.

A sebességmérő rendszerek erősen javasolják a képek minél jobb tömörítését. Viszont arról nem esik szó, hogy mi az optimális szám. Ön milyen szempont alapján döntené el, hogy hány %-os legyen a kép minősége? Arról nem is beszélve, hogy valószínűleg Ön most egy hagyományos monitort néz. Egy retina kijelzős monitoron a hajszálak még inkább kiemelkednek, éppen ezért nem könnyű megtalálni a megfelelő optimalizálási szintet.

Eredeti kép:

1%-os adatmegtartással tömörített kép:

Távolítsa el a megjelenítést gátló erőforrásokat:

vajon a sebességmérő rendszerek milyen szempont alapján döntik és minősítik a legfontosabb és a kevésbé fontos közötti különbségeket? Erre nincs egyértelmű válasz. A rendszerek működéséhez fájlokra és a fájlokba írt scriptsorokra van szükség. Az egyik script felel azért, hogy ha a link fölé húzza az egeret, akkor kékről pirosra váltson, a másik script pedig azért, hogy egy galéria lapozható legyen.

Távolítsa el a nem használt CSS-kódot:

egy analizáló rendszer nem tudja eldönteni, hogy egy stílusosztályt mikor hívunk meg, főleg, ha azt is scriptek segítségével állítjuk elő. Éppen ezért ennek mínusz pontozása nem biztos, hogy releváns.

Használjon videoformátumot az animált tartalmakhoz:

ezzel szembe kell menni. A videóformátum egy teljesen más technológia, mint a képbe ágyazott képkockánként lejátszott videó. Jelen esetben nem egy Youtube videó lejátszásáról van szó, hanem egy mezei ikon szintű kép animálásáról. A 2 technológia teljesen másképp működik és ha videóként játszanánk le egy kép animációját, akkor olyan veszteségekkel kellene kalkulálni, mint pl. a folyamatosan ismétlődés esetén erős rántással, vagy ha épp egy videónál nem szeretnénk erős rántást, akkor végtelen ideig kellene tartani a videónak, ami egy járhatatlan út.

Késleltesse a képernyőn kívüli képek betöltését:

lazy load, vagyis lusta betöltés esetén a fejlesztőnek azt a döntést kell meghoznia, hogy érdemes-e feltételvizsgálatot indítani a böngésző részére, ami böngésző oldali erőforrásveszteséggel járhat, vagy sem. Egy néhány képes weboldal esetén értelmetlen ezzel foglalkozni, viszont a sebességmérő rendszerek nincsenek tisztában azzal, hogy a választás mire és miért került.

Csökkentse a harmadik felek kódjai által kiváltott hatást:

ez egy újabb átgondolandó felhívás, hiszen ha csökkentjük a harmadik féltől származó kódokat, akkor egész egyszerűen megszűnnek azok a szolgáltatások, mint pl. Google Analitycs, Facebook közvetlen postolás, bankkártyás fizetés, AdWords hirdetés hatékonyságának mérése és még ezen kívül számos más szolgáltatás.

Mi a tökéletes webhelysebesség?

Valójában egyetlen weboldal sem kap tökéletes webhely értékelést, hiszen ahhoz, hogy a weboldalon értékesíteni tudjunk, információt kell adjunk a látogatók részére. Az információ pedig adat, aminek mérete van. A mai technológiák és ezzel a látogatók részéről megkövetelt vizuális élményadások tovább emelik az adatmennyiség mértékét. Tehát, ha egy lecsupaszított weboldalról beszélünk, akkor egyrészt értékelés, másrészt Google SEO keresésben ad rossz pontozást. Ha viszont kellemes benyomású betűtípussal, élményfokozó effektekkel szeretnénk emelni az értékesítési esélyt, akkor romlanak a pontozási értékek.

Most akkor a Google PageSpeed Insights jó, vagy rossz?

Kétségtelen, hogy szükség esetén rengeteg segítséget ad. Pl. nincs bekapcsolva a gzip tömörítés, akkor erről jelzést ad. Ha egy kép nem lett kellően optimalizálva, akkor azonnal kibukik, hogy min kell változtatni. Ha viszont olyan beállítást kér, amit lehetetlenség beállítani, figyelmen kívül kell hagyni.

Akkor milyen szempontok alapján kell eldönteni, hogy a weboldal jó-e?

Mindenképpen érdemes betölteni a lapot mobiltelefonon és asztali gépen is. Ezekből különböző sebességűeket célszerű választani. Ha az eszközökön azt tapasztalja, hogy a betöltési idő azt az érzést adja, hogy elfogadható kategóriába esik, akkor tovább kell lépni.

Ha viszont rossz az érzés, akkor egyrészt nem biztos, hogy a weboldallal van a baj, hanem pl. az internet szolgáltatójával vagy esetleg a gépen ragadt vírus fogja vissza az adatforgalmat. Tehát, ez esetben mindenképpen érdemes kivizsgálni a sebesség problémát.