SEO audit – gyorsítótárazás hiánya a JavaScript és CSS fájloknál

Overview


A SEO auditok során az „uncached JavaScript and CSS files” probléma akkor jelentkezik, ha a böngésző gyorsítótárazása nincs megadva a válaszfejlécben (response header). Ha engedélyezzük a böngésző gyorsítótárát a JavaScript- és CSS-fájlokhoz, akkor tárolhatják és újra felhasználhatják ezeket az erőforrásokat anélkül, hogy újra le kellene tölteniük őket az oldal lekérésekor. A böngésző így kevesebb adatot tölt le, ami csökkenti az oldal betöltési idejét.

Amikor egy url-re kattintunk vagy begépeljük a böngésző címsorába, egy http kérés (Hypertext Transfer Protocol request) kerül elküldésre a szerverkiszolgáló felé, ahol a weboldalra vonatkozó válaszok (http response) érkeznek vissza. Az alapinformációkon felül a http válasz fejlécében (response header) kell szerepelnie a JavaScipt és CSS fájlokra vonatkozó gyorsítótárazási szabályoknak.

A böngésző gyorsítótárának kihasználása


gyorsítótárazás

A böngészőt a http válaszadás során utasítani kell, hogy képeket, CSS és JS fájlokat tároljanak a gyorsítótárukban, hogy ne kelljen újra és újra ugyanazt a tartalmat, vagy programkódot betölteni (ezzel lassítva az oldalakat). A weboldalon szereplő képek, stílusfájlok sok esetben ugyanazok, ha egy kicsit belegondolsz, akkor ez nagyon is érthető. Például egy weboldal logója nem változik, minden oldalon ugyanott és ugyanolyan stílussal van felvértezve általában. Így valójában a böngészőknek nem kell minden oldalról letölteniük, elegendő lenne egyszer, az első látogatáskor.

Hogyan tudom a böngésző gyorsítótárazást bekapcsolni?


cache beállítás

.htacces használatával

Ha a webszerver Apache-ot használ, és engedélyezi a felülbírálásokat, akkor a .htaccess file-ban az alábbi kóddal lehet a képek, css-ek, és js file-ok gyorsítótárazásának beállítását elvégezni. Az igényeknek megfelelően vedd figyelembe, hogy milyen hozzáférési időszakokat állítasz be.

## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" ## EXPIRES CACHING ##

A hozzáférési idő arra utasítja a böngészőt, hogy az első hozzáféréstől számított x hónapig vagy évig gyorsítótárazza a kép/CSS/JS-fájlokat. Ha a JS és CSS fájlok módosulnak, akkor mindenképpen nevezd át őket, különben a visszatérő látogatók x hónapig nem fogják látni a változtatásokat.

Nginx használata

Az Nginx nyílt forásskódú szoftver alkalmazása egy nagyon gyors alternatíva az apache-hoz. A következő sorokat kell hozzáadni a webhelyedhez tartozó Nginx conf fájlhoz, hogy engedélyezd a böngésző gyorsítótárazását.

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 30d; }Ezzel a beállítással az összes fenti fájlkiterjesztés 30 napig gyorsítótárazva lesznek.

Wordpress oldal esetén

Ha WordPress alapú webhelyet futtatsz, akkor a .htaccess file- ban vagy manuálisan helyezed el a gyorsítótárazási szabályokat, vagy egy minőségi bővítményt (cache plugin) telepítesz, (pl. WP Rocket vagy WP Fastest Cache). Ezek a programok egy nagyon hasonló direktívát adnak a .htaccess fájl-hoz – sok más hasznos beállítás mellett (feltéve, hogy megfelelő engedélyeket adsz a bővítménynek!).

A böngésző gyorsítótárazás használata esetén

  • Csökken a http kérések és válaszok száma az oldalletöltés során
  • Gyorsabb oldalbetöltést eredményez

Related Case Studies


alt-leírás

SEO audit – Hiányzó alt leírás a képeknél

Az „img” címkéken belül található alt attribútumokat a keresőmotorok használják a képek tartalmának megértésére. Ha ezeket az alt leírásokat nem definiáljuk megfelelően a képfeltöltés során, akkor képkereséskor rossz rangsorolást fog kapni a találatoknál, vagy a kép egyáltalán meg sem fog jelenni.

VIEW DETAILS
duplikált oldalcím és h1 tag

SEO audit – Duplikált oldalcím és h1 tag

Nem jó megoldás ha az oldal címét (title), valamint a h1 címke (tag) tartalmát meggismételjük a fejlécben. Ha ezek megegyeznek, akkor a keresők túloptimalizáltnak tekintheti az oldalt, de a legfontosabb, hogy ugyanazon tartalom használata esetén elveszítjük a lehetőséget más releváns kulcsszavak beépítésére.

VIEW DETAILS