PageSpeed Insights ON page optimalizácia webových stránok

PageSpeed Insights ON page optimalizácia webových stránok

google-page-speed

PageSpeed ​​Insights je ďalší nástroj na optimalizáciu stránok, ktorý bezplatne ponúka Google. Pomocou aplikácie PageSpeed Insights je možné získať podrobné prehľady o výkonnosti webových stránok pre mobilné a stolné zariadenia a poskytuje návrhy na zlepšenie.

Skóre rýchlosti

Stránka PageSpeed ​​Insights obsahuje údaje z prehľadu o používateľských skúsenostiach Chrome (CrUX), ktoré zobrazujú skutočné údaje o výkonnosti stránky. PSI vykazuje dve metriky : Prvá obsahová farba (FCP) a DOM Content Loaded (DCL). Distribúcia udalostí FCP a DCL webovej stránky je rozdelená do kategórií Rýchle (najrýchlejšia tretina), Priemerné (stredná tretina) a Pomalé (spodná tretina).

  • rýchla: stredná hodnota metriky je v najvyššej tretine zo všetkých stránok,
  • pomalá: stredná hodnota metriky je v najnižšej tretine všetkých zaťažení stránky,
  • priemer: stredná hodnota metriky je v strednej tretine všetkých zaťažení stránky.

 

 

Optimalizačné skóre

Ďalšou metrikou, ktorú PageSpeed Insights vyhodnocuje, je optimalizačné skóre. Skóre sa zobrazuje v rozmedzí 0 až 100 bodov a odhaduje celkový výkon webovej stránky. Hodnotí sa, či môže webová stránka zlepšiť výkon v dvoch oblastiach:

  • čas do nadlimitného zaťaženia: čas uplynutý od okamihu, keď používateľ požiada o novú stránku, do chvíle, keď prehliadač vykreslí obsah stránky,
  • čas na úplné načítanie stránky: čas uplynutý od okamihu, keď používateľ požiada o novú stránku, do okamihu úplného vykresľovania stránky prehliadačom.

 

Návrhy na optimalizáciu

Optimalizačné skóre priamo súvisí s návrhmi na optimalizáciu. Čím menej návrhov na optimalizáciu, tým má webová stránka vyššie skóre a opačne.

Všetky návrhy na optimalizáciu, ktoré automatický vyhodnotí Page Speed Insights:

  • Eliminácia JavaScriptu a CSS blokujúce vykreslenie: je dôležité, aby bolo možné vykresliť webovú stránku bez čakania na načítanie JavaScriptu a CSS. Blokujúce zdroje je možno odložiť, načítať ich asynchrónne alebo  niektoré časti priamo vložiť do HTML kódu.
  • Ukladanie do vyrovnávacej pamäte: nastavenie dátumu vypršania platnosti alebo maximálneho veku v hlavičkách protokolov HTTP statických zdrojov dá prehliadaču pokyn, aby súbory, ktoré už boli stiahnuté, načítal priamo z disku a nie cez sieť.
  • Minifikácia súborov HTML, CSS, JavaScript: tento proces sa zameriava na odstránenie nepotrebných častí, napríklad zo zdrojového kódu bez ovplyvnenia funkčnosti. Odstránené môžu byť komentáre v kóde, zbytočné riadky,  nepoužitý kód, používanie kratších názvov premenných a podobne.
  • Optimalizácia obrázkov: veľkosť obrázkov je najčastejším faktorom spomalenia web stránky. Čím menej bajtov prehliadač zo stránky preberie, tým sa stránka rýchlejšie načíta. Hľadanie optimálneho formátu a stratégie optimalizácie obrázkov je náročný proces. Je potrebné si zvážiť, či sa niektoré obrázky najlepšie nezobrazia vo vektorovom formáte a vybrať vhodný rozmer, formátovanie a zvoliť vhodnú kompresiu obrázkov. Prípadne, či nie je možné určité objekty vykresliť pomocou CSS štýlov.
  • Čas odozvy servera: PageSpeed Insights zobrazí chybové hlásenie, pokiaľ je odozva servera väčšia ako 200ms.