notification icon
Ne maradj le semmiről! Iratkozz fel értesítéseinkre!

Weblapok letöltési sebességének növelése

hirdetes

Weblapok letöltési sebességének növelése 1. rész

Döbrentei István programozó
Pinterest logo

KÖVESS MINKET

PINTERESTEN

A Yahoo performancia fejlesztői csapata összefoglalta és kategorizálta, hogyan tudjuk weblapjaink letöltésének sebességét gyorsítani. Úgy gondolom elég fontos, hogy a valamilyen módon a látogató által megtalált weblapokat hatékonyan is szolgáljuk ki. Könnyen beláthatjuk, hogy a marketing szempontból sikeresen eladott oldalak a hatékony működés nélkül hamar elvesztik a látogatóikat, ezért nem árt, ha tisztában vagyunk a sebességnövelés gyakorlati oldalával is. A cikk első részében a tartalmakat érintő gyakorlati megoldásokat írom le:

Letöltési sebesség

A gyakorlati tanácsok 7 nagy kategóriába sorolhatóak:

Tartalmakat érintő tanácsok

  • A http kérések minimalizálása (MXHR használata)

Az idő nagy része a lapletöltésekkel megy el, tehát a fő szempont ennek az időnek a csökkentése.  Ha ezeknek az összetevőknek a számát csökkentjük, akkor kisebb lesz a lap lehívásához és összeállításához szükséges idő. Csökkentsük a http kérések számát annyira amennyire csak lehetséges. Gyűjtsünk mindent, ha lehet 1 fájlba. A kép lekérések számának csökkentésére használjunk css spriteokat. Több képek kombinálása egy képbe image mapek segítségével szintén javítja a sebességet. Az első látogató 40-60% üres cache-el érkezik az oldalra! Kulcsfontosságú, hogy számukra az oldal betöltése gyors legyen! Az új megoldás neve MXHR (Multipart XMLHTTP Request). Lényege, hogy a cache nélküli szerver felé menő kéréseket  1 HTTP kéréssé gyűjti össze. Majd ezt küldi el a szervernek, aki válaszol rá. A kliens pedig a választ azonnal feldolgozza, beillesztve a DOM -ba. Így többszörösére növelhető a megjelenítés sebessége a kliens oldalon.

  • DNS keresési idő csökkentése

A DNS a hostneveket összerendeli az ip címekkel, akárcsak a telefonkönyv, ahol az embereket kötjük össze a telefonszámukkal. Ez a kérés időbe telik. Ez általában 20-120 milisecond. A böngésző addig nem tud semmit csinálni, amíg ez nem történik meg. A név-ip összerendelések szintén eltárolódnak az ideiglenes tárolóban mind szerver mind pedig kliens oldalon is. Az Internet Explorer alapértelmezetten 30 percenként, a Mozilla Firefox 1 percenként frissíti ezeket. Tehát ha a DNS összerendelések idejét lecsökkentjük úgy, hogy nem használunk egyedi neveket, akkor viszont a párhuzamos letöltéseket korlátozzuk. Itt kompromisszumot kell kötni és az előnyös mértéket kiválasztani.

hirdetes
  • Átirányítások mellőzése

A 301 és a 302 -es fejlécben használatos kódok. Ha a lekért html és a látogató közé átirányítást helyezünk, ez rontja a felhasználói élményt és időbe is telik. Ha lehet kerüljük el. Több módja is lehetséges. (meta refresh, javascript) de ahol lehet használjuk a 3xx HTTP státusz kódokat.  Szintén pazarló lehet ha pl nem kezeljük az url végén a / jelet. Apache esetében alias, mod_rewrite,  vagy DirectorySlash direktíva használatával ezt ki tudjuk küszöbölni.

  • Ajax hívások ideiglenes tároló használatával

Az Ajax hívások esetében is fontos, hogy alkalmazzuk az ideiglenes tárolót, ha lehetséges. Növelhetjük a sebességet, ha csak akkor küldjük el az adatot a szervernek, ha valóban szükséges és változás történt.

  • Utólag betöltött komponensek

Az eljárás lényege, hogy először az oldal jelenjen meg majd később olyan elemek, amelyekre szükség lehet, de nem láthatóak. Így az oldal megjelenítése gyors, míg a betöltése az egyes komponenseknek a háttérben történik a felhasználó tudta nélkül.

  • Előre betöltött komponensek

Az előző ellenkezőjének tűnhet, de más céllal. A komponensek előre betöltésével kihasználhatjuk a böngésző tétlen állapotát. Feltételezve hogy bizonyos elemekre a böngészés során szükség lesz és mivel ez már az ideiglenes tárban van a letöltés gyorsabb lesz.

  • DOM elemek számának csökkentése

Egy összetett oldal letöltése több byte, de azt is jelenti, hogy a feldolgozása is több időt vesz igénybe, mert több DOM elemet tartalmaz. Nem mindegy, hogy egy eseménykezelőnek 500 vagy 5000 elemen kell végigmennie.

  • Komponensek domainek közötti megosztása

A párhuzamos letöltések gyorsítanak a lapletöltésen. Ügyeljünk, hogy 1 domain-en belül ne legyen több mint 2-4.

hirdetes
  • IFramek használatának minimalizálása

Segítségével a szülő dokumentumokba tudunk beszúrni tartalmakat. Fontos megérteni a működésüket, mert hatékonyan így tudjuk felhasználni.
előnyeik: Segíti a másik lassú rendszerből a megjelenítést (hirdetések), security sandbox, párhuzamos scriptletöltés
hátrányaik: költséges, főleg ha üres, blokkolja a lapbetöltést, nem szemantikus

  • 404-es üzenetek kezelése

A HTTP hívások költségesek, főleg ha szükségtelenek. Pl: egy le nem kezelt 404-es üzenet, ami a felhasználói élményt rombolja. (A szerver fogadja a hívást de nem tudja mit kell tennie.)

 

A szerver oldalt érintő beállítások

  • Tartalom szolgáltató hálózatok
  • Elévülő vagy Cache vezérelő fejlécek
  • Gzip komponensek
  • ETagek beállításai
  • A buffer kiürítése korábban
  • Ajax hívások GET -tel

 

Sütik használatának szabályai

  • A süti méretének csökkentése
  • Süti mentes domainek használata

 

Stíluslapok alkalmazásai

  • Stíluslapok felülre helyezése
  • Kifejezések mellőzése a stíluslapokban
  • Az Import működése
  • Filterek használatának kerülése

 

Javascript

  • Script alulra helyezése
  • Scriptek külső fájlokba helyezése
  • Felesleges kódrészek eltüntetése
  • Kód duplázások kiszűrése
  • DOM használat minimalizálása
  • Hatékony eseménykezelők alkalmazása

 

Képek

  • Képek optimalizálása
  • CSS sprite-ok optimalizálása
  • Kép átméretezése HTML –ben
  • Favicon használata

 

Mobil eszközök figyelembe vétele

  • Komponens mérete 25k alatt legyen
  • Komponensek

Ha tetszett ez a cikk, oszd meg ismerőseiddel, kattints ide:

MEGOSZTÁS MEGOSZTÁS MEGOSZTÁS

Ezek is érdekelhetnek

hirdetes

Szótár

mérõeszköz

mérõmûszer, szoftver, etalon, anyagminta, segédberendezés, vagy ezek kombinációja,... Tovább

copytesztelés

Egy reklám tesztelése és hatásának mérése a célcsoport körében. Tovább

Tovább a lexikonra