WTF is AMP и почему шмель летает?
Андрей Абрамов, Команда ВКонтакте
Web Standards Days, Ноябрь 2017
О чем поговорим
- Что не так с мобильным вебом?
- AMP — мгновенная отрисовка страниц
- Система AMP-компонентов
- Опыт разработки AMP экстеншена
- AMP: практики оптимизации
- Что ждёт технологию?
Вопросы в зал
- У кого есть мобильная версия?
- Кто любит мобильный веб?
- Кому нравится UX мобильных сайтов?
Пользователи эволюционировали
Ну и мы не отстаем
- UX-рекомендации
- Mobile-first CSS, флексбокс
- Изображения для разных размеров экранов
- Тап вместо клика
- SVG
Не-а!
Мобильный веб не дотягивает по UX
- Среднее время загрузки ~ 17 секунд
- Количество посещенных страниц меньше
- Bounce rate выше
У нас
переходный
возраст!
Причём тут шмель?
AMP — Accelerated Mobile Pages.
- Кто слышал про AMP?
- Кто внедрял AMP?
У кого уже есть?
Кому нужны быстрые сайты?
- Новостные платформы
- eCommerce
- Всем!
AMP страница
<html amp lang="en">
<head>
...
<link rel="canonical" href="https://regular.com/version">
<style amp-custom> .logo {color: green;} </style>
...
<script async src="https://cdn.ampproject.org/v0.js">
AMP страница
...
<body>
<h1>Наш контент</h1>
<amp-img src="images/picture.jpg" layout="responsive">
width="900"
height="508"
</amp-img>
Расширение AMP-VK
У ВКонтакте теперь есть embed-виджет
<amp-vk>для постов и опросов
<amp-vk ...>
data-embedtype="post"
data-owner-id="1"
data-post-id="45616"
data-hash="Yc8_Z9pnpg8..."
Опыт разработки расширения
Инструменты для разработки
Критический путь отрисовки
Оптимизация отрисовки
- Inline CSS
- JS компоненты через <script async ...>
- Ленивая загрузка ресурсов
- Кэширование
- Prerendering при поиске в Google
kill Google AMP
before it kills the web
Отдай страницу
- На мобильных сетях задержка 100-200 мс
- Нужно отдать страницу с сервера как можно быстрее < 100 мс
Critical CSS
- Инлайном отдаются стили для первого экрана
- Асинронно догружаем стили для оставшейся страницы
Поменьше шрифтов
- Браузер начинает подгружать шрифты прямо перед рендерингом
- Chrome ждёт загрузку шрифтов 3 секунды, Safari ждёт вечность
- Может можно без сторонних шрифтов?
Using UI System Fonts In Web Design
Что мы получили?
- «Починили» мобильный веб
- Временный костыль для переходного возраста
- Лучшие практики оптимизации
Спасибо за внимание!
