Jedním z nejdůležitějších aspektů vašeho webu je jeho rychlost načítání; uživatelé chtějí okamžitě získat obraz bez jakýchkoliv brzd, a pokud jim to nejste schopni poskytnout, nebudou dlouho váhat a hledat informace jinde. V tomto článku probereme 5 způsobů, které vám umožní zrychlit načítání vašeho webu.
1. Použijte YSlow ke sledování doby načítání stránky
Znáte-li dobu, kterou trvá načítání stránek, můžete identifikovat problémové oblasti. Také vám to dá další podnět k tomu, abyste se dostali do funkce a pokusili se situaci napravit.
Než začneme, musíte nainstalovat YSlow, pokud jste to ještě neudělali. YSlow je rozšíření pro Mozilla Firefox kterou najdete na této stránce:
Nyní otevřeme nějaké stránky. Řekněme Šest revizí, abychom měli přibližně stejná data (stačí otevřít tyto stránky v nové záložce vašeho prohlížeče).
V pravé dolní části prohlížeče máte speciální panel s ikonou (viz obrázek 1). O něco dále od tohoto panelu, po načtení stránky, vedle „YSlow“ uvidíte číslo. Toto číslo je doba v sekundách, po kterou se tato stránka načte ve vašem prohlížeči. Chceme, aby toto číslo bylo co nejmenší.
Nejběžnější „brzdy“ jsou následující předměty nebo operace:
- Příliš mnoho požadavků HTTP
- Nekomprimované soubory JavaScript
- Žádná doba vypršení platnosti záhlaví pro grafické soubory
Za pár minut se na to podíváme blíže.
Abyste se s tímto systémem seznámili, projděte si několik stránek a podívejte se na jejich doby načítání. Můžete otestovat Google, Facebook a několik svých oblíbených blogů/webů, které nejčastěji navštěvujete. Všimněte si, že soubory a obrázky JavaScriptu jsou ty, které nejvíce ovlivňují rychlost.
YSlow využíváme naplno
Kromě YSlow výpočtu doby načítání stránky, dané rozšíření také vám poskytuje rozsáhlé informace o tom, co musíte opravit, abyste optimalizovali načítání webu, abyste mohli zalepit díry.
Pro takové informace klikněte na kartu Výkon. Po procházení webu vám YSlow poskytne celkové skóre, které bude charakterizovat výkon vaší stránky.
Přístup k informacím lze urychlit pomocí sítě CDN (content delivery network). CDN se nejlépe používá pro velké weby. Používají se k distribuci informací na více serverech různé části mír. Tímto způsobem budou informace staženy z příslušného serveru (který je uživateli nejblíže), aby neprocházely osobními routery. YSlow také sleduje požadavky CDN.
Ale lidé obecně nepoužívají CDN (což je docela drahé).
Klasifikace typů chyb
Nyní si projdeme každou položku, která je ve výše zmíněném rozšíření. Níže naleznete souhrn toho, jak jsou vaše stránky posuzovány a jak se vypořádat s problémy, abyste dosáhli maximálního výkonu.
Vytvářejte co nejméně požadavků HTTP: Požadavek HTTP nastane, když prohlížeč odešle požadavek na server. Totéž se může stát při připojování skriptů, CSS souborů, obrázků, stejně jako u asynchronních požadavků, jak ze strany klienta, tak ze strany serveru (Ajax a další podobné technologie). Pokud však jde o výkon systému, stojí za zvážení, jak moc podobné žádosti se stane na vaší stránce. Jedním z řešení je použití ukládání do mezipaměti, které pomůže klientským počítačům načíst skripty, CSS a obrázky rychleji.
Přidání záhlaví s vypršením platnosti: 80 % načítání stránky je zaměřeno na stahování skriptů, fotografií a souborů CSS. Ve většině případů se tyto věci na uživatelských počítačích nemění. Přidáním kódu do souboru .htaccess můžete duplicitní soubory uložit do mezipaměti na místním počítači uživatele (jak to udělat, si povíme později).
Komponenty Gzip: Použijte Gzip nebo komprimujte soubory JS, obrázky, HTML dokumenty, CSS soubory atd. umožňuje uživatelům stahovat informace ve zmenšené velikosti, což výrazně zvyšuje rychlost načítání stránky. Kromě toho se tím ušetří místo na serveru, ale rozbalení dat může zpomalit odezvu a přímo závisí na prohlížeči uživatele.
Umístěte CSS na začátek stránky: Pokud umístíte připojení CSS na začátek stránky, znamená to, že budou načteny jako první a obrázky a skripty později.
Umístěte svůj JS na konec stránky: Nyní, když se vaše soubory CSS načítají nahoře, je čas umístit skripty JS přímo před uzavírací značku. To umožní vaší stránce vykreslit a poté zahrnout potřebné skripty.
Vyhněte se CSS výrazům: Osobně jsem nikdy nepoužíval CSS výrazy (nazývané také dynamické vlastnosti). Tyto výrazy jsou nativní koncepty programování IE (jako jsou podmíněné výrazy) v CSS. Technologie, která se používá v IE8 a ve všech ostatních verzích, již nebude podporována, takže v každém případě budete muset s tímto psaním výrazů CSS navázat. PHP je pro takové účely vhodnější, například pro načítání různých stylů CSS v závislosti na nějaké podmínce, jako je náhodné číslo, denní doba nebo prohlížeč uživatele.
Napište JS a CSS do samostatných souborů: pokud vložíte své skripty do JS a css styly v samostatných souborech je může prohlížeč snadno uložit do mezipaměti, a tím umožnit rychlejší načítání vaší stránky v budoucnu.
Zkraťte dobu vyhledávání DNS: když uživatel zadá název vašeho webu do lišty prohlížeče, okamžitě začne DNS vyhledávání IP adresy, kde se váš web nachází. Čím více váš web obsahuje externí zdroje, tím déle bude vyhledávání DNS trvat. Zpravidla jedno takové vyhledávání trvá 60-100 milisekund.
Minifikujte JS: Kromě komprimace pomocí gzip vám minifikace souborů JavaScriptu umožní odlehčit vaše skripty tím, že se zbavíte zbytečných mezer, tabulátorů a dalších speciálních znaků, které zvyšují velikost souborů. Je to zřejmé – čím menší soubory, tím rychlejší načítání stránek. K minifikaci souborů JavaScript můžete použít nástroj JSMIN.
Vyhněte se přesměrování: Nezáleží na tom, kde provedete přesměrování, v JS, HTML nebo PHP. V každém případě váš prohlížeč obdrží prázdnou hlavičku stránky, jejíž načtení bude chvíli trvat. Zkuste tedy přesměrování nepoužívat tam, kde se tomu lze vyhnout.
Vyhněte se duplicitnímu načítání skriptů: Pokud váš prohlížeč načte skript více než jednou, výrazně to ovlivní načítání stránky. Matematika zde není obtížná. Čím více stažení stejných souborů, tím více delší načítání stránky. Zkontrolujte své skripty a ujistěte se, že nevoláte jQuery dvakrát nebo třikrát. Totéž platí pro JS skripty.
No... myslím, že to stačí. Nyní přejdeme na další kartu YSlow, než se podíváme na některé další techniky, které zvýší rychlost načítání vaší stránky.
Karta Komponenty vám umožní určit, kolik úsilí musíte vynaložit na zlepšení rychlosti stahování. Zde najdete informace o tom, kolik jednotlivé soubory váží a jak dlouho trvá jejich stažení. Budete také moci vidět, které soubory jsou gzipovány, zjistit dobu odezvy a zda jsou soubory uloženy v mezipaměti na počítači uživatele a kdy samotná mezipaměť končí. Tyto informace se vám mohou hodit při posuzování problémů vašeho webu, budete vědět, co vám je a co je potřeba optimalizovat.
A konečně přejděme k poslední záložka Karta Statistiky. Zde najdete informace o všech HTTP požadavcích, a to jak pro běžné soubory, tak pro ty uložené v mezipaměti. Hodnota Empty cache označuje, že tyto soubory je třeba načíst, aby se stránka vykreslila. Primed Cache jsou zase soubory, které již byly uloženy do mezipaměti prohlížečem uživatele. To znamená, že je není třeba stahovat.
2. Použijte CSS Sprites ke snížení požadavků HTTP
CSS skřítci jsou pravděpodobně to nejdůležitější, co lidstvo vymyslelo od doby, kdy Tesla vynalezl elektřinu... Vlastně jsem to řekl... jejda, myslel jsem Edisona.
No, možná ne úplně nejlepší, ale stejně.
Sprite CSS mohou výrazně zlepšit rychlost načítání stránky tím, že sníží počet požadavků HTTP, které se odehrávají při stahování obrázků.
Můžete najít mnoho výukových programů, které hovoří o tom, jak se skřítci CSS snadno orientují – obecně o jejich použití v uživatelském rozhraní.
Nyní se pojďme rychle podívat na to, jak YouTube používá sprity CSS. Takto vypadá sprite, který používají:
YouTube používá tento soubor poměrně originálním způsobem. Načtou to jako pozadí do třídy sprite. Když je nutné vybrat prvek, výchozí pozice se vybere, když Nápověda CSS vlastnosti background-position a poté použití výšky a šířky.
Zkusme něco podobného. Pojďme experimentovat na stejném obrázku z YouTube.
V níže uvedeném příkladu zobrazujeme na obrazovce logo YouTube. Pomocí stejné třídy sprite a stejného obrázku můžeme vytvořit obrázek, který se změní při přejetí myší.
Pomocí tohoto obrázku tedy můžeme zredukovat všechna připojení na jeden HTTP požadavek. No, jaký to má efekt?
Další výhoda CSS skřítci spočívá v tom, že při použití pseudotřídy :hover obrázek na několik okamžiků nezmizí (které trvá načtení nového obrázku), jak se to stane bez Použití CSS skřítci.
3. Načtěte CSS soubory na začátku, JavaScript na konci
U některých webů může snížení počtu požadavků HTTP narušit funkčnost. Dalším způsobem, jak urychlit načítání stránky, je umístit všechna připojení souborů JavaScript na konec dokumentu.
Za zmínku také stojí:
- Načtěte soubory CSS v sekci těsně před začátkem značky body.
- Zahrňte JavaScript těsně před koncovou značku těla.
Pokud se budete řídit našimi radami, umožníte svým uživatelům obdivovat vaše stránky, zatímco se váš JavaScript načítá na pozadí.
Poznámka: Pokud se nechcete stěhovat JavaScript tagy, protože se bojíte, že funkčnost spadne, pak doporučuji použít vlastnost odložit. Aplikujte to takto: