Jak měřit výkon webových stránek Front-end

Mluvit o optimalizaci procesu je téměř neexistující mezi novými designéry webových stránek. Dokonce i mnoho webových designérů, kteří byli v podnikání deset let nebo déle, plně nerozumí důležitosti optimalizace stránek.

Po delší době se webové stránky začnou ohýbat. Soubory frontendu mohou obsahovat přehnané bloky kódu nebo skryté skryté bity. To je nejčastěji vidět děje v souborech JavaScript nebo obrázky. To může být důležité vytvořit příjemné webové stránky pro uživatelské zkušenosti, ale bez optimalizované webové stránky design nemusí mít ani šanci plně načíst na netrpělivé uživatele.

Níže uvedené tipy jsou určeny pro začátečníky-středně pokročilé webové vývojáře, kteří se o ně zajímají optimalizace jejich stránek naplno. Existuje mnoho technik k dispozici a každý se bude chovat odlišně v závislosti na tom, jaké problémy vaše webové stránky trpí. Zkuste skimming několik oblastí a zjistit, zda můžete použít tyto techniky do své vlastní značky.

Požadavky HTTP

Pokaždé, když web načte, odešle požadavek HTTP vzdálenému serveru. Tento typ přenosu dat se nazývá a protokolu sítě používá se speciálně pro distribuci a ukládání souborů ve formátu prostého textu. Ty často zahrnují základní kód frontendu, například HTML, CSS a JavaScript.

Po odeslání požadavku prohlížeč analyzuje každý prvek stránky. V závislosti na stroji pro analýzu se každá webová stránka načítá odlišně a prvky se budou zobrazovat v různém pořadí podle přenosových rychlostí. Internet Explorer například vykreslí jiné webové stránky než Chrome nebo Safari a všechny z nich budou spouštět mírně odlišné nástroje pro analýzu než Firefox nebo Opera.

Co je třeba vzít v úvahu, je, jak dlouho trvá požadavek na každý soubor a zda tento trend trvá konzistentně. Zvažte, že za měsíc obdržíte až 100 000 nebo 1 milion návštěvníků. Úlohou prohlížeče je spojit každý prvek stránky a načíst externí soubory do paměti.

Často faktory, které drží webové stránky optimalizovaný odkaz na rychlost clunky JavaScript obsahuje nebo velké obrazové soubory. S popularizací Verizon FiOS je to běžné pro rychlost internetu zasáhnout 600kbps a udržet lezení! Bohužel to není normou a dokonce i při vysokorychlostním připojení je možné zažít optimalizační chyby.

Náprava výkonu webu

Nejsme sami v oblasti webového vývoje a optimalizace frontendů. Pro správnou práci, která má být dokončena, jsou k dispozici určité nástroje potřebné pro práci.

Společnost Google vydala projekt s názvem Page Speed, který byl vytvořen tak, aby pomohl vývojářům optimalizovat jejich webové stránky a kontrolovat nejlepší úroveň výkonu. Projekt původně začínal jako open-source doplněk Firebug a je nyní přijímán jako reference třetí strany pro testování webových stránek.

Další možností pro uživatele Firebug je doplněk YSlow společnosti Yahoo !. Skript analyzuje každý požadavek webové stránky a navrhuje nejběžnější způsoby, jak zlepšit výkon. Tyto návrhy jsou založeny na Yahoo! Vývojáři zdroj pro nejlepší optimalizační praxe v designu webu.

Program může být zpočátku trochu abrazivní, protože obsahuje tolik informací. Stačí se držet základů a jednoduchou dokumentací by proces měl být hračkou.

Vývojáři se vždy zajímají o skákání na projekt, aby se rozpadl kód, takže by to nemělo být žádné přemýšlení. Pro malou pomoc si můžete prohlédnout YSlow help guide.

Rychlostní techniky

Tam jsou některé jednoduché triky, které můžete použít na vaše webové stránky okamžitě urychlit výkon. První a nejjednodušší způsob je oddělit soubory CSS a JavaScript.

Kód CSS patří do záhlaví dokumentu. To je užitečné, protože vlastnosti CSS je třeba analyzovat při načítání DOM. Jakmile webový prohlížeč rozpozná vaše styly CSS v záhlaví, bude čekat na úplné zobrazení webové stránky, dokud nebudou načteny všechny styly. Také všechny obrázky použité pro ikony nebo návrhy pozadí budou vyžadovat určitý čas.

