Öt módon, hogy gyorsítsák fel az oldal betöltési idejét
Az egyik legfontosabb szempont a webhely - ez a sebesség a csizmája; felhasználó szeretné azonnal kap egy képet anélkül, hogy a fékek, és ha nem tudja, hogy ez nekik, nem habozott sokáig, igyekeznek információt máshol. Ebben a cikkben fogjuk megvitatni 5 módon, amely lehetővé teszi, hogy gyorsítsák fel a letöltési idő a webhelyen.
1. A YSlow ellenőrzésére az oldalak betöltési ideje
Ismerve a ráfordított idő a letöltési oldalon, akkor képes lesz arra, hogy a problémás területeket. Is, akkor kapsz egy ösztönzést kap a funkcionalitás és megpróbálja orvosolni a helyzetet.
Mielőtt elkezdenénk, telepíteni kell YSlow, ha már biztosan nem tette meg. YSlow - ez kiterjesztést a Mozilla Firefox, akkor ezen az oldalon talál:
Most nyílt néhány honlapján. Tegyük Six Változatok, hogy az adatok már közel azonos (csak megy ezen a honlapon egy új fülön a böngésző).
A jobb alsó oldalán a böngésző, akkor egy speciális panel egy ikon (lásd 1. ábra). Egy kicsit távolabb, a központ után az oldal betöltődik, közel a "YSlow akkor megjelenik egy szám. Ez a szám - ez a betöltési időt az oldal másodpercben a böngészőben. Meg kell ezt a számot a lehető legkisebb.
A leggyakrabban megfigyelt „tormozilami” a következő létesítmények vagy műveletek:
Néhány perc múlva, akkor inkább ezt.
YSlow használja a teljes
Amellett, hogy YSlow számolja az időt az oldal betöltésekor, a kiterjesztés is ad további információt arról, hogy mit kell kijavítani, hogy optimalizálja a honlapon letölthető, így képes lesz arra, hogy összecsap a lyukakat.
kattintson a Teljesítmény fülre információ megszerzéséhez. Szkennelés után helyén, YSlow kapsz egy átfogó értékelés, amely teljesítményének jellemzésére az oldalakon.
Az információhoz való hozzáférés lehet gyorsítani a segítségével CDN (Content Delivery Network). CDN jobb használni a nagy építkezések. Hozzá vannak szokva, hogy megosszák az információkat több szerver különböző részein a világ. Így az információ letölthető a megfelelő kiszolgáló (ami a legközelebb áll a felhasználó), így nem halad át a személyes router. YSlow is nyomon követi CDN kéréseket.
De az emberek általában nem használják a CDN (ami elég drága).
A besorolás a típusú hibák
Tedd a lehető legkevesebbet HTTP kérések: HTTP kérés akkor jelentkezik, amikor a böngésző kérést küld a szervernek. Ugyanez léphet fel, ha szkriptek, CSS fájlok, képek, valamint aszinkron kérések mind a kliens és a szerver oldali (Ajax és egyéb hasonló technológiával). Azonban, amikor a rendszer teljesítményét, meg kell gondolni, hogy hány ilyen kérelem történik az oldalon. Megoldásként akkor lehet alkalmazni, caching, hogy segítse a kliens gépek gyorsabb szkripteket betölteni, CSS és képek.
Fejlécek hozzáadásával Lejár: 80% középpontjában a letöltési oldalon letölthető scriptek, fényképek és CSS fájlok. A legtöbb esetben ezek a dolgok nem változnak a felhasználói gépeken. Hozzá egy kis kódot a .htaccess fájlt, akkor cache a duplikált fájlokat a felhasználó helyi gépen (hogyan kell csinálni ezt később).
Gzip alkatrészek: Application gzip tömörítés vagy JS fájlok, képek, HTML dokumentumok, CSS fájlok, stb Ez lehetővé teszi a felhasználók számára letölthető információkat egy csökkentett méretű, ami nagyban növeli a sebességet oldalak betöltése. Ezen felül, akkor helytakarékosság a szerveren, de az adatok dekompressziós vezethet, mivel gátolja a válasz, és függ a felhasználó böngészőjének.
Keresse meg a CSS az oldal tetején, ha van egy kapcsolat a CSS fájlt az oldal tetején, az azt jelenti, hogy lesznek betöltve az első helyen, a képek és szkriptek később.
Forgalomba JS az az oldal alján, most, hogy a CSS fájlok betöltése a tetején, itt az ideje, hogy helyezze a JS script jobb a záró címke előtt. Ez lehetővé teszi a megjelenítendő oldalt, majd csatlakoztassa a megfelelő szkripteket.
Kerülje a CSS kifejezések: Én személy szerint soha nem használja a CSS kifejezések (még mindig emlegetik a dinamikus tulajdonságok). Ezek a kifejezések önálló program koncepció IE (mint például a feltételes kifejezések) a CSS. A technológia, mellyel az IE8, és az összes többi verzió nem támogatott már, így, hogy minden esetben meg kell kötni az írás CSS kifejezéseket. PHP jobban megfelel erre a célra, például betölteni a különböző CSS stílusokat, attól függően, hogy bizonyos körülmények között, például egy véletlen számot, a napszak, vagy a felhasználó böngészőjének.
Írja JS és CSS külön fájlokban: ha a scripteket JS és CSS stílusokat egy külön fájlban, a böngésző könnyen képes cache őket, így a későbbiekben lehetővé teszi az oldal betöltése gyorsabb.
Kerüljük átirányítás: nem számít, ahol te egy átirányítást a JS, HTML vagy PHP. Mindenesetre, a böngésző lesz a főcím egy üres oldal, ami letölthető időt vesz igénybe. Tehát csak vigyázz, hogy ne használja átirányításokat, ahol meg lehet kerülni.
Nos ... Azt hiszem, ez elég. Most menjünk tovább a következő lapra YSlow, mielőtt megnézi más technikák, amelyek növelik az oldal berakodás sebesség.
Components fül lehetővé teszi, hogy meghatározza, mit kell tegyenek erőfeszítéseket letöltési sebességet. Itt talál információt, hogy mennyi súlyt minden fájlt, valamint azt, hogy meddig tart letölteni. Is, akkor láthatja, hogy melyik fájlokat használja a gzip, megtudja, a válaszidő, és hogy a cache fájlokat a felhasználó gépére, és amikor befejezi a gyorsítótárat. Ez az információ hasznos lehet az Ön számára értékeléséhez problémákat a webhelyén, akkor tudni fogja, hogy nem, és mit kell optimalizálni.
Végül lépni az utolsó lapra statisztika fülre. Itt talál információt a HTTP-kérések szabályos fájlokat és tároljuk. Üres cache érték azt jelzi, hogy az adatok fájlokat le kell tölteni, hogy megjelenítse az oldalt. Viszont Alapozott gyorsítótár - olyan fájlok, amelyek már cache a böngésző felhasználó. Ez azt jelenti, hogy nem kell letölteni.
2. A CSS sprite csökkenteni a HTTP kérések
CSS sprite - valószínűleg ez a legjelentősebb dolog, hogy dolgozzon ki az emberiség, miután Tesla feltalálta a villamos energia ... tényleg azt mondta, hogy. hoppá, én jelentette Edison.
Nos, talán nem pontosan a legmenőbb, de mégis.
CSS sprite segíthet jelentősen növeli a sebességet az oldalak betöltése, számának csökkentése HTTP kérések, amelyek keletkeznek a képek letöltése.
Megtalálható egy csomó órák, amely kimondja, hogy a CSS sprite könnyű navigálni - általában használható a felhasználói felületen.
Most vessünk egy gyors pillantást, hogyan kell a YouTube segítségével CSS sprite. Úgy néz ki, mint egy kobold, ezek a következők:
YouTube felhasználja ezt a fájlt, az egészen eredeti. Ők betöltve azt a háttérben osztálya sprite. Ha felmerül az igény a kiválasztásban egy sejt, van egy válogatás az eredeti helyére a segítségével CSS tulajdonságok background-position, majd a magasság és a szélesség.
Nézzük és mi megpróbáljuk valami ilyesmi. Mi lesz kísérletezni ez ugyanaz a kép a YouTube oldalon.
A példában, ami alatt található, mi származik a YouTube-embléma a képernyőn. Ugyanezzel a Sprite osztály, és ugyanazt a képet kép, mi is létrehozhatunk egy képet, amely meg fogja változtatni, ha az egeret mozgatja.
Így, ezzel a kép, akkor lehet, hogy a kapcsolat egyetlen HTTP kérést. Nos, ennek hatására?
Másik előnye a CSS sprite, hogy az alkalmazás a pszeudo-osztály: lebeg, a kép nem fog eltűnni néhány másodpercig (ami megy új kép feltöltése), ahogy ez történik, használata nélkül CSS sprite.
Azt is meg kell jegyezni,:
4. aldomaint párhuzamos letöltés
Párhuzamos letöltő eszköz több párhuzamos letöltések ugyanazt a fájlt. Séta több webhelyen, azt tapasztalhatja, hogy sok ilyen kéréseket a static.domain.com és c1.domain.com. Ez látható az alján a böngésző.
Ez egy nagyszerű módja annak, hogy növelje honlapon teljesítményét. Ha aldomain, sőt, az információ lesz ugyanazon a szerveren, de más lesz a böngésző.
- 3. Hozzon létre egy aldomain a kiszolgálón
- Helyezzük a képeket mappák különböző aldomain
- Megváltoztatni a fájlok
5. Add Lejár fejlécek
Egyes oldalak töltődnek után is a kérelmet a fent leírt módszerekkel. De van egy pár módszerekkel.
A felhasználó a webhelyére érkező, és az összes szükséges HTTP kérés az oldalak megjelenítéséhez, képek, scriptek, stb
Amikor az lejár fejlécet, akkor a cache mindezen elemeket a felhasználó számítógépén, így nem csak növeli a sebességet a berakodás oldalakat, és így tovább, és csökkenti a forgalmat. Lejár fejlécek lehet alkalmazni, hogy az összes szkriptet, CSS és képek.
Ez a hatás érhető el egy pár sort, hogy meg kell adni, hogy a .htaccess fájl található a gyökérkönyvtárban a webhelyen.
Legyen óvatos: ha lesz semmilyen változás a adatfájlok (ha még nem telt el az idő alatt), akkor át kell neveznie azokat (vagy egészítse ki a változat nevét), vagy a cache, hogy nem frissül.
Ma mentek keresztül sok. Remélem megjegyezte több módszerek, amelyek aktívan használni a projektek! Sok szerencsét!
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!