televizory

Datum vypršení rychlosti stránky není zadáno. Plugin WordPress Super Cache, použijte mezipaměť prohlížeče

Datum vypršení rychlosti stránky není zadáno.  Plugin WordPress Super Cache, použijte mezipaměť prohlížeče

Ahoj všichni! Dnes vám chci říct, jak vytvořit keš vnější prvky PROTI Stránka Google Rychlost Statistiky ke zvýšení rychlosti vašeho webu. Smyslem bude stažení js a dalších souborů ke stažení z externích zdrojů na váš web.

Jak povolit ukládání souborů do mezipaměti v prohlížeči

Než budu psát o tom, jak povolit ukládání souborů do mezipaměti pro váš web v prohlížeči na straně uživatele, chci vysvětlit, co je mezipaměť.

Mezipaměti- ukládání prohlížených souborů do počítače, což zase zvyšuje rychlost načítání stránky nebo webu při jejich opětovném prohlížení. Cache má svou vlastní trvanlivost, po jejímž uplynutí se aktualizuje nebo smaže.

Přišli jsme na to, co je to cache. Nyní se podívejme na náš web ve službě PageSpeed ​​​​a ujistěte se, že Google doporučuje používat mezipaměť prohlížeče. Zde je úryvek ze zprávy.

Pokud zadáte datum nebo datum vypršení platnosti statických zdrojů v hlavičkách HTTP, prohlížeč načte dříve přijaté zdroje z lokální disk, ne z internetu.

Pokud jsou tyto soubory umístěny ve vašem prostředku, můžete do souboru zapsat kód mezipaměti prohlížeče htaccess, který se nachází v kořenovém adresáři webu. Zde je samotný kód, kdyby ho někdo potřeboval.

# komprese textu, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript# mezipaměť prohlížeče ExpiresActive On #výchozí mezipaměť je 5 sekund ExpiresDefault "přístup plus 1 dny" # Povolit ukládání obrázků do mezipaměti a flash na měsíc ExpiresByType image/x-icon "přístup plus 1 měsíc" ExpiresByType image/jpeg "přístup plus 4 týdny" ExpiresByType image/png "access plus 30 days" ExpiresByType image/gif "access plus 43829 minutes" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" # Povolit ukládání souborů css, javascript a text do mezipaměti na jeden týden ExpiresByType text/cssByTypeaccess 604800 sekund" ExpiresByType text/javascript "přístup plus 604800 sekund" ExpiresByType aplikace/javascript "přístup plus 604800 sekund" ExpiresByType application/x-javascript "přístup plus 604800 sekund" # Povolit html mezipaměti A htm soubory na jeden den ExpiresByType text/html "přístup plus 43200 sekund" # Povolit ukládání do mezipaměti xml soubory po dobu deseti minut ExpiresByType application/xhtml+xml "přístup plus 600 sekund" # Vlastní písma site ExpiresByType application/x-font-ttf "přístup plus 1 měsíc" ExpiresByType font/opentype "přístup plus 1 měsíc" ExpiresByType application/x-font-woff "přístup plus 1 měsíc" ExpiresByType image/svg+xml "přístup plus 1 měsíc" " ExpiresByType application/vnd.ms-fontobject "přístup plus 1 měsíc"

Vložením tohoto kódu do souboru htacces můžete svůj web znovu zkontrolovat služba Google PageSpeed
Postřehy. Pokud v sekci " použít mezipaměť prohlížeče„Všechno je v pořádku, to znamená, že to tam budeš mít
pouze odkazy na externí zdroje, jako je analytika, sociální sítě
tlačítka a tak dále.
Osobně paralelně s tímto kódem využívám možnosti svého hostingu ke kešování souborů na uživatelské straně. Vypadá to takto.

Jak vidíte, můj hosting vám umožňuje povolit ukládání do mezipaměti na straně prohlížeče a nastavit úroveň komprese a dobu ukládání souborů. Také používám plugin pro rychlé načítání wp super cache stránky, ale možná o tom svým čtenářům nějak řeknu, přihlášen k odběru aktualizací blogu.

