Weboldalon megjelenő képek gyorsítótárazása

A weboldalakon használt képek ritkán változnak. Ezeknek a gyorsítótárazását a látogató böngészője elvégezheti, így amikor újralátogatja az adott weboldalt, a képeket nem kell újra letölteni, mivel azokat a böngésző a gyorsítótárból meg tudja jeleníteni.

A weboldalakat elemző eszközök (például Google PageSpeed insight, GTmetrix, stb...) gyakran megköveteleik az alábbiak meglétét.

A felhasználás sokszínűségéből adódóan a webtárhelyeken nincs alapértelmezett lejárat definiálva, ezt a webtárhely tulajdonosa tudja egyszerűen beállítani.

Milyen képekről van szó?

A gyorsítótárazás egy adott elnevezésű képre vonatkozik, tehát például a főoldalon megjelenik "foto1.jpg" néven egy kép, akkor azt a böngésző elmenti. Ha egy új oldalra később kikerül egy "foto2.jpg", akkor azt a böngésző letölti és elmenti. A gyorsítótárazás akkor tud problémát okozni, ha a foto1.jpg fájl módosításra kerül (ugyanazzal a névvel felkerül egy új fájl), ilyen esetben a böngésző a régi képet jeleníti meg.

Mi erre a megoldás?

Célszerű a képek mögé egy véletlenszerűen generált szöveget illeszteni (? -el elválasztva), például: "foto1.jpg?jj3291za" és minden alkalommal amikor a kép változik ezt a szövegrészt frissíteni. Így a gyorsítórázas használható és a képek is bármikor módosíthatók anélkül hogy a böngészőkben "beragadna" az.

Hogyan lehet a képek és egyéb fájlok gyorsítótárazását beállítani a tárhelyen?

A tárhelyeken a .htaccess fájl használatával lehet módosítani a képek és egyéb fájlok gyorsítótárazásának engedélyezését.

  1. .htaccess megnyitása szerkesztésre

    Csatlakozzon a tárhelyhez FTP / SSH segítségével, majd nyissa meg egy szövegszerkesztőben a .htaccess elnevezésű fájlt (ha a fájl nem létezik még, akkor hozza létre azt)

  2. Gyorsítótárazás beállítása

    A fájl végére új sorban kezdve helyezze el az alábbi sorokat:

    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 2 days"

    A fenti sorok segítségével a böngésző 1 évre módosítja a képek, css és javascript fájlok érvényességét, továbbá 2 napra állítja minden más fájlhoz tartozó gyorsítótár érvényességi idejét. A példában használt lejárat tetszés szerint módosítható.