Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
•
0 likes•209 views
Можно ли получить заветные 100 баллов в PageSpeed Insights, хорошо индексироваться и всё это без AMP? Легко! Дмитрий Шевченко рассказывает как этого достичь и познакомит с инструментом для проверки скорости сайта.
Report
Share
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
- 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