PageSpeed Insights Google je skvělý způsob, jak rychle získat přehled o optimalizačním potenciálu vašich webových stránek. Dnes vám ukážu, jak tento potenciál využít a zvýšit skóre PageSpeed Score. Neměli byste se však otrocky řídit výsledky Googlu. Chybová hlášení PageSpeed totižnejsou vždy užitečná.

PageSpeed InsightsPřed časem našel Caspar Hübinger v jednom ze svých blogpostů velmi jasná slova pro výsledek vyhledávání v Googlu. A kritizuje nejen tento nástroj, ale i jeho samotné používání. Pokud totiž nevíte, jak jednotlivé návrhy optimalizace interpretovat a opravit, můžete se v nesmyslné honbě za 100 body rychle ztratit. To by však nebylo moudré. Koneckonců, utopické skóre Google PageSpeed je obvykle ztrátou času. Důležitější je optimalizace doby načítání.

Plně responzivní, načte se za 500 ms a nablýskaná shittool společnosti Google mi říká, že můj mobilní výkon je "spravedlivý", bc render-fucking-blockhead CSS.

Caspar Hübinger(Glueckpress)

PageSpeed Insights Dnes vám ukážu, jak interpretovat nejdůležitější chybová hlášení od Googlu a jak podle nich optimalizovat své webové stránky.

PageSpeed Insights Než vám však ukážu, jak interpretovat jednotlivá chybová hlášení a jak chyby opravit, rád bych se věnoval tomu, jak správně používat Google. Již jsme viděli, že někteří lidé jsou velmi fixovaní na skóre PageSpeed, aniž by sledovali dobu načítání svých webových stránek.

Pokud vás tato část nezajímá, přeskočte ji a naučte se přímo, jak opravit chybovou zprávu "Compress CSS".

Chybová hlášení služby Google PageSpeed nejsou vždy správná a důležitá

PageSpeed Insights Nikdy byste se neměli spoléhat výhradně na výsledky nebo chybová hlášení společnosti Google . Nástroj Google totiž neměří nejdůležitější parametr vašeho webu: dobu načítání stránky. Pro jeho správné měření doporučujistránky Webpagetest.org.

Pouze pokud budete mít při optimalizaci webu od začátku na paměti dobu načítání stránky, můžete smysluplně posoudit úspěšnost optimalizace. Protože cílem každé optimalizace by vždy mělo být zlepšení uživatelské zkušenosti. V případě optimalizace výkonu je to samozřejmě doba načtení stránky a vnímaná doba načtení stránky.

Pro uživatelský zážitek je vždy výhodnější rychlejší načítání stránek a menší velikost stránek. Trpělivost a pozornost lidí se stále snižuje (jak ukazuje tato studie společnosti Microsoft) - to je obzvláště důležité pro elektronické obchodování - a stále více návštěvníků přichází prostřednictvím mobilních zařízení. Již v roce 2016 přistupovalo 56 % Němců pravidelně na internet prostřednictvím chytrých telefonů nebo tabletů. Zde nejsou rychlosti připojení a objemy dat vždy neomezené. Proto jsou vhodné štíhlé a rychlé webové stránky.

Služba Google PageSpeed však poskytuje pouze informace o optimalizačním potenciálu webových stránek a umožňuje vyvodit pouze několik závěrů o uživatelské zkušenosti. Nízkou vypovídací hodnotu chybových hlášení Google PageSpeed umocňuje skutečnost, že nástroj nelze v některých oblastech ztišit, nebo jen se značným dodatečným úsilím.

Například odkaz na ukládání do mezipaměti prohlížeče se objeví vždy, když jsou integrovány externí zdroje - včetně vlastních služeb společnosti Google. Tyto zdroje však nemohou být zahrnuty do mezipaměti prohlížeče vašeho webu. Chybové hlášení proto nemá žádný význam pro uživatelské prostředí vašich webových stránek, ale je vytvářeno logikou samotného nástroje. V nejhorším případě je zpráva interpretována tak, jako by žádné ukládání do mezipaměti prohlížeče nebylo aktivní.

Nezaměřte se proto primárně na hodnocení Google, ale na dobu načítání. Tohle je jediná opravdu důležitá velikost.

Ale co moje hodnocení v Googlu?

Příklad zprávy s chybějící mezipamětí prohlížeče jasně ukazuje, proč by vás údajně špatný výsledek PageSpeed neměl zneklidnit.

Pokud jste na své webové stránky integrovali například Mapy Google nebo službu Google Analytics, zobrazí se následující chybová zpráva:

Totéž platí i pro další služby třetích stran. Například náš chat podpory.

PageSpeed Insights Proto se při každém testování našich webových stránek na adrese , tento bod odškrtne. To znamená, že víme, že tento faktor vždy negativně zkresluje naše výsledky, a proto jej jednoduše ignorujeme.

Pro SEO vašeho webu to znamená, že doba načítání a uživatelský komfort jsou pro hodnocení v Googlu také mnohem důležitější než konkrétní skóre PageSpeed.

Pokud totiž optimalizujete dobu načítání svých webových stránek, automaticky pracujete na mnoha oblastech, které jsou pro Google důležité. Zlepšení doby načítání a skóre Google PageSpeed Score jsou tedy určitým způsobem propojeny.

Podle mého názoru byste se však neměli ztratit v honbě za hodnocením 100.

Ale nyní k optimalizačním krokům!

Chyba 1: Komprimace CSS

Podle našich zkušeností se jedná o jednu z nejvíce odzbrojujících chybových zpráv společnosti Google PageSpeed Insights .

Význam: Tato chybová zpráva znamená, že soubory CSS vašeho webu lze ještě zkomprimovat (nebo ve výše uvedeném případě, že to již bylo úspěšně provedeno). Při takovéto redukci se sníží počet znaků v dokumentech. Tím se zmenší velikost souboru. Odstraní se například komentáře, mezery a formátování.

Provedení: I když se tato nápověda zdá být skličující, její provedení je v podstatě jednoduché. V zásadě existují dvě možná řešení pro tento případ: Pokud jste zkušený uživatel CSS, můžete počet souborů CSS snížit ručně a při jejich vytváření použít zkrácený zápis. Velikost souborů CSS můžete také snížit sami pomocí online nástrojů, jako je například CSS Minifier.

Samozřejmě existuje také pohodlné řešení v podobě pluginů pro miniaturizaci CSS ve WordPressu. Některé zásuvné moduly odvádějí všestrannou práci a dokáží komprimovat a optimalizovat nejen CSS, ale také JavaScript a HTML.

S HTTP/2 nemusí souhrn CSS nutně dávat smysl

Právě zmíněné zásuvné moduly Minify jsou široce používané. Je to proto, že jsou pohodlné a starají se o kompresi a slučování CSS (a mnoho dalšího) zcela automaticky. Donedávna mělo slučování souborů CSS také velký smysl. Mezitím se však situace změnila: od zavedení standardu HTTP/2 jsou prohlížeče schopny načítat z webového serveru několik souborů najednou.

To znamená, že data již nemusí být nutně kombinována, protože s protokolem HTTP/2 lze vyměňovat několik datových paketů najednou. Protokol HTTP/2 musí být nastaven například hostitelem a lze jej používat pouze s certifikátem SSL.

Takže než se rozhodnete jít na Plugin s několika desítkami funkcí a možností konfigurace si pečlivě rozmyslete, zda je vůbec potřebujete. Zvláště pokud si věříte, že optimalizujete CSS sami.

Protože další zásuvný modul může za určitých okolností zpomalit vaše webové stránky. Zejména pokud ostatní funkce všestranných pluginů nemohou rozvinout svůj plný potenciál.

Chyba 2: Eliminujte prostředky, které blokují vykreslování

Tato zpráva také mnoha lidem vyvolává krůpěje potu na čele, protože její implementace není úplně snadná a je také jedním z věčných bodů kritiky Google PageSpeed.

Význam: Webové stránky se vytvářejí v určitém pořadí. Toto pořadí načítání lze optimalizovat. PageSpeed si téměř vždy stěžuje, že soubory CSS toto optimální pořadí načítání blokují. A to i u webových stránek, které již byly velmi dobře optimalizovány(jak ukazuje případ Caspara Hübingera). Přesto může být tato nápověda pro optimalizaci doby načítání velmi cenná. V podstatě tato nápověda informuje o tom, že kód JavaScriptu nebo CSS, který je důležitý pro načtení prvku - například barva pozadí - není v době načítání prvku ještě k dispozici. To znamená, že se nezobrazí, dokud nebude načten příslušný příkaz CSS. To sice nezvyšuje dobu načítání webu, ale má to vliv na uživatelský zážitek, protože se zdá, že načítání webu trvá déle.

Provedení: Obvyklým řešením je zavedení pravidla: CSS v záhlaví. To znamená, že kód CSS přesunete z hlavní části dokumentu HTML, "body", na začátek dokumentu, "head", a zahrnete jej tam jako "style".

