Rychlost načtení stránky u právě nainstalovaného WordPress je úžasná. U většiny šablon se v pohodě vlezete pod půl vteřiny i na průměrném sdíleném webhostingu. Jakmile nainstalujete nějaký plugin na cachování obsahu nestačíte se divit jak se projeví na rychlosti webu. Hodnoty v desítkách milisekund nejsou nic výjimečného. No a pak začnete přidávat další věci, které jsou pro dnešní moderní web nezbytné. Měření návštěvnosti přes Google Analytics, tlačítka sociálních sítí (Facebook, Twitter, Google plus) a nějakou tu reklamu ať je na zaplacení hostingu a domény. Jenomže při následném měření už to rozhodně není pastva pro oči. Podle měření společnosti radware způsobují právě různé vložené skripty na třetí stranu přes 50% všech požadavků stránky.

Facebook, Twitter, Google plus zpomalují váš web

Vložené ikonky sociálních sítí se v podstatě stahují. Každý prohlížeč má trochu jiné limity na maximální množství požadavků. Zvlášť se přitom počítají požadavky na doménu, kde je stránka a na ostatní domény, které se ze stránky volají prostřednictvím skriptů. Zatímco váš web využívá externí javascript anebo CSS většinou od českého poskytovatele webhostingu, kde je odezva zanedbatelná, tak skripty sociálních sítí se stahují ze serverů umístěných v zahraničí. Tady už je odezva znát.

Není se tak čemu divit, že třeba tlačítko pro sdílení na Twitter se průměrně stahuje 832 milisekund a Facebook 918 milisekund. Možná si říkáte, že to zas tak moc není, vždyť se stahují samostatně popři stránce. Jenomže sociální sítě mají těch dotazů několik. Něco jsou skripty něco obrázek. Navíc zde hrozí i riziko, že v případě nějaké poruchy serveru se zpomalí načítání webu kompletně. Takový případ se třeba stal Facebooku.

Řešení defer vs async

Když při vykreslování stránky narazí prohlížeč na tag script, zastaví se, stáhne informace a teprve až má data pokračuje. V případě sociálních sítí to může být až vteřina, což je hodně. Navíc nepředpokládáme, že někdo přišel na stránku a hned chce dát like anebo sdílet. Jde si tam pro obsah a interakci se sociální sítí provede až bude mít chuť. Takže proč spěchat?

Řešením je přidat do tagu script atribut defer anebo async.

Atribut defer způsobí, že prohlížeč bude pokračovat ve vykreslování a zároveň bude stahovat skript. Jakmile bude dokončena část vykreslování a zároveň stažený skript, bude vykreslen. Tento atribut je podporován nejrozšířenějšími prohlížeči, takže se jej nemusíte bát používat.

Async funguje podobně jako defer jen se stahuje a vykresluje paralelně.

Tento článek byl byl přečten 1305 krát