Ускоренная загрузка сайта, разработанном на Next.JS
Срок реализации – неделя
Задача
Внедрить технологию AMP на свои страницы в сжатые сроки.
Стэк
SSR Next.JS
Решение
Как работает AMP?
Accelerated Mobile Pages – это фреймворк компании Google для создания ускоренных мобильных страниц. Технология держится на трёх китах:
1) строго ограниченный функционал HTML и CSS. Используются свои теги – аналоги HTML.
2) запрет на использование стандартных JS-скриптов. Вместо этого есть своя библиотека – с готовым интерактивом и отсутствием тяжелых вычислений.
3) кэширование страниц в CDN Google.
Поисковый робот видит, что на странице используются теги AMP, подключена библиотека AMP (то есть страница проходит валидацию). Далее страница кэшируется в CDN и подгружается к пользователю из поисковой выдачи уже из кэша.
Как настроить AMP?
Изучаем amp.dev и создаём документ AMP HTML
Итак, сейчас расскажу, какими минимальными требованиями (согласно документации) должен обладать документ AMP HTML:
– Начинаться с типа документа <!doctype html>.
– Содержать тег верхнего уровня <html ⚡> (также допускается использование <html amp>) и теги <head> и <body> (необязательные в разметке HTML).
– Внутри заголовка должен стоять тег <link rel="canonical" href="$SOME_URL">, который указывает на обычную HTML-версию документа AMP HTML или на сам исходный документ, если такой версии не существует.
– В качестве первого дочернего элемента тега заголовка должно быть прописано <meta charset="utf-8">
– Содержать в теге заголовка тег <meta name="viewport" content="width=device-width"> в значении initial-scale=1.
– В качестве последнего элемента заголовка обязателен тег <script async src="https://cdn.ampproject.org/v0.js"></script>, который указывает и загружает библиотеку AMP JS.
– В теге <head> должен быть прописан следующий код:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Как мы внедряли технологию AMP на страницы заказчика
Огромным плюсом было то, что наш клиент использовал SSR Next.JS, которая поддерживает технологию AMP. Причём для её внедрения достаточно прописать одну строку кода в требуемых компонентах папки pages:
export const config = {amp: true}
Далее, с помощью стандартных тегов amp-html, формируем разметку. Здесь стоит учитывать только то, что в Next.JS стили можно задавать только инлайново. Ну и, конечно, помним, что стандартные интерактивности нужно заменить на amp-js. После проверяем валидность страниц специальным инструментом и готово!
Технология действительно ускоряет загрузку страниц. Кроме того, AMP интегрируется со множеством CMS и фреймворков. Минус в том, что со стандартными JS-скриптами придётся попрощаться. Но и не будем забывать, что AMP под капотом предоставляет обширный готовый функционал: меню, карусель, аккордеон и многое другое.
Сергей, frontend developer