Proč, kdy, co a jak optimalizovat rychlost webových stránek.

1. Optimalizace
rychlosti stránek
Johan Hornof, Keyup 2014

2. Proč?
• Uživatel aktivita na stránce, míra opuštění
• Google hodnocení stránky, pozice
• Klient předchozí dvě
• Vývojář předchozí tři

3. Kdy?
• DNS resolving
• Odesílání dat na server (POST)
• Zpracování požadavku a generování odpovědi
• Odesílání dat
• Vykreslování
• JS příp. donačítání (XHR, image lazy loading)

4. Co?
• Server
• Databáze - SQL queries
• Obrázky
• Skripty v prohlížeči
• HTML
• CSS
• Requesty na služby třetích stran (ze serveru i prohlížeče)

5. Jak?
• Server hlavičky, cookies, gzip
• Databáze indexy, počet dotazů
• Obrázky JPG vs. PNG, sprites, favicon, max. 800px
• CSS a JS minifikovat, nepoužívat inline, nedůležité na konec HTML,
frameworky jen, když je skutečně potřeba
• HTML vyčistit a zmenšit DOM
• CDN JS frameworks, CSS resets, fonts
• Externí skripty tracking codes, like buttons, embedded iframes

6. Nástroje
• Váš prohlížeč
Inspektor
Chyby v konzoli
Vodopádový model načítání (rychlost, velikost, XHR)
• PageSpeed Insights
browser extension
https://developers.google.com/speed/pagespeed/insights/
• GTMetrix
YSlow + PageSpeed, PDF export, grades
http://gtmetrix.com
• SmushIt
http://www.smushit.com

7. Cache
• Memcached, Varnish, APC
• Browser cache
• Local Storage (příp. IndexedDB)

8. Mobile
• Ještě důležitější rychlost i velikost stránky
myslet na to, jaké to je při připojení přes EDGE,
některé funkce uživatel na mobilu z logiky věci
nikdy dělat nebude, není proto potřeba mu je nabízet
• Vynechat elementy, které nejsou vidět
nikoli jen skrýt
• Dát si pozor na velikost klikacích polí
lze na ně tapnout prstem
• Pozor na scroll lock
najede se na google mapu a najednou
nelze scrollovat stránku, protože
touch eventy odchytává mapa

9. Shrnutí
• Zmenšovat, zmenšovat, zmenšovat
• Inline kód je fuj
• Pokud to lze udělat v CSS, udělat to v CSS
• Testovat na mobilu a tabletu bez wifi
• Pokud něco děláte proto, že to je jediný
způsob, jaký znáte, tak to děláte špatně

10. Díky za pozornost