Jak povolit externí mezipaměť souborů v Google PageSpeed ​​​​Insights

Pokud jste postupovali podle doporučení pro ukládání souborů do mezipaměti na vašem blogu. Musíte, dovnitř nástroj Google PageSpeed ​​Insights, viz pouze odkazy na externí zdroje. Musíte mít něco podobného.
Jak můžete vidět na snímku obrazovky, Google PageSpeed ​​​​Insights nadává na externí zdroje, jako jsou metriky Yandex, google analytics a další. Nyní vám řeknu, jak tuto chybu opravit a vytvořit odkazy na externí zdroje interní a uložené v mezipaměti na straně vašeho serveru.

Použití mezipaměti prohlížeče pro externí zdroje

Protože externí zdrojové soubory nepatří k našemu webu, je nutné je nejprve stáhnout. Aby bylo možné stáhnout externí soubory ze zdrojů třetích stran, musíme vytvořit soubor kesh_js.php s následujícím kódem. Radím vám použít poznámkový blok++ pro rychlé a správné přidání kódu do souboru.

Abychom mohli napsat kód, který potřebujeme. vezměte a zkopírujte tento odkaz:

downloadJs( sem vložte odkaz z PageSpeed /metrics.js, skutečná cesta("./ folder_js« ) . ‘/ metrics.js- vložte zde konečný soubor’ ) ;

Tímto způsobem můžete přidat mnoho dotazů. Jediná věc, kterou si musíte zapamatovat, je ujistit se, že ve složce nemáte duplicitní soubory. V tomto případě použijte jeden soubor pro několik skriptů, obvykle stejný skript, nebo jej přejmenujte.

Po přidání kódu do souboru kesh_js.php, můžete to nazvat jinak. Musí být nahráno do kořenového adresáře našeho webu. Také v kořenovém adresáři webu musíte vytvořit složku folder_js, nebo pod jiným jménem s přístupovými právy 777/755. Pro nastavení přístupových práv ke složce doporučuji použít Fillizille.

Chcete-li to provést, jednoduše otevřete program fillizilla. Dále vyberte složku a nastavte přístupová práva, určitě na 777, poté ji změníme zpět na 755. To lze také provést v ovládacím panelu vašeho hostingu, pokud tento program nechcete používat. Ukážu vám snímek obrazovky nastavení přístupových práv v programu Fillizilla.
Poté otevřete sekci " oprávnění k souboru“ a zadejte naši hodnotu 777/755.

Jak povolit plánovač úloh pro web (cron)

Další krok, musíme povolit plánovač úloh pro naše stránky, aby náš skript https://adresa vašeho webu/kesh_js.php běžel denně. Díky tomu bude vždy na našem webu současná verze soubory z externích zdrojů. I když vývojáři provedou změny ve svém kódu, my je budeme mít vždy pracovní verze na webu díky plánovači úloh.

Chcete-li naplánovat úlohy pro svůj web, musíte přejít na ovládací panel hostingu a zadat jednu z možností kódu.

spuštění úlohy přes GET. Pokud potřebujete spustit úlohu cron s ohledem na kontext motoru:

ZÍSKEJTE https://site.ru/script.php

kde site.ru je název vaší domény a script.php je název souboru s úlohou;

spuštění úlohy přes WGET. Alternativní možnost pro spuštění úlohy cron s přihlédnutím ke kontextu enginu:

Wget -q -O - https://site.ru/script.php> /dev/null 2>&1

kde site.ru je název vaší domény a script.php je název souboru s úlohou;

V našem případě musíme napsat:

ZÍSKEJTE https://adresu vaší webové stránky/kesh_js.php

Nebo si vyberte Alternativní možnost, osobně jsem se ustálil na prvním.

Vymysleli jsme, co registrovat, nyní otevíráme náš hosting a jdeme na jeho ovládací panel. Používám ovládací panel ISPmanager, pokud máte jiný, hledejte záložku plánovače úloh nebo cron.

Nyní otevřete kartu „Vytvořit“.

Poté vymažeme mezipaměť prohlížeče. Pro Google Chrome, použijte kombinaci kláves ctrl+shift+delete a zkontrolujte fungování webu. Také doporučuji znovu spustit váš web pomocí nástroje PageSpeed ​​​​Insights.

To je za mě vše, přeji vám dobré skóre díky této metodě zrychlení stránky. V příštím článku vám řeknu, jak vytvořit barevný knoflík odběry na youtube pro váš blog, tak nezapomeňte přihlásit k odběru aktualizací. Ahoj všichni!

Chcete-li zkontrolovat rychlost vašeho webu. Po analýze vydá řadu doporučení pro optimalizaci. A jedním z těchto doporučení je použití mezipaměti prohlížeče.

Ukládání do mezipaměti prohlížeče je velmi užitečná věc. Při načítání webové stránky prohlížeč lokálně ukládá hlavní zdroje z ní do počítače: obrázky, styly, skripty atd. A při příštím otevření stejné stránky se načte mnohokrát rychleji, protože prohlížeč nepotřebuje znovu stáhnout zdroje webu – jsou již ve vašem počítači.

Ale ukládání do mezipaměti má také nevýhody - pokud se soubor na serveru změnil, pak s největší pravděpodobností neuvidíte nový, ale stará verze soubor. Například soubor s názvem img01.jpg obsahoval obrázek auta. Šli jste na web, přečetli jste si článek a odešli. Ale z nějakého důvodu správce webu usoudil, že obrázek auta je tam nevhodný, a rozhodl se ho nahradit obrázkem krajiny. Ale název souboru zůstává stejný. O pár dní později se rozhodnete přečíst si tento článek znovu. Když jste šli na stránku, měli jste stále starý obrázek - auto. Je to proto, že jej prohlížeč uložil do mezipaměti s názvem img01.jpg. A abyste už viděli nový obraz v režimu na šířku musíte obnovit mezipaměť prohlížeče pomocí klávesové zkratky Ctrl+F5.

Nastavení htaccess

Nyní přejděme od lyrických odboček k hlavnímu tématu článku. Aby bylo možné povolit ukládání do mezipaměti prohlížeče, musí být na vašem serveru v kořenovém adresáři webu soubor .htaccess. Pokud žádný neexistuje, musíte si jej vytvořit.

Poté obsahuje následující směrnice:

ExpiresActive on ExpiresByType image/jpeg "přístup plus 7 dní" ExpiresByType image/gif "přístup plus 7 dní" ExpiresByType image/png "přístup plus 7 dní" ExpiresDefault "přístup plus 1 rok" ExpiresByType text/css "přístup plus 1 rok" ExpiresByType aplikace/javascript "přístup plus 1 rok"

Po napsání těchto pravidel Google Page Speed ​​​​zaškrtne políčko, že je povoleno ukládání do mezipaměti, a poskytne vašemu webu další body.

P.S. Rád bych poznamenal jednu věc, že ​​ukládání do mezipaměti se bohužel nevztahuje na externí zdroje, jako jsou skripty Yandex.Metrica a Google.Analytics

"" k optimalizaci vašeho webu na základě doporučení nástroje PageSpeed ​​​​Insights společnosti Google. Každý majitel webu se setkal s problémem potíží s ukládáním skriptů js do mezipaměti webů třetích stran.

Není to tak důležitý ukazatel pro optimalizaci se v podstatě CSS a JS prvky přenesou z hlavičky webu do patičky, navíc pokud se podíváte na zdroje Google Mají s tím problém :)

Pokud přesto chcete optimalizovat svůj web nebo své klienty například ukládáním skriptů třetích stran do mezipaměti. pozorovat pěkné číslo na počítadle v analyzátoru, pak postupujte podle níže uvedených kroků, které zaberou několik minut.

Mezipaměť prohlížeče jeho prvků

Vytvoření mezipaměti pro různé skripty, příklad převzatý z blogu Devaka ru (v době psaní)
Např:

/assets/copyright.min.js (není uvedeno datum vypršení platnosti)
/assets/i/566.jpg (není uvedeno datum vypršení platnosti)
/assets/i/icons.png (není uvedeno datum vypršení platnosti)
/i/postcomm-left.png (není uvedeno datum vypršení platnosti)
/i/postcomm-right.png (není uvedeno datum vypršení platnosti)



Chcete-li vyřešit první problém, přejděte do souboru .htaccess, který se nachází v kořenovém adresáři webu, a vložte tento kód úplně dole:

# komprese textu, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript# mezipaměť prohlížeče ExpiresActive On #výchozí mezipaměť je 5 sekund ExpiresDefault "přístup plus 1 dny" # Povolit ukládání obrázků do mezipaměti a flash na měsíc ExpiresByType image/x-icon "přístup plus 1 měsíc" ExpiresByType image/jpeg "přístup plus 4 týdny" ExpiresByType image/png "přístup plus 30 dní" ExpiresByType image/gif "přístup plus 43829 minut" ExpiresByType application/x-shockwave-flash "přístup plus 2592000 sekund" # Povolit ukládání do mezipaměti css, javascript a textové soubory po dobu jednoho týdne ExpiresByType text/css "přístup plus 604800 sekund" ExpiresByType text/javascript "přístup plus 604800 sekund" ExpiresByType application/javascript "přístup plus 604800 sekund" ExpiresByType application/cessable0html plus0html přístup #x-javascript "accessable" htm soubory na jeden den ExpiresByType text/html "přístup plus 43200 sekund" # Povolit ukládání xml souborů do mezipaměti po dobu deseti minut ExpiresByType application/xhtml+xml "přístup plus 600 sekund" # Nestandardní fonty stránek ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "přístup plus 1 měsíc"

Příklady skriptů třetích stran

Pokud jste v prvním kroku udělali vše správně, měli byste vidět něco takového:

Použijte mezipaměť prohlížeče pro následující zdroje


Samozřejmě můžete mít například jen několik adres URL pro metriky a analýzy, ale to není tak důležité, pokyny k opravě jsou pro všechny stejné.

Mezipaměť prvků třetích stran

Původně měl být článek věnován pouze těmto bodům, ale s pocitem, že bude mnoho otázek, bylo přidáno několik dalších bodů.

Ovlivňuje čas mezipaměti zdroj třetí strany Neexistuje žádný způsob, ale můžete to udělat ve svém webovém projektu Nejsprávnějším krokem v této situaci je automatické stahování nejnovějších skriptů pro metriky, analýzy atd. na váš web pomocí cronu (přítomný skript)

Vezměme věci popořádku!
Krok 1. Zkopírujte seznam všech skriptů, na které ukazuje Google PageSpeed®, do poznámkového bloku nebo přímo z prohlížeče.
Krok 2. Vytvořte soubor na svém hostingu s rozšíření php a vložte do něj následující kód:

Pozornost! Nemáte oprávnění k zobrazení skrytého textu.

V kódu jsou například 3, ale můžete vytvořit tolik bodů, kolik potřebujete, stačí zkopírovat a přidat níže nebo odstranit nepotřebné.


V tomto řádku změníme 3. hodnotu:
Použijte mezipaměť prohlížeče pro Google PageSpeed
1. Skript, který nahrajeme na naše webové stránky

Pozornost! Nemáte oprávnění k zobrazení skrytého textu.

2. Cesta k uložení souboru:

Realpath(./js)

V tomto příkladu je to složka js, tzn. přesná cesta bude www.site/js/ (složku si musíte vytvořit sami a nastavit pro ni oprávnění k zápisu CHMOD)

3. Název skriptu, pokud s příponou .js, tak jej napíšeme společně s ním, pokud bez něj nebo s něčím jiným, pak vše provedeme jako v příkladu výše. Věnujte prosím pozornost tomu, že neexistují žádné soubory se stejnými názvy.

Krok 3. Nahrajte upravený soubor na server

Krok 4. Umístěte soubor na cron pro automatická aktualizace soubory

Aby se předešlo nesprávný provoz se službami, pokud provedou změny ve skriptech, Cron se automaticky přihlásí a aktualizuje je na svém serveru.

Přejděte na svůj hostitelský panel a vyberte kartu CRON a zadejte příkaz a také zadejte čas jednou za hodinu/den nebo kdykoli jindy.

Wget -q -O - /dev/null http://www..php >/dev/null 2>&1

Nezapomeňte změnit URL a možná se syntaxe vašeho příkazu bude lišit, podívejte se na příklady příkazů cron v nápovědě k hostingu nebo kontaktujte technickou podporu.

Krok 5. Změňte cestu k JS v čítači nebo skriptu

Pokud byla v počítadle cesta https://mc.yandex.ru/metrika/watch.js, nahraďte ji cestou uvnitř webu, například http://www..js

To je vše, nyní byste neměli vidět žádné zprávy o nastavení mezipaměti prohlížeče v seznamu PageSpeed ​​​​Insights.

Stáhněte si v archivu pokyny „povolit mezipaměť prohlížeče pro Google PageSpeed“. Nemůžete stahovat soubory z našeho serveru
Představujeme užitečný článek„Povolte mezipaměť prohlížeče pro Google PageSpeed“ pro optimalizaci webu na základě doporučení nástroje od Google PageSpeed ​​​​– to nejlepší, co máme, máme fóra, hacky, moduly, šablony.

Před otevřením stránky si prohlížeč musí stáhnout veškerý její obsah (HTML, CSS, Javascript a obrázky). Načítání velkých a objemných webových stránek může být docela bolestivá zkušenost, pokud ano Pomalý internet(nebo používáte mobilní telefon). Každý soubor odešle na server samostatný požadavek a čím více takových požadavků současně obdrží, tím více práce musí vykonat a stránka se bude načítat pomaleji. V tomto případě použijte mezipaměť prohlížeče.

Mezipaměť prohlížeče může uživateli uložit některé soubory webu. Při vaší první návštěvě zůstane doba stahování nezměněna, ale při další návštěvě, obnovení stránky nebo přepnutí na jinou již budou některé soubory uloženy v prohlížeči. To znamená, že prohlížeč uživatele bude muset stahovat méně dat a odesílat méně požadavků na server, čímž se zkrátí doba načítání stránek.

Než začnete s tímto průvodcem, budete potřebovat následující:

  • Přístup k souboru .htaccess

Krok 1 – Úprava souboru .htaccess

Proces je poměrně jednoduchý, do souboru .htaccess musíte přidat následující kód (můžete najít návod, jak určit umístění vašeho souboru .htaccess):

## VYPRŠÍ CACHOVÁNÍ ## ExpiresActive On ExpiresByType image/jpg "přístup plus 1 rok" ExpiresByType image/jpeg "přístup plus 1 rok" ExpiresByType image/gif "přístup plus 1 rok" ExpiresByType image/png "přístup plus 1 rok" ExpiresByType plus text/cssType plus text/cs měsíc" ExpiresByType application/pdf "přístup plus 1 měsíc" ExpiresByType text/x-javascript "přístup plus 1 měsíc" ExpiresByType application/x-shockwave-flash "přístup plus 1 měsíc" ExpiresByType image/x-icon "přístup plus 1 rok" Vyprší výchozí „přístup plus 7 dní“## VYPRŠÍ CACHOVÁNÍ ##

Po uložení změn do souboru .htaccess začnou vaše stránky automaticky používat mezipaměť prohlížeče k ukládání dočasných souborů.

Krok 2 – Kontrola využití mezipaměti prohlížeče

Zkontrolujte správnost provedené změny můžete pomocí mnoha nástrojů, jako je WebPageTest nebo GTMetrix

Zde jsou výsledky PŘED povolení ukládání do mezipaměti prohlížeče:

Pro srovnání zde jsou výsledky PO povolit ukládání do mezipaměti prohlížeče:

Závěr

V tomto rychlý průvodce Naučili jste se, jak zrychlit svůj web pomocí mezipaměti prohlížeče. Pokud chcete zvýšit rychlost načítání svého webu, použijte mezipaměť prohlížeče.