Drž hubu Google PageSpeed! Oprava nejdůležitějších chybových zpráv

Tobias Schüring Naposledy aktualizováno 21.
11 min.
Google PageSpeed Insights Chyba
Naposledy aktualizováno 21.

Google PageSpeed Insights je vynikající pro rychlé poskytování přehledu o optimalizačním potenciálu vašeho webu. Dnes vám ukážu, jak využít tento potenciál a zvýšit skóre PageSpeed. Ale neměli byste být otrocky po google výsledky. Vzhledem k tomu, že chybové zprávy PageSpeed jsou ne vždy rozumné.

Pan Caspar Hübinger se před časem zúčastnil jeden z jeho blogu post, řekněme, být velmi jasná slova pro Google PageSpeed Insightsnalezený výsledek. 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ého lovu na hodnocení 100. Ale to by nebylo moudré. Vzhledem k tomu, utopické vysoké Hodnocení Google PageSpeed jsou obvykle ztráta času. Důležitější je optimalizace doby nabíjení.

Ukážu vám dnes, jak se dostat Google nejdůležitější chybové zprávy PageSpeed Insights interpretovat a optimalizovat svou stránku odpovídajícím způsobem.

Ale předtím, než jsem vám ukázat, jak interpretovat jednotlivé chybové zprávy a opravit chyby, chci se vrátit k tomu, jak google PageSpeed Insights správně používány. 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 nemáte zájem o tuto sekci, prostě to přeskočit a naučte se přímo, jak opravit chybovou zprávu "Compress 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 stránky: čas načítání stránky. Chcete-li je správně změřit, doporučuji webpagetest.org.

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

OZNÁMENÍ!

Před optimalizací výkonu stránky vždy nejprve zkontrolujte čas načítání stránky. To je jediný způsob, jak posoudit, jak úspěšná byla optimalizace.

Z pohledu uživatele jsou vždy výhodou rychlejší načítání stránky a menší velikost stránky. Trpělivost a rozsah pozornosti průměrného uživatele nadále klesá (jak ukazuje tato studie společnosti Microsoft) – to je obzvláště důležité pro elektronický obchod – a stále více návštěvníků přichází přes mobilní zařízení. Již v roce 2016 56 procent Němců pravidelně používá internet prostřednictvím chytrých telefonů nebo tabletů Nazývá. Zde nejsou rychlosti připojení a datové svazky vždy neomezené. Štíhlé, rychlé strany jsou proto vhodné.

Google PageSpeed však poskytuje pouze údaje o optimalizačních potenciálech vašich stránek 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 nemůže být v určitých oblastech odpočat nebo pouze se značným dodatečným úsilím.

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

Takže se nezaměřte především na hodnocení Google, ale na dobu načítání. Jedná se o jediná opravdu důležitá velikost.

Ale co můj Google žebříčku?

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

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

Typický Google PageSpeed Insights -Chybové zprávy: Prohlížeč ukládání do mezipaměti je údajně nepoužívá správně

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

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

Pro vaše stránky SEO, to znamená, že doba načítání a uživatelské zkušenosti jsou také mnohem důležitější pro hodnocení na Google, než konkrétní PageSpeed hodnocení.

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 teď k optimalizačním krokům!

Chyba 1: Komprese css

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

Drž hubu Google PageSpeed! Oprava nejdůležitějších chybových zpráv

Význam: Tato chybová zpráva označuje, že soubory CSS vaší stránky lze stále komprimovat (nebo v případě výše uvedeného, pokud již bylo úspěšně provedeno). Takové snížení snižuje počet znaků v dokumentech. Tímto způsobem se zmenší velikost souboru. Například komentáře, mezery a formátování jsou odstraněny.

Provádění: I v případě, že tento náznak 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 v CSS sami, můžete ručně snížit počet souborů CSS a vytvořit Krátká notace Použít. Soubory CSS můžete také používat prostřednictvím online nástrojů, jako jsou Kompresor CSS nebo CSS Minifier, zmenšete velikost ručně.

Drž hubu Google PageSpeed! Oprava nejdůležitějších chybových zpráv

Samozřejmostí je také pohodlné řešení využívající CSS minifikaci Plugins In WordPress . Pár Plugins aby přímý obrat a může komprimovat a optimalizovat nejen CSS, ale také JavaScript a HTML.

Další informace

Podrobné vysvětlení způsobů, jakými WordPress HTML, CSS a JavaScript, můžete najít v tomto článku.

S HTTP/2, shrnující CSS nemusí mít nutně smysl

Výše uvedené Minify Plugins jsou široce používány. Vzhledem k tomu, že jsou pohodlné a převzít kompresi a shrnutí CSS (a mnohem více) plně automaticky. Až do nedávné doby, shrneme-li css souborů také dělal hodně smysl. Do té doby je to jiné: protože to bylo Standard HTTP/2 prohlížeče jsou schopny načíst více souborů z webového serveru současně.

To znamená, že data již nemusí být shrnuta, protože http/2 může vyměňovat více datových paketů současně. Například HTTP/2 musí být nastaven a může být použit pouze s certifikát SSL používat.

Takže předtím, než se rozhodnete jít na Plugin s několika desítkami funkcí a možností konfigurace, pečlivě přemýšlejte, zda ji vůbec potřebujete. Zvláště pokud si důvěřujete, že optimalizujete CSS sami.

Vzhledem k tomu, ž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: Odstranění prostředků, které blokují vykreslování

Tato zpráva také pohání pot korálky na čele mnoha uživatelů, protože to není tak snadné implementovat a je také jedním z google PageSpeed věčné kritiky.

Drž hubu Google PageSpeed! Oprava nejdůležitějších chybových zpráv

Význam: Webová stránka je vytvořena v určitém pořadí. Tento pořadí načítání lze optimalizovat. PageSpeed téměř vždy stěžuje, že CSS soubory blokovat tento optimální pořadí načítání. To platí i pro již velmi dobře optimalizované stránky (jak ukazuje případ Caspar Hübingera). Poznámka však může být velmi cenná pro optimalizaci doby načítání. V podstatě vám tato poznámka říká, že kód JavaScript nebo CSS, který je důležitý pro načtení položky - například barva pozadí - ještě není k dispozici v době, kdy je položka načtena. Zobrazí se, dokud nebude načten odpovídající příkaz CSS. Tím se prodlužuje doba načítání stránky, ale především ovlivňuje uživatelské prostředí, protože stránka se cítí delší.

Provádění: Běžným řešením je převést pravidlo palce: CSS do záhlaví. To znamená, že můžete použít kód CSS z těla dokumentu HTML,, na začátek dokumentu se, přestěhoval a tam jako

Na druhé straně můžete implementovat toto optimalizační opatření dvěma způsoby: můžete se dotknout kódu sami a přesunout kódy CSS do záhlaví, nebo můžete použít Plugin Nechte to udělat. I zde pomozte Plugins Jak Lepší WordPress Minify Další.

Google PageSpeed Insights Chybové zprávy - výňatek z Plugin 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 také ručně přidat další css prostředky zde.

Google PageSpeed Insights Chybové zprávy - výňatek z optimalizačního pluginu Autoptimize

Tá Plugin Autoptimize, na druhé straně, začíná všestranný obrat: Můžete vybrat možnosti pro všechny soubory CSS nejsou vyloučeny z operace.

Výňatky z možností Plugins show: Plugin varianta také není možné bez základní hopochopitprocesu. Také v Plugins Takže se musíš propracovat dovnitř.

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

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

Drž hubu Google PageSpeed! Oprava nejdůležitějších chybových zpráv

Význam: Mnoho uživatelů podceňuje roli velikosti obrázku pro dobu načítání své stránky. Obrázky jsou velmi často jednou z největších brzd doby nabíjení. I v případě, že jsou pro jednotlivé obrázky uložena pouze malá množství dat, může celkový uložený objem přidat až 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žijete originály na domovské stránce, ale jejich menší verze, tedy miniatury nebo miniatury. Doporučené obrázky, pak samozřejmě by měly být také optimalizovány. Tím se obrázek rychle změní na více souborů, které také přenášejí více datových načtení.

Provádění: V zásadě máte dva způsoby, jak optimalizovat své obrázky. Buď optimalizujete obrázky před nahráním nebo po nebo během nahrávání. Můžete to udělat první prostřednictvím on-line nebo offline nástroje, 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 pracovního postupu, je naprosto logické, že je před nahráním obrázky optimalizujete. Za tímto účelem existují on-line nástroje, jako jsou Kraken.io. Nebo můžete snížit kvalitu a tím i velikost souboru obrázků offline, například přímo ve Photoshopu. Jak ušetřit extra Plugin a udržujte svou stranu štíhlou.

Pohodlnějším řešením je samozřejmě i zde Plugin Doplňky, jako jsou Optimus nebo Smush nejen optimalizovat hlavní obraz, ale také všechny jeho varianty. Kromě toho, Smush je také schopen optimalizovat všechny vaše stávající obrázky poté.

Tá Plugins pracovat mimo jiné s tzv. "bezeztrátová komprese". To znamená, že velikost souboru obrázků je snížena, ale jejich viditelná kvalita se nezmenšuje.

Chyba 4: Povolení komprese textu

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

Drž hubu Google PageSpeed! Oprava nejdůležitějších chybových zpráv

Význam: Již jste snížili své obrázky a CSS co nejvíce. Tak dobře! 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. Tím se data zmenšují při stahování a tím rychleji stahování. Datové pakety však musí být po stažení rozbaleny. Přesně totéž se děje při nastavení stránky: webový server dodává komprimované datové pakety, webový server je rozbalí. Díky tomu je přenos dat rychlejší a zkracuje dobu načítání stránky.

Provádění: Buď je komprese dat již nastavena na straně serveru, nebo ji musíte aktivovat sami. Jste RAIDBOXES - Zákazníku, už se nemusíš ničeho bát. Vzhledem k tomu, že máme obzvláště silný Brotli komprese Aktivní.

S následující položkou ve vašem .htaccess můžete také aktivovat takzvanou kompresi GZIP ručně. Za předpokladu, že máte webový server Apache.


 mod_gzip_on Ano
 mod_gzip_dechunk Ano
 mod_gzip_item_include soubor . (html?| txt|css|js|php|pl)
 mod_gzip_item_include manipulátor scgi-script
 mod_gzip_item_include mim stext/.*
 mod_gzip_item_include mime .application/x-javascript.*
 mod_gzip_item_exclude mim .image/.*
 mod_gzip_item_exclude kódování rspheader .content:.*gzip.*
 
 
 
 AddOutputFilterByType DEFLATE text/prostý
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE aplikace/xml
 AddOutputFilterByType DEFLATE aplikace/xhtml+xml
 AddOutputFilterByType DEFLATE aplikace/rss+xml
 AddOutputFilterByType DEFLATE aplikace/javascript
 AddOutputFilterByType DEFLATE aplikace/x-javascript
 

Chyba 5: Nasazení statického obsahu pomocí efektivní zásady mezipaměti 

Podle mého názoru, odkaz na ukládání do mezipaměti prohlížeče je zdaleka nejvíce nepříjemné na Google PageSpeed Insights . Protože ukládání prohlížeče do mezipaměti můžete nastavit pouze pro vlastní zdroje. Ukládání do mezipaměti prohlížeče není možné pro externí prostředky.

Drž hubu Google PageSpeed! Oprava nejdůležitějších chybových zpráv

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

Provádění: Buď váš hoster již povolil ukládání do mezipaměti prohlížeče 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.

ExpiresActive zapnuto
Vyprší výchozí "přístup 60 sekund"
ExpiresByType image/jpg "přístup plus 1 měsíc"
ExpiresByType obrázek/-----------------------------------
ExpiresByType image/gif "přístup plus 1 měsíc"
ExpiresByType image/png "přístup plus 1 měsíc"
ExpiresByType image/ico "přístup plus 1 měsíc"
ExpiresByType text/css "přístup 1 měsíc"
ExpiresByType text/javascript "přístup 1 měsíc"
ExpiresByType aplikace/javascript "přístup 1 měsíc"
ExpiresByType aplikace/x-shockwave-flash "přístup 1 měsíc"

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

My 2 Centy: Bez cache, všechno není nic

No, teď jste optimalizované vaše stránky obrázky, snížené CSS, komprimované, a dát ji do správného pořadí, a dostal prohlížeč návštěvníků 'do mezipaměti stránky. Všechna tato opatření zkracují dobu načítání stránky.

Význam: Bez řádné cache, nicméně, budete dávat hodně, že potenciál. Ukládání do mezipaměti je a zůstává zdaleka nejdůležitějším faktorem výkonu. V mezipaměti se ukládá obsah WordPress a zajistí, že celá stránka nebude muset být znovu načtena pokaždé. Místo toho je z mezipaměti dodávána statická verze úprav k vykreslování. Zejména pomalé PHP a databáze jsou vynechány.

Provádění: Opět platí, že váš hostitel již mezipamětí na straně serveru nebo používáte ukládání do mezipaměti Plugin . Zde jsou některé velmi silné Plugins , které do mezipaměti velké části stránky a vést k významnému snížení 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 možné, že ukládání do mezipaměti Plugin zpomaluje stránku pro první návštěvníky. Vzhledem k tomu, složitější váš blog nebo stránku je, složitější a rozsáhlejší cache motor, který ukládá váš blog musí být. To je zvláš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í do mezipaměti všestranných. Jeden z těchto štíhlých Plugins je například Povolení mezipaměti.

Měli byste si uvědomit, že ukládání do mezipaměti Plugins obvykle také snížit a shrnout CSS nebo JavaScript. Proto byste měli zkontrolovat, zda je ukládání do mezipaměti Plugin již není Plugins je nadbytečné pro optimalizaci CSS.

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

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

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

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 optimalizovat smysluplně. Přetížení stránky s optimalizací Plugins má tendenci přinést málo.

A při optimalizaci byste měli být opatrní při správném měření svých úspěchů. Ať už jste ručně nebo přes Plugin optimierst. Použít PageSpeed Insights jako první referenční bod pro identifikaci zranitelných míst vaší stránky. Před optimalizací pak zmeškáte dobu načítání stránky. Teprve po tomto záznamu počáteční pozice 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, jaké jednotlivé optimalizační míry přinesly.

Jako správce systému společnosti monitoruje Tobias naši infrastrukturu a najde veškeré body pro optimalizaci výkonu našich serverů. Vzhledem k jeho neúnavnému úsilí ho lze často nalézt na Slacku i v noci.

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena * .