Jedným z najdôležitejších aspektov vášho webu je rýchlosť načítania. užívatelia chcú okamžite dostať obraz bez akýchkoľvek brzd, a ak im to neviete poskytnúť, nebudú dlho váhať hľadať informácie inde. V tomto článku si rozoberieme 5 spôsobov, ktoré vám umožnia urýchliť čas načítania vašej stránky.
1. Použite YSlow na sledovanie časov načítania stránky
Na základe toho, koľko času trvá načítanie stránok, môžete identifikovať problémové oblasti. Poskytne vám to tiež ďalší podnet, aby ste sa dostali do funkcie a pokúsili sa situáciu napraviť.
Skôr ako začneme, musíte si nainštalovať YSlow, ak ste tak ešte neurobili. YSlow je rozšírenie pre Mozilla Firefox ktoré nájdete na tejto stránke:
Teraz otvorme nejakú stránku. Povedzme šesť revízií, aby sme mali približne rovnaké údaje (stačí otvoriť túto stránku na novej karte prehliadača).
V pravej dolnej časti prehliadača máte špeciálny panel s ikonou (pozri obrázok 1). Trochu ďalej od tohto panela, po načítaní stránky, vedľa „YSlow“ uvidíte číslo. Toto číslo je čas v sekundách, počas ktorého sa táto stránka načíta vo vašom prehliadači. Chceme, aby toto číslo bolo čo najmenšie.
Najbežnejšie „brzdy“ sú nasledujúce predmety alebo operácie:
- Príliš veľa požiadaviek HTTP
- Nekomprimované súbory JavaScript
- Žiadny čas vypršania platnosti hlavičky pre grafické súbory
O pár minút sa na to pozrieme bližšie.
Aby ste sa s týmto systémom oboznámili, prejdite si niekoľko stránok a pozrite sa na časy ich načítania. Môžete otestovať Google, Facebook a pár svojich obľúbených blogov/webov, ktoré najčastejšie navštevujete. Upozorňujeme, že rýchlosť najviac ovplyvňujú súbory JavaScript a obrázky.
YSlow využívame naplno
Okrem YSlow výpočtu času načítania stránky, dané rozšírenie vám tiež poskytuje rozsiahle informácie o tom, čo musíte opraviť, aby ste optimalizovali načítanie stránok, aby ste mohli opraviť diery.
Pre takéto informácie kliknite na kartu Výkon. Po prehľadaní stránky vám YSlow poskytne celkové skóre, ktoré bude charakterizovať výkonnosť vašej stránky.
Prístup k informáciám možno urýchliť pomocou siete CDN (content delivery network). CDN sa najlepšie používa pre veľké weby. Používajú sa na distribúciu informácií na viacerých serveroch rôzne časti mier. Týmto spôsobom sa informácie stiahnu z príslušného servera (ktorý je najbližšie k používateľovi), aby neprechádzali cez osobné smerovače. YSlow tiež sleduje požiadavky CDN.
Ľudia však vo všeobecnosti nepoužívajú siete CDN (čo je dosť drahé).
Klasifikácia typov chýb
Teraz si prejdeme každú položku, ktorá je vo vyššie spomínanom rozšírení. Nižšie nájdete súhrn toho, ako sú vaše stránky posudzované a ako riešiť problémy, aby ste dosiahli maximálny výkon.
Urobte čo najmenej požiadaviek HTTP: Požiadavka HTTP sa objaví, keď prehliadač odošle požiadavku na server. To isté sa môže stať pri pripájaní skriptov, CSS súborov, obrázkov, ako aj pri asynchrónnych požiadavkách, a to zo strany klienta aj zo strany servera (Ajax a iné podobné technológie). Pri výkone systému však stojí za zváženie koľko podobné žiadosti sa stane na vašej stránke. Jedným z riešení je použitie ukladania do vyrovnávacej pamäte, ktoré pomôže klientskym počítačom načítať skripty, CSS a obrázky rýchlejšie.
Pridanie hlavičiek s expiráciou: 80 % načítania stránky je zameraných na sťahovanie skriptov, fotografií a súborov CSS. Vo väčšine prípadov sa tieto veci na používateľských počítačoch nemenia. Pridaním nejakého kódu do súboru .htaccess môžete duplicitné súbory uložiť do vyrovnávacej pamäte na lokálnom počítači používateľa (o tom, ako to urobiť, si povieme neskôr).
Komponenty Gzip: Použite Gzip alebo komprimujte súbory JS, obrázky, HTML dokumenty, CSS súbory atď. umožňuje používateľom sťahovať informácie v zmenšenej veľkosti, čo výrazne zvyšuje rýchlosť načítania stránky. Okrem toho sa tým ušetrí miesto na serveri, rozbalenie dát však môže spomaliť odozvu a to priamo závisí od prehliadača používateľa.
Umiestnite CSS na začiatok stránky: Ak umiestnite svoje CSS pripojenie na začiatok stránky, znamená to, že sa načítajú ako prvé a obrázky a skripty až neskôr.
Umiestnite svoj JS na spodok stránky: Teraz, keď sa vaše CSS súbory načítavajú v hornej časti, je čas umiestniť vaše JS skripty priamo pred uzatváraciu značku. To umožní vašej stránke vykresliť a potom zahrnúť potrebné skripty.
Vyhnite sa CSS výrazom: Osobne som nikdy nepoužíval CSS výrazy (nazývané aj dynamické vlastnosti). Tieto výrazy sú natívne koncepty programovania IE (ako napríklad podmienené výrazy) v CSS. Technológia, ktorá sa používa v IE8 a vo všetkých ostatných verziách, už nebude podporovaná, takže v každom prípade sa budete musieť vyrovnať s týmto písaním výrazov CSS. PHP je vhodnejšie na takéto účely, napríklad na načítanie rôznych CSS štýlov v závislosti od nejakej podmienky, ako je náhodné číslo, čas dňa alebo prehliadač používateľa.
Napíšte JS a CSS do samostatných súborov: ak vložíte svoje skripty do JS a css štýly v samostatných súboroch ich môže prehliadač jednoducho uložiť do vyrovnávacej pamäte, čím umožní, aby sa vaša stránka v budúcnosti načítala rýchlejšie.
Skráťte čas vyhľadávania DNS: keď používateľ zadá názov vašej lokality do panela prehliadača, okamžite sa spustí vyhľadávanie DNS adresy IP, na ktorej sa vaša lokalita nachádza. Čím viac externých zdrojov vaša stránka obsahuje, tým viac času zaberie vyhľadávanie DNS. Spravidla jedno takéto vyhľadávanie trvá 60 – 100 milisekúnd.
Minifikujte JS: Minifikácia súborov JavaScript vám okrem komprimácie pomocou gzip umožní odľahčiť vaše skripty odstránením nepotrebných medzier, tabulátorov a iných špeciálnych znakov, ktoré zvyšujú veľkosť súborov. Je to zrejmé – čím menšie súbory, tým rýchlejšie sa načítavajú stránky. Na minimalizáciu súborov JavaScript môžete použiť nástroj JSMIN.
Vyhnite sa presmerovaniam: Nezáleží na tom, kde vykonáte presmerovanie, v JS, HTML alebo PHP. V každom prípade váš prehliadač dostane prázdnu hlavičku stránky, ktorej načítanie bude chvíľu trvať. Skúste teda nepoužívať presmerovanie tam, kde sa tomu dá vyhnúť.
Vyhnite sa duplicitnému načítaniu skriptov: Ak váš prehliadač načíta skript viac ako raz, výrazne to ovplyvní načítanie stránky. Matematika tu nie je ťažká. Čím viac stiahnutí rovnakých súborov, tým viac dlhšie nakladanie stránky. Skontrolujte svoje skripty a uistite sa, že nevoláte jQuery dvakrát alebo trikrát. To isté platí pre JS skripty.
No... myslím, že to stačí. Teraz prejdime na ďalšiu kartu YSlow a potom sa pozrieme na niektoré ďalšie techniky, ktoré zvýšia rýchlosť načítania vašej stránky.
Karta Komponenty vám umožní určiť, koľko úsilia musíte vynaložiť na zvýšenie rýchlosti sťahovania. Tu nájdete informácie o tom, koľko každý súbor váži, ako aj o tom, ako dlho trvá sťahovanie. Budete tiež môcť vidieť, ktoré súbory sú komprimované pomocou gzip, zistiť čas odozvy a či sú súbory uložené vo vyrovnávacej pamäti v počítači používateľa a kedy samotná vyrovnávacia pamäť končí. Tieto informácie sa vám môžu hodiť pri posudzovaní problémov vašej stránky, budete vedieť, čo vám nie je v poriadku a čo je potrebné optimalizovať.
A nakoniec prejdime k posledná záložka Karta Štatistiky. Tu nájdete informácie o všetkých požiadavkách HTTP, a to ako pre bežné súbory, tak aj pre súbory vo vyrovnávacej pamäti. Hodnota Empty cache označuje, že tieto súbory je potrebné načítať, aby sa stránka vykreslila. Na druhej strane, Primed Cache sú súbory, ktoré už boli uložené do vyrovnávacej pamäte prehliadačom používateľa. To znamená, že ich nie je potrebné sťahovať.
2. Použite CSS Sprites na zníženie požiadaviek HTTP
CSS škriatkovia sú pravdepodobne to najdôležitejšie, čo ľudstvo vymyslelo, odkedy Tesla vynašiel elektrinu... Vlastne som to povedal... ups, myslel som Edisona.
No, možno nie úplne najlepšie, ale aj tak.
Sprite CSS môžu výrazne zvýšiť rýchlosť načítania stránky znížením počtu požiadaviek HTTP na sťahovanie obrázkov.
Môžete nájsť veľa tutoriálov, ktoré hovoria o tom, ako sa dá v spritoch CSS ľahko navigovať – vo všeobecnosti ich používať v používateľskom rozhraní.
Teraz sa stručne pozrime na to, ako YouTube používa sprite CSS. Takto vyzerá sprite, ktorý používajú:
YouTube používa tento súbor pomerne originálnym spôsobom. Načítajú to ako pozadie do triedy sprite. Keď je potrebné vybrať prvok, počiatočná poloha sa vyberie vtedy Pomocník CSS vlastnosti pozadia a potom aplikovanie výšky a šírky.
Skúsme niečo podobné. Poďme experimentovať na rovnakom obrázku z YouTube.
V príklade nižšie zobrazujeme na obrazovke logo YouTube. Pomocou rovnakej triedy sprite a rovnakého obrázka môžeme vytvoriť obrázok, ktorý sa zmení po prejdení myšou.
Pomocou tohto obrázku teda môžeme zredukovať všetky pripojenia na jednu požiadavku HTTP. No a aký to má efekt?
Ďalšia výhoda CSS škriatkovia spočíva v tom, že pri použití pseudotriedy :hover obrázok nezmizne na niekoľko okamihov (ktoré trvá načítanie nového obrázka), ako sa to stáva bez Použitie CSSškriatok.
3. Načítajte CSS súbory na začiatku, JavaScript na konci
V prípade niektorých stránok môže zníženie počtu požiadaviek HTTP narušiť funkčnosť. Ďalším spôsobom, ako urýchliť načítanie stránky, je umiestniť všetky pripojenia súborov JavaScript na koniec dokumentu.
Za zmienku tiež stojí:
- Načítajte CSS súbory v sekcii tesne pred začiatkom značky body.
- Zahrňte JavaScript tesne pred koncovú značku tela.
Ak sa budete riadiť našimi radami, umožníte svojim používateľom obdivovať vaše stránky, zatiaľ čo sa váš JavaScript načítava na pozadí.
Poznámka: Ak sa nechcete pohnúť JavaScript tagy, pretože sa bojíte, že vám spadne funkcionalita, tak vám odporúčam využiť vlastnosť odložiť. Aplikujte to takto: