Внедрение AMP для увеличения скорости загрузки страницы

Большинство вебмастеров и разработчиков знают, что время загрузки сайта имеет решающее значение для общего успеха сайта. Обычный пользователь не будет ждать более трех секунд загрузки страницы. Он просто уйдет, нивелируя все ваши усилия по красивому оформлению сайта и качественному наполнению актуальным контентом. Чтобы посетители оставались на вашем сайте, вам нужно серьезно заняться оптимизацией ваших страниц.

Однако решение данной задачи не такое простое, как кажется, и особенно это относится к оптимизации для мобильных устройств. С увеличением числа людей, которые используют мобильные устройства для выхода в Интернет, это особенно важно. К счастью, теперь вы можете использовать Ускоренные мобильные страницы (Accelerated Mobile Pages или AMP), которые помогут вам оптимизировать сайт под мобильные устройства.

Что такое Accelerated Mobile Pages (AMP)?

Google запустил AMP в октябре 2015 года. Это проект с открытым исходным кодом, который призван более быстро загружать веб-страницы на мобильных устройствах. Основной целью проекта было помочь вебмастерам повысить скорость загрузки сайта, даже с большим количеством рекламы, что является основным источником дохода для многих сайтов. Многие вебмастера сами могут сделать это, но для этого требуются довольно сложные этапы оптимизации. А проект AMP упрощает достижение оптимальных результатов для всех платформ, включая и мобильные устройства.

AMP планируется в будущем интегрировать в платформу Google, поэтому было бы неплохо начать использование данного решения уже сейчас. Пока ваши конкуренты еще думают, вы уже сможете порадовать посетителей своего сайта. К тому же, высокая скорость загрузки сайта уже не является чем-то недостижимым, а становится просто необходимостью.

Как работает AMP?

В AMP используются три основные части: язык разметки, обработка ресурсов и сеть доставки контента (CDN). Разметка AMP HTML похожа на стандартный HTML, за исключением использования своих собственных тегов и свойств. Основная идея разметки заключается в том, чтобы контент страницы рендерился максимально быстро. Многие элементы загружаются до того, как пользователь начнет нервничать, а в это время страница в фоновом режиме подгружает остальные элементы, включая рекламу.

JavaScript в AMP используется, чтобы добавить на страницу интерактивные элементы, такие как опросы, лайтбоксы или iframe. Хотя разработчики AMP пытаются полностью избавиться от JavaScript, используя веб-компоненты и кастомные элементы, сейчас использование скриптов сведено к минимуму. Учтите, кстати, что вы не сможете использовать JavaScript собственные или третьей стороны, а только официально поддерживаемые скрипты.

CDN для AMP является сейчас необязательной опцией. На данный момент Google делает кэширование и оптимизацию AMP страниц, используя свою службу CDN. Однако вы можете создать свой собственный CDN или использовать свой веб-сервер.

Более подробно о реализации AMP на своем сайте читайте в нашей предыдущей статье.

К чему мне готовиться с AMP?

Чтобы достичь оптимальной скорости загрузки сайта для мобильных устройств, вам нужно будет реализовать несколько вещей. Вам нужно будет поддерживать две версии всех ваших страниц. Одна из них – это версия вашего сайта для ПК (стандартная версия), а вторая – это AMP версия сайта. В стандартной версии вы можете сохранить все интерактивные элементы, которые требуют JavaScript, в то время как в версии AMP вам нужно будет использовать самый минимум.

Вам также придется переделать шаблон своего сайта, потому что AMP требует, чтобы все таблицы CSS стилей весили меньше 50КБ и были в режиме инлайн. Все пользовательские шрифты также должны быть загружены с использованием расширения amp-font. Те же ограничения применяются к обычным изображениям, в которых должны быть определены ширина и высота, и должны использовать элемент amp-img; локальные видео должны использовать тег amp-video, а для видео с YouTube используется тег amp-youtube. Для размещения рекламы (Google AdSense) в AMP версии используется компонент amp-ad (чтобы добавить какой-то компонент, вам нужно отдельно подключать специальные скрипты).

Реализация AMP довольно сложная, но для многих CSM есть готовые плагины и модули. Подробнее об этом в нашей предыдущей статье.

После реализации второй (AMP) версии сайта, вам нужно связать стандартную и AMP версии, используя тег rel="amphtml", например, так <link rel="amphtml" href="https://sebweo.com/ru/?amp"/>. Этот тег сообщит поисковым роботам Google, что у вас реализована AMP версия сайта. Вы также должны использовать метаданные Schema.org, чтобы идентифицировать тип контента на странице (например, статья, рецепт, обзор), что позволит странице попасть в новостную карусель Google Search.

Преимущество AMP – скорость загрузки страницы

Основная цель AMP – быстро загружать страницы сайта. Если сравнивать скорость загрузки стандартной версии сайта и AMP, то последняя показывает улучшение скорости на 85%. Это означает, что если ваша стандартная страница сайта загружается за 3 секунды (минимальная скорость), то AMP-версия будет загружаться за 0,45 секунды, что практически мгновенно.

Это впечатляет, и разработчики продолжаю работы над улучшением проекта. Основным преимуществом AMP HTML является использование значительно небольшого количества HTTP-запросов для загрузки страницы, а это значит, что даже при медленных соединениях вы получите вполне комфортную скорость загрузки страницы.