Slidy k přednášce https://www.youtube.com/watch?v=EwSxtQCVg0k

1. ZRYCHLUJEME WEB
Vladimír Macháček
@8machy
email@machy8.com

2. O čem si povíme
• “Fázích“ optimalizace
• Analytických nástrojích
• Optimalizaci obecně
• Fontech, HTML, CSS a JS
• Externích nástrojích
• Postupech při optimalizaci

3. Tři fáze
1. Než se na něčem začne dělat
2. Když se na něčem dělá
3. Když se to …

4. Analytické nástroje
• Google PageSpeed Insights
• Lighthouse (Google Chrome)
• WebPageTest.org

5. Obecně
• Core.css a Core.js === EVIL
• Načítejte soubory tam, kde jsou potřeba
• Využívejte AJAX
• Načítejte soubory z vlastního serveru (pro videa spíše
YouTube)
• Slučujte soubory pro snížení requestů
• Soubory, které se nemusí načíst hned, vložte na konec
dokumentu

6. Obrázky
• Lazyloading
• Využívejte WebP formát
• Optimalizujte obrázky
• Používejte různé řezy (např. od 320 px, po 200 pixelech)
Originál: 250 kB Minifikovaný: 190 kB
Zdroj obrázku: https://bit.ly/2uiWMNh

7. Fonty
• Potřebuju ten externí font?
• Udržujte malý počet řezů
• Pro ikony lze využít třeba IcoMoon
aplikaci

8. HTML, CSS, JS
• Potřebuju ten framework, plugin nebo nástroj?
• Minifikujte kód
• Piště znovupoužitelný kód
• Stránka NENÍ komponenta
• Před psaním webu si sepište vlastní framework
• Nebojte se vložit CSS a JS přímo do stránky (AMP max. 50 kB,
Google.com přes 200kB), pozor na velikost dokumentu
Zdroj obrázku: https://bit.ly/2ITjbYs

9. Externí nástroje
(jsou past)
• Do stránky nepustit nic, co neprošlo přes IT!
• Do A/B testování chtějte vždy alternativy
• K GTM by mělo mít přístup pouze IT
• Než si nástroj zadrátujete do aplikace, pořádně
ho otestujte a optejte se těch, co ho využívají!
• Snažte se mít na stránce co nejméně trackovacích a
externích kódů

10. Pomalý web, co teď?
1. Začněte s obrázky
2. Odstraňte nadbytečné fonty a jejich řezy
3. Postahujte soubory k sobě na server
4. Slučte soubory
5. Přidejte minifikátory na CSS (opatrně s JavaScriptem)
6. Odstraňte nepotřebné CSS a JS
7. Rozdělte soubory CSS a JS

11. Děkuji za pozornost!
Vladimír Macháček
@8machy
email@machy8.com