Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Оптимизация скорости сайта
без использования 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
Nächste SlideShare
Wird geladen in …5
×

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

58 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×