Tento příklad jasně ukazuje, co mám na mysli. Níže uvedený úryvek kódu definuje barvu pozadí blogu. Element "style" je načten v "hlavičce" dokumentu HTML. Tímto způsobem se pozadí stránky nenačítá na konci dokumentu a nevytváří nevzhledný barevný skok nebo dokonce neblokuje vykreslování.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

Toto optimalizační opatření lze provést dvěma způsoby: Můžete se kódu dotknout sami a přesunout kódy CSS do záhlaví, nebo můžete nechat tuto práci provést zásuvný modul.

Například zásuvný modul Autoptimize využívá všestranný přístup: V tomto případě vyberete možnosti pro všechny soubory CSS, které nejsou z procesu vyloučeny.

Výňatek z možností modulu plug-in ukazuje: Ani variantu zásuvného modulu nelze implementovat bez základní znalosti procesu. Proto se musíte seznámit také s pluginy.

Chybová zpráva 3: Efektivní kódování obrázků

V tuto chvíli také, PageSpeed Insights často kolem. Tento případ je však téměř vždy rychlý a snadno realizovatý a obvykle také přináší hmatatelné výhody doby nabíjení.

Význam: Mnozí podceňují roli velikosti obrázků pro dobu načítání svých webových stránek. Přitom obrázky jsou velmi často jednou z největších brzd doby načítání. I když se u jednotlivých obrázků ukládá jen malé množství dat, celkový ušetřený objem může v součtu tvořit značné množství dat.

Protože obrázek je zřídka jen obrázek. WordPress automaticky generuje více miniatur obrázku při nahrávání. Pokud tedy nepoužíváte originály na domovské stránce, ale jejich menší verze, tj. miniatury nebo doporučené obrázky,pak by samozřejmě měly být také optimalizovány. To rychle změní obrázek na více souborů, které také nesou vícenásobné zatížení dat.

Provádění: V zásadě máte dva způsoby, jak optimalizovat obrázky. Obrázky optimalizujete před nahráním nebo po nahrávání nebo během nahrávání. První z nich můžete dělat prostřednictvím online nebo offline nástrojů, které můžete udělat prostřednictvím příslušných WordPress Pluginy pro optimalizaci obrázků.

Pokud můžete do pracovního postupu začlenit kompresi, má smysl snímky před odesláním optimalizovat. Existují k tomu online nástroje, například Kraken.io. Nebo můžete snížit kvalitu, a tím i velikost souboru obrázků offline, například přímo ve Photoshopu. Ušetříte si tak další zásuvný modul a vaše webové stránky zůstanou štíhlé.

Pohodlnějším řešením je samozřejmě zásuvný modul. Pluginy jako Optimus nebo Smush optimalizují nejen hlavní obrázek, ale také všechny jeho varianty. Smush navíc dokáže dodatečně optimalizovat všechny vaše stávající obrázky.

Tá Plugins pracovat s tzv. "bez lossless kompresí". To znamená, že velikost souboru obrázků se zmenší, ale jejich viditelná kvalita se nesníží.

Chyba 4: Povolení komprese textu

Tuto chybovou zprávu Google PageSpeed lze velmi rychle opravit a může výrazně zkrátit dobu načítání vašich webových stránek.

To znamená, že jste již zmenšili velikost obrázků a CSS na svých webových stránkách, jak jen to bylo možné. To je dobře! Ale to není všechno. Nyní totiž můžete použít další kompresní mechanismus. Tento proces pravděpodobně znáte ze stahování velkých datových balíků: Obvykle je máte v zazipované, tj. komprimované podobě. Díky tomu jsou data menší a stahování rychlejší. Datové balíčky se však po stažení ještě musí rozbalit. Přesně totéž se děje při načítání stránky: Webový server dodá datové balíčky komprimované, webový server je rozbalí. Tím se zrychlí přenos dat a zkrátí doba načítání stránky.

Provedení: Komprese dat je buď již na serveru nastavena, nebo ji musíte aktivovat sami. Raidboxes V tomto případě se nemusíte o nic starat. Ve výchozím nastavení jsme aktivovali obzvláště silnou kompresi Brotli.

Pomocí následujícího záznamu v souboru .htaccess můžete také ručně aktivovat takzvanou kompresi GZIP. Za předpokladu, že máte webový server Apache.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Chybová zpráva 5: Poskytování statického obsahu s účinnou zásadou mezipaměti 

PageSpeed InsightsPodle mého názoru je odkaz na ukládání do mezipaměti prohlížeče zdaleka nejotravnější u společnosti Google . Je to proto, že mezipaměť prohlížeče můžete nastavit pouze pro své vlastní zdroje. Pro externí zdroje ukládání do mezipaměti prohlížeče možné není.

