Webhelyének egyik legfontosabb szempontja a betöltési sebesség; A felhasználók azonnal, minden fék nélkül szeretnének képet kapni, és ha ezt nem tudja megadni, akkor sokáig nem fog habozni, hogy máshol keressen információt. Ebben a cikkben 5 olyan módszert tárgyalunk, amelyek lehetővé teszik webhelye betöltési idejének felgyorsítását.
1. Használja az YSlow-t az oldalbetöltési idők követésére
Ha ismeri az oldalak betöltéséhez szükséges időt, azonosíthatja a problémás területeket. Ez további ösztönzést ad arra, hogy belépjen a funkcióba, és megpróbálja megoldani a helyzetet.
Mielőtt elkezdené, telepítenie kell az YSlow-t, ha még nem tette meg. Az YSlow a következő kiterjesztése Mozilla Firefox amit ezen az oldalon találsz:
Most nyissunk egy oldalt. Tegyük fel, hogy Six Revisions, hogy megközelítőleg azonos adatokkal rendelkezzünk (csak nyissa meg ezt a webhelyet a böngésző új lapján).
A böngésző jobb alsó sarkában van egy speciális panel egy ikonnal (lásd az 1. ábrát). Kicsit távolabb ettől a paneltől, az oldal betöltése után a „YSlow” mellett egy szám jelenik meg. Ez a szám az az idő másodpercben, amíg az oldal betöltődik a böngészőben. Szeretnénk, ha ez a szám a lehető legkisebb lenne.
A leggyakoribb "fékek" a következő tárgyak vagy műveletek:
- Túl sok HTTP-kérés
- Tömörítetlen JavaScript fájlok
- A grafikus fájlok fejlécének nincs lejárati ideje
Ezt néhány perc múlva közelebbről is megvizsgáljuk.
Annak érdekében, hogy kényelmesen érezze magát ezzel a rendszerrel, nézzen át több webhelyet, és nézze meg azok betöltési idejét. Kipróbálhatja a Google-t, a Facebookot és néhány kedvenc blogját/webhelyét, amelyeket a legtöbbször látogat. Vegye figyelembe, hogy a JavaScript-fájlok és képek azok, amelyek leginkább befolyásolják a sebességet.
A YSlow-t maximálisan használjuk
Amellett, hogy az YSlow kiszámítja az oldal betöltési idejét, adott hosszabbítást emellett átfogó tájékoztatást nyújt arról, hogy mit kell javítania webhelye betöltésének optimalizálása érdekében, hogy befoltozhassa a lyukakat.
Az ilyen információkért kattintson a Teljesítmény fülre. A webhely feltérképezése után az YSlow egy általános pontszámot ad, amely az oldal teljesítményét jellemzi.
Az információhoz való hozzáférés felgyorsítható a CDN (tartalomszolgáltató hálózat) segítségével. A CDN a legjobban nagy webhelyekhez használható. Arra használják őket, hogy információkat osztjanak el több szerver között Különböző részek béke. Így az információk a megfelelő (a felhasználóhoz legközelebbi) szerverről töltődnek le, hogy ne menjenek át személyes útválasztókon. Az YSlow a CDN-kéréseket is követi.
De az emberek általában nem használnak CDN-eket (ami elég drága).
A hibatípusok osztályozása
Most menjünk végig minden olyan elemen, amely a fent említett kiterjesztésben található. Az alábbiakban összefoglalót talál arról, hogyan ítélik meg oldalait, és hogyan kezeljék a problémákat a maximális teljesítmény elérése érdekében.
A lehető legkevesebb HTTP-kérés: HTTP-kérés akkor történik, amikor a böngésző kérést küld a szervernek. Ugyanez történhet szkriptek, CSS fájlok, képek csatlakoztatásakor, valamint aszinkron kérések esetén, mind kliens oldalról, mind szerver oldalról (Ajax és más hasonló technológiák). A rendszerteljesítménynél azonban érdemes végiggondolni, hogy mennyi hasonló kéréseket történik az oldalon. Az egyik megoldás a gyorsítótár használata, amellyel az ügyfélgépek gyorsabban tölthetik be a szkripteket, a CSS-t és a képeket.
Lejárati fejlécek hozzáadása: Az oldalbetöltés 80%-a szkriptek, fényképek és CSS-fájlok letöltésére irányul. A legtöbb esetben ezek a dolgok nem változnak a felhasználói gépeken. Ha hozzáad egy kódot a .htaccess fájlhoz, gyorsítótárba helyezheti a duplikált fájlokat a felhasználó helyi gépén (erről később beszélünk).
Gzip összetevők: Alkalmazza a Gzip fájlt vagy tömörítse a JS fájlokat, képeket, HTML dokumentumok, CSS-fájlok stb. lehetővé teszi a felhasználók számára, hogy csökkentett méretben töltsenek le információkat, ami jelentősen megnöveli az oldalbetöltés sebességét. Ezzel ráadásul helyet takaríthatunk meg a szerveren, azonban az adatok kicsomagolása lassíthatja a választ, és ez közvetlenül a felhasználó böngészőjétől függ.
Helyezze el a CSS-t az oldal tetejére: Ha a CSS-kapcsolatot az oldal tetejére helyezi, az azt jelenti, hogy először ezek töltődnek be, a képek és szkriptek pedig később.
Helyezze el a JS-t az oldal aljára: Most, hogy a CSS-fájlok a tetején töltődnek be, itt az ideje, hogy a JS-szkripteket közvetlenül a záró címke elé helyezze. Ez lehetővé teszi az oldal megjelenítését, majd tartalmazza a szükséges szkripteket.
Kerülje a CSS-kifejezéseket: Én személy szerint soha nem használtam CSS-kifejezéseket (ezeket dinamikus tulajdonságoknak is nevezik). Ezek a kifejezések natív IE programozási koncepciók (például feltételes kifejezések) a CSS-ben. Az IE8-ban és az összes többi verzióban használt technológia a továbbiakban nem lesz támogatott, így minden esetben kapcsolódni kell ehhez a CSS-kifejezések írásához. A PHP alkalmasabb ilyen célokra, például különböző CSS-stílusok betöltésére valamilyen feltételtől függően, például véletlen számtól, napszaktól vagy a felhasználó böngészőjétől.
JS-t és CSS-t írjon külön fájlba: ha a szkriptjeit JS-be és css stílusok külön fájlokban a böngésző könnyen gyorsítótárazhatja azokat, ezáltal lehetővé téve az oldal gyorsabb betöltését a jövőben.
Csökkentse a DNS-keresési időt: amikor a felhasználó beírja a webhely nevét a böngészősávba, azonnal megkezdődik annak az IP-címnek a DNS-keresése, ahol a webhely található. Minél több külső forrást tartalmaz a webhely, annál több időt vesz igénybe a DNS-keresés. Általában egy ilyen keresés 60-100 ezredmásodpercig tart.
A JS kicsinyítése: A gzip használatával történő tömörítés mellett a JavaScript-fájlok kicsinyítése lehetővé teszi a szkriptek könnyítését, mivel megszabadul a felesleges szóközöktől, tabulátoroktól és egyéb speciális karakterektől, amelyek nagy fájlméretet eredményeznek. Nyilvánvaló – minél kisebbek a fájlok, annál gyorsabban töltődnek be az oldalak. A JSMIN eszközzel kicsinyítheti a JavaScript-fájlokat.
Kerülje az átirányításokat: Nem mindegy, hogy hol végzi el az átirányítást, JS-ben, HTML-ben vagy PHP-ben. Akárhogy is, a böngészője üres oldalfejlécet kap, amelynek betöltése időbe telik. Tehát próbáljon meg ne használjon átirányítást ott, ahol ez elkerülhető.
Kerülje el a duplikált szkriptbetöltéseket: Ha a böngészője egynél többször tölt be egy szkriptet, az jelentősen befolyásolja az oldalak betöltését. A matematika itt nem nehéz. Minél több ugyanazon fájl letöltése, annál több hosszabb töltés oldalakat. Tekintse át a szkripteket, és győződjön meg arról, hogy ne hívja meg kétszer vagy háromszor a jQuery-t. Ugyanez vonatkozik a JS szkriptekre is.
Hát… azt hiszem, ez elég. Most térjünk át az YSlow következő lapjára, mielőtt megvizsgálnánk néhány egyéb technikát, amelyek növelik az oldal betöltési sebességét.
Az Összetevők lapon meghatározhatja, mennyi erőfeszítést kell tennie a letöltési sebesség javítása érdekében. Itt információkat talál az egyes fájlok súlyáról, valamint arról, hogy mennyi ideig tart a letöltés. Azt is láthatja, hogy mely fájlok kerülnek gzip-be, megtudhatja a válaszidőt és azt, hogy a fájlok gyorsítótárban vannak-e a felhasználó gépén, és mikor ér véget maga a gyorsítótár. Ezek az információk hasznosak lehetnek az Ön webhelyének problémáinak felmérése során, tudni fogja, mi a baj, és mit kell optimalizálni.
És végül lépjünk tovább utolsó lap Statisztika lap. Itt talál információkat az összes HTTP-kérésről, mind a normál, mind a gyorsítótárazott fájlokról. Az Empty cache érték azt jelzi, hogy ezeket a fájlokat be kell tölteni az oldal megjelenítéséhez. A Primed Cache viszont olyan fájlok, amelyeket a felhasználó böngészője már tárolt. Ez azt jelenti, hogy nem kell letölteni őket.
2. CSS Sprite használatával csökkentse a HTTP-kérések számát
A CSS sprite valószínűleg a legjelentősebb dolog, amivel az emberiség előállt, mióta a Tesla feltalálta az elektromosságot… Igazából ezt mondtam… hoppá, Edisonra gondoltam.
Nos, talán nem a legmenőbb, de akkor is.
A CSS sprite-ok nagymértékben javíthatják az oldalbetöltési sebességet azáltal, hogy csökkentik a képek letöltésére irányuló HTTP-kérések számát.
Számos oktatóanyagot találhat, amelyek arról beszélnek, hogy a CSS sprite-ok könnyen navigálhatók - általában véve, hogyan lehet őket felhasználói felületen használni.
Most pedig nézzük meg, hogyan használja a YouTube a CSS sprite-okat. Így néz ki az általuk használt sprite:
A YouTube meglehetősen eredeti módon használja ezt a fájlt. Háttérként betöltik a sprite osztályba. Amikor szükségessé válik egy elem kijelölése, a kezdeti pozíció kiválasztásra kerül, amikor CSS segítség háttérpozíció tulajdonságait, majd alkalmazza a magasságot és a szélességet.
Próbáljunk ki valami hasonlót. Kísérletezzünk ugyanazon a YouTube-on található képen.
Az alábbi példában a YouTube logót jelenítjük meg a képernyőn. Ugyanazt a sprite osztályt és ugyanazt a képet használva létrehozhatunk egy képet, amely az egeret mozgatva megváltozik.
Így ennek a képnek a használatával az összes kapcsolatot egyetlen HTTP-kérésre redukálhatjuk. Nos, mi a hatása?
Egy másik előny CSS sprite-ok az, hogy a :hover pszeudo osztály alkalmazásakor a kép nem tűnik el néhány pillanatra (ami egy új kép betöltéséhez szükséges), mivel ez megtörténik anélkül CSS használat sprite-ok.
3. Töltse be a CSS fájlokat az elején, a JavaScriptet a végén
Egyes webhelyek esetében a HTTP-kérelmek számának csökkentése tönkreteheti a funkcionalitást. Az oldalbetöltés felgyorsításának másik módja az, hogy az összes JavaScript fájlkapcsolatot a dokumentum végére helyezzük.
Érdemes még megjegyezni:
- Töltse be a CSS-fájlokat a közvetlenül a body címke kezdete előtti szakaszban.
- Szerelje be a JavaScriptet közvetlenül a záró body címke elé.
Ha követi tanácsunkat, lehetővé teszi a felhasználók számára, hogy megcsodálják webhelyeit, miközben a JavaScript betöltődik a háttérben.
Megjegyzés: Ha nem akar költözni JavaScript címkék, mert attól tart, hogy leesik a funkcionalitás, akkor javaslom a defer tulajdonság használatát. Alkalmazza így: