Premýšľali ste niekedy nad tým, prečo je váš web WordPress pomalý aj napriek vášmu najlepšiemu úsiliu? Tajomstvo môže byť v tom, ako slúžite svojmu majetku.
Keď prehliadače neukladajú a nenačítavajú súbory, ako sú obrázky, CSS a JavaScript efektívne, môže to viesť k zbytočným oneskoreniam a horšiemu používateľskému zážitku. Preto potrebujeme efektívne ukladanie do vyrovnávacej pamäte, aby sme zrýchlili vašu stránku a poskytli bezproblémovú používateľskú skúsenosť.
Iste, ukladanie do vyrovnávacej pamäte vám môže pripadať ako technologické bludisko, ale čo keby sme vám povedali, že cez to vedie priama cesta?
V tejto príručke vás prevedieme základnými krokmi na poskytovanie aktív pomocou účinných pravidiel vyrovnávacej pamäte na WordPress.
Takže, začnime.
Pochopenie statických aktív a ukladania do vyrovnávacej pamäte
Statické prostriedky a ukladanie do vyrovnávacej pamäte sú dva kľúčové aspekty vývoja webu na zlepšenie výkonnosti stránok, časov načítania a používateľského dojmu. V skutočnosti môže vymazanie vyrovnávacej pamäte poskytnúť vášmu webu okamžité zvýšenie výkonu. Pozrite si našu príručku, v ktorej sa dozviete, „ako efektívne vymazať vyrovnávaciu pamäť WordPress“.
Správnou správou statických aktív a implementáciou efektívnych stratégií ukladania do vyrovnávacej pamäte môžu webové stránky poskytovať obsah efektívnejšie, čo prispieva k celkovej spokojnosti používateľov a hodnoteniu SEO.
Poďme pochopiť obe podrobnejšie.
Čo sú statické aktíva?
Statické prvky sú súbory, ako sú obrázky, šablóny so štýlmi CSS a skripty JavaScript, ktoré sa časom nezmenia. Tieto súbory sú kľúčové pre vizuálne a funkčné aspekty webovej stránky a do prehliadačov používateľov sa doručujú presne tak, ako sú uložené na serveri.
Čo je ukladanie do vyrovnávacej pamäte?
Ukladanie do vyrovnávacej pamäte je technika používaná na ukladanie kópií súborov alebo údajov v dočasnom úložisku, aby sa budúce požiadavky na tieto údaje mohli obsluhovať rýchlejšie.
Aj keď je možné použiť rôzne typy techník ukladania do vyrovnávacej pamäte, aby bol blog relevantný, popíšem dva typy ukladania do vyrovnávacej pamäte, tj: ukladanie do vyrovnávacej pamäte stránky a statické ukladanie do vyrovnávacej pamäte.
Ukladanie stránok do vyrovnávacej pamäte vs. ukladanie statických aktív do vyrovnávacej pamäte
Ukladanie stránok do vyrovnávacej pamäte zahŕňa ukladanie kompletnej vykreslenej verzie webovej stránky, zatiaľ čo ukladanie do vyrovnávacej pamäte statických aktív ukladá jednotlivé súbory, ako sú obrázky a šablóny so štýlmi.
Ukladanie stránok do vyrovnávacej pamäte je výhodné pre dynamické stránky s obsahom, ktorý sa často nemení, zatiaľ čo ukladanie statických aktív do vyrovnávacej pamäte je kľúčové pre všetky webové stránky, aby sa skrátili časy načítania a využitie šírky pásma servera.
V tabuľke nižšie nájdete podrobné porovnanie ukladania stránok do vyrovnávacej pamäte a ukladania statických aktív:
| Ukladanie stránky do vyrovnávacej pamäte | Ukladanie statických aktív do vyrovnávacej pamäte |
| Poskytuje dynamický obsah, ktorý sa často nemení. | Znižuje časy načítania a šírku pásma pre statický obsah webových stránok. |
| Aktualizované menej často na základe zmien obsahu alebo nastavení vypršania platnosti. | Aktualizuje sa pri zmene súboru alebo podľa hlavičiek vyrovnávacej pamäte. |
| Ukladá celé webové stránky. | Ukladá obrázky, šablóny so štýlmi, skripty, fonty a ďalšie statické súbory. |
| Je riadený hlavičkami ako Cache-Control a Expires. | Je riadený hlavičkami a verziou súborov. |
Čo robí statický majetok uložiteľným do vyrovnávacej pamäte?
Statické aktíva sa považujú za ukladateľné do vyrovnávacej pamäte, keď sa často nemenia a môže ich prehliadač alebo CDN uložiť na opätovné použitie pri viacerých načítaniach stránok. Bežnými príkladmi statických prvkov sú obrázky, súbory CSS, súbory JavaScript a písma.
Aby bolo možné aktívum uložiť do vyrovnávacej pamäte, malo by mať príslušné hlavičky vyrovnávacej pamäte HTTP, ako napríklad Cache-Control a Expires, ktoré prehliadaču indikujú, ako dlho má byť dielo uložené.
Čo sú zásady ukladania do vyrovnávacej pamäte?
Politika ukladania do vyrovnávacej pamäte je súbor pravidiel definovaných hlavičkami HTTP, ktoré určujú, ako a ako dlho majú prehliadače a medzipamäte uchovávať konkrétny zdroj. Dobre definovaná politika ukladania do vyrovnávacej pamäte pomáha znižovať časy načítania, zaťaženie servera a využitie šírky pásma.
Ako ovplyvňuje UX a SEO politika vyrovnávacej pamäte?
Robustná politika ukladania do vyrovnávacej pamäte priamo ovplyvňuje používateľskú skúsenosť (UX) aj optimalizáciu pre vyhľadávače (SEO). Rýchlejšie časy načítania vyplývajúce z efektívneho ukladania do vyrovnávacej pamäte vedú k plynulejšiemu a pohotovejšiemu používateľskému zážitku. Je to dôležité, pretože používatelia pravdepodobne opustia stránku, ak bude načítanie trvať príliš dlho.
Pokiaľ ide o SEO, rýchlosť webu je pre Google známym hodnotiacim faktorom. Rýchlejšie webové stránky sú uprednostňované v hodnotení vyhľadávačov, čím sa zvyšuje viditeľnosť a potenciálne vyššia návštevnosť.
Ako skontrolovať, či je na vašom webe povolené ukladanie do vyrovnávacej pamäte prehliadača
Využitím vyrovnávacej pamäte prehliadača na vašom webe WordPress môžete zlepšiť výkon vášho webu a vyriešiť problém so statickým aktívom. Ak chcete skontrolovať, či je na vašom webe povolené ukladanie do vyrovnávacej pamäte prehliadača, môžete použiť nástroje pre vývojárov prehliadača alebo online nástroje, ako napr Google PageSpeed Insights.
Urobiť to:
- V prehliadači kliknite pravým tlačidlom myši > Skontrolovať.
- Prejdite na kartu Sieť a skontrolujte, či sú hlavičky Cache-Control a Expires správne nastavené.
Google PageSpeed Insights poskytuje užívateľsky prívetivejšie rozhranie, analyzuje výkonnosť vašej stránky a explicitne poukazuje na to, ktoré prostriedky potrebujú optimalizáciu ukladania do vyrovnávacej pamäte.
Identifikácia problému „Poskytovať statické aktíva pomocou efektívnej politiky vyrovnávacej pamäte“.
Problém „Poskytovať statické aktíva s efektívnou politikou vyrovnávacej pamäte“ je zvýraznený v nástrojoch na výkon webových stránok, keď sa statické zdroje efektívne neukladajú do vyrovnávacej pamäte, čo vedie k dlhším časom načítania používateľov.
Na identifikáciu problému musíme pochopiť dve hlavné veci:
- Po prvé: príčina problému
- Druhá: Ako PageSpeed Insights interpretuje problém.
Príčiny problému
Tu je niekoľko hlavných príčin problému.
Chýbajúca politika vyrovnávacej pamäte
K tomu dochádza, keď sa statické prvky na webovej lokalite, ako sú obrázky, JavaScript alebo súbory CSS, neposkytujú so správnymi hlavičkami ovládania vyrovnávacej pamäte. Bez týchto hlavičiek nebudú prehliadače tieto zdroje ukladať do vyrovnávacej pamäte, čo vedie k zbytočnému sťahovaniu a predlžovaniu času načítania pre vracajúcich sa návštevníkov.
Krátke trvanie vyrovnávacej pamäte
Aj keď je ukladanie do vyrovnávacej pamäte povolené, veľmi krátke trvanie vyrovnávacej pamäte môže viesť k podobným problémom s výkonom, ako keby ste nemali ukladanie do vyrovnávacej pamäte vôbec. V ideálnom prípade by statické aktíva, ktoré sa často nemenia, mali mať dlhé trvanie vyrovnávacej pamäte, aby sa maximalizovali výhody výkonu.
Nekonzistentné zásady vyrovnávacej pamäte
Nezrovnalosti v politikách vyrovnávacej pamäte naprieč rôznymi typmi aktív alebo rôznych stránok lokality môžu viesť k neoptimálnemu správaniu pri ukladaní do vyrovnávacej pamäte, kde sa niektoré aktíva ukladajú do vyrovnávacej pamäte efektívne, zatiaľ čo iné nie.
Nepoužíva ukladanie do vyrovnávacej pamäte prehliadača
Neschopnosť využiť ukladanie do vyrovnávacej pamäte prehliadača znamená, že prehliadače používateľov nebudú ukladať kópie statických aktív na rýchlejšie načítanie pri nasledujúcich návštevách, čo môže výrazne spomaliť výkon webových stránok.
Všeobecná nesprávna konfigurácia
To môže zahŕňať rôzne problémy, ako sú nesprávne hlavičky riadenia vyrovnávacej pamäte, nesprávne nakonfigurované nastavenia servera alebo problémy so súborom .htaccess webovej lokality (v prípade serverov Apache).
Ako PageSpeed Insights interpretuje tento problém?
Tu je návod PageSpeed Insights interpretuje tento problém:
- Najprv analyzuje hlavičky statických aktív poskytovaných z vášho webu.
- Potom sa pozrie na kontrolu vyrovnávacej pamäte a ukončí platnosť hlavičiek, aby určil, ako dlho je každé aktívum ukladané do vyrovnávacej pamäte prehliadačmi.
- Ak nástroj zistí, že tieto zdroje majú krátku vyrovnávaciu pamäť TTL (Time To Live) alebo sa vôbec neukladajú do vyrovnávacej pamäte, označí problém a poskytne odporúčania na zlepšenie.
Takže zistením príčiny môžete problém strategicky vyriešiť.
Riešenia pre poskytovanie aktív s účinnými politikami vyrovnávacej pamäte
Aby sme vám pomohli poskytovať aktíva pomocou efektívnej politiky vyrovnávacej pamäte, pokryjeme dva prístupy, ktoré vám pomôžu zlepšiť výkon webových aplikácií.
- Manuálny prístup
- Plugin prístup
Manuálna metóda
Najprv sa pozrime na to, ako tento problém vyriešiť manuálne.
Krok 1: Identifikujte statické aktíva
Najprv musíte identifikovať, ktoré statické aktíva sa poskytujú bez politiky vyrovnávacej pamäte alebo s neefektívnou politikou. Môžete to urobiť podľa nasledujúcich krokov:
- Prejdite na Google Pagespeed Insights.
- Zadajte svoju adresu URL.
- V sekcii diagnostiky môžete vidieť zdroje v časti „poskytovanie statických prostriedkov s efektívnou politikou vyrovnávacej pamäte“.
- Rozbaľte ich, aby ste identifikovali statické aktíva. V mojom prípade som po spustení testu našiel 35 zdrojov.
Krok 2: Nakonfigurujte hlavičky HTTP
Ďalej musíte nakonfigurovať svoj server tak, aby obsahoval špecifické hlavičky HTTP, aby ste dali prehliadaču pokyn, ako dlho má uložiť statické aktíva do vyrovnávacej pamäte. Hlavné hlavičky, na ktoré sa treba zamerať, sú Cache-Control a voliteľne Expires.
Musíte nakonfigurovať hlavičky HTTP odlišne pre rôzne servery.
Ak váš server používa Apache, pridajte do súboru .htaccess nasledujúce riadky:
Krok 3: Otestujte konfigurácie
Po aktualizácii konfigurácie servera by ste mali vymazať vyrovnávaciu pamäť vášho servera (ak je to možné) a otestovať konfiguráciu:
- Návšteva vášho webu v prehliadači.
- Otvorte v prehliadači Vývojárske nástroje (kliknite pravým tlačidlom myši → Skontrolovať).
- Prejdite na kartu Sieť.
- Znovu načítajte stránku.
- Kliknite na statické aktívum na karte Sieť a v sekcii hlavičky vyhľadajte hlavičku Cache-Control.
Krok 4: Znova spustite testy výkonu
Znova použite nástroje ako Google PageSpeed Insights, Lighthouse alebo WebPageTest, aby ste zaistili vyriešenie problému a skontrolovali prípadné zlepšenie skóre výkonnosti.
- Po úprave nastavení sa počet zdrojov znížil z 35 na 29.
Spôsob doplnku
Pomocou doplnku na ukladanie do vyrovnávacej pamäte môžete jednoducho opraviť „poskytovanie statických aktív pomocou efektívnej politiky vyrovnávacej pamäte“. Pozrite si náš zoznam najlepších doplnkov WordPress Caching.
Tu je návod, ako…
Doplnok Breeze
Pre účely demonštrácie by som použil Vánok Zapojiť. Doplnok Breeze vyvinula spoločnosť DreamHost a všetci používatelia služby DreamHost majú tento doplnok predvolene.
- Najprv nainštalujte a aktivujte doplnok.
- Prejdite na nastavenia > Povoliť ukladanie do vyrovnávacej pamäte prehliadača
Týmto by sa mal problém vyriešiť. Získajte viac informácií o konfigurácii doplnku Breeze prostredníctvom tohto sprievodca.
Doplnok W3 Total Cache
Ako je uvedené vyššie, väčšina doplnkov pre ukladanie do vyrovnávacej pamäte vám umožňuje poskytovať statické aktíva. Tu je návod, ako poskytovať statické prostriedky pomocou doplnku W3 Total Cache.
- Stiahnite si a aktivujte Doplnok W3 Total Cache.
- Prejdite do časti Nastavenia > Ukladanie do vyrovnávacej pamäte prehliadača
- Pre každý prvok CSS & JS, HTML a XML označte hlavičku expirácie a nastavte životnosť hlavičky expirácie na 31536000 sekúnd.
Ďalšie informácie nájdete v našej príručke „Ako používať doplnok WordPress W3 Total Cache pre rýchlejšie webové stránky“.
Tipy na optimálnu stratégiu ukladania do vyrovnávacej pamäte
Aj keď sme sa už zaoberali tým, ako môžete jednoducho vyriešiť problém „poskytovať statické prostriedky pomocou efektívnej politiky vyrovnávacej pamäte“, potrebujete optimálnu politiku ukladania do vyrovnávacej pamäte, aby ste tomuto problému zabránili.
Tu vám ponúknem niekoľko tipov na optimalizáciu vašej stratégie ukladania do vyrovnávacej pamäte:
Použite efektívneho poskytovateľa hostingu
Výber poskytovateľa hostingu zohráva dôležitú úlohu pri nastavení optimálnej kešovacej stratégie. Ak máte robustného poskytovateľa hostingu, možno nebudete musieť vynaložiť ďalšie úsilie na nastavenie stratégií ukladania do vyrovnávacej pamäte. Váš poskytovateľ hostingu sa postará o väčšinu aspektov ukladania do vyrovnávacej pamäte.
Musíte sa rozhodnúť pre poskytovateľa hostingu, ktorý používa SSD, má dátové centrá blízko vášho primárneho publika a ponúka vstavané mechanizmy ukladania do vyrovnávacej pamäte na úrovni servera. Okrem toho by vám mal umožniť jednoducho upgradovať zdroje počas špičiek prevádzky a mal by poskytovať podporu pre HTTP/2 alebo HTTP/3.
Využívanie sietí na doručovanie obsahu (CDN)
Používanie CDN môže tiež vyriešiť problém „poskytovať statické aktíva“. Musíte sa uistiť, že ste si vybrali CDN so širokou sieťou serverov po celom svete na doručovanie obsahu z najbližšieho miesta používateľovi.
Okrem toho sa musíte uistiť, že vaša sieť CDN je nakonfigurovaná tak, aby rešpektovala hlavičky vyrovnávacej pamäte vášho pôvodného servera, alebo nastavte vhodné politiky vyrovnávacej pamäte na úrovni CDN.
Ak používate Cloudflare CDN, môžete tento problém vyriešiť pomocou pravidiel stránky.
- Prejdite na ovládací panel Cloudflare
- Vyberte položky Ukladanie do vyrovnávacej pamäte > Konfigurácia
- Nastavte TTL vyrovnávacej pamäte prehliadača na 1 rok.
Ak ste používateľom cloudways, môžete povoliť doplnok Cloudflare Enterprise jedným kliknutím a povoliť možnosť ukladania do vyrovnávacej pamäte, aby ste vyriešili problém „poskytovať statické aktíva“.
Využitím integrácie Cloudflare na DreamHost na jedno kliknutie máte možnosť bez námahy zvýšiť výkon a bezpečnosť svojich webových stránok. Povolením služby Cloudflare môžete vyriešiť problém „poskytovania statických aktív pomocou efektívnej politiky vyrovnávacej pamäte“, čím zaistíte, že sa statický obsah vašej webovej lokality doručí vašim používateľom rýchlo a efektívne.
Oneskorenie kódu tretej strany
Ako všetci vieme, kódy tretích strán sú skutočným vinníkom pomalého načítania, a teda problémom so statickými aktívami.
Musíme teda odložiť kód tretej strany. Môžeme to urobiť takto:
- Používanie asynchronných alebo odložených atribútov alebo nepodstatných skriptov, aby sa im zabránilo blokovať hlavné vlákno. Môžete to urobiť jednoducho pridaním atribútov asynchronizácie a odloženia do značky skriptu.
- Atribút async môžete pridať umiestnením nasledujúceho riadku do súboru HTML pod značku skriptu.
- Atribút Defer môžete pridať umiestnením nasledujúceho riadku do súboru HTML pod značku skriptu.
- Správnym používaním atribútov async a defer môžete optimalizovať výkon načítania svojich webových stránok a poskytnúť tak používateľom rýchlejší a plynulejší zážitok.
Lokálne hosťovanie písiem a Analytics
Používanie externých písiem môže spomaliť webovú stránku a môžete čeliť problému so statickým aktívom. Aby ste tomu zabránili, sťahujte a poskytujte písma priamo zo servera namiesto spoliehania sa na externých poskytovateľov písem. Robiť to,
- Najprv si stiahnite súbory písiem z Google Fonts.
- Nahrajte písma na svoj server. Na to môžete použiť FTP. Presuňte súbor Font na vašu vzdialenú lokalitu.
- Vytvorte súbor CSS, ktorý definuje pravidlá @font-face na určenie toho, ako sa majú písma zobrazovať.
f
ont-family: ‘YourFontName’; src: url(‘/cesta-k-vášmu-adresáru-fontov/váš-súbor-font.woff2’) format(‘woff2’), url(‘/cesta-k-vášmu-adresáru-fontov/váš-font- file.woff’) format(‘woff’), url(‘/cesta-k-adresaru-vasmu-fontu/vasemu-suboru-fontu.ttf’) format(‘truetype’), url(‘/cesta-k- your-font-directory/your-font-file.otf’) format(‘opentype’); font-weight: normal; štýl písma: normálny; }
- Nahraďte ‘YourFontName’ názvom svojho fontu a nahraďte /cesta-k-vášmu-adresáru-fontov/vášmu-súboru-fontov skutočnou cestou a názvom súboru vašich fontov.
- Teraz nakonfigurujte svoj webový server na poskytovanie súborov písiem.
- Ak používate Apache, pridajte tieto riadky do svojho súboru .htaccess.
AddType font/woff2 .woff2 AddType font/woff .woff AddType font/ttf .ttf AddType font/otf .otf
- Ak používate Nginx, pridajte tieto súbory do bloku servera.
umiestnenie ~* \.(ttf|otf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; }
- Zahrňte súbor CSS, ktorý ste vytvorili vyššie, do svojich dokumentov HTML. Môžete to urobiť pridaním odkazu na súbor CSS do sekcie vášho HTML:
Zakázanie funkcií Cloudflare
Niektoré z funkcií Cloudflare môžu zvýšiť tlak na webovú stránku a môžu predĺžiť časy načítania. Musíte ich zakázať, aby ste sa vyhli problémom so statickými aktívami. Nakonfigurujte tiež pravidlá stránky Cloudflare na optimalizáciu ukladania do vyrovnávacej pamäte pre rôzne typy obsahu.
- Prejdite na kartu Rýchlosť na hlavnom paneli Cloudflare.
- Tu môžete podľa potreby zapínať a vypínať Rocket Loader.
Používanie DreamHost na optimalizáciu ukladania do vyrovnávacej pamäte
Vedeli ste, že keď hosťujete svoj web na DreamHost, už sa zaregistrujete na optimalizáciu ukladania do vyrovnávacej pamäte?
Chcete vedieť ako?
Na webe WordPress hostovanom v DreamHost je Varnish povolený prostredníctvom rozhrania platformy DreamHost, kde ho používatelia môžu jednoducho zapnúť pre svoj server. Po aktivácii funguje Varnish ako reverzný proxy, ktorý zachytáva prichádzajúce požiadavky HTTP.
V prípade statických aktív, ako sú obrázky, CSS a súbory JavaScript, Varnish skontroluje vyrovnávaciu pamäť skôr, ako sa dostane do aplikácie WordPress na serveri. Ak je aktívum uložené vo vyrovnávacej pamäti a jeho platnosť nevypršala na základe nakonfigurovaného Time To Live (TTL), poskytne toto aktívum priamo používateľovi, čím sa obíde potreba, aby stránku vygeneroval WordPress.
To dramaticky znižuje zaťaženie servera a zrýchľuje čas odozvy, pretože webový server nemusí obsluhovať tieto súbory od začiatku, čo vedie k rýchlejšiemu zážitku pre koncového používateľa. Ak obsah nie je vo vyrovnávacej pamäti alebo jeho platnosť vypršala, Varnish načíta nový obsah zo servera, uloží ho do vyrovnávacej pamäte a podáva ho, čím zaistí, že z vyrovnávacej pamäte budú doručené nasledujúce požiadavky.
Ak chcete povoliť lak, postupujte takto:
- Prejdite do nastavení servera > Spravovať služby
- Kliknite na „povoliť“ lak.
Navyše, ak chcete manuálne nakonfigurovať lak na svojom webe WordPress, pozrite si našu podrobnú príručku „WordPress na lak“.
Zhrnutie
Poskytovanie statických aktív pomocou efektívnej politiky vyrovnávacej pamäte je rozhodujúce pre zvýšenie výkonu a používateľského zážitku vášho webu WordPress. V tejto príručke sme prešli dôležitosťou ukladania do vyrovnávacej pamäte, poskytli praktické kroky na konfiguráciu pravidiel vyrovnávacej pamäte a zdôraznili sme osvedčené postupy na zabezpečenie optimalizácie vašich statických prostriedkov na rýchlosť.
Ak potrebujete ďalšie informácie, neváhajte nás kontaktovať.
Q) Je ukladanie do vyrovnávacej pamäte prehliadača bezpečné?
Odpoveď: Áno, ukladanie do vyrovnávacej pamäte prehliadača je vo všeobecnosti bezpečné, pretože ukladá statické aktíva na zariadení používateľa. Je však dôležité implementovať správnu politiku overovania a vypršania platnosti vyrovnávacej pamäte, aby sa zabezpečilo, že používatelia nedostanú zastaraný alebo potenciálne nezabezpečený obsah.
Q) Aké sú rozdiely a výhody ukladania do vyrovnávacej pamäte prehliadača a vyrovnávacej pamäte servera?
A) Ukladanie do vyrovnávacej pamäte prehliadača ukladá statické aktíva na zariadení používateľa, čím sa skracuje čas načítania pri opakovaných návštevách, zatiaľ čo ukladanie do vyrovnávacej pamäte servera ukladá webové stránky alebo iný obsah na server, čím sa urýchľuje doručovanie obsahu všetkým používateľom. Obe metódy zvyšujú výkon, ale fungujú v rôznych fázach doručovania obsahu.
Q) Aké sú ďalšie stratégie zvyšovania výkonu?
A) Okrem ukladania do vyrovnávacej pamäte zahŕňajú ďalšie stratégie optimalizáciu obrázkov, minifikáciu súborov CSS a JavaScript, pomalé načítanie zdrojov a využitie siete na doručovanie obsahu (CDN) na zníženie latencie a skrátenie času načítania.