Význam: Ukládání do mezipaměti prohlížeče znamená, že prohlížeč uloží statickou verzi webové stránky a nemusí ji při další návštěvě vyžadovat od webového serveru, ale webová stránka je již načtena.

Provedení: Buď již váš hosting aktivoval ukládání do mezipaměti prohlížeče na straně serveru, nebo jej můžete nastavit pomocí souboru .htaccess (nezapomeňte, že toto nastavení funguje pouze na webových serverech Apache). Níže uvedený příklad kódu například nastavuje mezipaměť prohlížeče na jeden měsíc, tj. statická verze vašich webových stránek je v prohlížeči návštěvníka uložena po dobu jednoho měsíce.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Raidboxes I zde platí následující: Jste-li zákazníkem, pak je ukládání do mezipaměti prohlížeče aktivní již ve výchozím nastavení.

Moje 2 centy: Bez mezipaměti není všechno nic

Dobře, nyní jste optimalizovali obrázky na svých webových stránkách, omezili CSS, zkomprimovali je a seřadili do správného pořadí a přiměli prohlížeč návštěvníků, aby si webové stránky uložil do mezipaměti. Všechna tato opatření zkrátí dobu načítání vašich webových stránek.

Význam: Bez řádné keše se však tohoto potenciálu hodně vzdáte. Ukládání do mezipaměti je a zůstává zdaleka nejdůležitějším faktorem výkonu. Mezipaměť dočasně ukládá obsah vašeho webu WordPress a zajišťuje, že se celý web nemusí pokaždé znovu načítat. Místo toho je z mezipaměti dodávána statická, tj. již vykreslená verze vašeho webu. Tím se obchází pomalé PHP a zejména databáze.

Implementace: Opět platí, že buď váš hostitel již nastavil mezipaměť na straně serveru, nebo používáte zásuvný modul mezipaměti. Existují velmi výkonné pluginy, které ukládají do mezipaměti velké části webu a vedou k výraznému zkrácení doby načítání při opakovaných návštěvách webu.

Vysoká síla zásuvných modulů cache je zároveň jejich největší slabinou. Může se stát, že zásuvný modul pro ukládání do mezipaměti zpočátku zpomalí vaše webové stránky pro první návštěvníky. Čím složitější je totiž váš blog nebo webová stránka, tím složitější a rozsáhlejší musí být cache engine, který váš blog cachuje. To se týká zejména obchodů.

Pokud provozujete poměrně jednoduché webové stránky, mohou být minimalistická řešení lepší než cachování všeho druhu. Jedním z těchto úsporných pluginů je například Cache Enabler.

Měli byste si uvědomit, že zásuvné moduly cache obvykle přebírají také redukci a slučování CSS nebo JavaScriptu. Proto byste měli zkontrolovat, zda váš zásuvný modul cache již nečiní zásuvné moduly pro optimalizaci CSS zbytečnými.

Pokud používáte ukládání do mezipaměti na straně serveru, doporučujeme deaktivovat funkce ukládání do mezipaměti v zásuvných modulech, jako je například Autoptimize, nebo otestovat, zda vůbec přinášejí další výkonnostní výhody.

Závěr: S několika Plugins hodně se pohybovat

Už jste si toho při čtení všimli: Pro optimalizaci CSS, obrázků a optimalizaci pořadí načítání existují pluginy, které vám uberou spoustu práce. Ne však veškerou práci. Pluginy pro ukládání do mezipaměti také rychle přinášejí znatelný efekt, ale jsou někdy velmi rozsáhlé a nabízejí mnoho možností konfigurace a někdy i nadbytečných funkcí.

V každém případě se podrobněji podívejte na pluginy, které používáte. Pouze pokud víte, co se děje při použití určitých funkcí, můžete rozumně optimalizovat. Přetížení webu optimalizačními pluginy obvykle nepřináší mnoho dobrého.

Při optimalizaci byste měli dbát na správné měření úspěchu. Nezáleží na tom, zda optimalizujete ručně, nebo pomocí pluginu. PageSpeed Insights Jako první referenční bod slouží k identifikaci slabých míst vašeho webu. Poté změřte dobu načítání webu před optimalizací. Teprve poté, co zaznamenáte výchozí situaci, má skutečně smysl optimalizovat web krok za krokem. Protože teprve když znáte dobu načítání před optimalizací a po každém optimalizačním kroku, můžete určit, čeho jednotlivá optimalizační opatření dosáhla.