Download to read offline
Uploaded byKeyup
Optimalizace rychlosti stránek
Proč, kdy, co a jak optimalizovat rychlost webových stránek.
Optimalizace rychlosti stránek
- 1.
- 2. Proč? • Uživatel aktivitana 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 Chybyv 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.