Nedávno se Google vážně ujal úkolu „zrychlit“ internet. Dnes je společnost spojena s téměř veškerým vývojem zaměřeným na optimalizaci webových zdrojů, pokud jste zapomněli, připomenu vám: vytvoření CDN, CSS manifesty, vývoj platformy javascript, veřejné DNS a mnoho dalšího. Dnes budeme hovořit o nové službě Google PageSpeed ​​​​, která umožňuje optimalizovat data a načítat je mnohem rychleji.

Co je to služba PageSpeed?

Princip fungování nové služby je neuvěřitelně jednoduchý. Poté, co nakonfigurujete svůj web pro práci se službou, vyhledávací robot Google zachytí všechna data z vašeho serveru, optimalizuje obsah a uloží mezipaměť na svém serveru. Když uživatel přistoupí na jakoukoli stránku vašeho webu, Google nahradí vaše data daty uloženými na jeho serverech, což vede k rychlejšímu načítání stránky.

Požadavky na rychlost stránky?

Než začnete používat novou službu, měli byste vědět několik věcí. PageSpeed.

1. V současné době služba nepodporuje práci s „nahými“ doménami, v doméně webu musí být přítomen prefix www. To znamená, že http://example.com nebude fungovat s novou službou, ale http://www.example.com se spustí bez problémů. Snad bude tato závada v dohledné době odstraněna.

2. Musíte mít úplný přístup k ovládacímu panelu názvu vaší domény. Aby PageSpeed ​​fungoval, budete muset změnit záznam CNAME. Pokud jste si zaregistrovali doménu u hostitele, budete jej muset kontaktovat, aby vám technická podpora mohla změnit záznamy CNAME.

Nastavení webu pro práci s PageSpeed

1. Chcete-li začít, klikněte na tlačítko registrace.

Vzhledem k tomu, že se PageSpeed® aktuálně testuje, můžete se stát jedním z testerů pouze na pozvání. Po registraci budete muset chvíli počkat, než odborníci Google zpracují vaši žádost. V závislosti na denní době a kvalitě vašeho webu může čekání trvat hodinu nebo více.

2. Po odeslání pozvánky klikněte na zvýrazněné tlačítko v postranním panelu – Služba Rychlost stránky.

V této fázi může nastat drobný zádrhel. Pokud jste své stránky ještě nepřidali na panel Google Webmaster, nyní je čas tak učinit. Systém nabídne přesně tento scénář.

Po přidání webu do sekce pro webmastery musíte změnit záznamy pro doménu, a to nastavit správnou CNAME adresu, kterou vás služba ověří a vytvoří CACHE stránky.

4. Změny hodnoty CNAME se provádějí prostřednictvím panelu domény u registrátora. Chcete-li se dostat k nastavení u registrátora NameCheap, musíte přejít do Záznamu všech hostitelů a poté následovat cestu Správa hostitele. Mezinárodní registrátor GoDaddy ukládá hodnotu CNAME do svého správce DNS. Obecně platí, že ovládací panely domén všech registrátorů mají stejný princip, a proto, se zaměřením na níže uvedený příklad, na to můžete přijít.

Téměř vždy je zadání IP adresy a e-mailového aliasu totožné.

Když přejdete na panel správy záznamů CNAME, uvidíte podobný formulář:

Co je potřeba změnit?

Záznam s e-mailem „@“ ponecháme beze změny, ale v řádku adresy IP změníme číselnou hodnotu na pagespeed.googlehosted.com. V některých případech budete muset na konec názvu domény přidat tečku (bez uvozovek): „pagespeed.googlehosted.com“.

Také v poli Typ záznamu musíte vybrat hodnotu CNAME Alias ​​​​. Po provedení úprav uložte formulář kliknutím na příslušné tlačítko.

A je to. Nyní budete muset počkat asi den, než se změní DNS domény ve všech prohlížečích. Pokud jste sami nezjistili, jak změnit DNS domény, napište na technickou podporu registrátora, určitě vám pomohou.

Protože Page Speed ​​​​v současné době nepodporuje holé domény, jako je (http://example.com), budete se muset přesměrovat na doménu s předponou, tj. http://www.example.com, aby fungovala. Na serverech Apache je to velmi snadné. Stačí přidat následující položku do hlavního souboru .htaccess (v kořenové složce webu):

RewriteEngine On RewriteCond %(HTTP_HOST) ^example.com RewriteRule (.*) http://www.example.com/$1

Nezapomeňte změnit „example.com“ na název domény vašeho webu.

Výhody používání rychlosti stránky

Zvýšení rychlosti načítání stránky můžete zkontrolovat pomocí standardních funkcí Google API. Po provedení všech nastavení a aktualizaci DNS klikněte na tlačítko „Spustit test rychlosti“.

Systém vás automaticky přesměruje na stránku, kde vám aplikace zobrazí výsledky. V průměru se rychlost načítání zvýší o 24 % a rychlost indexování obsahu o 40 %. Mimochodem, čas strávený stahováním lze ještě o něco zkrátit, pokud nakonfigurujete ukládání obrázků do mezipaměti.

Rychlost načítání webových stránek je jedním z nejdůležitějších ukazatelů použitelnosti zdrojů a co je důležité, je to jeden ze stovek hodnotících faktorů. Moderní uživatel, který klikne na odkaz, totiž nečeká déle než 5 sekund, než se stránka načte. Čím déle tedy trvá načítání vašeho webu, tím více potenciálních zákazníků ztratíte.

Více než 50 % uživatelů internetu na mobilních zařízeních očekává téměř okamžité načtení stránky. Na základě těchto statistik bude tento článek diskutovat o tom, jak dosáhnout 100/100 v Google PageSpeed ​​​​Insights pro stolní počítače a mobilní zařízení pomocí příkladu webu Monitor Backlinks.

Motivace

Ukázková stránka se již načítá poměrně rychle, takže v tomto případě budou výsledky vylepšeny na maximum.

Jednoho dne, při práci s nástrojem PageSpeed ​​​​Tool, bylo zjištěno, že web Google měl překvapivě nízké skóre pro mobilní zařízení – 59/100. U verze pro desktopová zařízení byla situace lepší – 92/100.

Zdálo by se, že měli k optimalizaci svých webových stránek použít svůj vlastní nástroj, že? Je tedy výsledek 100/100 nedosažitelný?

Právě to nás motivovalo dosáhnout co nejrychlejšího načítání stránky, dokázat, že je možné dosáhnout výsledků 100/100, a pokud chcete, dokážete to také. Není to posedlost, je to jen touha dosáhnout dokonalosti.

Výchozí ukazatele experimentální lokality jsou 87/100.

V důsledku toho byly po použití určitých manipulací získány následující výsledky:

Přečtěte si, jak se nám podařilo těchto výsledků dosáhnout.

Jak zrychlit načítání stránky?

Než přistoupím k podrobným pokynům, dovolte mi poznamenat, že nástroj PageSpeed ​​​​je pouze průvodcem pro webmastery na cestě k optimalizaci zdrojů. Nástroj navíc obsahuje doporučení pro urychlení načítání stránek na vašem webu a dosažení pozitivních výsledků do značné míry závisí na nastavení serveru.

Upozorňujeme, že některé kroky v pokynech mohou vyžadovat technické znalosti bez ohledu na použitý systém správy obsahu (CMS).

Takže začneme:

Krok #1: Optimalizace obrázků

Aby se obrázky načítaly rychleji, nástroj PageSpeed ​​​​Insights Tool navrhl jejich optimalizaci zmenšením velikosti souborů. Chcete-li tento problém vyřešit, musíte udělat dvě důležité věci:

• Komprimujte všechny obrázky pomocí nástrojů jako Compressor.io a TinyPNG. Jedná se o bezplatné nástroje, které vám mohou pomoci zmenšit velikost grafického souboru o více než 80 % a v některých případech bez snížení kvality samotného obrázku.
• Zmenšete velikosti obrázků na minimum, aniž byste snížili jejich kvalitu. Pokud například na webu potřebujeme obrázek 150x150px, pak na serveru musí mít obrázek odpovídající velikost. Parametry obrázku by neměly být upravovány pomocí značek CSS nebo HTML.

Podle výše uvedených pravidel byl každý obrázek na webu nahrán a ručně zkomprimován a upraven. A abyste se neobtěžovali s optimalizací obrázků po jejich nahrání na web, je lepší vytvořit si zvyk zpočátku optimalizovat všechny nové obrázky nahrané na server. Každý nový obrázek je nutné zkomprimovat a upravit na požadované parametry.

PageSpeed ​​​​Insights nabízí možnost stáhnout již optimalizované obrázky, takže je lze na server nahrát přímo ze služby. Totéž lze provést pomocí JavaScriptu a CSS.

Krok č. 2: Minifikujte JavaScript, CSS a HTML

V příkladu Google navrhuje snížit množství souborů JavaScript a CSS.

Proces minifikace umožňuje zmenšit velikost souborů odstraněním zbytečných mezer, zalomení, řádků, znaků a komentářů v souborech JavaScript a CSS. Programátoři často při kódování nechávají spoustu místa a komentářů, což může zdvojnásobit velikost souborů JavaScript a CSS.

K vyřešení tohoto problému byl na server nainstalován Gulpjs. Jedná se o nástroj, který automaticky vytvoří nový soubor CSS a odstraní všechny zbytečné mezery. Automaticky také vytvoří nový soubor CSS pokaždé, když provedete nové změny. Ve výše uvedeném příkladu to pomohlo snížit velikost hlavního souboru CSS z přibližně 300 kb na 150 kb. Tento rozdíl ve velikosti je způsoben zbytečnými znaky.

Velikost JavaScriptu a CSS můžete dále zmenšit přejmenováním proměnných za předpokladu, že selektory fungují správně a HTML je aktualizováno.

JavaScript můžete optimalizovat pomocí Closure Compiler, JSMin nebo YUI Compressor. Můžete vytvořit speciální program, který pomocí výše uvedených nástrojů přejmenuje soubory a uloží je do pracovního adresáře.

CSS můžete omezit pomocí nástrojů YUI Compressor a cssmin.js.

Pomocí PageSpeed ​​​​Insights můžete minimalizovat HTML kód. Analyzujte stránku a vyberte „Zkrátit HTML“. Pro optimalizaci kódu klikněte na "Zobrazit optimalizovaný obsah".

Další informace o optimalizaci souborů JavaScript a CSS naleznete na následujícím odkazu:

Můžete si také stáhnout optimalizované soubory přímo z PageSpeed ​​​​Tool.

Zde jsou výsledky získané po minifikaci JavaScriptu a CSS:

Krok č. 3: Použití mezipaměti prohlížeče

Pro mnoho webmasterů je krok použití mezipaměti prohlížeče nejobtížnější.

Abychom tento problém vyřešili, museli jsme přesunout všechny statické soubory z webu do sítě CDN (content delivery network).

CDN je síť serverů umístěných na různých místech po celém světě. Ukládají do mezipaměti statické verze webových stránek, jako jsou obrázky, soubory JavaScript a CSS. Servery CDN ukládají kopie obsahu webu a když navštívíte tento web, stáhne se statický obsah z nejbližšího serveru.

Pokud se například hlavní server webu nachází v Texasu, pak bez CDN bude muset návštěvník z Amsterdamu počkat, až obsah webu přejde celou cestu ze serveru umístěného v USA. S CDN se stránka načte mnohem rychleji ze serveru nejblíže uživateli, v tomto případě z Amsterdamu. Tím se zkrátí vzdálenost k přístupu k datům a stránka se načte téměř okamžitě.

Zde je vizualizace toho, jak CDN funguje:

Na testovacím webu byly všechny obrázky, soubory JavaScript a CSS přeneseny do CDN a na hlavním serveru zůstaly uloženy pouze soubory HTML. Hostování obrázků na CDN hraje důležitou roli v tom, jak rychle se návštěvníkům načítají stránky vašeho webu.

Po výše uvedených manipulacích nástroj PageSpeed ​​nepříjemně nadále navrhoval použití mezipaměti prohlížeče pro jednotlivé zdroje třetích stran. Zde je snímek obrazovky:

Abychom tento problém vyřešili, museli jsme opravit skripty sociálních sítí nahrazením čítačů statickými obrázky hostovanými na CDN. Místo skriptů třetích stran, které se snažily získat přístup k datům z Twitteru, Facebooku nebo Google Plus pro počítání odběratelů, byl nainstalován autonomní čítač, který tento problém pomohl vyřešit.

Více frustrující ale bylo, že kromě problémů se skripty na sociálních sítích web zpomaloval kód Google Analytics.

Řešení problému se skriptem Google Analytics je poměrně obtížný úkol. Protože byla potřeba Analytics a nelze ji z webu odstranit, museli jsme hledat jiná řešení.

Google mění kód Analytics poměrně zřídka, jednou nebo dvakrát ročně. Razvan proto vytvořil speciální skript, který každých osm hodin kontroluje nejnovější aktualizace kódu Analytics, a pokud jsou aktualizace nalezeny, stahuje je. Tímto způsobem můžete hostovat kód JavaScript služby Analytics na serveru, takže není nutné jej stahovat ze serverů Google při každé návštěvě.

Pokud nejsou žádné aktualizace, bude kód Analytics načten z verze uložené v mezipaměti na CDN.

A když Google aktualizuje kód JavaScript, server automaticky stáhne novou verzi a aktualizuje ji na CDN. Tento skript byl použit pro všechny externí skripty třetích stran.

Zde je snímek obrazovky z Pingdom Tools zobrazující všechna stahování z CDN, včetně kódu Google Analytics. Jediným souborem ke stažení ze serveru je soubor domovské stránky, který má pouze 15,5 kb. Odstranění všech skriptů třetích stran výrazně zlepšilo celkovou rychlost načítání.

Krok #4: Odstranění blokovacích kódů

Odstranění blokátorů je také poměrně obtížným krokem v procesu zlepšování rychlosti načítání stránek, který vyžaduje dobré technické znalosti. Hlavním problémem, který bylo třeba vyřešit, byla revize veškerého kódu JavaScript počínaje shora od „záhlaví“ a „těla“ až po „zápatí“ umístěné ve spodní části na všech stránkách webu.

Pokud je váš web na platformě Wordpress, tento problém vám s největší pravděpodobností pomůže vyřešit plugin Autopmize. Zkontrolujte nastavení a poté Zrušte zaškrtnutí políčka "Vynutit JavaScript" a nastavte jej na "Inline all CSS".

Krok č. 5: Povolte kompresi

Krok č. 6: Optimalizace mobilního formátu

Analýza mobilního formátu ukazuje adaptabilitu mobilní verze webu pro různé typy rozlišení, použití vhodných fontů a přítomnost dobrého navigačního systému.

Pomocí prohlížeče Google Chrome můžete vidět, jak váš web vypadá v různých mobilních verzích. Chcete-li to provést, klikněte na ikonu nabídky (hamburger) nastavení a ovládacích prvků prohlížeče v pravém horním rohu a poté vyberte „Další nástroje → Nástroje pro vývojáře“. Na panelu nástrojů vyberte ikonu s obrázkem mobilních zařízení. To je vše, podívejte se:

V případě příkladu nebyly nutné žádné radikální změny.

Závěr

V důsledku toho bylo dokončeno 6 nejdůležitějších kroků, které pomohly dosáhnout ideálního skóre 100/100 v nástrojích Google PageSpeed ​​​​pro web Monitor Backlinks. Výsledkem byla optimalizace nejen hlavní stránky, ale i všech interních stránek.

Mezi všemi opatřeními přijatými k optimalizaci webu lze identifikovat tři nejdůležitější:

1. Pomocí CDN.
2. Odstranění blokovacích kódů. (Vyhněte se JavaScriptu v těle kódování, místo toho jej přesuňte na konec souborů.)
3. Optimalizace velikosti obrazu a komprese.

Ještě jednou bych rád připomněl, že Google PageSpeed ​​​​Tools je pouze pomocný nástroj pro optimalizaci zdrojů. Nástroje jsou navrženy tak, aby zkrátily dobu mezi požadavkem (kliknutím na odkaz) a odpovědí stránky webu (zobrazením prvních prvků stránky), aby návštěvníci neopouštěli stránky, aniž by čekali na jejich načtení. Doporučení poskytovaná tímto nástrojem je také třeba používat opatrně, aby se uživatelům nezobrazovalo přerušené rozvržení nebo nějaká nestylizovaná sada bloků.

Poznámka. Rychlé načítání stránek webu nepřímo ovlivňuje hodnocení zdroje ve vyhledávačích, to znamená: vyšší rychlost načítání → více a delší návštěvnost → vyšší hodnocení.

Pokud jste k optimalizaci svých stránek použili Google PageSpeed ​​​​Insights, podělte se o své výsledky v komentářích.

Nezapomeňte také, že specialisté UAWEB jsou vždy připraveni poskytnout nezbytnou pomoc při vytváření, optimalizaci a propagaci vašeho webového zdroje, takže každá sekunda strávená uživateli na vašem webu vám přináší výhody!

Rychlost načítání webových stránek je nejdůležitější složkou pozitivní uživatelské zkušenosti a také jedním z faktorů hodnocení webových stránek ve výsledcích vyhledávání. Pravdou je, že dnešní uživatelé nechtějí čekat na načtení stránky déle než 5 sekund. Pokud se vaše stránky nenačítají dostatečně rychle, přicházíte o potenciální zákazníky.

Vzhledem k tomu, že 50 % online návštěvnosti pochází z mobilních zařízení, uživatelé očekávají téměř okamžité načtení webu v mobilní verzi. V tomto článku se dozvíte, jak získat 100 bodů ze 100 pomocí nástroje Google PageSpeed ​​​​Insights pro mobilní i desktopové verze vašeho webu.

Motivace

Při kontrole webu Google pomocí nástroje PageSpeed ​​​​Insights bylo zjištěno, že neexistují žádné problémy s verzí webu pro stolní počítače - 100/100, ale výsledky mobilní verze zůstávají velmi žádoucí - 71/100.

Znamená to, že výsledek 100/100 je nedosažitelný?

Jak zrychlit načítání stránek

První věc, kterou je třeba poznamenat, je, že nástroj PageSpeed ​​​​je pouze průvodcem pro zlepšení kvality webových stránek. Nástroj poskytuje doporučení pro optimalizaci webu, která pomáhá zlepšit rychlost načítání stránky, ale dosažení požadovaného výsledku závisí na nastavení serveru.

Některé z těchto kroků vyžadují technické znalosti, jiné ne. Tyto pokyny lze dodržovat v libovolném systému správy obsahu.

První krok: Optimalizujte své obrázky

Nástroj PageSpeed ​​​​Insights nabízí optimalizaci obrázků zmenšením velikosti souboru. Chcete-li to provést, můžete provést následující opatření:

· Komprimujte všechny obrázky pomocí nástrojů Compressor.io a TinyPNG (nebo jakýchkoli jiných bezplatných nástrojů). V některých případech mohou tyto nástroje zmenšit velikost obrázků o více než 80 %, aniž by byla ohrožena jejich kvalita.

· Zmenšete velikost obrázků na požadované parametry, aniž by byla ohrožena jejich kvalita. Řekněme, že pokud potřebujete obrázek o velikosti 150x150px, je to velikost obrázku, kterou je třeba nahrát na server. Nedoporučuje se používat obrázky větší, než se chcete na stránky vejít, nebo jejich velikost zmenšovat pomocí CSS nebo HTML tagů.

Obrázky si můžete stáhnout, komprimovat a formátovat ručně, nebo použít službu PageSpeed ​​​​Tool a stáhnout si již optimalizovaný obrázek. Totéž lze provést pomocí JavaScriptu a CSS.

Krok 2: Omezte zdroje CSS a JavaScript

Velikost prostředku lze snížit odstraněním nepotřebných bajtů, jako jsou nadbytečné mezery, zalomení řádků a odsazení. Při vytváření kódů programátoři často nechávají prázdná místa a komentáře. Někdy můžete jejich odstraněním zmenšit velikost souborů na polovinu.

Chcete-li tento problém vyřešit, můžete na server nainstalovat nástroj Gulpjs. Nástroj automaticky vytvoří nový soubor CSS a odstraní všechny mezery. Automaticky také vytvoří nový soubor CSS pro jakékoli změny, které provedete. V tomto případě se vývojáři podařilo zmenšit velikost hlavního CSS souboru z 300 kb na 150 kb.

Pokud používáte WordPress, je dobré si nainstalovat plugin Autoptimize.

Můžete si také stáhnout již optimalizované soubory navržené nástrojem PageSpeed ​​​​Tool.

Krok tři: Optimalizujte dobu odezvy serveru

Chcete-li zlepšit dobu odezvy serveru, můžete přesunout všechny statické soubory ze svého webu do CDN.

CDN je síť serverů roztroušených po celém světě, které optimalizují doručování a distribuci obsahu (obrázků, souborů CSS a JavaScript) koncovým uživatelům na internetu. CDN ukládá kopie obsahu vašeho webu na svých serverech. Když uživatel navštíví váš web, načte se statický obsah ze serveru, který je mu nejblíže.

Řekněme, že hlavní server vašeho webu je v Texasu a nepoužíváte CDN. Uživatel například z Amsterdamu bude muset počkat, až server načte stránku z Ameriky. Pokud používáte CDN, vaše stránky se načtou ze serveru nejblíže Amsterdamu, což zabere mnohem méně času.

Níže je schéma fungování CDN s GTmetrix.

Všechny obrázky, soubory JavaScript a CSS můžete přenést do CDN a na hlavním serveru ponechat pouze soubor HTML. Hostování obrázků na CDN může výrazně zlepšit rychlost načítání webových stránek.

Krok čtyři: Použijte mezipaměť prohlížeče

Použití mezipaměti prohlížeče znamená, že soubory z vašeho webu – obrázky, soubory CSS a JavaScript – se stáhnou ze serveru pouze jednou a prohlížeč je uloží do vašeho počítače. Při příštím načtení stránek budou všechny potřebné soubory „vytaženy“ z počítače uživatele.

Chcete-li použít mezipaměť prohlížeče, musíte vytvořit soubor .htaccess a zapsat do něj potřebné direktivy pomocí modulu expires. Dobu, po kterou jsou data uložena v cache, lze nastavit podle času, podle poslední úpravy souboru nebo podle času přístupu klienta.

Krok 5: Odstraňte zdroje blokující zobrazení z horní části stránky

Hlavní výzvou, které musí vývojáři v tomto případě čelit, je přesunutí kódu JavaScript z horní části a těla stránky dolů po celém webu.

Pokud používáte WordPress, může vám s tím pomoci dříve zmíněný plugin Autoptimize. Chcete-li to provést, stačí změnit nastavení pluginu.

Krok šest: Povolte kompresi

Kompresi můžete povolit v nastavení serveru. Pokud pochybujete o své kompetenci v této záležitosti, požádejte svou technickou podporu o povolení komprese GZIP pro váš server.

Krok sedm: Optimalizujte mobilní verzi

Adaptivní verze mobilního webu vyžaduje použití správného rozlišení obrázků, nastavení písma a dobrý navigační systém.

V prohlížeči Google Chrome můžete vidět, jak váš web vypadá na různých zařízeních. V nabídce vpravo nahoře klikněte na „Další nástroje“ a poté na „Nástroje pro vývojáře“.

Závěr:

Čtyři nejdůležitější kroky, které musíte udělat, abyste zlepšili kvalitu svého webu, jsou:

1. Použijte CDN.

2. Použijte mezipaměť prohlížeče.

3. Odstraňte prostředky blokující zobrazení z horní části stránky.

4. Optimalizujte velikost obrázků a komprimujte je.

Sergej Arsentiev

Zvyšte rychlost načítání webových stránek v Google Page Speed ​​​​s vlastními rukama

Aby služba dosáhla vysokých pozic ve vyhledávání, potřebuje Rychlost stránky Google ohodnotili rychlost vašeho webu jako vysokou

Všiml jsem si, že rozhodující je rychlost webu v Google, přičemž ostatní hlavní faktory jsou stejné, jako jsou externí odkazy, interní optimalizace a stáří domény.

Pro běžné SEO je to tedy velmi důležitý krok, který je potřeba udělat po vytvoření webu.

Začneme kontrolou aktuálních hodnot.

Podle vašeho osobního názoru může vaše stránka létat, ale pro Google to nic neznamená.

Má svá vlastní kritéria pro kontrolu rychlosti webu, takže přejděte sem https://developers.google.com/speed/pagespeed/insights/

Zadejte adresu webu a klikněte na zkontrolovat.

Zadejte adresu z http nebo https a ujistěte se, že je web zapnutý v normálním režimu (ne v režimu údržby) a umožňuje indexaci všech důležitých prvků webu.

Čím blíže je výsledek 100 bodů tím lépe

Norma je 80 bodů a více.
Pokud máte více, skvělé.
To znamená, že pokud je váš výsledek 90 bodů, pak škubání a pokus o dosažení 100 není příliš obohacující úkol.

Takže pokud máte 80 bodů a více, pak se nebojte, ale buďte šťastní: většina projektů má před optimalizací rychlosti načítání 40–50 bodů.

Osobně si myslím, že pro projekty s velkou funkčností je i 70 bodů na Google Page Speed ​​​​celkem přijatelných.

Pokud máte méně než 70 bodů a ještě více 20-30, měli byste vážně přemýšlet o optimalizaci rychlosti webu pro Google.

Začnu těmi nejjednoduššími metodami a skončím těmi složitějšími, které jsou vhodné pro ty nejpečlivější majitele webových stránek, kteří potřebují 100 ze 100

Povolit kompresi

Nejjednodušší způsob, jak urychlit načítání webových stránek pro Google, je povolit kompresi GZIP. Jedná se o speciální mechanismus pro archivaci dat za běhu, který podporuje 99,99 % hostitelů.

Pokud to váš hostitel nepodporuje, změňte hostitele (koho).

Kompresi GZIP ve WordPressu můžete povolit pomocí modulu pro ukládání do mezipaměti Nejrychlejší mezipaměť WP.
V Opencart pomocí pluginu NitroPack

Pokud nechcete instalovat pluginy, můžete upravit data přímo v souboru .htaccess, který se nachází v kořenové složce webu ().

Přidejte tam kód, který tyto pluginy vygenerují. Na konci článku zveřejním tyto kódy úplně ze svých stránek, abych je sem nedával po částech na každém místě, jinak budete zmateni.

Snižte dobu odezvy serveru

Závisí na serverech vašeho hostitele, jejich zatížení a obžerství vašeho projektu.

Někdy může tento indikátor sám o sobě negovat veškeré vaše snahy o optimalizaci SEO vašeho projektu.

Je důležité toto nastavení zkontrolovat rychlost webu podle rychlosti stránky Google v různé denní nebo noční doby- je docela možné, že server hostitele je v tuto chvíli jednoduše přetížen požadavky.

Pokud je jindy vše většinou v pořádku, pak můžete občasné jednorázové vytížení prozatím ignorovat.

Pokud je tento ukazatel trvale špatný, pak to dává smysl:

• nainstalujte cachovací moduly (doporučuji je instalovat pro každý projekt v každém případě!), abyste snížili zatížení slabého hostingu a čas potřebný k vytvoření stránek webu.
• přemýšlejte o změně hostitele na hostitele, který má nejrychlejší hosting, nebo prostě přejděte na . To obvykle pro rozvoj projektů ve většině případů stačí.
• Pokud máte korunu navíc, objednejte si ji (20% sleva s promo kódem "moytop"). To zajistí velmi stabilní a rychlý provoz webu.
• nejobtížnější cestou je vnitřní optimalizace skriptů stránek (až po kompletní redesign celého webu). Doporučuji to udělat jako poslední, protože je to velmi obtížné a je téměř nemožné najít normálního odborníka za rozumné peníze.

Použijte mezipaměť prohlížeče

Je to také snadný způsob, jak rychle zvýšit skóre rychlosti stránky Google.

Stejně jako v případě komprese GZIP je to řešeno přidáním kódu do htaccess. Můžete jej přidat ručně nebo pomocí stejných zásuvných modulů pro ukládání do mezipaměti.

Na konci článku poskytnu celý kód, můžete si ho zkopírovat a zkusit přidat do souboru ručně přes .

Ještě lépe použijte osvědčené pluginy, které jsem již navrhl výše.

Optimalizujte své obrázky

Nejvýnosnější metoda optimalizace, kterou může každý snadno udělat vlastníma rukama.

Cílem je snížit kvalitu obrázků na webu tak, aby zabíraly méně místa a rychleji se načítaly.

Nejchytřejší způsob, jak toho dosáhnout, je prostřednictvím samotné Google Page Speed ​​​​.
Ale musíte to udělat ručně, což znamená, že musíte šťourat!

Již více než rok hledám normální program, který dokáže automaticky komprimovat obrázky pomocí algoritmu Google a zachovat strukturu složek.

Bohužel jsem takový program nenašel. Zkontroloval jsem všechny druhy prohlížečů jako XnView, Infran, programy jako Caesium, FileOptimizer, Imbatch, ImageOptim, služby jako TinyPng atd. - žádná automatizace.

Pokud někdo takový program znáte, napište do komentářů.

Primární požadavky:

• komprese pomocí algoritmu Google (aby po stažení hotových obrázků splňovaly požadavky Googlu na rychlost načítání)
• minimální ztráta kvality
• práce se zachováním struktury složek
• odstranění metadat atd. odpadky.
• automatická detekce vstupního a výstupního formátu

I když není žádný program, budete to muset udělat ručně.

Stáhnout a rozbalit.

A pak trávíme dlouhou dobu a zdlouhavě měníme soubory přes FTP na webu a nahrazujeme starou verzi novou.

Bohužel se výrazně ztrácí kvalita JPG obrázků.
PNG - kvalita zůstává velmi dobrá, téměř jako originál a velikost se zmenší 2-3krát. Pokud tedy máte mnoho souborů PNG, dojde k velmi velkým úsporám.

Doporučil bych uložit původní původní soubory před upgradem, nemusí se vám líbit celý výsledek zmenšení Google můžete rychle obnovit jednotlivé soubory; Před nahráním porovnejte obrázky v prohlížeči, abyste si neobjednali upřímně ošklivý obrázek.

Neexistuje žádná cesta ven, abyste získali vysokou rychlost webu v Google, budete muset obětovat kvalitu některých obrázků.

Minifikujte CSS + HTML + JS

V tomto případě vás Google Page Speed, analogicky s obrázky, požádá o odstranění všeho nepotřebného ze souborů rozvržení, skriptů a kódu stránky - mezery, komentáře atd.

Aby samotný soubor vážil méně a web se načítal rychleji.

Při použití zásuvných modulů pro ukládání do mezipaměti se to vše provádí automaticky za běhu. Toto je nejpohodlnější metoda, protože nemění váš kód, ale vytváří samostatné minifikované soubory CSS a HTML, které jsou předány Googlu a všichni jsou spokojeni.

Pokud minifikujete soubory v některé službě, mějte na paměti, že později bude problematické provádět jakékoli změny v takto oříznutých souborech.

Zmenšené soubory si můžete stáhnout „z Googlu“ na stejném místě jako obrázky – budou v jednom archivu.

Ale je na vás, abyste s nimi znovu nahráli původní soubory, v každém případě si ponechte zálohu starých souborů.

Optimalizujte načítání viditelného obsahu

Ve většině případů se s tím nedá nic dělat, snad kromě redesignu webu.

Proto bych se zde snažil moc netrápit a zabývat se dalšími faktory rychlosti webu v Google.

Odstraňte kód JavaScript a CSS

Obtížný bod, který vyžaduje znalosti a praxi.

Můžete samozřejmě přidat asynchronní značku blízko načítání každého souboru JS nebo nainstalovat skript Google pro extsrc=, ale podle mých pozorování to v 90% případů buď nedělá nic, nebo web rozbije!

Potřebujeme specialistu na JavaScript, který celý web otřese a zanalyzuje všechny skripty, aby se mohly načítat asynchronně bez poškození jakékoli funkce.

A protože například ve WordPressu je obvykle 9 z 10 skriptů externích pluginů, je nepravděpodobné, že tam něco uděláte, protože se načítají z vlastních složek a aktualizují se 3krát týdně.

A vaše změny budou jednoduše přepsány.

Dobrý den, milí čtenáři tohoto blogu. Dnes s vámi chci mluvit o tak důležitém tématu, jako je rychlost načítání webových stránek. Pravděpodobně jste již slyšeli, že spolu s mnoha dalšími faktory ovlivňujícími propagaci webového projektu to v poslední době začínají brát v úvahu i vyhledávače. A brzdy na webu pořádně dráždí návštěvníky, zejména ty, kteří jsou na to zvyklí.

Nicméně pro mnoho webmasterů není rychlost načítání tématem, nad kterým byste si měli okamžitě začít lámat hlavu, obvykle se to odkládá na později a přicházejí naléhavé problémy související s plněním zdroje unikátními materiály a jeho zlepšováním pomocí interní optimalizace popředí, ale celý soubor faktorů ovlivňujících. Jak se říká, řetěz je tak silný, jak silný je jeho nejslabší článek...

Online služby pro měření rychlosti načítání webových stránek

V každém případě jsem se takto donedávna cítil při snaze urychlit svůj zdroj. Ale napadlo mě, že je lepší nečekat na nepříjemné trendy v (totiž pokles návštěvnosti, protože je kritičtější k rychlosti načítání), ale napravit zjevný nedostatek hned teď.

Jen je potřeba si to uvědomit Rychlost, ze kterého se načítá váš web, blog nebo fórum, je velmi důležitým ukazatelem. Pokud se vašemu projektu s tímto ukazatelem nedaří, může to mít docela nepříjemné důsledky. A nejdůležitější z nich je, že návštěvníci mohou odmítnout pracovat s vaším zdrojem, protože... Načítání stránek trvá velmi dlouho. Vyhledávače, zejména Google, jej navíc berou v úvahu při posuzování celkové užitečnosti konkrétního zdroje.

Abyste pochopili, jak rychle se stránky vašeho zdroje načítají, můžete použít například možnosti tohoto, které jsou podrobně popsány v článku na uvedeném odkazu. Nebo můžete využít služeb, které jsou k tomu určeny. Níže uvedu několik takových příkladů.

1. Pingdom- zde stačí uvést adresu stránky, jejíž rychlost načítání chcete měřit (nemusí to být hlavní stránka, protože rychlost načítání interních stránek není o nic menší a často ještě důležitější).

   

   Ve výsledku se zobrazí diagram doby stahování jednotlivých objektů webové stránky, jejich URL a váha. Čím méně předmětů bude naloženo a tím lehčí bude každý z nich vážit, tím lépe. Například pro tento účel:

   1. spojil některé obrázky z tématu webu do
   2. a také pokud možno snížit o
   3. jinak to dává smysl

   

   Ve skutečnosti můžete sledovat některé problémy a historii měření rychlosti vašeho webu na sousedních kartách horní nabídky Pingdom.

   Ve vyskakovacím okně budete vyzváni ke zkopírování trvalého odkazu na dokončený test a také jeho odeslání e-mailem nebo Twitterem. Můžete se také přihlásit k odběru dostupnosti ve spodní části okna. Pokud váš zdroj vypadne (stane se návštěvníkům nedostupný), bude vám zaslána zpráva e-mailem nebo SMS na váš mobilní telefon. Tato služba je však placená, i když je zde možnost bezplatného vyzkoušení.

   Pro váš web, stejně jako pro zobrazení Traceroute, budete muset vybrat kartu „Ping and Traceroute“ úplně nahoře na stránce. Zadejte URL bez http do navrženého formuláře, zaškrtněte políčko „Traceroute“ nebo „Ping“ pod tímto formulářem a klikněte na „Test now“.

2. WebPageTest— jako obvykle zadejte adresu URL stránky, kterou kontrolujete (ne nutně hlavní stránku). Služba nějakou dobu trvá, než spočítá rychlost načítání všech prvků webu, poté vytvoří velmi vizuální diagram (přesněji dokonce dva - pro první průchod a pro druhý, když se některé prvky webu načítají z prohlížeče mezipaměti):

   

   V prvním diagramu věnujte pozornost poloze fialové svislé čáry - to bude čas ukončení vykreslování webu. Druhá svislá čára (modrá) bude znamenat doba plného zatížení. Je dobré, když je první řádek 1-1,5 sekundy po načtení webu a druhý řádek je před 4 sekundami. Potom lze následující odstavce číst „pro referenci“. Pokud se stránka načítá déle než 4 sekundy, musíte se starat o nápravu této situace.

3. Google PageSpeed ​​Insights je nástroj pro vývojáře od samotného Googlu. Poskytuje hodnocení rychlosti načítání vašeho webu (nebo spíše optimalizace této rychlosti) na stupnici sto. 100 je ideál, který je nedosažitelný, ale získat 80-90 je docela možné, zejména proto, že služba poskytuje velmi podrobná doporučení pro nápravu zjištěných nedostatků.

   

   Jak můžete vidět z výše uvedeného snímku obrazovky, Google PageSpeed ​​​​Insights poskytuje komplexní hodnocení - pro počítačový prohlížeč i pro mobilní. Kromě toho níže najdete hodnocení snadnosti použití vašeho zdroje na různých gadgetech. Pokud jste se ještě neobtěžovali, bude skóre velmi nízké (a na snímku obrazovky vašeho webu vpravo v okně smartphonu bude vše jasně viditelné).

   Ale nejdůležitější je, že Google PageSpeed ​​​​Insights poskytuje doporučení, jak zvýšit skóre vašeho webu, tj. jak to urychlit. Musíte samozřejmě začít úplně shora, protože tyto opravy nejvíce přispějí k urychlení.

   Měl jsem například problém s nastavením komprese gzip a nastavením doby ukládání do mezipaměti pro statické soubory (obrázky, css soubory a skripty) v uživatelských prohlížečích, protože Apache funguje ve spojení s nginx, ale nevím, jak pracovat s to. Musel jsem napsat na technickou podporu Infoboxu s žádostí o nastavení všeho - oni to udělali a ani si nevzali peníze (díky jim!). Mimochodem, zpočátku nastavili dobu ukládání do mezipaměti na 1 hodinu, ale Google PageSpeed ​​​​Insights si stále stěžoval:

   

   Musel jsem se ponořit do návodu k této online službě a dočíst se tam, že minimální požadovaný je 1 den uložení statiky v cache. Požádal jsem technickou podporu hostingu o poskytnutí 1 týdenní rezervy, což udělali. Nyní se hodnocení trochu zvýšilo a Google nemá žádné zásadní stížnosti na můj zdroj, pokud jde o rychlost načítání, což je dobré.

4. Otestujte můj web- nová služba, opět od společnosti Google. V zásadě se zaměřuje na hodnocení mobilní verze vašeho webu, a to i podle kritéria rychlosti načítání:

   

   Jednoduché a vkusné, jak se říká. Pro změny se můžete přihlásit k odběru newsletteru.

5. GTmetrix- opět „bez dalších okolků“ zadejte URL požadované stránky a chvíli počkejte na dokončení analýzy. Výsledkem je, že obdržíte zprávu vygenerovanou na základě dat ze dvou pluginů prohlížeče - Rychlost stránky (o práci s ní si přečtěte níže) a YSlow. Ve skutečnosti je na vás, jakým údajům věřit a čí doporučení se řídit.

   

   Už jsem o tom dost podrobně psal a proto se nebudu opakovat, abych nezahltil už tak těžkopádný článek (pokud dočtete až do konce, můžete se považovat za hrdinu).

6. Ping správce- podobný online zdroj pro měření doby odezvy serveru z různých částí naší obrovské planety.
   
   
7. Sledování hostitele- téměř to samé, jen různé země.
8. ByteCheck— umožňuje měřit hodnotu TTFB (Time To First Byte) pro váš web, které je často věnována pozornost při optimalizaci. Toto je čas, kdy prohlížeč obdrží první bajt dat ze serveru. Čím vyšší je hodnota TTFB, tím pomaleji server zpracovává zdroje, což je špatné. Přečtěte si tipy pro optimalizaci načítání webových stránek.
9. Vliv zatížení- tady nejde úplně o rychlost, ale je to také důležitá služba. Umožňuje vám otestovat nosnost vašeho webu a zda klesá rychlost načítání stránky. Velmi užitečná věc.
10. Rychlost webové stránky- online služba s designem z počátku devadesátých let, ale docela informativní, pokud se přizpůsobíte nedostatečné použitelnosti. Níže jsou uvedena obecná doporučení pro nápravu situace.

Je opravdu důležité sledovat rychlost načítání stránky?

Vraťme se ale od měření rychlosti k hledání příležitostí k jejímu zvýšení. , dříve existovala experimentální karta Výkon webu, kde bylo uvedeno hodnocení rychlosti načítání webu.

Obecně v rychlosti načítání, která je tam uvedena, není nic zločinného, ​​ale skutečnost, že se můj blog načítal pomaleji než 84 procent všech webových zdrojů na internetu, je již zvonek, na který se mělo reagovat. Ale protože si Google myslí, že můj blog je z hlediska rychlosti outsider, pak stojí za to brát tento problém vážně a vážně se zabývat otázkou, jak jej zvýšit.

Vlastně nebylo potřeba nic speciálního vymýšlet, protože nejoptimálnější řešení navrhuje sám Google. Přesněji navrhuje použít nástroj, který vám zase pomůže pochopit, co přesně je potřeba udělat, aby se váš web trochu (nebo hodně) zrychlil. Mluvím o online službě Rychlost stránky(dříve existovaly i stejnojmenné rozšíření prohlížeče pro FireFox a Chrome, které jsem hlavně používal).

Okamžitě si dovolím výhradu, že tento nástroj pracuje na poměrně složitých a pro běžné webmastery ne zcela srozumitelných věcech, které souvisejí především se složitostmi a nuancemi fungování webového serveru. Pokud jste nikdy nespravovali server, bude to obtížné.

Existuje cesta ven - vystresujte svého hostitele na téma provádění akcí, které Paige Speed ​​​​předepisuje. Jestli souhlasí nebo ne, to je jiná otázka. Neodvážil jsem se, protože je nepohodlné dát přístup k serveru jen tak komukoli (tak jsem nedůvěřivý).

Na hlavní stránce PageSpeed ​​dokonce navrhuje instalaci modulu na váš server, pokud běží Apache nebo Nginx (což je můj případ):

Ale stále nechápu, jak se to dělá, protože administraci serveru vůbec nerozumím a nikdy jsem nepracoval se systémy podobnými Unixu. To je mnohem obtížnější než instalace programu nebo nahrání pluginu do WordPressu. Další úroveň ponoření. Hoster se ho s tím také neodvážil obtěžovat. Obecně jsem tento modul netestoval - je možné, že jste ho již vyzkoušeli a máte co říct...

Obecně jsem poprvé použil Page Speed ​​​​jako rozšíření prohlížeče (teď, jak tomu rozumím, nefunguje). Dříve byl integrován do vývojářských nástrojů ve Firefoxu a Chrome. Pravda, nejprve (před několika lety) jsem se jen krátce podíval na to, jakou radu mi dává, a téměř ničemu jsem nerozuměl, rozhodl jsem se, že to není pro mě, načež jsem s lehkým srdcem smazal PageSpeed ​​​​plugin jako nepotřebný a cizí prvek podle mého názoru.

Faktem je, že i když rozumím tomu, na co tento plugin nadává, opravdu nevěděl co dělat, tohle všechno eliminovat a nějak zrychlit svůj blog. Obecně jsem okamžitě našel spoustu důležitějších věcí, ve srovnání s nimiž se mi myš s nastavením webového serveru (zejména proto, že jim nijak zvlášť nerozumím) zdála malicherná a bezvýznamná.

Pravda, svého času jsem také odložil řešení bezpečnostního problému a ve výsledku za něj zaplatil ztrátou všech těch peněz. S ohledem na to, co se stalo, jsem se onehdy rozhodl, že zakopnu a pokusím se pohnout kupředu s problémem zvýšení rychlosti načítání stránek, přestože pro mě tento problém byl nepochopitelný a obtížný.

Zkrátka jsem přeinstaloval Page Speed ​​​​v Mazile (teď už to nemusím dělat), podíval jsem se, na co přesně si stěžuje nejvíc, a ještě se mi podařilo některé věci vylepšit a doufám, že na alespoň trochu zvýšit rychlost.

P.S. Nyní lze Page Speed ​​​​použít pouze online a již není nutné jej instalovat do prohlížeče (v každém případě je tento plugin nekompatibilní s novými verzemi Chrome), i když to na podstatě nic nemění.

Takže dříve jste museli nainstalovat plugin do prohlížeče, ale nyní stačí jít tady, zadejte adresu URL stránky, kterou chcete analyzovat (různé typy stránek mohou mít různé problémy s rychlostí načítání, proto má smysl zaškrtnout všechny možnosti v tomto nástroji) a klikněte na modré tlačítko „Analyzovat“.

Po čekání na výsledky ověřovacího procesu se vám zobrazí okno podobné tomu, které jsem již ukázal na snímku obrazovky výše v textu (v odstavci 3 popisů online služeb pro kontrolu rychlosti načítání webových stránek). Že. v důsledku toho uvidíte celý seznam stížností, které má tato online služba na váš zdroj, konkrétně na rychlost načítání. Zároveň vám dá několik pokynů k optimalizaci provozu webového serveru ve spojení s enginem, který používáte.

Navíc úplně nahoře v okně Page Speed ​​​​budou komentáře a doporučení, které byste chtěli zobrazit a změnit Za prvé(„opravte to určitě“), protože to bude mít největší efekt z hlediska zvýšení rychlosti načítání a nebude to od vás vyžadovat příliš mnoho úsilí. Dovolte mi uvést příklad analýzy jednoho z mých menších projektů, ke kterému se opravdu nedostanu:

Tito. doporučení a zjištěné problémy, označené červeným obdélníkem s vykřičníkem a umístěné úplně nahoře v seznamu, jsou nejdůležitější a je vhodné začít s optimalizací (jak se říká levně a vesele), čímž dosáhnete největší efekt.

Problémy označené oranžově budou z vaší strany vyžadovat větší úsilí k nápravě, ale nemusí to vést k výraznému zvýšení rychlosti. Bohužel, zatím je můžete odložit na druhou kolej a pustit se do prioritních úkolů, které pomohou výrazně urychlit projekt.

Můj úvodní obrázek před několika lety (i při použití pluginu – nyní je to samé vidět na http://gtmetrix.com/, protože používá PageSpeed ​​​​API) pro https://site byl tento:

Pak jsem se rozhodl začít od prvního bodu „Využití mezipaměti prohlížeče“ (nyní se tomu říká "Používejte mezipaměť prohlížeče"), protože podle logiky Page Speed ​​by tato doporučení měla vést k největšímu zrychlení mého blogu.

Pokud kliknete na spoiler u tohoto nápisu, objeví se seznam různých souborů, které nesplňují optimální požadavky ukládání statických objektů do mezipaměti(skripty, soubory CSS, soubory obrázků používané na webové stránce) v uživatelských prohlížečích (tj. čtečkách):

Tito. Pro zvýšení rychlosti načítání nám PageSpeed ​​​​Insights radí optimálně nakonfigurovat ukládání různých prvků webových stránek do mezipaměti v prohlížečích uživatelů tak, aby se při prohlížení ostatních tyto statické prvky znovu nenačítaly ze serveru. Teoreticky to všechno zní docela matoucí, protože nemám ponětí o mechanismech ukládání do mezipaměti, které používají prohlížeče (přečtěte si o tom a jak to vyčistit).

Kromě toho optimalizujeme cachování statických objektů pomocí mechanismů samotného vašeho hostingového serveru. Je to docela matoucí, ale nabídnu vám hotová řešení nalezená na ruském internetu a vy si je vyzkoušíte v akci a rozhodnete se, které bude na vašem hostingu fungovat nejlépe.

Optimalizace mezipaměti prohlížeče a kontrola jeho provozu

Pravda, na mém současném hostingu to nefungovalo, protože mám nyní kombinaci Apache a nginx (potřebuji nakonfigurovat ten druhý, což za mě hoster udělal pro mě neznámým způsobem). Ale pokud máte čistý Apache, může níže navrhovaná metoda fungovat.

Obecně se pokusíme ovlivnit server, na kterém je váš projekt hostován, tak, aby vydával příkazy do prohlížečů zaměřené na optimalizaci cachování statických prvků. Uděláme to prostřednictvím poměrně známého nástroj pro správu vzdáleného serveru - soubor .htaccess. Víte o existenci něčeho takového?

Obvykle žije v kořenové složce. Vše popsané níže bude samozřejmě fungovat pouze na serverech se systémem Apache, ale zpravidla je jich většina. Po připojení k vašemu prostředku přes FTP () otevřete kořenovou složku (obvykle buď PUBLIC_HTML nebo HTDOCS) a vyhledejte v ní soubor .htaccess.

Od této chvíle děláte vše na vlastní nebezpečí a riziko. Proto si nezapomeňte stáhnout kopii tohoto souboru do počítače, abyste se v případě, že se něco stane, mohli rychle vrátit zpět.

Li .htaccess není vidět, zkuste v programu FileZilla vybrat z horní nabídky „Server“ - „Vynutit skryté soubory“. Pokud se ani poté neobjeví v kořenovém adresáři, vytvořte si na počítači prázdný textový soubor v libovolném editoru, který vám vyhovuje (já používám NotePad Plus Plus), nějak ho pojmenujte a zkopírujte do kořenového adresáře.

Poté tento soubor přejmenujte na .htaccess ve FileZilla. Nyní jej budete muset otevřít pro úpravy a přidat do něj níže uvedený kód. Nejprve mi ale dovolte trochu vysvětlit.

Nejoblíbenější způsoby, jak povolit tuto možnost na webovém serveru se systémem Apache, jsou moduly mod_headers nebo mod_expires. Níže uvedený kód vám pomůže povolit statické ukládání do mezipaměti v prohlížeči, pokud má online služba na vašem serveru nainstalovaný alespoň jeden z těchto modulů Apache.

Nejdřív ti dám kód pro modul mod_headers. Upozorňujeme, že používá kontrolu, zda má váš hostitel tento modul. Pokud nebude nalezen, kód se nespustí a nezpůsobí žádné chyby. Znovu však důrazně doporučuji, abyste nejprve zkopírovali původní (před přidáním níže uvedeného kódu) soubor .htaccess do počítače, abyste předešli incidentům.

#cache html a htm soubory na jeden den Sada záhlaví Cache-Control "max-age=43200"#cache css, javascript a textové soubory po dobu jednoho týdne Sada záhlaví Cache-Control "max-age=604800"#cache flash a obrázky na měsíc Sada záhlaví Cache-Control "max-age=2592000"#zakázat ukládání do mezipaměti Záhlaví deaktivováno Cache-Control

Komentáře můžete smazat (jejich řádky začínají znakem hash), ale nijak neovlivní fungování kódu.

Bude možné přidat další blok kódu na modul pro mod_expires, který znovu zkontroluje jeho přítomnost na vašem serveru, což zajistí, že tento kus kódu lze bezpečně použít:

ExpiresActive On #výchozí mezipaměť je 5 sekund ExpiresDefault "přístup plus 5 sekund" #mezipaměť flash a obrázky na měsíc ExpiresByType image/x-icon "přístup plus 2592000 sekund" ExpiresByType image/jpeg "přístup plus 2592000 sekund" Expires Image/pngByT přístup plus 2592000 sekund" ExpiresByType image/gif "přístup plus 2592000 sekund" ExpiresByType application/x-shockwave-flash "přístup plus 2592000 sekund" #cache css, javascript a textové soubory na jeden týden Expires0cssByType04text/ 8saccess ExpiresByType text/javascript „přístup plus 604800 sekund“ ExpiresByType application/javascript „přístup plus 604800 sekund“ ExpiresByType application/x-javascript „přístup plus 604800 sekund“ #cache „soubory html a htm plus jeden den htmlyyTy Expires textB sekund“ " #cache xml soubory na deset minut ExpiresByType application/xhtml+xml "přístup plus 600 sekund"

Komentáře lze později opět smazat.

Pokud to nefunguje, ale doufáte v zázrak, zde je několik dalších variant stejného kódu, ale vyzkoušejte je jednu po druhé, ne všechny najednou:

1. ExpiresActive On ExpiresByType aplikace/javascript „přístup plus 1 rok“ ExpiresByType text/javascript „přístup plus 1 rok“ ExpiresByType text/css „přístup plus 1 rok“ ExpiresByType image/gif „přístup plus 1 rok“ ExpiresByType „plus 1 rok“ ExpiresByType rok" ExpiresByType image/png "přístup plus 1 rok"
2. Sada záhlaví Řízení mezipaměti: soukromé Sada záhlaví Řízení mezipaměti: veřejné
3. BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary
4. Velikost FileETag MTime ExpiresActive na ExpiresDefault „přístup plus 1 měsíc“

Nyní, po vložení kódu do .htaccess, který vám umožňuje zvýšit rychlost optimalizací ukládání do mezipaměti v prohlížeči na straně návštěvníka, a uložení provedených změn, znovu zkontrolujte stránku zdrojů v PageSpeed ​​​​Insights a ujistěte se, že problém zmizí:

Jak vidíte, v mém případě „Používejte mezipaměť prohlížeče“ již není kritickou chybou, která zpomaluje načítání, a ikona vedle této poznámky se změnila na oranžovou, ale ne na zelenou. Bohužel nejsem schopen ovlivnit služby třetích stran, odkud můj web načítá statický obsah (jako jsou Yandex, Google, Feedburner a Aptulaik).

Q.E.D. Takže jsme přišli na jeden z nejvýznamnějších a nejvýznamnějších problémů nalezených v rychlosti stránky.

Jak povolit kompresi statických objektů na serveru

Velmi častým problémem, na který si služba GTmetrix stěžuje, je také nedostatek komprese souborů na serveru před jejich přenosem do prohlížečů uživatelů.

Používá se v tomto případě, o kterém jsem již psal. Pokud neanalyzujete přímo prostřednictvím PageSpeed ​​​​Insights, ale prostřednictvím GTmetrix, pak se v oblasti PageSpeed ​​„Povolit kompresi“ nazývá „Povolit kompresi gzip“ a v YSlow se nazývá „Komprimovat komponenty pomocí gzip“.

Aby bylo možné povolit stejnou kompresi Gzip na hostingech, kde se používá server Apache, bude stačit přidat odpovídající část kódu do souboru .htaccess (jedná se o soubor ovládání vzdáleného serveru). Apache má dva moduly pro kompresi a jeden z nich nainstaluje váš hostitel (ačkoli to není pravda).

Ten nejběžnější – začneme s ním. Do kódu opět přidáváme kontrolu přítomnosti tohoto modulu, abychom neobdrželi chybu 500 pro celý web.

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

O něco méně populární kód pro povolení komprese Gzip pro požadované typy souborů bude vypadat takto:

mod_gzip_on Ano mod_gzip_dechunk Ano soubor mod_gzip_item_include \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text\.* mod_gzip_item_include mime ^application/x-javascript_ex_explication_x-javascript_exitme* mime. item_exclude rsheader ^ Kódování obsahu:.*gzip.*

Vlastně zkuste stránku zkontrolovat v PageSpeed ​​​​Insights po instalaci kódu. Pokud problém zmizí, považujte se za šťastného. Kvůli přítomnosti Apache s nginx mi to vše nepomohlo (hostitel řekl, že nginx je zodpovědný za statiku, v této situaci je nutné jej nakonfigurovat - nevím, jak to udělal).

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás to zajímat

Měření a zvyšování rychlosti webu v GTmetrix a také nastavení načítání knihovny jQuery z Google CDN
Komprese Gzip pro urychlení načítání stránek – jak ji povolit pro Js, Html a Css pomocí souboru .htaccess
Jak maximalizovat rychlost načítání webu a optimalizovat zatížení serveru
Akcelerace webu – co dělá, jak ji měřit a jak si web zrychlit sami
Vytváření CSS sprite v online generátoru Sprites Me pro snížení počtu požadavků na server
Optimalizace a komprese CSS v Page Speed ​​​​- jak zakázat externí soubory šablon stylů a sloučit je do jednoho pro urychlení načítání
Jak získat rychlý web - optimalizace (komprese) obrázků a skriptů a také snížení počtu požadavků Http