Weboldal sebesség optimalizálás
Weboldal sebesség optimalizálás alapok
Ahhoz, hogy a lehető legtöbb látogatót kiszolgáljuk, célszerű oldalunkat olyan gyorssá alakítani, amilyen gyorssá csak lehet. Különösen igaz ez a cikk megírásakor (2017 február), amikor a mobil eszközök elterjedtsége magas, több weboldal esetében ez már 50% fölötti arányt jelent.
A mobil eszközök esetenként kisebb kijelző felbontással, de egészen biztosan kisebb kijelző mérettel rendelkeznek a hagyományos személyi számítógépektől. Processzor és memória erőforrásaik sem olyan mértékűek, mint az asztali számítógépek, ezért fontos, hogy a lehető legkevesebb időt töltsék nagy méretű képek átméretezésével, illetve azoknak a letöltésével.
Mielőtt bármilyen változtatást eszközölnénk tárhelyünkön, készítsünk róla teljes mentést a cpanel backup funkciójával vagy más választott eszközzel!
Időnként egyébként is célszerű, fájlokat érintő módosítások előtt pedig kiemelten ajánlott.
Teszt alanyként a tudasbazis.hostit.hu oldalt választottuk, célszerű és időszerű is volt már ennek az oldalnak az optimalizálása is. Az oldal tulajdonságait a http://webpagetest.org segítségével ellenőrizzük. Az oldal optimalizálását egyelőre kizárólag a főoldalra korlátozva tesszük meg. Innen indulunk:
Tartalom tömörítés bekapcsolása
Első lépésként a cpanelre lépjünk be és a szoftver / Webhely optimalizálása opciót válasszuk ki, adjuk meg a tömöríteni kívánt tartalmat és kattintsunk a beállítások frissítése gombra.
A képen látható listában a html, szöveges fájlokat és xml fájlok tömörítését engedélyezzük az alsó opcióval. A teszthez most a középső, mindent tömörítünk opciót választjuk ki.
Amennyiben az oldalon sok kép van és azok már optimalizáltak, akkor vélhetően jobb eredményt érünk el a megadott mime típusok tömörítésével. Ennek oka az, hogy egy jól optimalizált kép már tömörített, tovább tömöríteni általában nem lehet, viszont a szerver oldali be és a kliens (böngésző) oldali kitömörítés lassítja az oldal megjelenítését.
Nézzük az eredményt:
A First View / Load Time jobb, de a First Byte rosszabb lett. Nem túl nagy az eltérés, lehet mérési hiba, amit sok teszt futtatásával és azok átlagának használatával lehetne egyértelműsíteni, de ennél a pontnál ez vélhetően több időt venne el, mint amennyi hasznot jelentene, ezért elfogadjuk ezt az eredményt és mérünk a másik opció használatával is.
Annyival szükséges kiegészítenünk, hogy ne kizárólag text/html text/plain text/xml tartalmat tömörítse, ugyanis a css és js fájlok, amik oldalunk működését biztosítják, hasonlóan jelentős mérettel rendelkezhetnek adott esetben, ezért a következő típusokat ajánljuk tömörítésre:
text/html text/plain text/xml text/css application/x-javascript application/javascript
Az eredmény, jobb First View / Load Time és jobb First Byte:
A tömörítéshez(compress transfer) A jelzést kapunk, ez az eddigi legjobb mérési eredmény, maradhatunk ennél.
Képek tömörítése saját eszközünkön
Nézzük a compress image részt vagyis a képek tömörítését, kiinduló helyzet:
A teszt szempontjából nem megfelelő képek listázását akkor láthatjuk, ha az oldal felső részén a Compress Image gombra kattintunk.
A felsorolt képek optimalizáláshoz az irfan view programot használjuk. Több alkalmas program is elérhető, mindössze azért választottuk ezt, mert gyors, kis méretű, ingyenes, bárki számára elérhető és már windows 3.1 -re is létezett működő változata (http://www.irfanview.com/history_old.htm).
A letöltéshez a 64bites verziót és a 64bites pluginokat ajánljuk: http://www.irfanview.com/64bit.htm
Az irfanview és a pluginok feltelepítése után az optimalizálandó képeket letölthetjük tárhelyünkről ftpvel a cpanel file kezelőjével. Ezután nyissuk meg a képet file/open , eztuán a save for web menüpontot válasszuk ki. Ez a menüpont csak akkor elérhető, ha a pluginokat is feltelepítettük.
A megjelenő ablakban beállíthatjuk a teszt által javasolt progressive jpeg -et (ezt akkor válasszuk, ha jpeg fájlt nyitottunk meg), illetve van lehetőség a batch (kötegelt) feldolgozásra is, amivel több fájlt optimalizálhatunk egyszerre egy mappán belül. A save gombbal menthetjük a képet. Amennyiben van teljes másolatunk a weboldal fájljairól, ahogyan ennek készítését a leírás elején javasoltuk, akkor felülírhatjuk a tárhelyen található fájlunkat az optimalizált fájlunkkal.
A fájlok cseréje után nézzük meg, tetszik-e nekünk az oldalunk. Amennyiben valamelyik kép optimalizációja túlzott, vagyis már nem tölti be a kép a neki szánt szerepet, cseréjük vissza az eredetire vagy tovább állíthatjuk a kép minőségét a quality csúszkával.
Amennyiben mindent rendben találunk lemérhetjük, sikerült-e javítanunk oldalunk teljesítményét:
Láthatóan javult az oldal sebessége. Mindössze két beállítás maradt: a cache static content és a first byte time.
Ez utóbbi sajnos elsősorban az oldal kódjától függ, programozói tudás nélkül sok esetben nem fogunk tudni ezen javítani. Nyilvános forráskódú keretrendszerekhez általában van valamilyen cache plugin, célszerű egyik-másikat kipróbálni valamilyen kieső időben és alkalmazni, amennyiben javít az oldal sebességén.
Ha kíváncsiak vagyunk a szerver válasz idejére, akkor teszteljük az oldalt valamilyen statikus fájlal pl .txt kiterjesztésűvel.
Statikus tartalom tároltatása a böngészővel
Amelyik böngésző már letöltötte oldalunkat, annak tartalmát el is tárolhatja egy ideig, így legközelebb nem kell újra letöltenie.
A cache static content javítható beállítás, és alapvetően nem is túl bonyolult, mindössze a módosítandó fájlt szükséges megkeresnünk.
Ez a fájl a cpaneles tárhely csomagok esetén a public_html mappában található .htaccess fájl. Amennyiben nem látszik a fájl a cpaneles fájkezelőben, kérjük tekintse meg korábbi leírásunkat a rejtett fájlok megjelenítéséről.
A .htaccess fájlnak várhatóan lesz valamilyen tartalma, ha nem létezik vagy ha üres, létrehozhatunk egy ilyen fájlt. Amennyiben készítettünk biztonsági mentést fájljainkról, akkor most nyugodtan szerkeszthetjük.
Ezt a kiegészítést javasoljuk a .htaccess fájl elejére:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType image/bmp A31536000
ExpiresByType image/gif A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/png A31536000
ExpiresByType image/tiff A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/x-font-ttf A31536000
</IfModule>
A tartalma nagy vonalakban annyi, hogy a php fájlok kivételével a legjellemzőbb fájltípusok számítógépen tárolhatóságának idejét a lekérdezéshez képest 1 évre engedélyezi. Ennek megfelelően a böngészők tárolni is fogják a tartalmat egészen addig, amíg be nem telik az eltárolható tartalomhoz felhasználható hely az eszköz merevlemezén. Kivétel azok a böngészők, amelyeknél tiltott a fájlok tárolása valamilyen oknál fogva, mindenesetre ez már a kliens döntése, hogy megtartja-e vagy sem, a mi oldalunkról megadtuk rá a lehetőséget.
Ami ezután a beállítás után várhatóan módosulni fog a a repeat view, vagyis az oldal ismételt megtekintése érték. Ez utóbbi azért fontos, mert vélhetően több oldalon is használjuk ugyanazt a háttér képet vagy css vagy js fájlt, amit nem szükséges újra és újra az oldal böngészése közben letölteni, ha a böngésző eltárolhatta azt egy időre.
Lássuk az eredményeket:
Az előző állapothoz képest nem hoz látványos javulást, az azonban biztató lehet számunkra, hogy aki ma meglátogatta oldalunkat és holnap is megteszi, az várhatóan a repeat view(2.020s) szerinti oldal letöltési értékel fogja betölteni oldalunkat, ami a teljesen új letöltéshez(3.462s) képest még mindig számottevő gyorsulást hoz.
Összességében a kiinduló pont 4.982s (First View / Load time) értékéhez képest most 3.462s alatt töltődik be az oldal, tehát 30% -al gyorsabb lett a tudasbazis.hostit.hu oldal.
A webpagetest.org segítségével ezeket a beállításokat lehetett optimalizálni. Van azonban több oldal sebesség ellenőrző is, az egyik ilyen:
További sebesség elleőrző, optimalizáló oldalak linkjei
A másik a google teljesítmény ellenőrző rendszere:
https://developers.google.com/speed/pagespeed/insights/?hl=hu
Ezek segítségével tovább ellenőrizhetjük, illetve finomíthatjuk beállításainkat, amennyiben az aktuális eredményekkel még nem vagyunk elégedettek.
A kapott eredmények kiértékelése
Fontos!
A mért szám eredményeket elsősorban egymáshoz hasonlítsuk és amennyiben adott pillanatban nagyon rossz eredményt kapunk, kezeljük fenntartással a látottakat. Több oka is lehet annak, hogy egy böngésző a tengeren túlról (Dulles, VA) nem tudja gyorsan letölteni oldalunkat. Lehet az ellenőrző szerver, lehet a kiszolgáló szerver, lehet a kapcsolat a két szerver között is terhelt. Amennyiben nálunk az oldal gyorsnak mutatkozik, de a tesztek nem ezt mutatják, érdemes más ellenőrző oldalakat is igénybe venni.
Előző bejegyzés