Folytatva az előző cikkünket, (WordPress Google Pagespeed beállítása) most megmutatjuk hogyan lehet szinte tökéletes oldal betöltést és cache-elést elérni WordPress oldallal.
Hangsúlyozom ezek a beállítások webáruház esetén nem minden esetben megfelelőek, mert például a kosár oldal hibásan generálódhat le!
Röviden miért is szükséges a cache-elés (gyorsítás) a WordPress weboldalaknál. A válasz röviden javíthatjuk vele a felhasználói élményt és a Google is jobb helyezéssel honorálja ezt a pár beállítást, amit bárki megtud csinálni minimális WordPress tudással.
Cache-elés lényegében nem mást, mint pillanat felvétel a weboldalunkról, amit statikus html fájlként tárol el a tárhelyünk és ha megnyitjuk a weboldalt, akkor ezeket a fájlokat tölti be a böngésző. Így megspórolva azt az időt amig a szerver generálja a weboldalt a dinamikus állományokból. Ezzel a megoldással jelentősen csökkenthető a betöltési idő és a lekérések száma is. A cache pluginok tovább szolgáltatása a CSS és JS fájlok optimalizálása és egyesítése. Ha engedélyezzük ezt az opciót, akkor a bővítmény megpróbálja egy nagy fájlá alakítani a sok kisebb CSS és JS fájlt, amivel szintén a betöltési időt lehet csökkenteni, mert így nem kell a fájlokat keresgetni a szerveren, hanem egy fájlban letölti azokat a böngésző. Valóságban elég ritkán sikerült egy fájlba összegyűjteni minden adatot, de már az is javulás, ha pl. 45 CSS fájl helyett csak 5 nagyobb CSS fájlt kell mozgatni. Ugyan ez vonatkozik a JS fájlokra is.
Cache-hez szükségünk lesz 3 db ingyenes pluginra:
A 3 bővítmény telepítési és beállítási sorrendjét érdemes betartani, mert egymásra épül a működésük.
WordPress bővítménytárból telepítsük a plugin-okat, elsőként az Autoptimize bővítményt és kapcsoljuk be.
Beállítások:
Váltsunk át Advanced mode-ra (jobb felső sarok)
Pipáljuk be az alábbi opciókat:
Optimize HTML Code
Optimize JavaScript Code
Optimize CSS Code
Inline all CSS
Töltsük ki az alábbi mezőket ha nem töltené ki a bővítmény automatikusan:
Exclude scripts from Autoptimize: seal.js, js/jquery/jquery.js (ha nem lenne kitöltve)
Exclude CSS from Autoptimize: admin-bar.min.css, dashicons.min.css
Második plugin az Async Javascript
(Beállítások menü alatt találod a bővítményt)
Beállítások:
Pipáljuk be a Enable Async JavaScript-t opciót. Method-nál válasszuk az As Per Selected Method lehetőséget.
Lap alján engedélyezzük az együtt működést az Autoptimize pluginnel, pipáljuk be a Enable Autoptimize Support opciót és itt a Method-nál válasszuk az Async opciót.
Harmadik egyben utolsó bővítmény, amit használni kell a Cache Enabler. Ez a plugin nem igényel semmilyen beállítást
Negyedik lehetőség, amihez nem szüksége plugin, a htaccess fájlban a fájlok lejárati idejének beállítása. Ezzel a pár sorral tudjuk megmondani a böngészőnek, hogy melyik statikus fájlt mennyi ideig tárolja a böngésző gyorsító tárában és ha legközelebb felkeressük az adott WordPress oldalt, akkor ezeket a fájlok nem tölti le újra a böngészőnk, hanem a saját merevlemezen tárolt gyorsítótárából tölti be, ami lényegesen gyorsabb elérést tesz lehetővé.
Mi az alábbi lejárati időket állítjuk be a weboldalaknál:
(csak másold ki és illezd be a saját .htaccess fájlodba)
<IfModule mod_headers.c>
<FilesMatch „.(js|css|xml|gz)$”>
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault „access plus 10 seconds”
ExpiresByType text/cache-manifest „access plus 0 seconds”
ExpiresByType text/xml „access plus 0 seconds”
ExpiresByType application/xml „access plus 0 seconds”
ExpiresByType text/json „access plus 0 seconds”
ExpiresByType application/json „access plus 0 seconds”
ExpiresByType application/rss+xml „access plus 3600 seconds”
ExpiresByType application/atom+xml „access plus 3600 seconds”
ExpiresByType image/x-icon „access plus 31536000 seconds”
ExpiresByType image/gif „access plus 31536000 seconds”
ExpiresByType image/webp „access plus 31536000 seconds”
ExpiresByType image/png „access plus 31536000 seconds”
ExpiresByType image/jpeg „access plus 31536000 seconds”
ExpiresByType image/jpg „access plus 31536000 seconds”
ExpiresByType video/ogg „access plus 31536000 seconds”
ExpiresByType audio/ogg „access plus 31536000 seconds”
ExpiresByType video/mp4 „access plus 31536000 seconds”
ExpiresByType video/webm „access plus 31536000 seconds”
ExpiresByType text/x-component „access plus 31536000 seconds”
ExpiresByType application/x-font-ttf „access plus 31536000 seconds”
ExpiresByType font/opentype „access plus 31536000 seconds”
ExpiresByType font/woff2 „access plus 31536000 seconds”
ExpiresByType application/x-font-woff „access plus 31536000 seconds”
ExpiresByType image/svg+xml „access plus 31536000 seconds”
ExpiresByType application/vnd.ms-fontobject „access plus 31536000 seconds”
ExpiresByType text/css „access plus 31536000 seconds”
ExpiresByType application/javascript „access plus 31536000 seconds”
ExpiresByType text/javascript „access plus 31536000 seconds”
ExpiresByType application/javascript „access plus 31536000 seconds”
ExpiresByType application/x-javascript „access plus 31536000 seconds”
ExpiresByType application/x-shockwave-flash „access plus 31536000 seconds”
ExpiresByType application/octet-stream „access plus 31536000 seconds”
ExpiresByType font/truetype „access plus 1 year”
ExpiresByType font/opentype „access plus 1 year”
ExpiresByType application/x-font-woff „access plus 1 year”
ExpiresByType image/svg+xml „access plus 1 year”
ExpiresByType application/vnd.ms-fontobject „access plus 1 year”
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
ExpiresActive on
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject „access plus 1 year”
ExpiresByType application/x-font-ttf „access plus 1 year”
ExpiresByType application/x-font-opentype „access plus 1 year”
ExpiresByType application/x-font-woff „access plus 1 year”
ExpiresByType application/x-font-woff2 „access plus 1 year”
ExpiresByType image/svg+xml „access plus 1 year”
</IfModule>
Kasza Norbert
WordPress Szakértő
+36307337871
info@wpmaster.hu
