Doplnok WordPress Super Cache, použite medzipamäť prehliadača. Povolenie medzipamäte prehliadača na strane používateľa Ukladanie externých skriptov do medzipamäte

👁9 325 zobrazení

V tomto článku sa budeme ďalej venovať tomu, ako môžete urýchliť načítanie webových stránok. Diskutovali sme skôr. Dnes sa naučíme, ako povoliť medzipamäť prehliadača na strane používateľa pomocou súboru .htaccess.

Prečo povoliť vyrovnávaciu pamäť prehliadača na strane používateľa

Pri vytváraní nového webu často programátori nevenujú veľkú pozornosť rýchlosti načítania webu prehliadačom. Najmä ak sa na túto položku v zadávacích podmienkach zameraných na vývoj webových stránok nesústredilo. A po vydaní nového výtvoru môže webový špecialista, ktorý vyvíja a propaguje tento projekt, pozorovať veľmi smutný obraz skenovaním rýchlosti načítania webu v nástroji PageSpeed ​​Insights spoločnosti Google.

Tu nie je ani zďaleka úplný zoznam problémov, s ktorými sa môžeme stretnúť a ktoré spomaľujú rýchlosť načítania webových stránok na strane prehliadača používateľa:

Niektorí z čitateľov sa môžu čudovať, ale prečo vlastne musíte povoliť túto vyrovnávaciu pamäť a urýchliť rýchlosť načítania stránok? Koniec koncov, stránka aj tak nefunguje zle.

Existujú na to minimálne dva dôvody:

  1. Ak sa načítanie stránky trvá dlho, používateľ nemusí čakať na vaše super efekty vymyslené dizajnérom, aby upútali pozornosť, ale iba zavrie svoje umelecké diela a jednoducho prejde na stránku konkurencie, možno menej farebnú, ale rýchlejšiu a rýchlejšiu. citlivejšie. Nikto z nás koniec koncov nerád dlho čaká. 🙂
  2. Čím vyššia je rýchlosť načítania stránky, tým nižšia bude vzhľadom na stránky vašich konkurentov vyhľadávačmi pre kľúčové dotazy. A to už teraz predstavuje značnú hrozbu pre rozvoj vášho podnikania.

Ako povoliť ukladanie súborov do prehliadača na strane používateľa

Ak je váš projekt vyvinutý na populárnom CMS WordPress, existuje veľa doplnkov na vyriešenie problému s ukladaním do pamäte cache. Najobľúbenejšie z nich sú W3 Total Cache, WP Super Cache, Hyper Cache. V tomto článku ale navrhujem zvážiť spoľahlivejší spôsob, ako podľa môjho názoru umožniť ukladanie do pamäte cache prostredníctvom súboru .htaccess priamo na hostiteľskom serveri.

Poznámkaže navrhované metódy budú fungovať, iba ak je softvér Apache nainštalovaný na serveri vášho poskytovateľa hostingu.

Pred vykonaním akýchkoľvek zmien v súbore .htaccess nezabudnite zálohovať počítač, aby ste ho mohli v prípade problémov obnoviť.

Ak chcete povoliť vyrovnávaciu pamäť prehľadávača na strane používateľa, stačí použiť jednu z nasledujúcich metód... Používanie dvoch metód súčasne sa neodporúča a môže viesť k poruche vášho webu.

Povolenie ukladania do vyrovnávacej pamäte prehliadača na strane používateľa pomocou modulu mod_headers

Ak chcete povoliť funkciu ukladania do pamäte cache, je potrebné vložiť nasledujúci kód do súboru .htaccess umiestneného v koreňovom adresári vášho webu. Aby ste sa vyhli chybám, musíte vložiť kód pred riadok WordPress # END:

# Všetky súbory html a htm sa uložia do medzipamäte prehliadača na 12 hodín Sada hlavičiek Cache-Control "max-age = 43200"# Všetky súbory css, javascript a textové súbory sa uložia do medzipamäte prehliadača po dobu 7 dní Sada hlavičiek Cache-Control "max-age = 604800"# Všetky súbory Flash a obrázky sa uložia do medzipamäte prehliadača po dobu 31 dní Sada hlavičiek Cache-Control "maximálny vek = 2592000"# Zakážte ukladanie php a ďalších súborov služieb do medzipamäte Hlavička zrušila nastavenie Cache-Control

# Povoľte vyrovnávaciu pamäť v prehliadačoch návštevníkov stránok

< ifModule mod_headers . c >

# Všetky súbory html a htm sa uložia do medzipamäte prehliadača na 12 hodín

< FilesMatch "\.(html|htm)$" >

Cache sada hlavičiek - ovládanie „max-age = 43200“

< / FilesMatch >

# Všetky súbory css, javascript a textové súbory sa uložia do medzipamäte prehliadača po dobu 7 dní

< FilesMatch "\.(js|css|txt)$" >

Cache sada hlavičiek - ovládanie "max-age = 604800"

< / FilesMatch >

# Všetky súbory Flash a obrázky sa uložia do medzipamäte prehliadača po dobu 31 dní

< FilesMatch "\. (flv | swf | ico | gif | jpg | jpeg | png) $">

Cache sady hlavičiek - ovládanie "max-age = 2592000"

< / FilesMatch >

# Zakážte ukladanie php a iných súborov služieb do medzipamäte

< FilesMatch "\. (pl | php | cgi | spl | scgi | fcgi) $">

Header unset Cache - Control

< / FilesMatch >

< / IfModule >

Nebudem popisovať, čo tieto alebo tie smernice znamenajú. Viac podrobností o ich význame nájdete na webovej stránke s oficiálnou dokumentáciou Apache.

Povolenie ukladania do vyrovnávacej pamäte prehliadača na strane používateľa pomocou modulu mod_expires

Ak chcete povoliť ukladanie do pamäte cache v prehliadači na strane používateľa pomocou modulu mod_expires, napíšte do súboru .htaccess nasledujúci kód:

ExpiresActive On # predvolená vyrovnávacia pamäť za 30 sekúnd ExpiresDefault „prístup plus 30 sekúnd“ # Povoliť ukladanie obrázkov a flash do pamäte 1 mesiac ExpiresByType obrázok / ikona x „prístup plus 1 mesiac“ ExpiresByType obrázok / jpeg „prístup plus 4 týždne“ ExpiresByType obrázok / png "prístup plus 30 dní" ExpiresByType obrázok / gif "prístup plus 43829 minút" ExpiresByType aplikácia / x-shockwave-flash "prístup plus 2592000 sekúnd" # Zapnúť ukladanie do vyrovnávacej pamäte css, javascript a textových súborov na 7 dní ExpiresByType prístup do textu / css plus 604800 sekúnd "ExpiresByType text / javascript" prístup plus 604800 sekúnd "ExpiresByType aplikácia / javascript" prístup plus 604800 sekúnd "ExpiresByType aplikácia / x-javascript" prístup plus 604800 sekúnd "# Povoliť ukladanie do vyrovnávacej pamäte súborov html a htm na 12 hodín ExpiresBytmlType" text / html prístup plus 43 200 sekúnd "# Povoliť ukladanie do vyrovnávacej pamäte súborov xml na 10 minút Aplikácia ExpiresByType / xhtml + xml" prístup plus 600 sekúnd "

< ifModule mod_expires . c >

Aktívne vyprší

# predvolená vyrovnávacia pamäť je 30 sekúnd

Vyprší Predvolené „prístup plus 30 sekúnd“

# Povoľte ukladanie do vyrovnávacej pamäte obrázkov a blesku na 1 mesiac

ExpiresByType image / x - ikona „prístup plus 1 mesiac“

ExpiresByType obrázok / jpeg „prístup plus 4 týždne“

Obrázok ExpiresByType / png „prístup plus 30 dní“

ExpiresByType obrázok / gif „prístup plus 43829 minút“

Aplikácia ExpiresByType / x - shockwave - flash "prístup plus 2592000 sekúnd"

# Zapnite ukladanie do vyrovnávacej pamäte súborov css, javascript a textových súborov na 7 dní

ExpiresByType text / css "prístup plus 604800 sekúnd"

ExpiresByType text / javascript „prístup plus 60 4800 sekúnd“

Aplikácia ExpiresByType / javascript „prístup plus 60 4800 sekúnd“

Inštrukcia funguje, iba ak apache spracováva statické súbory (nainštalované ako klientske rozhranie). Ak je pred ním nginx, rovnaké akcie musia byť vykonané úplne iným spôsobom.

Najprv niekoľko slov k téme - prečo vôbec potrebujete ukladať do medzipamäte zdroje stránok (obrázky, css, html súbory, archívy a ďalšie statické súbory).

Zakaždým, keď návštevník otvorí vaše webové stránky, stiahne sa nielen html kód stránky, ale aj všetky sprievodné súbory, ktoré sú potrebné na vytvorenie stránky (obrázky, štýly css, skripty js atď.).
Výsledkom je, že jedno otvorenie súborovej stránky nie je jednou požiadavkou na server, ale od desiatich do sto! Každá takáto požiadavka predstavuje nielen zaťaženie servera (čo je dôležité), ale aj ďalší čas potrebný na načítanie stránky používateľom (čo je dôležité ako indikátor kvality webu a pohodlia používateľa).

Napríklad populárna služba overovania stránok zo služby Google PageSpeed ​​Insights na toto vždy napíše upozornenie:

Použite medzipamäť prehliadača
Ak v hlavičkách HTTP zadáte dátum alebo dátum vypršania platnosti statických prostriedkov, prehľadávač stiahne predtým získané prostriedky z lokálneho disku, nie z Internetu.
Cache prehliadača použite pre nasledujúce zdroje:

// - zoznam problémových súborov - //

Povolenie ukladania do pamäte cache nielenže znižuje zaťaženie servera (takmer všetky stránky majú duplicitné prvky návrhu, skripty Java, atď.), Keď používateľ navštívi stránku alebo stránku znova, ale tiež skracuje dobu načítania stránky z jej strany. Pretože prehliadač berie súbory z medzipamäte takmer rýchlosťou blesku a používateľ má pocit, že sa stránka načítavala takmer rýchlosťou blesku!

Ak chcete problém vyriešiť, vytvorte v priečinku webu súbor s názvom .htaccess(s bodkou na začiatku. Toto je dôležité!) a pridajte k tomu tieto pravidlá. Ak súbor už existuje, pridajte na koniec existujúceho súboru:

# ukladanie do pamäte cache na strane používateľa ExpiresActive On ExpiresDefault "prístup 7 dní" ExpiresByType aplikácia / javascript "prístup plus 1 rok" ExpiresByType text / javascript "prístup plus 1 rok" ExpiresByType text / css "prístup plus 1 rok" ExpiresByType text / html "prístup plus 7 dní" ExpiresByType text / x-javascript "prístup 1 rok" ExpiresByType obrázok / gif "prístup plus 1 rok" ExpiresByType obrázok / jpeg "prístup plus 1 rok" ExpiresByType obrázok / png "prístup plus 1 rok" ExpiresByType obrázok / jpg "prístup plus 1 rok" ExpiresByType obrázok / ikona x „prístup na 1 rok“ ExpiresByType aplikácia / x-shockwave-flash „prístup na 1 rok“# Cache-Control # 30 dní # 30 dní Sada hlavičiek Cache-Control "maximálny vek = 2592000, verejné"# 2 dni Sada hlavičiek Cache-Control "max-age = 172800, verejná, musí sa znova overiť"# 1 deň Sada hlavičiek Cache-Control "max-age = 172800, súkromná, musí sa znova overiť" # Zabránenie poskytovaniu rôznych hlavičiek HTTP prehliadačom rodiny MSIE BrowserMatch "MSIE" sila bez zmeny BrowserMatch "Mozilla / 4. (2)" sila bez zmeny

Potom môžete skontrolovať výsledok na stránke Google PageSpeed ​​Insights (ak je všetko v poriadku - správa „ Použite medzipamäť prehliadača„Bude označené zelenou farbou a umiestnené v sekcii„ Splnené pravidlá: (viac podrobností) “)

To nefunguje, čo mám robiť?

Ak ukladanie do vyrovnávacej pamäte nefunguje, musíte skontrolovať, či sú nainštalované moduly. Ak to chcete urobiť, musíte vytvoriť súbor v priečinku lokality test.php s kódom:

Ak mod_expires alebo mod_headers nie sú uvedené, postupne spustite nasledujúce príkazy v konzole servera (pripojené) ( toto nainštaluje / povolí mod_expires, mod_headers):

Hlavičkám A2enmod a2enmod vyprší platnosť služby apache2

Pokiaľ je stránka na bežnom hosťovaní, potom je všetko komplikovanejšie. Obráťte sa na technickú podporu a objasnite, prečo neboli nainštalované moduly a ako môžete tento problém obísť. Z dôvodov, prečo hostiteľ neinštaloval moduly, ich môže byť celkom dosť.

Otestujte rýchlosť svojho webu. Po analýze vydá sériu optimalizačných odporúčaní. Jedným z takýchto odporúčaní je použitie medzipamäte prehliadača.

Ukladanie do pamäti prehliadača je veľmi užitočná vec. Pri načítaní webovej stránky prehľadávač lokálne uloží do počítača hlavné zdroje z nej: obrázky, štýly, skripty atď. A pri ďalšom otvorení tej istej stránky sa stránka načíta mnohokrát rýchlejšie, pretože prehliadač nepotrebuje znova prevziať zdroje stránky - sú už vo vašom počítači.

Ukladanie do vyrovnávacej pamäte má ale svoje nevýhody - ak sa na serveri zmenil súbor, potom s najväčšou pravdepodobnosťou zobrazíte nie novú, ale starú verziu súboru. Napríklad súbor s názvom img01.jpg obsahoval obrázok automobilu. Išli ste na stránku, prečítali ste si článok a odišli ste. Ale správca stránky z nejakého dôvodu rozhodol, že obrázok auta je tam nevhodný, a rozhodol sa ho nahradiť obrázkom s krajinou. Názov súboru však zostáva rovnaký. Po pár dňoch ste sa rozhodli prečítať si tento článok znova. Keď ste išli na web, obrázok, ktorý stále máte, je starý - auto. Je to tak preto, lebo ho prehliadač uložil do pamäte cache s názvom img01.jpg. A aby ste mohli zobraziť nový obrázok na šírku, musíte resetovať medzipamäť prehliadača pomocou kombinácie klávesov Ctrl + F5.

Nastavuje sa htaccess

Teraz prejdime od lyrických odbočiek k hlavnej téme článku. Ak chcete povoliť ukladanie do vyrovnávacej pamäte prehliadača, musí byť na vašom serveri v koreňovej časti súboru .htaccess... Ak nie, musíte si ho vytvoriť.

Potom sú v nej napísané nasledujúce smernice:

ExpiresActive dňa ExpiresByType obrázok / jpeg "prístup plus 7 dní" ExpiresByType obrázok / gif "prístup plus 7 dní" ExpiresByType obrázok / png "prístup plus 7 dní" Vyprší Predvolené „prístup plus 1 rok“ ExpiresByType text / css „prístup plus 1 rok“ ExpiresByType aplikácia / javascript „prístup plus 1 rok“

Po napísaní týchto pravidiel služba Google Page Speed ​​označí začiarknutím, že je povolené ukladanie do medzipamäte, a dá vášmu serveru ďalšie body.

P.S. Chcel by som poznamenať jednu vec, že ​​ukladanie do vyrovnávacej pamäte sa, bohužiaľ, nevzťahuje na externé zdroje, ako sú skripty Yandex.Metrica a Google.Analytics

„“ Optimalizovať web podľa odporúčaní nástroja z nástroja Google PageSpeed ​​Insights. Každý vlastník stránky čelil problému s ťažkosťou pri ukladaní skriptov js do serverov tretích strán.

Toto nie je taký dôležitý indikátor pre optimalizáciu, v skutočnosti sa prvky CSS a JS prenášajú z hlavičky webu do päty, okrem toho, ak sa pozriete na zdroje Google s touto položkou, majú problémy :)

Ak stále chcete optimalizovať svoje stránky alebo svojich klientov, napríklad pomocou medzipamäte skriptov tretích strán. pozorovať krásnu postavu na pulte v analyzátore, potom stačí vykonať kroky uvedené nižšie, čo bude trvať niekoľko minút.

Vyrovnávacia pamäť prehliadača jeho prvkov

Vyrábame cache pre rôzne skripty, príklad je prevzatý z blogu Devaka ru (v čase písania tohto článku)
Napríklad:

/assets/copyright.min.js (nie je zadaný dátum vypršania platnosti)
/assets/i/566.jpg (doba platnosti nie je určená)
/assets/i/icons.png (doba platnosti nie je určená)
/i/postcomm-left.png (doba platnosti nie je určená)
/i/postcomm-right.png (nie je zadaný dátum vypršania platnosti)



Opravili sme prvý problém, prejdite do súboru .htaccess umiestneného v koreňovej časti stránky a vložte tento kód úplne dole:

# kompresný text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text / html text / obyčajný text / xml aplikácia / xml aplikácia / xhtml + xml text / css text / javascriptová aplikácia / javascriptová aplikácia / x-javascript# vyrovnávacia pamäť prehliadača ExpiresActive On # predvolená vyrovnávacia pamäť za 5 sekúnd ExpiresDefault "prístup plus 1 deň" # Povoliť ukladanie obrázkov do pamäte a flash na mesiac ExpiresByType obrázok / ikona x "prístup plus 1 mesiac" ExpiresByType obrázok / jpeg "prístup plus 4" ExpiresByType obrázok / png " prístup plus 30 dní "ExpiresByType obrázok / gif" prístup plus 43829 minút "ExpiresByType aplikácia / x-shockwave-flash" prístup plus 2592000 sekúnd "# Povoliť ukladanie do vyrovnávacej pamäte css, javascript a textových súborov na jeden týždeň ExpiresByType text / css" prístup plus 604800 sekúnd "ExpiresByType text / javascript" prístup plus 604800 sekúnd "ExpiresByType aplikácia / javascript" prístup plus 604800 sekúnd "ExpiresByType aplikácia / x-javascript" prístup plus 604800 sekúnd "# Povoliť ukladanie do vyrovnávacej pamäte súborov html a htm na jeden deň ExpiresByType" prístup k textu / html plus 43200 sekúnd "# Povoliť ukladanie do vyrovnávacej pamäte súborov XML po dobu desiatich minút ExpiresByType aplikácia / xhtml + xml" prístup plus 600 sekúnd "# Neštandardné písma stránok ExpiresByType aplikácia / x-font-t tf "prístup plus 1 mesiac" ExpiresByType písmo / opentype "prístup plus 1 mesiac" ExpiresByType aplikácia / x-font-woff "prístup plus 1 mesiac" ExpiresByType obrázok / svg + xml "prístup plus 1 mesiac" ExpiresByType aplikácia / vnd.ms- fontobject "prístup plus 1 mesiac"

Príklady skriptov tretích strán

Ak bolo v prvom kroku všetko urobené správne, mali by ste vidieť niečo ako nasledujúci zoznam:

Pre nasledujúce zdroje použite medzipamäť prehliadača


Samozrejme môžete mať napríklad iba niekoľko adries URL pre metriky a analýzu, ale to nie je také dôležité, pokyny na opravu sú pre všetkých rovnaké.

Vyrovnávacia pamäť položiek tretích strán

Článok mal byť pôvodne venovaný iba týmto bodom, avšak s pocitom, že otázok bude ešte veľa, bolo pridaných ešte niekoľko ďalších bodov.

Nie je možné nijako ovplyvniť čas medzipamäte prostriedku tretej strany, môžete to však urobiť vo svojom webovom projekte Najsprávnejším krokom v tejto situácii je automatické stiahnutie nových skriptov metrík, analýz atď. na vaše stránky pomocou korunky (skript je k dispozícii)

Poďme hneď do poriadku!
Krok 1. Skopírujte zoznam všetkých skriptov, na ktoré odkazuje Google PageSpeed, do poznámkového bloku alebo priamo z prehliadača.
Krok 2. Vytvorte súbor na hostingu s príponou php a vložte do neho nasledujúci kód:

Pozor! Na prezeranie skrytého textu nemáte povolenie.

V kóde napríklad 3, ale môžete vytvoriť toľko bodov, koľko potrebujete, stačí skopírovať a pridať nižšie alebo odstrániť nepotrebné body.


V tomto riadku zmeňte tretiu hodnotu:
Pre Google PageSpeed ​​použite medzipamäť prehliadača
1. Skript, ktorý nahráme na našu stránku

Pozor! Na prezeranie skrytého textu nemáte povolenie.

2. Cesta, kam uložiť súbor:

Realpath ("./ js")

V tomto príklade je to priečinok js, t.j. presná cesta bude www.site / js / (musíte si priečinok vytvoriť sami a nastaviť preň povolenie CHMOD na zápis)

3. Názov skriptu, ak s príponou .js, tak s ním píšeme, ak bez neho alebo s iným, urobíme všetko ako v príklade vyššie. Upozorňujeme, že neexistujú žiadne súbory s rovnakým názvom.

Krok 3. Nahrajte upravený súbor na server

Krok 4. Vložte súbor do koruniek, aby sa súbory automaticky aktualizovali

Aby sa zabránilo nesprávnej práci so službami, ak urobí zmeny v skriptoch, automaticky sa prihlási a aktualizuje ich na svojom serveri.

Prejdite na panel hostenia, vyberte kartu CRON a napíšte príkaz. Tiež zadajte čas raz za hodinu / deň alebo inokedy.

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

Nezabudnite zmeniť URL a možno budete mať inú syntax príkazu, pozrite si príklady príkazov cron v pomocníkovi hostingu alebo sa utopte v technickej podpore.

Krok 5. Zmeňte cestu na JS v počítadle alebo skripte

Ak bola v počítadle cesta https://mc.yandex.ru/metrika/watch.js, nahradíme ju cestou vo vnútri webu, napríklad http: //www..js

To je všetko, teraz by ste v zozname PageSpeed ​​Insights nemali mať žiadne správy o nastavení medzipamäte prehliadača.

V archíve si stiahnite pokyny „povoliť medzipamäť prehliadača pre Google PageSpeed“ Z nášho servera nemôžete sťahovať súbory
Uvádzame užitočný článok „Zapnite vyrovnávaciu pamäť prehľadávača pre Google PageSpeed“, ktorého cieľom je optimalizovať web podľa rady nástroja od Google PageSpeed, a to najlepšie, čo máme, fóra, hacky, moduly, šablóny.

Igor... Aktualizácia: 21. novembra 2017.

Dobrý deň, vážení čitatelia blogovej stránky. Pokračujem v sérii článkov, ktoré sa týkajú optimalizačných opatrení, a dnes je čas nakonfigurovať na tento účel použitie medzipamäte prehľadávača používateľom, čo je ďalší krok k zrýchleniu stránky.

Každá akcia, ktorá vám umožní priblížiť sa k tomuto cieľu, bude plusom pri propagácii webového zdroja, a preto nebuďte leniví aspoň pri pohľade na materiály, kde som dal popisy, a tiež, ktoré vám nepochybne pomôžu pri implementácii spoločnej úlohy.

V pokračovaní sa pokúsim poskytnúť jasné pokyny, ako nakonfigurovať ukladanie do pamäte cache prehliadača vložením vlastného kódu do nádherného súboru .htaccess. Je pravda, že to nie je každý a nemôže vždy pomôcť, ale viac o všetkom nižšie.

Myslím si, že každý z vás má predstavu o tom, čo je to ukladanie do pamäte cache, aspoň všeobecne. Pre každý prípad stručne vysvetlím. Predpokladajme, že čitateľ otvorí stránku vášho prostriedku v okne prehliadača, ktorej všetky komponenty (obsah, štýly, skripty atď.) Sa stiahnu z hostiteľského servera, čo trvá určitý čas.

Predpokladajme, že máme možnosť spustiť mechanizmus, ktorý uloží kópie prvkov stránky priamo do webového prehliadača používateľa, ktorý ich navštívi. Potom pri každom ďalšom hovore budú všetky tieto prvky prevzaté priamo z vyrovnávacej pamäte prehliadača (), to znamená zo špeciálneho priečinka, ktorý sa nachádza na pevnom disku jeho počítača.

Zisk v rýchlosti sťahovania bude zrejmý. Toto je algoritmus, ktorý budeme študovať v tomto článku. Mimochodom, okrem témy sa môžete dočítať aj o tom, ako spolu so zrýchlením stránky môžete dosiahnuť, čo je v dnešnej dobe veľmi dôležité.

Pred pár rokmi som hovoril o optimalizácii jedného z mojich projektov na základe analýzy Page Speed ​​uskutočnenej prostredníctvom rozšírenia (teraz je k dispozícii iba online služba), ktoré poskytlo podrobnejší obraz.

Čo je dôležité, nižšie uvedený kód je vo väčšine prípadov celkom dostačujúci na vytvorenie podmienok, za ktorých už Pagespeed nebude robiť nároky, a preto zabezpečí zrýchlenie načítania stránky v požadovanom množstve.

Na základe vyššie uvedeného teda musíme zabezpečiť výstup jedného z hlavičiek Last-Modified a ETag, ako aj jedného z páru Expires alebo Cache-Control: max-age. Pre prehľadnosť a rozšírenie rozsahu zvážime rôzne možnosti.

Variácie kódov na správu medzipamäte pomocou hlavičiek Last-Modified, Expires a Cache-Control

Ak je váš hosting už nakonfigurovaný na zobrazovanie rovnakej položky Last-Modified, je polovica práce hotová (mimochodom, skontrolujte prítomnosť tejto dôležitej hlavičky, vrátane nástroja na kontrolu odpovede servera od spoločnosti Yandex v ich zozname). Ak nie, potom je ľahké to urobiť napísaním niekoľkých riadkov do rovnakého nepostrádateľného.htaccess:

RewriteRule. * - RewriteRule. * -

Je pravda, že táto metóda bude opäť fungovať, ak bude existovať „čistý Apache“ (ale je to presne ten prípad, o ktorom uvažujeme). Budeme predpokladať, že je nakonfigurovaná hlavička Last-Modified, ktorej hodnotou bude mimochodom dátum poslednej úpravy.

Teraz je na rade Cache-Control s parametrom max-age, ktorého hodnota bude nastavená na čas úložiska v cache každého konkrétneho statického objektu. Modul vstupuje na scénu hlavičky modov, ktorého kód by sa mal vložiť do .htaccess:

# zakázať ukladanie do pamäte cache

Je potrebné poznamenať, že cez kontajner ifModul server skontroluje prítomnosť tohto modulu. Ak chýba, smernica sa nevykoná, takže jej použitie by v žiadnom prípade nemalo viesť k chybám.

Čas ukladania do vyrovnávacej pamäte sa určuje pomocou parametra maximálny vek, jeho hodnota je nastavená v sekundách. Vďaka komentárom (ktoré mimochodom môžete bezpečne vymazať) za symbolom hash „#“ si myslím, že základ tejto konštrukcie je jasný.

Namiesto hlavičiek módov je však celkom možné použiť modul platnosť režimu vyprší ktorá zobrazuje hlavičku Expires (ktorú si sám Google myslí, že je výhodnejšia, pretože má širšiu podporu). V takom prípade bude útržok kódu, ktorý to umožňuje, vyzerať takto:

Pri použití hlavičky Expires je začiatočným bodom pre dátum skončenia platnosti cache dátum prvého stiahnutia. Navyše, na rozdiel od Cache-Control, kde sa časové obdobie určuje iba v sekundách, tu ho možno určiť v akomkoľvek časovom formáte vrátane roku (roku).

Ak to chcete overiť, pozrite sa na útržok kódu pre obrázky. Tam som konkrétne uviedol čas v rôznych jednotkách počtu: 1 mesiac (mesiac), 4 týždne (týždne), 30 dní (dni), 43829 minút (minúty), 2592000 sekúnd (sekundy).

Je zrejmé, že za mesiac a za rok môže byť rozdielny počet dní, týždňov, minút a sekúnd, ale to nie je dôležité, pretože sa používajú priemery. Mimochodom, pre súbory a obrázky JS, CSS sa odporúča nastaviť časové obdobie minimálne týždeň, najviac však rok. V takom prípade bude v skutočnosti dátum očakávaného dátumu skončenia platnosti obdobia ukladania do pamäte cache pre túto verziu objektu označený ako hodnota hlavičky Expires v odpovedi servera.

Okrem spomenutých modulov je tiež užitočné ho použiť mod setenvif... Faktom je, že webové prehľadávače rodiny Microsoft Internet Explorer a niektoré verzie systému Mazila správne nevnímajú hlavičku Vary v odpovedi servera HTTP, čo tiež významne prispieva k riadeniu pamäte cache. Tento modul vám umožňuje vyriešiť tento problém, okrem Vary z odpovede servera:

Vo výsledku dostaneme dve možnosti konca nastavenia ukladania do vyrovnávacej pamäte, ktoré môžete skontrolovať vložením jedného po druhom do .htaccess (neodporúčam používať obe súčasne):

# ukladanie do vyrovnávacej pamäte súbory HTML a HTM na jeden deň Sada hlavičiek Cache-Control "max-age = 43200"# cache CSS, JavaScript a textové súbory na jeden týždeň Sada hlavičiek Cache-Control "max-age = 604800"# cache flash a obrázky na mesiac Sada hlavičiek Cache-Control "maximálny vek = 2592000"# zakázať ukladanie do pamäte cache Hlavička zrušila nastavenie Cache-Control BrowserMatch "MSIE" sila bez zmeny BrowserMatch "Mozilla / 4. (2)" sila bez zmeny

ExpiresActive On # predvolená vyrovnávacia pamäť na 5 sekúnd ExpiresDefault „prístup plus 5 sekúnd“ # flash pamäte a obrázkov na mesiac ExpiresByType obrázok / ikona x „prístup plus 1 mesiac“ ExpiresByType obrázok / jpeg „prístup plus 4„ ExpiresByType obrázok / png “prístup plus 30 dní „ExpiresByType image / gif“ prístup plus 43829 minút „ExpiresByType aplikácia / x-shockwave-flash“ prístup plus 2592000 sekúnd „# cache CSS, JavaScript a textové súbory na jeden týždeň ExpiresByType text / css„ prístup plus 604800 sekúnd “ExpiresByType textový / javascript "prístup plus 604800 sekúnd" aplikácia ExpiresByType / javascript "prístup plus 604800 sekúnd" aplikácia ExpiresByType / x-javascript "prístup plus 604800 sekúnd" # súbory HTML a HTM v medzipamäti na jeden deň ExpiresByType text / html "prístup plus 43200 sekúnd" # ukladanie súborov XML do cache na desať minút ExpiresByType aplikácia / xhtml + xml „prístup plus 600 sekúnd“ BrowserMatch "MSIE" sila bez zmeny BrowserMatch "Mozilla / 4. (2)" sila bez zmeny

Pripomínam ešte raz, že napriek prítomnosti kontajnera IfModule, ktorý zaisťuje bezpečnosť úprav, nebude nadbytočné vytvárať záložnú kópiu pôvodnej verzie súboru pri každej zmene súboru .htaccess (môžete jednoducho skopírovať jeho obsah a uložte ho do počítača), aby ste neboli zaskočení silou väčšej alebo inej variácie.

Kód na generovanie hlavičiek Etag a Expires na konfiguráciu pamäte cache

V prípade, že vyššie uvedené smernice náhle nebudú fungovať (aj keď je na vašom hostovaní nainštalovaný „čistý“ Apache), pozrime sa na ďalší prípad, a to keď sa ako nástroje na správu ukladania do pamäte cache použije dvojica povinných hlavičiek Etag a Expires. Ako si pamätáte, obaja sú zodpovední za včasné doručenie súborov z medzipamäte, čo inicializuje kontrolu relevantnosti aktuálnej verzie.

Ak sa ale dátum poslednej úpravy zobrazuje ako hodnota Expires, potom sa v ETag použije jeden alebo iný jedinečný identifikátor zdroja (v tejto role vystupuje častejšie verzia súboru). Pre aktiváciu ETag stačí zadať jeden riadok do toho istého .htaccess:

FileETag MTime veľkosť

Potom použite modul, ktorý už pozná náš modul vypršania platnosti. Môžete tiež pridať mod setenvif, ktorý, ako som už uviedol vyššie, zakazuje vytváranie hlavičiek Vary pre určitú skupinu webových prehľadávačov, aby sa zaručilo vytvorenie medzipamäte z ich strany:

FileETag MTime veľkosť ExpiresActive on ExpiresDefault "access plus 1 year" BrowserMatch "MSIE" sila bez zmeny BrowserMatch "Mozilla / 4. (2)" sila bez zmeny

Tu sa použil komplex s minimom typov zahrnutých objektov, ale najpopulárnejších (CSS, JavaScript a obrázky), čo by malo tiež stačiť na zabezpečenie maximálnej efektívnosti pri zrýchľovaní stránky. V prípade potreby môžete do balíka „jpg | jpeg | gif | png | ico | css | js“ pridať ďalšie typy súborov.

Vo vyššie uvedenom príklade kódu majú navyše všetky súbory rovnakú životnosť pamäte „access plus 1 rok“, čo je odporúčané obdobie od spoločnosti Google. Môžete však určiť vlastné časové obdobie pre každú skupinu objektov podľa príkladu obsahu modulov mod_expires a mod_headers z predchádzajúcej časti článku.

Kontrola prítomnosti požadovaných hlavičiek v odpovedi servera

Po vložení kódu do súboru .htaccess môžete skontrolovať, či sú v odpovedi servera zahrnuté požadované hlavičky. Na tento účel môžete použiť niektoré online služby, napríklad Checkmy.ru, kde ako klient (User Agent) odosielajúci požiadavku HTTP na server vyberieme ľubovoľný prehľadávač a tiež zadáme adresu URL zdroja (napríklad I išiel cestou k obrázku použitému v jednom z blogových príspevkov):


Po kliknutí na tlačidlo „Odoslať požiadavku“ sa po niekoľkých sekundách zobrazí výsledok:


Ako vidíte, v mojom prípade sú prítomné všetky štyri hlavičky. Povedal som, že musí byť zobrazený jeden z párov „Last-Modified - ETag“ a „Expires - Cache-Control“, zvyšok je nadbytočný. Kompletná sada zároveň, pokiaľ je to možné posúdiť, nespôsobí škodu.

Mimochodom, ak vykonáte testovanie pred začatím konfigurácie ukladania do pamäte cache, môžete okamžite určiť, ako produktívne budú vaše akcie.

Nakoniec, ak je v odpovedi servera nginx, bude potrebné ho nakonfigurovať (urobil to môj poskytovateľ) a konfiguračný súbor .htaccess tu bude zbytočný. V tomto prípade, ako som už uviedol, budete musieť využiť pomoc technickej podpory, pokiaľ vám váš plán hostingu a nedostatočné znalosti samozrejme nedovolia nezávislé vyriešenie problému.

Ďalej vám odporúčam odkázať na video, aby ste konsolidovali materiál, a sledovať 6 lekcií za sebou (jedna z nich je venovaná nastaveniu ukladania do pamäte cache v prehliadačoch), v ktorých sú zohľadnené všetky najdôležitejšie aspekty urýchlenia stránky WP detail:

");">

Chcete dostávať včasné, relevantné a užitočné články? Potom sa môžete prihlásiť na odber:

Ďalšie články na túto tému:

60 recenzií

  1. Denis

    Veľmi užitočný spôsob, ako zvýšiť pohodlie pri hľadaní stránky. Optimalizáciou rýchlosti sťahovania teda ušetríte čas návštevníkovi a budú za to vďační za vašu opätovnú návštevu. Čo priamo ovplyvní príjem stránky pozitívnym spôsobom.

  2. Igor

    Úplne v poriadku, Denis. V propagácii webových stránok je všetko vzájomne prepojené.

  3. Marazzi

    Nerozumel som ničomu, prehliadač si všeobecne pamätá stránky, na ktorých sa nachádzal v cookies, ak cookies vygumujete. PODĽA VAŠEJ METÓDY potom vaša schéma prestane fungovať, respektíve som pochopila, že o tom je konverzácia a je určená pre bežného návštevníka, ktorý nečistí históriu.

  4. Sergej Dmitrijevič

    Veľmi užitočné informácie. Mne to prišlo vhod. Ďakujem.

  5. Igor

    Marazzi, po prvé, cookies a vyrovnávacia pamäť sú rôzne veci. Súbory cookie sú špeciálne súbory so súborom údajov, ktoré vám umožňujú identifikovať používateľa, ak navštívi webový zdroj. A vyrovnávacia pamäť (preložená z angličtiny - sklad, vyrovnávacia pamäť) prehliadača je akýmsi odľahlým miestom na ukladanie kópií dokumentov (napríklad webových stránok webových stránok), ktoré sa v prípade potreby zobrazia v prehliadači. Práve na strane servera sa vyskytuje príkaz na použitie medzipamäte na strane prehliadača používateľa a v počítači používateľa sa vytvorí priečinok s medzipamäťou. Užívateľ môže upraviť frekvenciu vytvárania kópií webových stránok v medzipamäti vymazaním priečinka medzipamäte. Alebo úplne zakážte ukladanie do pamäte cache, nastavenie moderných prehľadávačov to umožňuje. Čím častejšie vymažete vyrovnávaciu pamäť, tým novšiu verziu stránky získate.

  6. Nikolay

    Super a všetko je tu v poriadku !!!

  7. marazzi

    No, to som povedal.

  8. Alexander
  9. Nikolay

    Ďakujem za článok. Je pravda, že nie je úplne jasné, ako potom vyčistiť túto vyrovnávaciu pamäť v prípade, ak sa napríklad na webe objaví nová sekcia alebo oddiel, naopak, zmizne. Samozrejme, silno preháňam, ale význam je rovnaký. Ako je to implementované v tomto kóde, niekedy je potrebné vyčistiť medzipamäť?

  10. Irina

    Ok! Ďakujem!
    Tento kód pomohol, teraz 80 zo 100

    FileETag MTime veľkosť vyprší platnosť aktívna vyprší Predvolený „prístup plus 1 rok“

  11. Igor

    Nikolay, celkom som nepochopil tvoju otázku. Toto je kód na ukladanie stránok do vyrovnávacej pamäte v prehliadačoch používateľa, ktoré si vyrovnávaciu pamäť čistia sami. Nové články a kategórie sa zobrazujú, aj keď je vyrovnávacia pamäť plná. Iba prvky, ktoré zostanú dlho nezmenené, sa dlho ukladajú do medzipamäte.

  12. Andrew

    Ďakujem. A ak potrebujem ukladať do medzipamäte iba niektoré, napríklad logo a vlajky krajín v päte, čo mám robiť?

  13. Igor

    Andrey, prečo potrebuješ separovať obrázky, niektoré ukladať do cache a iné nie? Obrázky sa zvyčajne nemenia kaleidoskopickou rýchlosťou.

  14. Andrew

    No, áno, s obrázkami máte pravdu. A nie ukladať do cache určitú stránku (napríklad z administrátorského panelu). Je to možné?

  15. Igor

    Samozrejme k dispozícii. Ak používate doplnok na ukladanie do medzipamäte, napríklad Hyper Cache, jeho nastavenia majú veľa rôznych možností, vrátane toho, že môžete vylúčiť stránky, ktoré nie sú predmetom ukladania do medzipamäte.

  16. Yaroslav

    Veľmi užitočný článok, už dávno som chcel nastaviť ukladanie do vyrovnávacej pamäte, ale predtým, ako som všade našiel prvú prezentovanú metódu a neurobila absolútne nič.
    Ale vďaka druhej metóde všetko funguje s ofinou !! PS 91

  17. Igor

    Dobrý výsledok, Jaroslav.

  18. stan

    nijako nefunguje

  19. Igor

    Stane, môže to byť, vo veľkej miere to závisí od hostiteľa.

  20. Iľja

    Nie je potrebné hovoriť, ako veľmi som hľadal článok o tom, ako povoliť čas ukladania do pamäte cache prehliadača, stačilo vložiť najvyšší kód. Ďakujem za článok.

  21. Igor

    Prosím, Iľja.

  22. Šedá

    Vďaka Funguje to!

  23. Sergey

    ani jedna metóda nefunguje rovnako
    adekvátny hostiteľ

    zrejme budú musieť napísať podpore

  24. Igor Gornov

    Áno, Sergej. Sami vidíte, že veľa ľudí si to dokáže uvedomiť.

  25. Alexander Puzatykh

    Ďakujem. Informácie sú úžasné. Teraz to opravím na svojej webovej stránke. A potom pgespeed vydá červený štítok.

  26. Jurij

    Urobil som všetko, ako je popísané, ale rýchlosť načítania PageSpeed ​​Insights sa nezmenila (74%). Čo by mohlo byť dôvodom?

  27. Jurij

    Tu je môj htaccess
    # ZAČÍNAME WordPress

    RewriteEngine zapnutý
    RewriteBase /
    RewriteRule ^ index \ .php $ - [L]
    RewriteCond% (REQUEST_FILENAME)! -F
    RewriteCond% (REQUEST_FILENAME)! -D
    RewriteRule. /index.php [L]

    # KONIEC WordPress
    Pridávam váš kód a nič sa nemení
    PageSpeed ​​Insights, keď to bolo 74%, zostalo rovnaké.
    Povedzte mi, v čom by mohol byť problém ???

  28. Igor Gornov

    Zvláštnosti konfigurácie servera vášho hostiteľa, kde sa stránka nachádza. Podľa môjho názoru som v článku a v komentároch už poznamenal, že táto metóda nie je vhodná pre každého.

  29. Valery

    Igor, dobrý článok. Chcel som to robiť dlho, ale nevedel som ako. Teraz je to jasné. Mám jednu otázku: „Kam by sa mal vložiť kód do súboru .htaccess?“.

  30. Igor Gornov

    Valery, ak už máš nejaké fragmenty kódu v .htaccess, potom by mal byť nasledujúci riadok:

    # KONIEC WordPress

    V tomto prípade by mal byť nad týmto riadkom umiestnený nielen tento, ale aj akýkoľvek kód. Na zvyšku nezáleží.

  31. vokacan

    Informácie sú užitočné, ale pre začiatočníka je podľa mňa dosť ťažké prísť na to.

  32. Aely

    Napodiv to isté pre mňa nefungovalo, ale čo mám robiť, alebo lepšie povedané, o čo mám požiadať hostiteľa?

  33. Igor Gornov

    Hostiteľa by ste mali požiadať o nasledovné: je možné na serveri povoliť ukladanie do vyrovnávacej pamäte pre všetky možné súbory. Možno už majú pripravený algoritmus, ktorý sa líši od algoritmu, ktorý som navrhol.

  34. Aely

    Ďakujem, teraz som to napísal.

  35. Aely

    Tu je vtip, že (hostiteľ) povedal, že majú všetko v cene, a ja som im to povedal, a GoogleSpeedtest ukazuje „použite vyrovnávaciu pamäť prehliadača“ a oni mi povedia - to sú otázky pre GoogleSpeedtest. Nechápem, komu mám veriť? :)

  36. Igor Gornov

    Tento prístup hostiteľa k klientovi je, prinajmenšom zvláštny,, prinajmenšom zvláštny. Teoreticky by mali vysvetliť a dať možný algoritmus na jeho vloženie do súboru .htaccess, aby mohli funkciu aktivovať, aj keď ju majú povolenú. Je zaujímavé, že nie je to prvýkrát, čo ste kontaktovali podpornú službu, ako sa to prejavilo v iných situáciách?