Hogyan mérjük meg a Front-end Weboldal teljesítményét
Az újkori webes tervezők között szinte nem létezik az optimalizálási folyamat. Még sok olyan webes tervező, aki már évtizedekig vagy hosszabb ideig dolgozott, nem érti teljesen a webhely optimalizálásának fontosságát.
Hosszabb idő elteltével egy weboldal elkezd lefogni. A frontend fájlok tartalmazhatnak túlzott kód- vagy zárolt blokkokat. Ez leggyakrabban a JavaScript fájlokban vagy képeken belül történik. Fontos lehet egy kellemes webhely létrehozása a felhasználói élmény érdekében, de optimalizált webhely nélkül a designnak talán nincs esélye a türelmetlen felhasználók teljes terhelésére.
Az alábbi tippek a kezdő és a közbenső webfejlesztők számára készültek az oldalak optimalizálása teljes mértékben. Sok technika áll rendelkezésre, és mindegyik másképp fog viselkedni attól függően, hogy milyen problémákat szenved a webhelye. Próbáljon ki néhány területet, és nézze meg, hogy alkalmazhatja-e ezeket a technikákat saját jeleire.
HTTP-kérések
Minden alkalommal, amikor a webhely betölti, HTTP-kérést küld egy távoli kiszolgálónak. Az ilyen típusú adatátvitel az a hálózati protokoll kifejezetten egyszerű szöveges fájlok terjesztésére és tárolására használják. Ezek gyakran tartalmazzák az alapvető frontend kódot, mint például a HTML, a CSS és a JavaScript.
A kérelem elküldése után a böngésző elemzi az egyes oldalelemeket. Az elemzőmotortól függően minden egyes webhely másképp fog betölteni, és az elemek változó sorrendben jelennek meg az átviteli sebesség alapján. Az Internet Explorer például a Chrome vagy a Safari webhelyektől eltérő weboldalakat fog megjeleníteni, és ezek mindegyike kissé eltérő értelmezőmotorokat futtat, mint a Firefox vagy az Opera.
Figyelembe kell venni, hogy mennyi ideig tart a kérési idő az egyes fájlokra, és ha ez a trend következetesen fennáll. Fontolja meg, hogy egy hónap alatt 100 ezer vagy 1 millió látogatót fogunk felfelé. A böngésző feladata, hogy egyesítse az egyes oldalelemeket és töltse be a külső fájlokat a memóriába.
Gyakran a webhely optimalizált fordulatszám-referencia clunky JavaScript-et tartalmazó tényezők vagy nagy képfájlok tárolják. A Verizon FiOS népszerűsítésével közös, hogy az internet sebessége 600kbps-ot ér el, és mászni! Sajnos ez nem a szokás, és még a nagy sebességű kapcsolatok esetén is optimalizálási hibák tapasztalhatók.
A webhely teljesítményére vonatkozó jogorvoslatok
Nem vagyunk egyedül a webfejlesztés és a frontend optimalizálás területén. A megfelelő munka elvégzéséhez bizonyos eszközök szükségesek a feladat kezeléséhez.
A Google közzétette a Page Speed nevű projektet, melynek célja, hogy segítse a fejlesztőket webhelyeik optimalizálásában és a legjobb teljesítményszintek ellenőrzésében. Eredetileg a projekt nyílt forráskódú Firebug-bővítményként indult, és a webhely teszteléséhez most már a harmadik fél hivatkozásaként elfogadott..
A Firebug felhasználók egy másik lehetősége a Yahoo! YSlow kiegészítője. A szkript elemzi az egyes weboldalak kéréseit, és javasolja a leggyakoribb módokat a teljesítmény javítására. Ezek a javaslatok a Yahoo! A fejlesztők erőforrásai a webdesign legjobb optimalizációs gyakorlatának.
A program egy kicsit koptató lehet, mivel annyi információt tartalmaz. Csak ragaszkodj az alapokhoz, és az egyszerű dokumentáció követésével a folyamatnak egy darab torta kell lennie.
A fejlesztők mindig érdekeltek, hogy egy projektre ugorjanak, hogy lebontják a kódot, így ez nem lehet agy. Egy kis segítségért nézd meg az YSlow súgót.
Sebesség technika
Van néhány egyszerű trükkö, amelyet azonnal felkérhet a webhelyére, hogy gyorsítsa fel a teljesítményt. Az első és legegyszerűbb módja a CSS és a JavaScript fájlok elkülönítése.
A CSS kód a dokumentum fejlécében található. Ez azért hasznos, mert a CSS tulajdonságokat elemezni kell a DOM betöltésekor. Miután a webböngésző felismeri a CSS-stílusokat a címsorban, várni fogja, hogy a weblapot teljes egészében megjelenítse, amíg az összes stílus be nem töltődik. Az ikonok és a háttérmintákhoz felhasznált képek is hosszabb ideig fognak betölteni, és először meg kell tenniük.
A flip oldalon az összes JavaScript fájl áthelyezése a webhely láblécébe drasztikusan megoldhatja a hangszórási időket. Sok böngésző blokkolja a párhuzamos letöltéseket, ami azt jelenti, hogy az oldal megjelenése előtt a felhasználó webböngészője 4 másodpercig leállhat a külső JS teljes terheléséhez.
Ez nem mindig lehetséges, és nem mindig szükséges minden weboldalon. Ha az oldalak ugyanolyan válaszidővel töltenek be, függetlenül attól, hogy a fájl elhelyezések vannak, akkor ne zavarja a lejátszás manőverezését.
A dinamikus tartalom nem tölthető be, amíg a teljes DOM befejeződik, de néha ez hibákat fog eredményezni. Tesztelje ki, hogy a CSS / JS tartalmazza-e az optimalizálási előnyöket.
Fájlméret tömörítés
A nagy fájlok tömörítése nagyon népszerűvé vált. A weblapok segítségével akár a betöltési idők csökkentése és a fájlméretek nagyon alacsony is lehet. A munka nagy része már megtörtént, és olyan eszközökkel, mint a YUI Compressor, a mini méretű fájlok nem energiájúak.
Számos más ingyenes szolgáltatás áll rendelkezésre a weben, hogy segítsen ezzel a feladattal is. Minimalizálja a CSS-t egy teljes CSS tömörítési felülettel rendelkezik a folyamat egyszerűsítéséhez. Ugyanez a webhely rendelkezik egyéni JavaScript kompresszorral is, amely ugyanazokat a feladatokat látja el, de megtartja a szervezett szkripteket.
A weblapok legnagyobb képeinek tömörítését is fontolóra veheti. Ezt bármely olyan fotószerkesztő szoftverrel, mint például az Adobe Photoshop vagy a GIMP, úgy lehet elvégezni, hogy a képet alacsonyabb felbontással egyszerűen átmásolja. A PNG-képek sokkal kisebbek lesznek, mint a jpg vagy a TIFF formátumok. Rengeteg olyan online eszköz van, mint például az Image Optimizer, hogy segítsen a tömörítési folyamatban.
Forrásellenőrzés és metrikák
Ez a rutin, amelyet gyakran nem gyakorolnak a webfejlesztők, amelyek csodálatos eredményeket kínálnak. A webhely összes oldalelemének elemzésével láthatja, hogy melyik volt a leghosszabb betöltés, és az egyes darabok betöltésének sorrendje.
A legnépszerűbb eszköz a Mozilla Firebug egy plug-in a Firefox böngésző számára. Ez az alkalmazás telepít egy kis eszköztárat a böngésző alján, hogy ellenőrizze a válaszidőket, a fejlécinformációkat, az oldalelemeket és az egyes webhelyek szkriptjeit. A szkriptet a Firebug Lite-be is átvitték a Google Chrome bővítményeként.
Apache, mod_pagespeed
Nem minden beállítás fut Apache webszerverrel, így ez az opció nem mindig elérhető. Ez a modul közvetlenül kapcsolódik A Google Page Speed monitorja korábban említett. Valójában a mod_pagespeed kódja eredetileg sok könyvtárból állt a Google Code adatbázisából.
Az Apache lehetővé teszi, hogy a szerveradminisztrátorok kis modulokat telepítsenek a szerverek teljesítményének javítása érdekében. mod_pagespeed Az egyik a modulok közül, amely az optimalizálási technikákat futás közben automatikusan végrehajtja. Túl sok a folyamatok listázása, bár a fő alkalmazások közé tartozik a HTML / CSS / JS tömörítés és a kép gyorsítótár használata..
A projekt jelenleg a Google-ban található, és nyitva áll a fejlesztők számára. A Google együttműködött a GoDaddy-lel a mod_pagespeed bevezetéséhez az összes Apache HTTP szervert futtató tárhelyfiókba.
Bár sok más lehetőség áll rendelkezésre, a frontend fejlesztés a legintenzívebb, különösen a fontos weblapok előzetes optimalizálására tekintettel. A webhelyfejlécek és a nagy képek optimalizálása rendkívül unalmas, de kifizetődő feladat lehet.
Fontolja meg a cikkben bemutatott néhány technikát, és nézze meg, hogyan lehetne ezeket alkalmazni a webes projektjeiben. Gyakran a fejlesztők nem vesznek elég időt arra, hogy értékeljék munkájukat és tisztítsák meg a régi kódokat. Ha még mindig szeretne néhány tippet, olvassa el a végső webes optimalizálási útmutatót a frontend karbantartás és a kényelmes teljesítménynövelő mutatók számára.
