Gzip tömörítés – gyorsítsd a honlapod

A Gzip tömörítés (Gzip compression) igencsak felgyorsíthatja a lapodat letöltődési sebességét. Azt ugye talán mondani sem kell, hogy a lapok betöltődési ideje, sebessége egyre fontosabb szempont lesz a jövőben (és már most is az). Nem a látogatók számára (bár a gyors lapokat ők is jobban szeretik), de pl. az egyik rangsorolási szempont is lett a Google részéről, úgyhogy SEO terén is figyelembe kell venni.

A lapok gyorsításának, mármint gyorsabb letöltődésének egyik módja pl. az, hogy ha a usereket rávesszük, fizessenek elő gyorsabb netre. Magam részéről ezt egy szimpatikus megoldásnak tartom. :)

Másrészről gyorsíthatunk mi is a lapunkon pl. úgy, hogy elősegítjük a a kevesebb adat letöltését (kevesebb adat meg ugye gyorsabban kerül a user gépére). Itt jön a képbe a Gzip tömörítő alkalmazás, amit eredetileg unix rendszerekre írtak, de ma már mindenhol elterjedt. A szerveren ez a program tömöríti be a weboldalt, majd ilyen tömörített formátumban kerül letöltésre a felhasználó gépére.

A tömörítéshez 2 dolog kell:

  • A böngésző küldje el az infót a szerver fele, hogy ő tudja a gzip tömörítést
  • a böngésző jelzésére a szerver tömörítse a tartalmat, majd ezt a tömörített tartalmat küldje el a böngésző számára

Naygjából ennyi, amit fontos tudni erről. A legtöbb modern böngésző tudja a gzip tömörítést, úgyhogy e téren nincs gond. A legtöbb szerver is támogatja, csak be kell kapcsolni (lsd ehhez lentebb a kódot).

Gzip tömörítés – .htaccess

A .htaccess fájlba az alábbi kódrészletet el kell elhelyezni annak érdekében, hogy a tömörítést aktiváld:

1
2
3
4
5

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

Ha nem működik vagy gond van, lépj kapcsolatba a rendszergazdáddal.

Egy másik .htaccess megoldás

A ### oldalon található egy másik – a fentinél kifinomultabb kód, mely a lap gyorsítását szolgálja:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<IfModule mod_deflate.c>
# Insert filter
SetOutputFilter DEFLATE
 
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
 
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
 
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
 
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip
</IfModule> 
 
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^(.*)\.(\d+)(_m_\d+)?\.([^\.]+)$    $1.$4    [L,QSA]
</IfModule> 
 
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
</IfModule>

Ez már a lejárati időket is beállítja, amiről itt a lapon is van már egy írás, de nem akartam szétdarabolni a mintakódot. A showslow.com oldalán olvashatsz még róla kicsit.

Hugyecz Görgy (Harder)
Hugyecz Görgy (Harder)
http://blog.harder.hu
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.
Facebook Linkedin

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

13 HOZZÁSZÓLÁS

  1. Azért nem egészen így megy a dolog :)

    Van 1-2 böngésző ami nem támogatja a tömörítést szóval azokra nem árt figyelni… Ez az apache doksiból van:

    ——————————————————-

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

     
<Directory /path/to/dir/>
 
SetOutputFilter DEFLATE
 
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
 
#Skip browsers with known problems
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
 
Header append Vary User-Agent
</Directory>

    ———————————————————–

    emellett a php kimenetet is érdemes tömöríteni:

    if(!ob_start(„ob_gzhandler”)) ob_start();
    echo $text;

    Ezt a végére kell tenni is minden megjelenítendő tartalomnak a $text változóban kell lennie. Ez egyben ellenőrzi is, hogy a böngésző támogatja-e a tömörítést vagy sem.

  2. Pár napja én is játszottam ezzel és belefutottam abba a problémába, hogy az apache a deflate, illetve gzip modulokat nem tartalmazta. A megoldás a következő lett:
    .htaccess-be:

    <FilesMatch ".js$">
AddHandler application/x-httpd-php .js
php_value default_mimetype "text/javascript"
</FilesMatch>
<FilesMatch ".css$">
AddHandler application/x-httpd-php .css
php_value default_mimetype "text/css"
</FilesMatch>
<FilesMatch ".(htm|html|shtml)$">
AddHandler application/x-httpd-php .html
php_value default_mimetype "text/html"
</FilesMatch>
php_value auto_prepend_file /gzip.php/abszolut/elerese/gzip.php

    A gzip.php tartalma pedig:

    if(isset($_SERVER['HTTP_ACCEPT_ENCODING']) && substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start('ob_gzhandler');
else ob_start();

  4. Nem azért lassú mert nagy az adat mérete, hanem mert sok apró fájlból áll a honlap. Tele van kis részekből. Egyszerűbb, kompatibilisebb és gyorsabb megoldás az egész honlap apró elemekből álló dizájnját egy nagy png vagy jpeg képre montírozni, majd css segítségével a kis apró cuccokat kivágogatni belőle.

  5. daniel, amiről Te írsz, az a CSS sprite, de több dolgot is összekevertél vagy hibásan vontál össze: először is gzip a téma, aztán a honlap sok apró fájljáról írsz majd a végén megoldásként egy részletet emelsz ki (a képek optimalizálását). Nem rossz amit írsz, csak nem szeretném ha a kevésbé hozzáértők azt hinnék, hogy a képek összevonása a megoldás a gzip helyett.

  6. Harder: daniel-nek végülis igaza van, illetve amit írt az részben passzol a fenti íráshoz is, ugyanis a kevesebb fájl kevesebb http kérést jelent. Emellett kevesebb fájl utazik a weben (pl 20 png fejléc helyett csak 1). Összességében ez pedig gyorsítja a weboldal letöltését, habár az tény, hogy ez nem a kis 10-20e fős (vagy ez alatti) látogatottságú oldalaknál jelent érdemi változást, szemben a gzip-el, ami 40-80%-os sávszél csökkenést is jelenthet, és ez tényleg sokkal látványosabb, mint a 0,5-1KB-nyi spórolás/oldallekérés.

  7. Fefy,
    persze, azért is írtam hogy nem rossz amit ír, csak számomra pl. a css sprite használata ugyanúgy 1 megoldás az optimalizálás során, mint pl. a gzip vagy a kód tömörítése vagy a JS-ek összevonása stb..

  8. Ezt az elképesztő jó leírást találtam a neten. Olvassátok el az egészet és akkor univerzálisan érteni fogjátok a .htaccess beállításokat. Én mióta elolvastam érzem úgy, h már nem csak a sötétben tapogatózok.. Szóval ez az:
    http://htaccess.petertoth.hu/

  9. Valaki meg tudná mondani, hogy az alábbi árirányítás miért is kell a gyorsításhoz?

    RewriteEngine on
    RewriteRule ^(.*)\.(\d+)(_m_\d+)?\.([^\.]+)$ $1.$4 [L,QSA]

  12. Én agy pluginnal oldottam meg, de nem lett sajnos jó az eredmény. egy SEO tesztelős oldal pl hibának dobja. Nem is teljesen értem sajnos. A cikket köszönöm, még elolvasom párszor.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét