fbpx

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:

Autoptimize

Async Javascript

Cache Enabler

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

A weboldalon cookie-kat ("sütiket") használunk, hogy a legjobb felhasználói élményt nyújthassuk látogatóinknak. A cookie beállítások igény esetén bármikor megváltoztathatók a böngésző beállításaiban.

Adatvédelmi beállítások elmentve!
Adatvédelmi beállítások

Amikor meglátogat egy webhelyet az tárolhat vagy lekérhet információkat a böngészőben, főként sütik formájában. Itt beállíthatja személyes cookie szolgáltatásokat.

Ezek a cookie-k szükségesek ahhoz, hogy a webhely működjön, és nem kapcsolható ki a rendszerünkben.

Az oldal működtetéséhez az alábbi technikai cookie-ek szükségesek
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Összes tiltása
Összes engedélyezése