Na druhé straně přesunutí všech souborů JavaScript do zápatí webu může dramaticky vyřešit časy zavěšení. Mnoho prohlížečů blokuje paralelní stahování, což znamená, že webový prohlížeč uživatele se může zastavit na 4 sekundy, aby mohl plně načíst externí JS.

To není vždy možné a není vždy nutné pro každou webovou stránku. Pokud se vaše stránky načítají stejně se stejnou dobou odezvy bez ohledu na umístění souborů, neobtěžujte manévrování žádných her.

Dynamický obsah nelze načíst, dokud není dokončen celý DOM, ale někdy to vrátí chyby. Test CSS / JS zahrnuje zjistit, zda můžete vrátit všechny výhody optimalizace.

Komprese velikosti souboru

Komprese velkých souborů se stala velmi populární. To může nyní být dokonce využit na webových stránkách ke snížení doby načítání a udržet velikost souborů velmi nízká. Velká část práce již byla provedena a nástroje jako YUI Compressor mini-size soubory jsou neenergetický proces.

Existuje spousta dalších bezplatných služeb na webu pomoci s tímto úkolem stejně. Minifikujte CSS má celé CSS kompresní rozhraní, aby proces jednoduchý. Stejná webová stránka má také vlastní JavaScript kompresor, který plní mnoho stejných úkolů, ale udržuje skriptování organizované.

Můžete také zvážit kompresi největších obrázků na svých webových stránkách. To lze provést pomocí jakéhokoli softwaru pro úpravu fotografií, jako je například Adobe Photoshop nebo GIMP, jednoduše převzorkováním obrazu při nižším rozlišení. Obrázky PNG budou exportovat mnohem menší v průměru než formáty jpg nebo TIFF. Existuje také mnoho online nástrojů, jako je Image Optimizer, které pomáhají při procesu komprese.

Kontrola zdroje a metriky

Toto je rutina, kterou weboví vývojáři často nepraktikují a mohou nabídnout úžasné výsledky. Analýzou všech prvků stránky na vašich webových stránkách můžete vidět, které z nejdelších dat načtete a pořadí, ve kterém byl každý kus načten.

Nejoblíbenější nástroj Mozilla Firebug je plug-in pro prohlížeč Firefox. Tato aplikace nainstaluje malý panel nástrojů ve spodní části prohlížeče, který kontroluje dobu odezvy, informace o záhlaví, prvky stránky a skripty pro každou webovou stránku. Skript byl také přenesen do Firebug Lite jako rozšíření pro Google Chrome.

Apache s mod_pagespeed

Ne všechna nastavení budou provozovat webový server Apache, takže tato volba není vždy k dispozici. Tento modul se přímo týká Monitor rychlosti stránky Google zmíněno dříve. Kód pro mod_pagespeed byl původně založen na mnoha knihovnách z databází Google Code.

Apache umožňuje správcům serverů instalovat malé balíčky s názvem moduly pro zvýšení výkonu jejich serverů. mod_pagespeed je jedním z těchto modulů, které provádějí optimalizační techniky automaticky za běhu. Seznam je příliš mnoho, i když některé z hlavních aplikací zahrnují on-the-fly HTML / CSS / JS kompresi a ukládání do mezipaměti obrazu.

Projekt je v současné době umístěn ve společnosti Google a je otevřen pro vývojáře. Google spolupracuje s GoDaddy na implementaci mod_pagespeed do všech hostingových účtů se spuštěným HTTP serverem Apache.

I když je k dispozici řada dalších možností, vývojové práce na frontendu jsou některé z nejintenzivnějších, zejména s ohledem na předběžnou optimalizaci klíčových webových stránek. Optimalizace pro záhlaví stránek a velké obrázky může být nesmírně únavný, ale odměňující úkol.

Zvažte některé z technik uvedených v tomto článku a zjistěte, jak by mohly být použity ve vašich webových projektech. Často vývojáři neberou dostatek času, aby ocenili svou práci a vyčistili staré kousky kódu. Pokud stále toužíte po několika tipech, měli byste si přečíst náš průvodce optimalizací webových stránek, který obsahuje odkazy na údržbu frontendu a pohodlná vylepšení výkonu..