O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Оптимизация скорости сайта
без использования AMP
Front End Team Lead at KeepSolid
Дмитрий Шевченко
Немного обо мне
➔ 6 лет опыта в web разработке
➔ Почти 5 лет в KeepSolid
➔ 1 год руковожу лучшей командой Front End
➔ Имею...
Зачем нам быстрый сайт?
- счастливые пользователи
Зачем нам быстрый сайт?
- счастливый босс и вся компания
Быть или не быть… AMP...
AMP
Accelerated Mobile Pages
Open-source библиотека, которая предоставляет “легкий
путь” для создания быстрых страниц.
Акт...
AMP
Преимущества:
- быстрый сайт без знаний оптимизации
- показ в карусели при поиске
- хорошо индексируется
- есть интегр...
AMP
Недостатки:
- необходимость поддержки 2 версий сайта
- навязывание интернет гигантом
- жесткие ограничения
- не всегда...
В чем секрет AMP?
- минимум css(<50кб)
- минимум js
- оптимизация
- ленивая загрузка
- предварительная загрузка
- кеширова...
Как этого добиться без AMP?
Измерить
Нам поможет Lighthouse
доступен в Chrome Dev Tools
Основные метрики
FCP(First Contentful Paint) - до первой порции отрендереного контента
FMP(First Meaningful Paint) - завер...
Диагностика
Lighthouse предоставляет чеклист с подсказками и
рекомендациями для улучшения сайта
Найти слабые места
Обычно это:
- много jquery плагинов
- блокирующие запросы
- не используется ~90% загруженного CSS
- стр...
Минимум css
- избегать большой вложенности
- избегать дублирования
- удалить лишнее
- минифицированный код
Минимум js
- Vanilla JS
- оптимизированный и минифицированный код
- асинхронная загрузка (async)
- загружать, то что сейча...
Оптимизация
- избегать сторонних шрифтов или оптимизировать их использование
- оптимизация изображений и видео(если есть)
...
Ленивая загрузка
- для изображений
- для видео
- для iframe
Intersection Observer API идёт на помощь
только по необходимос...
Предварительная загрузка
- preconnect
- prerender (low)
- prefetch (low)
- preload (high)
<link rel="preconnect" href="//c...
Кеширование
- заголовки для браузерного кеширования
- использовать CDN
В итоге
СКОРОСТЬ ВОЗМОЖНОСТИ
РАЗРАБОТЧИК
Дмитрий Шевченко
Website
когда-то будет...
Facebook
facebook.com/dmitry.schewchenko
Email
dschewchenko@keepsolid.com
Linke...
Оптимизация скорости сайта без использования AMP | OdessaFrontend Meetup #10
Оптимизация скорости сайта без использования AMP | OdessaFrontend Meetup #10
Оптимизация скорости сайта без использования AMP | OdessaFrontend Meetup #10
Оптимизация скорости сайта без использования AMP | OdessaFrontend Meetup #10
Próximos SlideShares
Carregando em…5
×

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

55 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×