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

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

Recommended

10 шагов к ускорению сайта by
10 шагов к ускорению сайта10 шагов к ускорению сайта
10 шагов к ускорению сайтаNikolay Matsievsky
3.2K views15 slides
1 2 2_1_c-bitrix_kuleshov by
1 2 2_1_c-bitrix_kuleshov1 2 2_1_c-bitrix_kuleshov
1 2 2_1_c-bitrix_kuleshovelenae00
431 views46 slides
Промышленное ускорение сайтов by
Промышленное ускорение сайтовПромышленное ускорение сайтов
Промышленное ускорение сайтовNikolay Matsievsky
340 views39 slides
Drupal 6 performance by
Drupal 6 performanceDrupal 6 performance
Drupal 6 performanceAnton Ivanov
239 views22 slides
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥ by
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥CodeFest
1.6K views89 slides
Тема " Скрипты продаж в интернет-магазинах" в рамках конкурса "Бизнес на милл... by
Тема " Скрипты продаж в интернет-магазинах" в рамках конкурса "Бизнес на милл...Тема " Скрипты продаж в интернет-магазинах" в рамках конкурса "Бизнес на милл...
Тема " Скрипты продаж в интернет-магазинах" в рамках конкурса "Бизнес на милл...AdvantShop
196 views18 slides

More Related Content

What's hot

"AMP - технология на три буквы", Макс Фролов, MoscowJS 29 by
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29MoscowJS
653 views76 slides
Top 3 by
Top 3 Top 3
Top 3 Anastasiya Zagday
34 views13 slides
ReSharper: прошлое и будущее by
ReSharper: прошлое и будущееReSharper: прошлое и будущее
ReSharper: прошлое и будущееgeekfamilyrussia
315 views8 slides
Браузеры by
БраузерыБраузеры
БраузерыEkaterina Mandik
91 views8 slides

What's hot(18)

"AMP - технология на три буквы", Макс Фролов, MoscowJS 29 by MoscowJS
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
MoscowJS653 views
ReSharper: прошлое и будущее by geekfamilyrussia
ReSharper: прошлое и будущееReSharper: прошлое и будущее
ReSharper: прошлое и будущее
geekfamilyrussia315 views
Встреча "Front-end: на старт, внимание, разработка!", Сергей Пузанков by GoIT
 Встреча "Front-end: на старт, внимание, разработка!", Сергей Пузанков Встреча "Front-end: на старт, внимание, разработка!", Сергей Пузанков
Встреча "Front-end: на старт, внимание, разработка!", Сергей Пузанков
GoIT910 views
Автоматизированное тестирование UI на C# + Selenium WebDriver by Pavel Tsukanov
Автоматизированное тестирование UI на C# + Selenium WebDriverАвтоматизированное тестирование UI на C# + Selenium WebDriver
Автоматизированное тестирование UI на C# + Selenium WebDriver
Pavel Tsukanov2.5K views
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17 by MoscowJS
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
MoscowJS2K views
Разумная безопасность сайта by revisium
Разумная безопасность сайтаРазумная безопасность сайта
Разумная безопасность сайта
revisium481 views
В offline и обратно by Den Ilin
В offline и обратноВ offline и обратно
В offline и обратно
Den Ilin214 views
Chrome push notifications. Анатомия и разработка by Alexandr Mikhaylenko
Chrome push notifications. Анатомия и разработкаChrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработка
Как стать front-end разработчиком с 0? (2) by GoIT
Как стать front-end разработчиком с 0? (2)Как стать front-end разработчиком с 0? (2)
Как стать front-end разработчиком с 0? (2)
GoIT1.3K views
Автоматизированное тестирование верстки веб-сайтов, используя сравнение с диз... by SQALab
Автоматизированное тестирование верстки веб-сайтов, используя сравнение с диз...Автоматизированное тестирование верстки веб-сайтов, используя сравнение с диз...
Автоматизированное тестирование верстки веб-сайтов, используя сравнение с диз...
SQALab7.1K views
Обзор интернет браузеров by Alina Kolosova
Обзор интернет браузеровОбзор интернет браузеров
Обзор интернет браузеров
Alina Kolosova591 views

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

"Web Vitals monitoring & optimizations", Erik Himiranov by
"Web Vitals monitoring & optimizations", Erik Himiranov"Web Vitals monitoring & optimizations", Erik Himiranov
"Web Vitals monitoring & optimizations", Erik HimiranovFwdays
219 views62 slides
Поизводительность верстки: highload style by
Поизводительность верстки: highload styleПоизводительность верстки: highload style
Поизводительность верстки: highload styleTurnkeyEcommerce
756 views12 slides
Изоморфные React-приложения: производительность и масштабирование by
Изоморфные React-приложения: производительность и масштабированиеИзоморфные React-приложения: производительность и масштабирование
Изоморфные React-приложения: производительность и масштабированиеDenis Izmaylov
1.1K views111 slides
Фронтенд разработка без боли by
Фронтенд разработка без болиФронтенд разработка без боли
Фронтенд разработка без болиAnton Piskunov
3.1K views101 slides
Evgeniy Potapov Root Conf потапов by
Evgeniy Potapov Root Conf   потаповEvgeniy Potapov Root Conf   потапов
Evgeniy Potapov Root Conf потаповrit2010
262 views49 slides
евгений потапов Root Conf потапов by
евгений потапов Root Conf   потаповевгений потапов Root Conf   потапов
евгений потапов Root Conf потаповrit2010
361 views49 slides

Similar to Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10(20)

"Web Vitals monitoring & optimizations", Erik Himiranov by Fwdays
"Web Vitals monitoring & optimizations", Erik Himiranov"Web Vitals monitoring & optimizations", Erik Himiranov
"Web Vitals monitoring & optimizations", Erik Himiranov
Fwdays219 views
Поизводительность верстки: highload style by TurnkeyEcommerce
Поизводительность верстки: highload styleПоизводительность верстки: highload style
Поизводительность верстки: highload style
TurnkeyEcommerce756 views
Изоморфные React-приложения: производительность и масштабирование by Denis Izmaylov
Изоморфные React-приложения: производительность и масштабированиеИзоморфные React-приложения: производительность и масштабирование
Изоморфные React-приложения: производительность и масштабирование
Denis Izmaylov1.1K views
Фронтенд разработка без боли by Anton Piskunov
Фронтенд разработка без болиФронтенд разработка без боли
Фронтенд разработка без боли
Anton Piskunov3.1K views
Evgeniy Potapov Root Conf потапов by rit2010
Evgeniy Potapov Root Conf   потаповEvgeniy Potapov Root Conf   потапов
Evgeniy Potapov Root Conf потапов
rit2010262 views
евгений потапов Root Conf потапов by rit2010
евгений потапов Root Conf   потаповевгений потапов Root Conf   потапов
евгений потапов Root Conf потапов
rit2010361 views
Изоморфные React-приложения производительность и масштабирование / Денис Изма... by Ontico
Изоморфные React-приложения производительность и масштабирование / Денис Изма...Изоморфные React-приложения производительность и масштабирование / Денис Изма...
Изоморфные React-приложения производительность и масштабирование / Денис Изма...
Ontico1.8K views
WebCamp2016:Front-End_Андрей Копёнкин_Оптимизируем мобильный веб полностью by WebCamp
WebCamp2016:Front-End_Андрей Копёнкин_Оптимизируем мобильный веб полностьюWebCamp2016:Front-End_Андрей Копёнкин_Оптимизируем мобильный веб полностью
WebCamp2016:Front-End_Андрей Копёнкин_Оптимизируем мобильный веб полностью
WebCamp220 views
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server... by rit2011
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
rit2011282 views
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центр by sportgid
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центрМониторинг веб-проектов: штаб оперативного реагирования и аналитический центр
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центр
sportgid868 views
Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного se... by Sergey Xek
Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного se...Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного se...
Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного se...
Sergey Xek577 views
Отдаем страницы быстрее или как вписаться в требования Google by IT61
Отдаем страницы быстрее или как вписаться в требования GoogleОтдаем страницы быстрее или как вписаться в требования Google
Отдаем страницы быстрее или как вписаться в требования Google
IT61249 views
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server... by rit2011
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
rit2011370 views
Tuning HighLoad J2EE web application by Shamim bhuiyan
Tuning HighLoad J2EE web applicationTuning HighLoad J2EE web application
Tuning HighLoad J2EE web application
Shamim bhuiyan1.1K views
Изоморфные react-приложения by Denis Izmaylov
Изоморфные react-приложенияИзоморфные react-приложения
Изоморфные react-приложения
Denis Izmaylov3.6K views
Автоматизация тестирования: отбрасываем лишнее и проверяем суть by SQALab
Автоматизация тестирования: отбрасываем лишнее и проверяем сутьАвтоматизация тестирования: отбрасываем лишнее и проверяем суть
Автоматизация тестирования: отбрасываем лишнее и проверяем суть
SQALab2.8K views
Вебинар по Frontend: Профессия Frontend разработчика by GoIT
Вебинар по Frontend: Профессия Frontend  разработчикаВебинар по Frontend: Профессия Frontend  разработчика
Вебинар по Frontend: Профессия Frontend разработчика
GoIT1.3K views
Системное тестирование приложений на Ruby on Rails с применением Rspec и Cap... by lshevtsov
Системное тестирование  приложений на Ruby on Rails с применением Rspec и Cap...Системное тестирование  приложений на Ruby on Rails с применением Rspec и Cap...
Системное тестирование приложений на Ruby on Rails с применением Rspec и Cap...
lshevtsov2.7K views
Разработка статических сайтов | Artem Daniliants | LumoSpark by LumoSpark
Разработка статических сайтов | Artem Daniliants | LumoSparkРазработка статических сайтов | Artem Daniliants | LumoSpark
Разработка статических сайтов | Artem Daniliants | LumoSpark
LumoSpark253 views

More from OdessaFrontend

Викторина | Odessa Frontend Meetup #19 by
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19OdessaFrontend
139 views20 slides
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee... by
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...OdessaFrontend
151 views34 slides
Великолепный Gatsby.js | Odessa Frontend Meetup #19 by
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19OdessaFrontend
122 views50 slides
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr... by
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...OdessaFrontend
214 views73 slides
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18 by
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18OdessaFrontend
82 views19 slides
Викторина | Odessa Frontend Meetup #17 by
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17OdessaFrontend
150 views23 slides

More from OdessaFrontend(20)

Викторина | Odessa Frontend Meetup #19 by OdessaFrontend
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19
OdessaFrontend139 views
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee... by OdessaFrontend
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
OdessaFrontend151 views
Великолепный Gatsby.js | Odessa Frontend Meetup #19 by OdessaFrontend
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19
OdessaFrontend122 views
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr... by OdessaFrontend
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
OdessaFrontend214 views
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18 by OdessaFrontend
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
OdessaFrontend82 views
Викторина | Odessa Frontend Meetup #17 by OdessaFrontend
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17
OdessaFrontend150 views
Антихрупкий TypeScript | Odessa Frontend Meetup #17 by OdessaFrontend
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17
OdessaFrontend108 views
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17 by OdessaFrontend
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
OdessaFrontend84 views
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17 by OdessaFrontend
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OdessaFrontend254 views
Объекты в ECMAScript | Odessa Frontend Meetup #16 by OdessaFrontend
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16
OdessaFrontend169 views
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16 by OdessaFrontend
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
OdessaFrontend159 views
Cлайдер на CSS | Odessa Frontend Meetup #16 by OdessaFrontend
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16
OdessaFrontend148 views
Современный станок верстальщика by OdessaFrontend
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщика
OdessaFrontend188 views
Викторина | Odessa Frontend Meetup #15 by OdessaFrontend
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15
OdessaFrontend87 views
DRY’им Vuex | Odessa Frontend Meetup #15 by OdessaFrontend
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15
OdessaFrontend64 views
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15 by OdessaFrontend
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
OdessaFrontend109 views
Пощупать 3д в браузере | Odessa Frontend Meetup #15 by OdessaFrontend
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
OdessaFrontend126 views
Викторина | Odessa Frontend Meetup #14 by OdessaFrontend
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14
OdessaFrontend83 views
Викторина | Odessa Frontend Meetup #13 by OdessaFrontend
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13
OdessaFrontend147 views
Структуры данных в JavaScript | Odessa Frontend Meetup #13 by OdessaFrontend
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13
OdessaFrontend1.6K views

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