Google PageSpeed Insight – nejčastější chybové hlášky

Google PageSpeed Insight je komplexní nástroj pro diagnostiku webu zdarma, díky němuž můžeme odhalit, proč je náš web pomalý. V tomto článku se zaměříme na nejčastější chybové hlášky zmiňovaného nástroje.

Nejčastější chybové hlášky

• Odložte načítání obrázků mimo obrazovku
• Zobrazujte obrázky ve formátech nové generace
• Používejte správnou velikost obrázků
• Eliminujte zdroje, které blokují vykreslení
• Nepoužívejte příliš velký model DOM 
• Minimalizujte práci v hlavním podprocesu
• Odstraňte nepoužívaný JavaScript
• Zkraťte dobu počáteční odpovědi serveru

Odložte načítání obrázků mimo obrazovku

Příčina problému:	Řešení:
Na webu používáte příliš mnoho obrázků.	Uvažujte nad použitím lazy loadingu.
Používáte obrázky bez optimalizace.	Obrázky optimalizujte před nahráním do WP například pomocí online nástroje tinyPNG, nebo použijte plugin pro optimalizaci(Imagify, Shortpixel…)

Zobrazujte obrázky ve formátech nové generace

Možná příčina problému:	Řešení:
Na webu používáte nevhodný formát obrázků.	Převeďte obrázky například do formátu .webP(oproti formátům .jpg a .png nabízí .webP lepší kompresi při zachování vysoké kvality obrázku)

Používejte správnou velikost obrázků

Možná příčina problému:	Řešení:
Používáte zbytečně velké velikosti obrázků na místech, u kterých to není potřeba.	Změňte manuálně velikost obrázku tak, aby velikost odpovídala místu, na kterém má obrázek být, nebo použijte plugin(např. Imagify), který toto vyřeší za Vás.

Eliminujte zdroje, které blokují vykreslení

Možná příčina problému:	Řešení:
Chybu může způsobit hned několik věcí. Nejčastěji se jedná o JavaScript, CSS, a někdy i o služby třetích stran(Google Fonts, analytika…).	Minifikujte JS, CSS(pomocí pluginu jako je WP Rocket, případně v nastavení šablony), omezte služby třetích stran a používejte lokální načítání fontu.

Nepoužívejte příliš velký model DOM

DOM, neboli Document Object Model reprezentuje XML a HTML stromovou strukturu dokumentu(např. webových stránek). V tomto dokumentu je každý prvek(např. nadpisy, odstavce, obrázky) reprezentován jako objekt v tomto stromu.

Možná příčina problému:	Řešení:
Na webu používáte příliš mnoho zbytečných prvků. S tímto problémem se setkáte především při tvorbě webu pomocí builderů, které mají tendenci vytvářet nesmyslné množství prvků.	Snižte množství sekcí, nebo jednotlivých elementů, nebo použijte jiný nástroj pro tvorbu. Dalším rešením může být rozčlenění jedné obsáhlé stránky na vícero.
Přiliš velké množství pluginů, nebo špatně nakódované pluginy.	Omezte počet aktivních pluginů a snažte se vyvarovat špatně hodnoceným, nebo málo stahovaným pluginům. Vliv pluginu na DOM si můžete vyzkoušet jednoduše. Stačí, když každý plugin zvlášť deaktivujete a spustíte měření rychlosti webu.

Minimalizujte práci v hlavním podprocesu

Možná příčina problému:	Řešení:
Neoptimalizovaný JS a CSS.	Minifikace souborů
Příliš mnoho Javascriptu, nebo služeb třetí strany.	Odložte načítání JS

Odstraňte nepoužívaný JavaScript

Možná příčina problému:	Řešení:
Používáte příliš mnoho pluginů, špatně optimalizovanou šablonu, velké množství animací .	Použijte komplexní plugin pro optimalizaci webu, který dokáže zredukovat nepoužívané JS skripty. Srovnání těchto pluginů najdete zde.

Zkraťte dobu počáteční odpovědi serveru

Možná příčina problému:	Řešení:
Používáte příliš pomalý web hosting.	Zvyšte licenci serveru, na kterém web běží, nebo přejděte k lepšímu web hostingu.
Máte pomalou databázi.	Manuálně vyprázdněte nepoužívaná data z tabulek databáze. Dále můžete smazat revize u starých příspěvků, nebo použít jednorázový plugin pro kompletní pročištění databáze. Před zahájením nezapomeňte zálohovat Váš WordPress web!
Nepoužíváte cachování, nebo jej máte špatně nastavené.	Používejte vždy pouze jeden plugin pro cachování! Nejprve zkontrolujte nastavení šablony, jestli již cachování neřeší sama o sobě. Pokud ne, přichází na řadu některý z pluginů, který kromě cachování dokáže řešit více věcí najednou. Souhrn populárních cachovacích pluginů najdete zde.

Obrázkové prvky nemají explicitní označení width a height

Pokud Google PageSpeed Insight hlásí tuto chybu, pravděpodobně bude problém i s hodnotou CLS, která s tímto tématem úzce souvisí. Bez nastavení šířky a výšky u jednotlivých obrázků nám během načítání může rozhodit obsah celého webu.

Možná příčina problému:	Řešení:
U obrázků chybí určení výšky a šířky	Obrázkům nastavte atributy šířky a výšky

Závěr

Google PageSpeed Insight nabízí cenné informace o tom, jak zlepšit rychlost načítání stránek. Zmiňované chybové hlášky jsou pouze malou částí možných problémů, se kterými se můžete setkat.

Pokud se chystáte optimalizovat svůj web, mějte na paměti, že každá změna může mít vliv na funkčnost webu. Z toho důvodu je vhodné průběžně sledovat změny na webu a před zahájením jakékoliv práce provádět zálohy.