Можно ли получить заветные 100 баллов в PageSpeed Insights, хорошо индексироваться и всё это без AMP? Легко! Дмитрий Шевченко рассказывает как этого достичь и познакомит с инструментом для проверки скорости сайта.

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 ;-)

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

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

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

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

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

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

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

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

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

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

23. Предварительная загрузка
- 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+

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

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

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