Рубріки: HighloadБез категорииБраузернаяОптимизация

Google AMP для ускорения контентных страниц

admin
15.08.2020 02:00

Новая инициатива Google нацелена на улучшение веб-опыта пользователей мобильных устройств. Accelerated Mobile Pages – новый формат построения веб-страниц для оптимизации контента (картинки, JS, плагины соц. сетей) и увеличения отзывчивости мобильной версии сайта, по сути облегчая страницы.

Принцип работы

AMP состоит из трех частей:

  • AMP HTML – немного видоизмененный язык разметки, в котором некоторые теги заменены на эквиваленты с упором на AMP, а часть и вовсе запрещена;
  • AMP JS – ограничение на использование библиотеки AMP, которая заточена под асинхронную загрузку;
  • Google AMP Cache – опциональная возможность кэширования страниц AMP на сервера Google для максимально быстрой отдачи пользователям.

Основные требования и ограничения:

  • Только асинхронные скрипты;
  • Только встроенный CSS;
  • Стили ограничены размером 50 КБ;
  • Необходимо указывать размер в HTML-ссылках на внешние ресурсы (картинки);
  • JS всегда выполняется асинхронно;
  • Поддерживаются только JavaScript для AMP;
  • Шрифты загружаются при помощи тега ссылки или CSS @font-face rule.

AMP HTML

Разберем простую HTML-страницу, построенную по требованиям AMP:

<!doctype html>

****

****


****

Welcome to the mobile web

## Страница AMP с новыми тегами и асинхронным скриптом

Синтаксис AMP-страниц

HTML-документ, разработанный по [https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md требованиям технологии, должен следовать синтаксису]:

  • Начинаться с <!doctype html></b>;
  • Содержать тег верхнего уровня <html ⚡> или <html amp></b>;
  • Содержать <head> и <body></b>;
  • Первым в <head> должен стоять <meta charset="utf-8"></b>;
  • Содержать ссылку <link rel="canonical" href="$SOME_URL" /> внутри <head>, которая указывает на обычную версию страницы;
  • Содержать <meta name="viewport" content="width=device-width,minimum-scale=1"> внутри <head></b>;
  • Содержать [https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md



Дополнительно в /head> можно [https://github.com/ampproject/amphtml/blob/master/spec/amp-html-components.md включить стили]:

**

" title="

admin
Теги: amp
15.08.2020 02:00

Останні статті

Всегда перед глазами: 15 лучших тем VS Code на 2026 год

Visual Code от Microsoft, вероятно, один из самых популярных редакторов кода. Разработчики любят его за…

22.02.2026

Киберпанк по-японски: 9 лучших аниме в жанре «технологии нас погубят»

Япония сама по себе — сплошной киберпанк. Это заметил даже культовый писатель жанра Уильям Гибсон,…

21.02.2026

Не просто коробка с бантом. Как оригинально подарить гаджет: 5 незатратных способов

Сам по себе телефон Айфон 17 Про Макс – отличный подарок. У него красивая заводская…

12.02.2026

Лучшие криптобиржи для криптозаймов в 2025 году: где лучше брать кредит под крипту?

На фоне роста спроса на ликвидность в бычьем рынке 2025 года, криптозаймы снова выходят на…

09.07.2025

Что такое прокси-сервер: пояснение простыми словами, зачем нужны прокси

Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…

21.11.2024

Что такое PWA приложение? Зачем необходимо прогрессивное веб-приложение

Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…

19.11.2024