1.
Оптимизация скорости сайта
без использования AMP
Front End Team Lead at KeepSolid
Дмитрий Шевченко

2.
Немного обо мне
➔ 6 лет опыта в web разработке
➔ Почти 5 лет в KeepSolid
➔ 1 год руковожу лучшей командой Front End
➔ Имею опыт в Back End и немного в Android разработке
➔ Женат и есть прекрасная дочь

3.
Зачем нам быстрый сайт?
- счастливые пользователи

4.
Зачем нам быстрый сайт?
- счастливый босс и вся компания

5.
Быть или не быть… AMP...

6.
AMP
Accelerated Mobile Pages
Open-source библиотека, которая предоставляет “легкий
путь” для создания быстрых страниц.
Активно продвигается Google

7.
AMP
Преимущества:
- быстрый сайт без знаний оптимизации
- показ в карусели при поиске
- хорошо индексируется
- есть интеграция с популярными CMS

8.
AMP
Недостатки:
- необходимость поддержки 2 версий сайта
- навязывание интернет гигантом
- жесткие ограничения
- не всегда сразу пройдешь валидацию
- не всегда быстрый…
* Я НЕ пропагандирую НЕ использовать AMP ;-)

9.
В чем секрет AMP?
- минимум css(<50кб)
- минимум js
- оптимизация
- ленивая загрузка
- предварительная загрузка
- кеширование на стороне CDN (Google, Cloudflare, etc.)
всего по чуть-чуть
в AMP

10.
Как этого добиться без AMP?

11.
Измерить
Нам поможет Lighthouse
доступен в Chrome Dev Tools

12.
Основные метрики
FCP(First Contentful Paint) - до первой порции отрендереного контента
FMP(First Meaningful Paint) - завершение рендеринга
FCI(First CPU Idle) - до первой интерактивности
Speed Index - показатель производительности загрузки страницы
Estimated Input Latency - скорость отклика
TTI(Time to Interactive) - до полной интерактивности

13.
Диагностика
Lighthouse предоставляет чеклист с подсказками и
рекомендациями для улучшения сайта

14.
Найти слабые места
Обычно это:
- много jquery плагинов
- блокирующие запросы
- не используется ~90% загруженного CSS
- страшные селекторы (#main > div .col h1 > .simple span)
- многократная перезапись стилей
- плохо настроенный сервер
с кем не бывает...

15.
Минимум css
- избегать большой вложенности
- избегать дублирования
- удалить лишнее
- минифицированный код

16.
Минимум js
- Vanilla JS
- оптимизированный и минифицированный код
- асинхронная загрузка (async)
- загружать, то что сейчас необходимо

17.
Оптимизация
- избегать сторонних шрифтов или оптимизировать их использование
- оптимизация изображений и видео(если есть)
- инлайн стилей в head
- минификация html
- минимум reflow и repaint

18.
Ленивая загрузка
- для изображений
- для видео
- для iframe
Intersection Observer API идёт на помощь
только по необходимости

19.
Предварительная загрузка
- preconnect
- prerender (low)
- prefetch (low)
- preload (high)
<link rel="preconnect" href="//cdn.example.com">
<link rel="prerender" href="/next-page.html">
<link rel="prefetch" href="/data.json" as="fetch">
<link rel="preload" href="/other.js" as="script">
Chrome 46+, Safari 11.1+
IE11, Chrome 13+
IE11, Edge, Firefox 2+, Chrome 8+
Chrome 50+, Safari 11.1+

20.
Кеширование
- заголовки для браузерного кеширования
- использовать CDN

21.
В итоге
СКОРОСТЬ ВОЗМОЖНОСТИ
РАЗРАБОТЧИК

22.
Дмитрий Шевченко
Website
когда-то будет...
Facebook
facebook.com/dmitry.schewchenko
Email
dschewchenko@keepsolid.com
LinkedIn
linkedin.com/in/dschewchenko