Optimalizálja az oldalak betöltési ideje

Optimalizálja az oldalak betöltési ideje

Abban a pillanatban között webfejlesztők van egy széles körben elterjedt tévhit, hogy a letöltési sebesség honlapján a kliens böngésző teljesen határozza meg a generációs html-oldalak a szerveren. Ő az én szeretném kipróbálni, hogy tisztázza ezt a kérdést, és beszéljünk egy kicsit arról, hogyan lehet időnként, hogy gyorsítsák fel a letöltési oldalt a weboldalak.

Optimalizálja az oldalak betöltési ideje

Amint a táblázatból látható, a letöltési idő html, alapvetően egy kis töredéke a teljes rakodási idő / inicializálja az oldalt a végfelhasználó. Nézzük meg közelebbről, mit jelent ez alkalommal alakul ki. Ez hálózati késleltetés (vár választ a DNS, az idő, hogy létrejöjjön a kapcsolat a szerverrel), ez időt vesz igénybe, hogy töltse le a forrásokat (képek, animációk) és rakodási CSS állományok és szkriptek (CSS és JavasScript).

Hogyan csökkenthetjük a komponens az egyes? Minden módszer optimalizálása weboldalak vannak osztva több nagy csoportba elsődleges a céljuk, hogy csökkentsék a kérés átviteli idő, az átviteli válaszidő és a kérelmek száma az átlagos fogyasztó számára (nyilvánvaló, hogy a növekedés a szélessége a csatorna, amelyen áll a szerver nem valószínű, hogy alapvetően a probléma megoldásához ). Következő nézzük meg a módszereket a tömörítés és elosztott rendszerek, amelyek csökkentik a válasz adás időpontja, valamint eljárások cache és merge fájlokat, ami csökkenti a kérelmek száma.

Optimalizálja az oldalak betöltési ideje

Az egyetlen hatékony módszer, hogy csökkentsék a kérés (továbbított adatokat az ügyfél) csökkenni fog a méret Cookie fejléc mérete. Amint az a táblázatból látható, lehet, hogy egy jelentős része a teljes kérelmet. Néhány egyszerű szabály segít optimalizálni a része az ügyfél adatait, mint például a cookie felesleges, nem teszi őket, mint az előírt méret, csak a szükséges oldalakat, és kövesse a lejárati dátumot.

Hogyan tudom csökkenteni a méretét a válasz? Itt mozgásterét sokkal több. A legismertebb módszer az, hogy minify (megszüntetése minden felesleges kód részletesebben a jelentés „optimalizálása HTML, CSS, JS gyakran mutatnak oldalak Yandex”). Ha lehetséges, azt is meg kellene használni az AJAX-kérések helyett a szabványos, és azokon JSON XML helyett.

Optimalizálja az oldalak betöltési ideje

Egy másik jól ismert eljárás gzip- / leereszteni-tömörítés a szerver oldalon (érdemes cache az eredményeket, hogy ne terhelje túl a CPU felesleges számításokat). Ebben az esetben, a lényeg, hogy támogassa a „régi” böngészők (az ügyfelek támogatása nélkül gzipa tudott rendesen menni a honlapon). Amint a táblázatból kitűnik, a gzip-tömörítés jelentősen csökkenti a méret a a kiszolgáló válaszát.

Tekintsük kompressziós CSS-fájlok részletesebben. A speciális algoritmusok tömöríteni a forráskódot (CSS Tidy), párosulva az archiválási eredményeként jelentősen csökkenti a fájl méretét. Továbbá, mint lehetséges fájlméretet optimalizálási technikákat kínálunk csökkentését utat a háttérképet, és csökkenti a hossza a használt osztályok és az azonosítókat. Készül CSS-fájlban lehet egy időben tömöríteni, majd adja meg a felhasználó mindig ugyanazt a tömörített változata.

Hogy csökkentse a többszöri megkeresésére a kliens gépen a szerver segítségével különböző módszerek és technikák cache-t. A legegyszerűbb talán az, hogy az háttérképeket (CSS-tulajdonság background-image) helyett a szokásos (tag ). Ez lehetővé teszi, hogy elmondja a böngésző, hogy a legtöbb elemeket az oldalon használt dekorációs célokra, és megjeleníti őket elég letölteni csak egyszer (attól persze, hogy a böngésző beállításait). Továbbá érdemes megemlíteni a készlet fejlécek lejár / Cache-Control, amely a középső keshom ügyfélkezelés a szerver oldalon. Ebben az esetben szükség van a cache minden erőforrás ritkán módosított (akkor is, ha az elme nem olyan gyakran kért). Egy másik módszer, hogy ellenőrizzék caching a szerver oldalon a felvételét a ETag válasz fejlécet, hogy megmondja az ügyfél egyedi fájl azonosítója, amely lehetővé teszi, hogy a szerver válaszol egy 304 (Nem módosított, nem változott) a második ügyfél kérésére, és a fájl nem kerül újra render. Végül közepette a leírt technikák szövőszék verziószámozásáról probléma: ha azt szeretné, hogy az ügyfél, hogy egy újabb verziója a tárolt fájlt. És ő szabvány dől el úgy, hogy a végén a fájl nevét a hely a kezelés ez egyedülálló query string (file? V.3.11.45).

Összefoglalva, akkor vezet egy jól ismert kritérium egy jó elérhetősége a helyszínen, amikor teljesen meg van töltve 10 másodperc a modem (a teljes mérete az összes fájlt nem lehet több, mint 36 Kb). Azt is meg kell adni a hivatalos adatok yahoo.com honlapon, amelyet optimális szerint a fenti szabályokat. Ennek eredményeként, rakodási idő csökkent 2,4 másodperc 0,9 másodperc (2,7-szer). Hasonló álló statisztikák más források (belső fejlesztések erősen).

Köszönöm a figyelmet. fogok válaszolni a kérdésekre.

Kapcsolódó cikkek