Weboldal betöltésének gyorsítása

A valoskilometer.hu oldal kezdőlapjának betöltési ideje időnként fájóan lassú volt, így megnéztem milyen lehetőségeim vannak az oldalbetöltődés gyorsítására. A lassulás egyik oka, hogy az AppEngine (szinte) minden kérésre új context-et hoz létre (ami kb 1 percig él), de ezen csak a fizetős szolgáltatások igénybevételével lehet jelentősen javítani ("Always-on"). Trükk elvileg van rá, de sokat nem segít az sem, bár ártani sem fog. Minden percben csinálunk egy servlet hívást, így mindig van élő context és nem kell újratölteni.

   
    /ping
     Ping a blank page
     every 1 minutes
   

Sajnos ez önmagában nem jelent számottevő gyorsítást, de a hívások átlag válaszideje csökkenhet tőle. A módosítás után még mindig lassú az oldal:

Analytics - Webhelysebesség
/analytics/web/#report/content-site-speed
"Oldal átlagos betöltési ideje (másodperc): 18,47 s (/home)"


Labs - Webhely teljesítése
/webmasters/tools/labs-site-performance
"Az Ön webhelyének oldalai átlagosan 5,2 másodperc alatt töltődnek be (frissítve: 2011.11.06.). Ez lassabb, mint a webhelyek 76%-ának esetében."

Diagnosztika - Feltérképezési statisztika
/webmasters/tools/crawl-stats
"Átlagos: 517 ms"

A kiértékelések közötti sebességkülönbséget a HTML oldalba beágyazott egyéb (vizuális vagy háttér) elemek letöltésének lassúsága adja. Ezek az elemek jellemzően az oldalhoz közvetlenül kapcsolódó és az iFrame-ekbe ágyazott css, js és képfájlok (jpg, png). A lassúlás további kiértékeléséhez a Google Online webhely-tartalom analizáló eszközét használom.

PageSpeed
Az elemzés eredménye az optimalizálás előtt:
"The page Valós Kilométer: Online szervizkönyv ... got an overall Page Speed Score of 76 (out of 100)."

High priority. Egyesítsen képeket CSS sprite elemek formájában, Használja ki a böngésző gyorsítótárazását
Medium priority. Erőforrások kiszolgálása ugyanarról az URL-ről, Engedélyezze a tömörítést, JavaScript-elemzés elhalasztása, Átméretezett képek kiszolgálása
Low priority. Optimalizálja a képeket, Soron belüli kis JavaScript, Átirányítások számának csökkentése, Stílusok és szkriptek sorrendjének optimalizálása, JavaScript csökkentése, Gyorsítótár-érvényesítő megadása, HTML lekicsinyítése, Kicsinyítse le a CSS-t, Tegye a CSS-t a dokumentum fejlécébe, Adjon meg Vary: Accept-Encoding fejlécet, Távolítsa el a lekérdezési karakterláncokat a statikus erőforrásokból

Ebből a lényeges az "Egyesítsen képeket CSS sprite elemek formájában" feladat, mert a többi főként a kiszolgáló oldalon jelentkezik (AppEngine), másrészt a harmadik féltől bevont tartalomnál (Google, YouTube, Libri). A főoldalon 27 db kép van, ami ebben a formában 27 db plusz requestet generál (ez kb 27 * 100-200 ms = 2700 - 5400 ms), ami valószínűleg a lassú betöltés fő okozója.

Ez azt jelenti, hogy a HTML kód 500 ms-os betöltési ideje átlagosan 5000 ms-ra lassul a járulékos letöltések miatt. Ez valójában csak elsőre tűnik nagy problémának, ugyanis az oldal fejlesztésekor is előjött már ez a gond, de akkor nem a CSS sprite-ok, hanem a gyorsítótárazás felé mentem el ("Használja ki a böngésző gyorsítótárazását"). Így ez a lassú betöltés csak az első alkalommal jelentkezik, utána a böngésző már nem tölti le csak a HTML lapot (ha változott). Ez a beállítás az "appengine-web.xml" fájlba került be:

 valoskilometer
 1
 
  
  
  
  
 

 
  
  
  
  
  
  
  
  
  
  
  
 

JMeter

A JMeterrel kimérve látszik, hogy a HTML oldalak nem töltődnek sokáig (417 ms), de a kapcsolt tartalom igen (11901 ms). A kezdőoldalon 37 db kép van amit az első alkalommal egyesével tölt le a böngésző. Ezeket 3 csoportra bontva (nagyságuk szerint) és 3 képfájlba egyesítve (CSS sprite) sokkal gyorsabb eredményre számíthatunk. A CSS sprite alkalmazása után az 51 request-ből 17 lett (azaz 37 képből 3 db), így az 5 mp-es átlagos betöltési idő jelentősen lerövidülhet.

A módosítás előtt majdnem 12 mp volt a főoldal betöltési ideje (a context betöltéssel együtt), ha minden képet külön töltött le a böngésző.

A módosítás után kevesebb kérésszám, gyorsabb betöltési idő eredményezett (7 mp) és javult a PageSpeed értékelés is (76 --> 78).

A végleges eredményt hónapok múlva lehet látni a módosult statisztikából, de várhatóan 30-50% gyorsulás következhet. A következőkben a PageSpeed által körülírt problémákat igyekszem javítani.