Google PageSpeed Insights je vynikající pro rychlé poskytnutí přehledu o potenciálu optimalizace vašeho webu. Dnes vám ukážu, jak tento potenciál využít a zvýšit skóre PageSpeed. Ale neměli byste otrocky sledovat výsledky Google. Protože chybové zprávy PageSpeed nejsou vždy užitečné.

Kolega Caspar Hübinger má před časem v jednom ze svých blogových příspěvků,řekněme, velmi jasná slova pro jehoGoogle PageSpeed Insights výsledek nalezen. A kritizuje nejen nástroj, ale také použití nástroje uživateli. Protože pokud nevíte, jak interpretovat a opravit jednotlivé návrhy optimalizace, můžete se rychle ztratit v nesmyslné honbě za hodnocením 100. Ale to by nebylo moudré. Protože utopické vysoké hodnocení Google PageSpeed je obvykle ztráta času. Důležitější je optimalizace doby nabíjení.

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)

Dnes vám ukážu, jak získat nejdůležitější chybové zprávy Google PageSpeed Insights interpretujte a optimalizujte svou stránku odpovídajícím způsobem.

Ale než vám ukážu, jak interpretovat jednotlivé chybové zprávy a opravit chyby, chci se vrátit k tomu, jak google PageSpeed Insights správně použita. Protože jsme často viděli, že uživatelé byli silně fixováni na své skóre PageSpeed, aniž by sledovali dobu načítání své stránky.

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

Chybové zprávy Google PageSpeed nejsou vždy správné a důležité

Nikdy byste se neměli zaměřovat pouze na výsledky nebo chybové zprávy společnosti Google PageSpeed Insights Opustit. Protože nástroj Google prostě neměří nejdůležitější charakteristiku vaší stránky: dobu načítání stránky. Chcete-ě je správně změřit, doporučuji Webpagetest.org.

Pouze pokud při optimalizaci webu sledujete čas načítání stránky od začátku, můžete učinit smysluplná prohlášení o úspěchu optimalizace. Protože cílem jakékoli optimalizace by mělo být vždy vylepšené uživatelské prostředí. V případě optimalizace výkonu se samozřejmě jedná o dobu načítání stránky a vnímanou dobu načítání stránky.

Z uživatelského hlediska je vždy výhodou rychlejší načítání stránky a menší velikost stránky. Trpělivost a pozornost průměrného uživatele stále klesá (jak ukazujetato studie společnosti Microsoft)– což je obzvláště důležité pro e-commerce – a stále více návštěvníků přichází prostřednictvím mobilních zařízení. Již v roce 2016 pravidelně přistupoval k internetu prostřednictvím chytrých telefonů nebo tabletů 56 procent Němců. Zde nejsou rychlosti připojení a datové svazky vždy neomezené. Štíhlé, rychlé strany jsou proto vhodné.

Služba Google PageSpeed však poskytuje pouze náznaky potenciálu optimalizace vašeho webu a umožňuje pouze několik závěrů o uživatelském prostředí. Nízký význam chybových zpráv Google PageSpeed je posílen skutečností, že nástroj nelze odpočívat v určitých oblastech nebo pouze se značným dodatečným úsilím.

Například odkaz na ukládání prohlížeče do mezipaměti se zobrazí vždy, když jsou integrovány externí zdroje, včetně vlastních služeb Google. Tyto prostředky však nelze pokrýt ukládáním prohlížeče stránky do mezipaměti. Chybová zpráva proto není relevantní pro uživatelské prostředí vašeho webu, ale je vytvořena logikou samotného nástroje. V nejhorším případě je však zpráva interpretována, jako by vůbec nebylo aktivní ukládání prohlížeče do mezipaměti.

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í Google?

Příklad chybějícího ukládání prohlížeče do mezipaměti jasně ukazuje, proč byste neměli být zneklidněn údajně špatným výsledkem PageSpeed.

Pokud jste například na stránku zahrnuli Mapy Google nebo Google Analytics, způsobí následující chybovou zprávu:

Totéž platí pro ostatní služby třetích stran. Například náš podpůrný chat.

Pokaždé, když tedy vezmeme naši stránku na PageSpeed Insights test, tento bod je připsáno. To znamená, že tento faktor vždy negativně zkresluje naše výsledky, a proto je jednoduše ignoruje.

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

Protože když optimalizujete dobu načítání stránky, automaticky upravíte mnoho oblastí, které jsou pro Google důležité. Zlepšení doby načítání a skóre Google PageSpeed proto nějakým způsobem souvisí.

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 označuje, že soubory CSS stránky lze stále komprimovat (nebo v případě výše uvedeného případě, pokud již byly úspěšně provedeny). Takové snížení snižuje počet znaků v dokumentech. Tímto způsobem se zmenší velikost souboru. Odstraní se například komentáře, mezery a formátování.

Provádění: I když tato nápověda působí jako odstrašující prostředek, implementace je velmi jednoduchá. V tomto případě existují v podstatě dvě možná řešení: Pokud jste fit do CSS sami, můžete ručně snížit počet souborů CSS a při jejich vytváření použít těsnopis. Soubory CSS můžete také redukovat ručně pomocí online nástrojů, jako je CSS Kompresor nebo CSS Minifier.

Samozřejmostí je také pohodlné řešení pomocí minifikace CSS Plugins In WordPress . Pár Plugins provést přímý obrat a může komprimovat a optimalizovat nejen CSS, ale také JavaScript a HTML.

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

Výše zmíněný Minify Plugins jsou široce používány. Protože jsou pohodlné a zcela automaticky převezmou kompresi a souhrn CSS (a mnohem více). Až donedávna dávalo shrnutí souborů CSS také velký smysl. Mezitím je to jiné: Vzhledem k tomu, že existuje standard HTTP/2, prohlížeče jsou schopny načíst několik souborů současně z webového serveru.

To znamená, že data již nemusí být sumarizována, protože http/2 může vyměňovat více datových paketů současně. Protokol HTTP/2 musí být nastaven hostitelským serverem .B a lze jej použít 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ší Plugin může zpomalit stránku. Zvláště pokud ostatní funkce všestranného Plugins nemohou dosáhnout svého plného potenciálu.

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

Tato zpráva také pohání potnící se mušlí na čele mnoha uživatelů, protože není tak snadné ji implementovat a je také jednou z věčných kritik Google PageSpeed.

Význam: Webová stránka je postavena 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 blokují toto optimální pořadí načítání. To platí i pro již velmi dobře optimalizované stránky (v takovém případě Caspar Hübinger zobrazí). Poznámka však může být velmi cenná pro optimalizaci doby načítání. Tato poznámka vám v podstatě říká, že kód JavaScriptu nebo CSS, který je důležitý pro načtení položky – například barvy pozadí – ještě není v době načtení položky k dispozici. Zobrazí se až po načtení odpovídajícího příkazu CSS. Tím se prodíná doba načítání stránky, ale především to ovlivňuje uživatelské prostředí, protože stránka se cítí déle.

Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS-Code vom Hauptteil des HTML Dokuments, dem <body>, an den Anfang des Dokuments, den <head>, verschiebst und dort als <style> einbindest.

An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert unsere spezifische Hintergrundfarbe für den Blog. Das <style>-Element wird im head des HTML-Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.

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

Toto optimalizační opatření můžete implementovat dvěma způsoby: můžete se kódu dotknout sami a přesunout kódy CSS do záhlaví, nebo můžete použít Plugin Nech práci, ať to udělá. I zde pomozte Plugins Jak Lepší WordPress Minify.

The Minify Plugin Například v možnostech označuje, které soubory CSS již byly přesunuty do záhlaví. Můžete sem také ručně přidat další prostředky CSS.

Tá Plugin Autoptimize na druhou stranu začíná všestranným obratem: Vyberete možnosti pro všechny soubory CSS, které nejsou vyloučeny z operace.

Výňatky z možností Plugins show: Varianta pluginu také není proveditelná bez základního pochopení procesu. Také v Plugins Takže se musíš propracovat dovnitř.

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: Mnoho uživatelů podceňuje roli velikosti obrázku pro dobu načítání stránky. Obrázky jsou velmi často jednou z největších brzd doby nabíjení. I když jsou pro jednotlivé obrázky uložena pouze malá množství dat, celkový uložený objem může přidat 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 kompresi užitečně integrovat do svého pracovního postupu, má dokonalý smysl optimalizovat obrázky před jejich nahráním. K tomu existují online nástroje, například Kraken.io. Nebo můžete snížit kvalitu a tím i velikost souborů obrazů offline, například přímo ve Photoshopu. Jak si ušetřit extra Plugin a drž svou stranu štíhlou.

Pohodlnějším řešením je samozřejmě i zde Plugin . Doplňky jako Optimus nebo Smush nejen optimalizují hlavní obraz, ale také všechny jeho varianty. Kromě toho je Smush také schopen 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

Tato chybová zpráva z Google PageSpeed se velmi rychle opravuje a může výrazně zkrátit dobu načítání stránky.

Význam: Obrázky a CSS jste již co nejvíce snížili. Dobrá práce! Ale to nestačí. Nyní můžete použít jiný kompresní mechanismus. Pravděpodobně znáte proces stahování velkých datových paketů: ty jsou obvykle v zipu, tj. komprimované formě. To zmenšuje data při stahování a tím zrychluje stahování. Datové pakety však musí být po stažení rozbaleny. Přesně to samé se děje během nastavení stránky: webový server doručí komprimované datové pakety, webový server je rozbalí. Díky tomu je přenos dat rychlejší a zkracení doby načítání stránky.

Implementace: Buď je komprese dat již nastavena na straně serveru, nebo ji musíte aktivovat sami. Jsi Raidboxeszákazníku, už se nemusíte o nic starat. Protože ve výchozím nastavení máme obzvláště silnou kompresi Brotli aktivní.

S následující položkou ve vašem .htaccess můžete také aktivovat tzv. GZIP kompresi ručně. 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>

Chyba 5: Nasazení statického obsahu s efektivní zásadou mezipaměti 

Podle mého názoru je odkaz na ukládání prohlížeče do mezipaměti zdaleka nejotravnější na Googlu PageSpeed Insights . Protože ukládání prohlížeče do mezipaměti lze nastavit pouze pro vlastní zdroje. Ukládání prohlížeče do mezipaměti není možné pro externí prostředky.

Význam: Ukládání prohlížeče do mezipaměti znamená, že prohlížeč uloží statickou verzi stránky a již se nemusí ptát webového serveru, když ji znovu navštívíte, ale stránka je již načtena.

Provádění: Hostitel již povolil ukládání prohlížeče do mezipaměti na straně serveru nebo jej můžete nastavit manipulací se souborem .htaccess (nezapomeňte: toto nastavení funguje pouze na webových serverech Apache). Například níže uvedený ukázkový kód nastaví mezipaměť prohlížeče na jeden měsíc, tj. statická verze vaší stránky je uložena v prohlížeči návštěvníka 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>

Opět, jste Raidboxeszákazník, pak je ukládání do mezipaměti prohlížeče ve výchozím nastavení již aktivní.

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

Nyní jste optimalizovali obrázky stránky, snížili CSS, zkomprimovali ji a dali ji do správného pořadí a prohlížeč vašich návštěvníků ji uložil do mezipaměti. Všechna tato opatření zkracují dobu načítání stránky.

Význam: Bez řádné mezipaměti však budete dávat velký potenciál. Ukládání do mezipaměti je a zůstává zdaleka nejdůležitějším faktorem výkonu. Mezipaměť ukládá obsah vašeho WordPress straně a zajišťuje, že celá stránka nemusí být pokaždé znovu načtena. Místo toho je statická verze úprav připravených k vykreslování odeslána z mezipaměti. Obchází se zejména pomalý PHP a databáze.

Provádění: Hoster již opět nastavil mezipaměť na straně serveru nebo používáte ukládání do mezipaměti. Plugin . Zde jsou některé velmi silné Plugins , které ukládají velké části vaší stránky do mezipaměti a vedou k významnému zkrácení doby načítání pro vracející se návštěvníky webových stránek.

Vysoká účinnost ukládání do mezipaměti Plugins je také jejich největší slabinou. Je dost dobře možné, že ukládání do mezipaměti Plugin zpomalí stránku pro první návštěvníky. Vzhledem k tomu, že čím složitější je váš blog nebo stránka, tím složitější a rozsáhlejší musí být modul mezipaměti, který ukládá váš blog do mezipaměti. To je obzvláště důležité pro obchody.

Pokud provozujete poměrně jednoduché webové stránky, minimalistická řešení mohou být lepší než ukládání všestranných do mezipaměti. Jeden z těchto štíhlých Plugins například Cache Enabler.

Měli byste si uvědomit, že ukládání do mezipaměti Plugins obvykle také redukují a shrnují CSS nebo JavaScript. Proto byste měli zkontrolovat, zda je ukládání do mezipaměti Plugin ještě není Plugins je zbytečná pro optimalizaci CSS.

Pokud používáte ukládání do mezipaměti na straně serveru, doporučujeme použít funkce ukládání do mezipaměti Plugins jak zakázat autoptimizaci nebo otestovat, zda přinášejí další výhodu výkonu vůbec.

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

Všimli jste si toho již při čtení: Pro optimalizaci CSS, obrázků a optimalizaci pořadí načítání existují Plugins , které ti berou hodně práce. Ale ne všechnu práci. Mezipaměti Plugins rychle poskytují znatelný efekt, ale někdy jsou velmi rozsáhlé a nabízejí mnoho možností konfigurace a někdy redundantních funkcí.

V každém případě se více zapojte do Plugins které používáte. Pouze pokud víte, co se stane, když používáte určité funkce, můžete smysluplně optimalizovat. Přetížení stránky optimalizací Plugins má tendenci přivádět málo.

A při optimalizaci byste měli být opatrní, abyste správně změřili své úspěchy. Ať už jste ručně nebo Plugin optimierst. Použít PageSpeed Insights jako první referenční bod pro identifikaci slabých míst stránky. Pak před optimalizací zmeškáte dobu načítání stránky. Teprve po tomto záznamu počáteční polohy má opravdu smysl optimalizovat stránku krok za krokem. Protože pouze v případě, že znáte dobu načítání před optimalizací a po každém kroku optimalizace, můžete také určit, co jednotlivá optimalizační opatření přinesla.