Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Ähnlich wie Web performance 101 [GDG nsk webdev meetup #3]
Ähnlich wie Web performance 101 [GDG nsk webdev meetup #3] (20)
Web performance 101 [GDG nsk webdev meetup #3]
- 2. ...
- 3. Теория
- 5. Как измерять перформанс? ● onload ● DOMContentLoaded ● Time to first byte (TTFB) ● PerformanceTiming.domInteractive ● КБ ● Количество ассетов
- 6. Как измерять перформанс? ● onload ● DOMContentLoaded ● Time to first byte (TTFB) ● PerformanceTiming.domInteractive ● КБ ● Количество ассетов
- 7. Как измерять перформанс? ● onload ● DOMContentLoaded ● Time to first byte (TTFB) ● PerformanceTiming.domInteractive ● КБ ● Количество ассетов Что вообще хотим измерить? То, что важно пользователю
- 8. Что важно пользователю? ● Контент видно ● Контент интерактивен
- 9. Что важно пользователю? ● Контент видно ● Контент интерактивен Измеряем RTTn до above-the-fold
- 13. Внутри HTTP-запроса 1. DNS 2. TLS
- 14. Внутри HTTP-запроса 1. DNS 2. TLS (TCP slow start)
- 16. Внутри HTTP-запроса MSS = MTU – IPh – TCPh
- 17. Внутри HTTP-запроса MSS = MTU – IPh – TCPh MSS MTU IPh TCPh IPv4 536 576 20 20 IPv6 1220 1280 40 20
- 18. Внутри HTTP-запроса MSS = EMTU – IPh – TCPh MSS Ethernet MTU IPh TCPh IPv4 1460 1500 20 20 IPv6 1440 40 20
- 21. Внутри HTTP-запроса 1. DNS 2. TLS (TCP slow start) 3. Request
- 22. Что плохого? ● Редирект ● Шарды ● Старое ядро ● Нет CDN
- 23. Рендер ● HTML ● CSS ● JS ● Шрифты ● Картинки
- 24. Рендер ● HTML ● CSS ● JS ● Шрифты ● Картинки ● DOM (инкрементальный+спекулятивный парсинг) ● CSSOM (неинкрементальный) ● VM (неинкрементальный) ● 3 секунды
- 25. Что делать? 1. Никаких внешних стилей и скриптов в <head> 2. Инлайним критичный CSS/JS
- 26. Web app Service worker + PWA
- 27. http/2 ● Сжатие хэдеров ● Одно подключение на сервер ● Server push ● Никакого оверхеда на новый запрос ● Шаринг подключений между хостами (IP+cert)
- 28. Практика
- 29. Инструменты ● Chrome Canary ● PageSpeed Insights, Pingdom tools, GTMetrix ● WebPageTest.org
- 31. Сеть Чиним TLS (1 RTTn) ● HSTS, Chrome HSTS preload list ● TLS false start ● Session tickets, session ID ● Размер сертификата
- 32. Сеть ● Cache-Control ● gzip ● CDN ● DNS-prefetch ● Prerender
- 33. HTTP 1.x > http/2 ● Шардинг/кукилесс-домены (TLS, конкурирующие соединения) ● Спрайты (ждём всё) ● Бандлы (ждём всё)
- 34. Картинки ● CDN ● Loseless-сжатие ● WEBP
- 35. CSS ● Инлайн ● npm critical/penthousejs
- 36. CSS ● Инлайн ● npm critical/penthousejs Проблема: разный critical для разных страниц
- 37. CSS ● Инлайн ● npm critical/penthousejs Проблема: разный critical для разных страниц Альтернатива: http/2 server push
- 38. JS ● Инлайн ● async/defer ● Динамическая подгрузка модулей ● Isomorphic JS ● Web Worker
- 39. И всё? ● FPS/requestAnimationFrame ● GPU ● repaint/reflow ● Shadow DOM ● Performance.mark ● HTMLElement.style ● AMP ● WebAssembly ● Service Worker/PWA ● WebGL ● CSS selectors ● Dead JS/CSS/HTML