Как браузер отображает веб страницы.

Под капотом браузеры делают много работы, прежде чем пользователь увидит веб-страницу. Что он делает и когда? Как можно повлиять на скорость отрисовки?

Transcript

1. Как браузер отображает веб-страницы Симонок Александр
2. О презентации • Этапы отрисовки страницы браузером • Оптимизация скорости загрузки сайта P.S. Время ~ 25 минут, а вопросы после
3. Скорость интернета Скорость моего интернета
4. Большинство сайтов в интернете 38 сек
5. На что влияет время загрузки сайта?
6. Нервы пользователя
7. Конверсия – это отношение пользователей совершивших нужное действие к посетителям. (Например, покупку) Средняя конверсия = 1,5 - 2% Конверсия
8. 0,5 % 1,0 % 1,5 % 2,0 % Время загрузки 1 сек 2 сек 3 сек 4 сек 5 сек 6 сек > 7 сек Минимум % конверсии к времени загрузки сайта
9. — Официальный сайт Google « С июля 2018 года Google начнёт учитывать скорость загрузки сайтов на смартфонах и планшетах при ранжировании результатов поиска с мобильных устройств». SEO
10. Как браузер отображает страницу?
11. Наш пациент
12. Файлы 1 CSS 1 JS Image Image Image Image 6 Images 6 Images Font Font 3 Fonts Bootstrap + 1 HTML
13. Этапы готовности страницы Ничего не отрисовано First paint Страница готова 0 s 6,61 s 34,8 s
14. Что делает браузер перед First paint? DOM CSSOM Javascript Render tree Layout Paint Media Media Media Fonts Fonts Fonts Composite
15. Как браузер обновляет стили элементов? Paint Composite Style Color Paint Composite Style Layout Width
16. Список свойств которые вызывают пересчеты csstriggers.com
17. Взглянем на timeline нашего сайта First Paint Full ready
18. Так так, а что тут у нас? Тоже очередь Ожидание ответа Скачивание Очередь Одновременно не больше 6 запросов на один домен Картинка была поставлена в очередь первой. Приоритет влияет на порядок запросов из очереди, но не влияет на текущие запросы А действительно важнейшие запросы ждут когда очередь освободится потому что попали поздно в очередь 1 2 3 4 5 6 9 7 8 Порядок добавления в очередь 10 11 12
19. Как ускорить? Уменьшить размер Critical resources Гениально Ватсон! CSS JS
20. Оптимизируем Удаляем всё ненужное Удаляем bootstrap Javascript нам не нужен для critical path Добавим async атрибут
21. Было 1,32 s 6,61 s Стало
22. Что поменялось? Теперь javascript не влияет на critical path 178 kb -> 3.4 kb
23. А можно ещё ускорить? Время когда браузер бездействует
24. HTTP2
25. HTTP2 Является бинарным Можно делать server push
26. Поддержка ~87%
27. Server push важных ресурсов CSS Font
28. Было Стало
29. Изображения • Уменьшаем размер • Делаем ленивую подгрузку
30. Ленивая загрузка изображений Делаем placeholders по 2 kb Загружаем оригинал когда картинка попадает во viewport
31. Было 0,7 s 6,61 s Стало First paint
32. Было 1,87 s 34,8 s Стало Страница готова
33. Результат
34. А что с timeline?
35. После оптимизации First paint ускорился в 9,5 раз Полная загрузка ускорилась в 19 раз
36. First paint • < 3 секунд • Уменьшаем время за счёт отложенной загрузки не critical resources • Используем http2/server push для скорейшей загрузки critical resources
37. CSS • Следим за размерами файлов • Правильно обновляем элементы • Правильно грузим шрифты • Стараемся предоставить critical.css
38. Картинки • Оптимизируем • Подгружаем когда нужно
39. Javascript • Используем async и defer • Грузим только то, что нужно в данным момент (chunks)
40. Вопросы?