Новая технология создания сайтов AMP: AMP + SSR = более быстрая загрузка

Дата выхода:2019-08-27

Виды:

AMP теперь официально поддерживает технологию, называемую рендерингом на стороне сервера (SSR), которую вы можете применить к своим страницам AMP, чтобы ускорить их загрузку. Тестирование после внедрения показало увеличение популярной метрики FCP до 50%. Google AMP Cache уже некоторое время использует эту технологию, но теперь вы можете использовать ее и на своих собственных доменах! Установка этой дополнительной оптимизации особенно важна, если вы используете AMP для своего основного сайта. Даже если вы используете «парную настройку AMP» со страницами AMP и не-AMP, эта технология гарантирует, что пользователи получат наилучшую производительность, если AMP Cache не используется, например, те, кто использует приложение Twitter.

SSR — это метод, используемый для улучшения времени первой отрисовки контента (FCP) фреймворков, которые визуализируют страницы на стороне клиента, таких как React или Vue.js. Недостатком визуализации на стороне клиента является то, что весь Javascript, необходимый для визуализации страницы, должен быть сначала загружен. Это задерживает время, когда пользователь видит фактическое содержимое страницы. Чтобы облегчить это, и React, и Vue.js поддерживают предварительную визуализацию DOM на сервере при навигационных запросах. Затем визуализация подхватывается Javascript на стороне клиента, процесс называется (ре)гидратацией. Пользователь сможет увидеть содержимое раньше.

AMP SSR работает путем удаления шаблонного кода AMP и рендеринга макета страницы на сервере. Шаблонный код AMP используется для предотвращения скачков контента при загрузке страницы. Он скрывает контент страницы до тех пор, пока не будет загружен фреймворк AMP и не будет установлен макет страницы. В результате страницы AMP страдают от той же проблемы, что и другие клиентские фреймворки: рендеринг блокируется до тех пор, пока не будет загружен Javascript. Удалив шаблонный код, AMP SSR может сократить время FCP на 50 % . Вот сравнение файла AMP с его версией SSR:

Вы можете идентифицировать страницы AMP, отображаемые на стороне сервера, по атрибуту преобразования в элементе html:

Примечание: кэши AMP устанавливают собственные флаги, например, кэш Google AMP добавляет:

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

Как использовать SSR AMP?

Нет смысла писать вручную SSR-устойчивый AMP. Вместо этого используйте инструмент для автоматического преобразования ваших файлов AMP в версии SSR, например, компилятор. В идеале это преобразование происходит заранее, до того, как пользователь запросит документ. Однако вы также можете запустить его по требованию (обязательно кэшируйте результаты, чтобы избежать повторного запуска преобразования).

В настоящее время для AMP SSR доступны два инструмента:

1. AMP Optimizer : библиотека NodeJs для создания оптимизированного AMP.

2. AMP Packager : инструмент командной строки Go, работающий с подписанными обменами .

Примечание: эти инструменты будут выполнять не только SSR, но и другие оптимизации, такие как предварительная загрузка фреймворка AMP и переупорядочивание заголовков.

Поддержка Next.js

Мы очень рады, что последняя версия Next.js 9 поддерживает AMP SSR. Next.js 9 теперь отображает оптимизированный AMP по умолчанию для AMP-first и смешанных AMP-страниц. Это делает Next.js отличным выбором для создания AMP-страниц.

Что дальше?

В будущем мы планируем сделать две большие вещи:

1. Возможность самостоятельного размещения фреймворка AMP (v0.js). Да, вы все сделали правильно, вам больше не нужно будет загружать AMP с cdn.ampproject.org. Это даст два преимущества:

· Более быстрое время взаимодействия: для загрузки AMP Framework больше не требуется второе HTTPS-подключение к cdn.ampproject.org.

· Упрощенный контроль качества: вы сами контролируете, когда следует переходить на новую версию AMP.

Однако следует отметить одно: в целях обеспечения конфиденциальности кэш AMP перезапишет URL-адреса скриптов AMP в соответствии с источником кэша при обслуживании кэшированных страниц AMP.

2. Интеграция с WordPress: версия 1.3 официального плагина AMP будет поддерживать AMP SSR «из коробки».

AMP SSR для всех

Если вы публикуете страницы AMP, вам следует публиковать страницы AMP, визуализированные на стороне сервера. Подобно минификации HTML или CSS, запуск AMP Optimizer или Go transformer должен быть обычной частью вашей цепочки сборки/рендеринга. Улучшенная производительность рендеринга имеет большое значение для времени FCP, но что еще важнее для пользовательского опыта.

Вы можете легко создать мобильный сайт AMP без указанных выше настроек. Войдите на www.eyingbao.com, платформу интеллектуального маркетинга веб-сайтов Eyingbao Cloud, и вы сможете бесплатно ее испытать и создать. Консультационная горячая линия: 4006552477 Горячая линия обслуживания клиентов: 15600002121

Предыдущая страница:42236

Следующая страница:42216

Похожие рекомендации