6 tipp, egy gyorsabb honlapért

A héten az egyik ügyfelemnek fel kell “turbozni” a weboldalát. Ezt elég jól sikerült teljesíteni, a YSLOW mérései szerint sikerült 4 másodpercel csökkenteni a betöltődési időt. Most megosztok veletek néhány tippet, amelyek segítségével viszonylag könnyedén gyorsítani lehet a sok kacat betöltését.

1. Valid HTML és CSS

Nem egy nagy dolog, egy hozzáértő 30 – 60 perc alatt képes validálni a HTML és CSS fájlokat egy átlagos méretű weboldal esetében. Mindenképpen érdemes ezt megtenni, ugyanis ha nem is sokat, de ez is gyorsít viszont nem elhanyagolható a seo illetve böngészőfüggetlenségre gyakorolt hatása sem.

2. GZIP tömörítés

Add hozzá ezt a kódot a .htaccess fájlodhoz és az összes html, txt, css, js, php, pl, jpg, png, gif kiterjesztésű fájlot GZIP tömörítésbe fogja elküldeni a szerver a böngészőnek. Az összes modern böngésző támogatja a GZIP -et, a fájlok méretét 50-55% -al, a betöltődési időt pedig 30-35% -al lehet így csökkenteni.

 apache | 
 copy code |
?
 
1
mod_gzip_on       Yes
2
mod_gzip_dechunk  Yes
3
mod_gzip_item_include file      \.(html?|txt|css|js|php|pl|jpg|png|gif)$
4
mod_gzip_item_include handler   ^cgi-script$
5
mod_gzip_item_include mime      ^text/.*
6
mod_gzip_item_include mime      ^application/x-javascript.*
7
mod_gzip_item_exclude mime      ^image/.*
8
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

3. JavaScript és CSS minify

Hihetetlen, de tény az, hogy a JS és CSS fájlok tartalmának 10-20 százaléka szóközből meg új sorból áll. Ezek a szóközök és új sorok, mind mind bitteket jelentenek, amit a böngésző le kell töltsön. Ha töröljük a szóközöket és minden tartalmat egy sorba szedünk, akkor csökken a fájl mérete és gyorsabb lesz a betöltődés. Ebben segít nekünk a YUI Compressor.

4. Csökkentsd a HTTP lekérések számát

Amennyiben lehetséges, az összes JS illetve CSS fájlot másold egy JS és egy CSS fájlba, ugyanis a böngészőknek van egy olyan jó tulajdonságuk, hogy egyszerre akár 50 fájlot is hajlandóak letölteni, aztán az user csak bámul, hogy a böngésző még mindig tölt…. és még mindig tölt… és még mindig tölt.. és már nem tölt, mert megunta és elkattintott. Tehát az összes JS egy JS -be, az összes CSS egy CSS -be legyen. Így csak 2 fájlot kell pluszba letöltsön.

5. Ne HTML -be vagy CSS -be méretezd a képeket

Minden képet, amit az oldaladon használsz, méretezz úgy át, hogy az pont akkora legyen, amekkorára szükséged van. Ne illessz be egy 1200×800 pixeles képet a HTML fájlba, majd stiluslappal megadd, hogy legyen csak 120×80 -as, ugyanis attól még letöltődik az az iszunyuan nagy fájl, és várhat rá a szerencsétlen user akár pár percet is. Hasznos dolog mondjuk egy PHP alapú kép átméretezőt írni és azt használni, de ne feledd ki belőle a cache funkciót sem, ha nem akarsz átesni a ló másik oldalára (szerver terheltség miatt lassú oldal).

6. CSS fent, JS lent

A CSS kódok htmlen belül mindig a HEAD részben szerepeljenek, azokat a javascripteket, amelyek ezt megengedik, célszerü közvetlenül a </body> tag elé helyezni, így ha egy script esetleg sokáig töltődne, attól az oldal még böngészhető, mert a többi tartalom már le van töltve.

Ha ügyesen használod az itt felsorolt tippeket, akkor akár 60% -al is csökkentheted az oldalad betöltődési idejét. Ez azthiszem eléggé szép eredmény, a látogatóid imádni fognak érte.

Ha van más ötleted, tipped, hogy hogyan lehet gyorsítani egy weboldal betöltődését, akkor kérlek írd meg hozzászólás formájában. Tedd ugyan ezt, akkor is, ha kérdésed vagy hozzáfűznivalód van az alábbi bejegyzéshez .