Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Оптимизация скорости сайта без использования AMP | OdessaFrontend Meetup #10

45 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Оптимизация скорости сайта без использования AMP | OdessaFrontend Meetup #10

  1. 1. Оптимизация скорости сайта без использования AMP Front End Team Lead at KeepSolid Дмитрий Шевченко
  2. 2. Немного обо мне ➔ 6 лет опыта в web разработке ➔ Почти 5 лет в KeepSolid ➔ 1 год руковожу лучшей командой Front End ➔ Имею опыт в Back End и немного в Android разработке ➔ Женат и есть прекрасная дочь
  3. 3. Зачем нам быстрый сайт? - счастливые пользователи
  4. 4. Зачем нам быстрый сайт? - счастливый босс и вся компания
  5. 5. Быть или не быть… AMP...
  6. 6. AMP Accelerated Mobile Pages Open-source библиотека, которая предоставляет “легкий путь” для создания быстрых страниц. Активно продвигается Google
  7. 7. AMP Преимущества: - быстрый сайт без знаний оптимизации - показ в карусели при поиске - хорошо индексируется - есть интеграция с популярными CMS
  8. 8. AMP Недостатки: - необходимость поддержки 2 версий сайта - навязывание интернет гигантом - жесткие ограничения - не всегда сразу пройдешь валидацию - не всегда быстрый… * Я НЕ пропагандирую НЕ использовать AMP ;-)
  9. 9. В чем секрет AMP? - минимум css(<50кб) - минимум js - оптимизация - ленивая загрузка - предварительная загрузка - кеширование на стороне CDN (Google, Cloudflare, etc.) всего по чуть-чуть в AMP
  10. 10. Как этого добиться без AMP?
  11. 11. Измерить Нам поможет Lighthouse доступен в Chrome Dev Tools
  12. 12. Основные метрики FCP(First Contentful Paint) - до первой порции отрендереного контента FMP(First Meaningful Paint) - завершение рендеринга FCI(First CPU Idle) - до первой интерактивности Speed Index - показатель производительности загрузки страницы Estimated Input Latency - скорость отклика TTI(Time to Interactive) - до полной интерактивности
  13. 13. Диагностика Lighthouse предоставляет чеклист с подсказками и рекомендациями для улучшения сайта
  14. 14. Найти слабые места Обычно это: - много jquery плагинов - блокирующие запросы - не используется ~90% загруженного CSS - страшные селекторы (#main > div .col h1 > .simple span) - многократная перезапись стилей - плохо настроенный сервер с кем не бывает...
  15. 15. Минимум css - избегать большой вложенности - избегать дублирования - удалить лишнее - минифицированный код
  16. 16. Минимум js - Vanilla JS - оптимизированный и минифицированный код - асинхронная загрузка (async) - загружать, то что сейчас необходимо
  17. 17. Оптимизация - избегать сторонних шрифтов или оптимизировать их использование - оптимизация изображений и видео(если есть) - инлайн стилей в head - минификация html - минимум reflow и repaint
  18. 18. Ленивая загрузка - для изображений - для видео - для iframe Intersection Observer API идёт на помощь только по необходимости
  19. 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. 20. Кеширование - заголовки для браузерного кеширования - использовать CDN
  21. 21. В итоге СКОРОСТЬ ВОЗМОЖНОСТИ РАЗРАБОТЧИК
  22. 22. Дмитрий Шевченко Website когда-то будет... Facebook facebook.com/dmitry.schewchenko Email dschewchenko@keepsolid.com LinkedIn linkedin.com/in/dschewchenko

×