Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

56 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Оптимизация скорости сайта без использования 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

×