Weboldalunk betöltési sebességének javítása a Google PageSpeed Insights segítségével; Az idők változnak
A PageSpeed Insights egy Google-eszköz egy weboldal betöltési sebességének elemzésére és értékelésére, és ami a legfontosabb, nagyon hasznos sorozatokat is kínál javaslatok Y kapcsolódó eszközök ennek a rakodási sebességnek a javítása érdekében.
Weboldalunk terhelésének és megvalósításának értékeléséhez a Page Insights a bevált gyakorlatok ezen dokumentumán alapul, amely kiterjed mind a kezelőfelület szintjére (képek, JavaScript fájlok, CSS betöltése stb.), Mind a szerver konfigurációjára.
Nagy vonalakban és anélkül, hogy sok részletességgel foglalkoznánk, e jó gyakorlatok céljait főként a következő háromban foglalhatjuk össze:
- Minimalizálja az előforduló HTTP kérések számát,
- Csökkentse a válaszok méretét ezekhez a HTTP-kérelmekhez,
- és optimalizálja az oldal megjelenítését a böngészőben.
A PageSpeed elemzi a weblistánkat és hozzárendel a központozás vagy pontszám 100-ból, amely azt értékeli, hogy mennyivel gyorsabb lehet a weboldal betöltése. A nagyon magas, 100-hoz közeli pontszám azt jelzi, hogy kevés fejleszteni való van (vagyis az oldal már olyan gyorsan betöltődik, amilyen gyorsan csak tud, vagy közel van hozzá), míg az alacsony pontszám azt jelzi, hogy jó néhány fejlesztést megtehetünk. Fontos megjegyezni, hogy ez a pontszám igen relatív arra az oldalra, amin éppen vagyunk, vagyis nem az oldal betöltéséhez szükséges idő alapján érkezik, ha nem az alapján, hogy hány jó gyakorlatok mielőtt kommentáltuk, követtük és végrehajtottuk.
A PageInsight-ot online szolgáltatásként használhatjuk, ha megadjuk az értékelni kívánt oldal URL-jét:
Ezenkívül egy nyílt forráskódú bővítmény elérhető a Chrome fejlesztői eszközök számára a Chrome böngészőben, valamint a Firebug számára is azok számára, akik hűek maradnak a Firefoxhoz. Ebben a cikkben a bővítményre fogunk alapozni Chrome fejlesztői eszközök Mac-en, de a művelet gyakorlatilag minden verzióban megegyezik.
A Chrome Developer Tools kiterjesztés használata
A bővítmény telepítése után, a weboldalunk megnyitásával a Chrome-ban, először a Chrome Dev Tools programot nyitjuk meg:
Eszközök -> Fejlesztői eszközök vagy Ctrl + Shift + I (Mac-en: ⌥⌘I)
Amint megnyílik a felület, látni fogjuk, hogy megjelenik egy új PageSpeed fül, amelyen cselekvésre ösztönzést találunk:
Ha rákattint bármelyik piros elemzésre vagy az elemzés megkezdésére szolgáló gombra, az oldalunk újratöltődik, és rövid elemzés után egy pontszámtól kezdve megmutatjuk az elemzés eredményeit. PageSpeed Score amely értékelni fogja azokat az intézkedéseket, amelyeket webhelyünkön a rakodási sebesség javítása érdekében végrehajtottunk.
Megvalósítás: A rakodási sebesség javítása lostiemposchange.com
Házának esetében lostiemposchange.com Eleinte a következő értékelést kaptuk:
Kezdeti PageSpeed pontszám lostiemposchange.com: 86 (összesen 100-ból)
Pontszám: 86 pont a 100-ból lehetséges egyáltalán nem rossz, de nyilván sok mindenen kell még javítanunk.
Szerencsére a bal oldalon a javaslatok listája hogy a plugin felajánlja számunkra a betöltési sebesség javítását. Ezek a javaslatok 3 színben kategorizálva jelennek meg: piros, sárga és kék, ahogy figyelembe veszi őket Magas prioritás, Közepes prioritású Y Alacsony prioritású illetőleg. Ezenkívül minden egyes javaslatban részleteket kapunk arról, hogyan tudjuk megvalósítani azt weboldalunk adott esetben.
Nyilvánvaló, hogy először meg kell próbálnunk alkalmazni a következőként megjelölt javaslatokat: Magas prioritás piros színnel, mivel ezek jelentik a legnagyobb hatást a rakodási sebességre. A helyes gyakorlatok, amelyeket már helyesen alkalmaztunk, zöld színnel jelennek meg és kevésbé hangsúlyosak.
A bal oldali panelen a PageSpeed Insights javaslatokat ad arra, hogyan javíthatnánk weboldalunk betöltési sebességét
Elemezzünk néhányat ezekből a javaslatokból és hogyan lehet ezeket megvalósítani az oldalunkon példaként véve esetünket lostiemposchange.com, természetesen különös hangsúlyt fektetve a legfőbb prioritásra, de a legegyszerűbbre is figyelve, és hogy kevés erőfeszítéssel azonnali javulást eredményezhet a weboldal betöltési sebessége.
Magas prioritás
- Használja ki a böngésző gyorsítótárának előnyeit
Kényelmes megakadályozni, hogy a böngésző olyan statikus erőforrásokat (például képeket) kérjen, amelyek már rendelkeznek letöltésekkel a korábbi látogatások során (más néven gyorsítótárban). Ezért elengedhetetlen az attribútumok értékeinek hozzáadása lejárati dátum vagy maximális életkor ezen elemek válaszainak HTTP fejlécében a jövőben bizonyos távolságú értékekre, hogy a böngészőnek szóljon, hogy használja a gyorsítótárazott verziót.
A Keep-Alive aktiválása
A Keep-Alive az Apache szerverek nagyszerű tulajdonsága, amely lehetővé teszi a szervernek és az ügyfélnek, hogy egyetlen HTTP-kérést tárgyaljon meg több erőforrás átvitele helyett erőforrásonként új kérést nyit meg. Könnyen belátható, hogy ez nagyon jól illeszkedik a HTTP kérések számának minimalizálására irányuló célunkhoz.
Mivel Ön a fenti javaslat, és ez a javaslat a következőktől származik szerver konfigurációja, a használata esetén apache szerver A weboldalunkon található .htaccess fájl módosításával konfigurálhatjuk őket. Például ezeket az irányelveket adtuk hozzá a szerveren a timeschange.com .htaccess fájlhoz, hogy mindkét javasolt funkciót megvalósítsuk: