Выпущен AMP Toolbox 1.0

AMP Toolbox существует уже некоторое время, но я подумал, что было бы неплохо дать надлежащее введение сейчас, когда мы достигли рубежа 1.0. Короче говоря, AMP Toolbox — это набор инструментов командной строки и JS API, которые облегчают успешную публикацию страниц AMP. Каждый инструмент можно загрузить и использовать отдельно.

Версия 1.0 включает два основных обновления:

1.   AMP documents linter : AMP Linter сообщает об ошибках и подозрительных структурах, таких как отсутствующие или неправильного размера изображения, отсутствующие заголовки CORS или недействительные метаданные.

2.   Поддержка допустимых оптимизированных AMP: AMP Optimizer теперь может генерировать допустимые AMP, что упрощает размещение оптимизированных страниц AMP.

Но есть и более крутые вещи! Давайте подробнее рассмотрим, что еще есть в AMP Toolbox.

AMP-интерфейс командной строки

Во-первых, большинство функций, включенных в AMP Toolbox, имеют интерфейс командной строки . Вы можете установить его глобально через NPM:

 $ npm install @ampproject/toolbox-cli

 $ amp помощь

Или вы можете использовать встроенный инструмент NPM ` npx` для запуска команды выключения:

 $ npx @ampproject/toolbox-cli помощь

AMP-линтер

Совершенно новый набор инструментов — linter проверяет ваши документы AMP на наличие распространенных ошибок и рекомендаций:

 $ amp lint https://amp.dev

 Изображения PASS 1x1 определяются <amp-pixel>

 ПРЕДУПРЕЖДЕНИЕ Все <amp-img> имеют разумную ширину и высоту

 > [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: фактическое соотношение [1999/1140 = 1,75] не соответствует указанному [16/9 = 1,77]

 > [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: фактическое соотношение [3680/2314 = 1,59] не соответствует указанному [16/9 = 1,77]

 PASS Видео размером менее 4 МБ

 Синтаксис PASS <amp-video><source/></amp-video> используется для видео

 Конечные точки PASS доступны из кэша

 Конечные точки PASS доступны из источника

 FAIL <meta charset> — первый тег <meta>

 > <meta charset> не первый тег <meta>

 PASS Runtime предварительно загружен

Или, если он не установлен:

 $ npx @ampproject/toolbox-cli lint https://amp.dev

Режим SXG AMP Linter полезен при добавлении поддержки SXG на ваш сайт:

 $ amp lint -f sxg https://amp.dev

 PASS /amppkg/ пересылается правильно

 Согласование содержимого приложения PASS/подписанного обмена выполнено правильно

 PASS dump-signedexchange -verify не сообщает об ошибках

Оптимизатор AMP

AMP Optimizer — это серверный инструмент для повышения производительности рендеринга страниц AMP. AMP Optimizer реализует лучшие практики производительности AMP и поддерживает рендеринг AMP на стороне сервера. Эти оптимизации могут сократить время FCP на 50%.

Вы можете использовать его через CLI:

$ amp оптимизация https://amp.dev

$ amp оптимизировать файл.html

Однако для производства лучше всего интегрировать Toolbox Optimizer как часть вашей цепочки сборки или рендеринга. Также есть промежуточное ПО Express: amp-optimizer-express , которое может динамически применять рендеринг AMP на стороне сервера.

URL-адреса кэша AMP

Для тестирования полезно проверить, работает ли страница AMP со всеми кэшами AMP. Используйте toolbox-cache-url для преобразования исходного URL в формат URL кэша AMP .

 $ amp кудри https://amp.dev

 https://amp-dev.cdn.ampproject.org/c/s/amp.dev

 https://amp-dev.amp.cloudflare.com/c/s/amp.dev

 https://amp-dev.bing-amp.com/c/s/amp.dev

Или для конкретного кэша:

 $ amp curls --cache=google https://amp.dev

 https://amp-dev.cdn.ampproject.org/c/s/amp.dev

Список кэша AMP

Также доступен API для получения списка всех официальных кэшей AMP. Это очень полезно при внедрении CORS на вашем бэкенде:

const Кэши = require('@ampproject/toolbox-cache-list');

Кэши.список().затем(консоль.журнал);

Иногда вам нужно быстро обновить или удалить документ AMP из кэша AMP. Это легко сделать с помощью CLI-версии API AMP Update Cache :

 $ amp update-cache https://www.example.com/ --privateKey/path/to/private-key.pem

Конечно, существует также версия API, доступная как часть пакета toolbox-update-cache .

AMP-CORS-

Говоря о CORS, многие компоненты AMP (например, amp-list или amp-state) используют удаленные конечные точки с помощью запросов CORS. Частью инструментария AMP является промежуточное ПО connect/express, которое автоматически добавит все заголовки CORS, необходимые для страниц AMP. Просто добавьте промежуточное ПО toolbox-cors в свое приложение express, и вы можете забыть о CORS при обслуживании страниц AMP:

 const express = require('express');

 const ampCors = require('@ampproject/toolbox-cors');

 константа приложение = экспресс();

 // Вот и все!

 приложение.использование(ampCors())

Правила проверки AMP

Если вы хотите реализовать специфичное для AMP автодополнение кода для вашего любимого текстового редактора, ознакомьтесь с amp-validator-rules : библиотекой JavaScript для запроса правил валидатора AMP. В следующем примере перечислены все допустимые атрибуты для элемента amp-img:

 импортировать validatorRules из '@ampproject/toolbox-validator-rules';

 validatorRules.fetch().then(правила => {

 // Получить все правила тегов, специфичные для веб-сайта ...

 константные теги = rules.getTagsForFormat('AMP');

 // ...найти определение тега amp-img...

 const ampImg = tags.find(e => e.tagName === 'AMP-IMG');

 const ampImgAttrs = ampImg.attrs

 // ...фильтрация глобальных, макетных и amp-bind атрибутов...

 .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)

 // ...извлечь имя...

 .map(e => e.name)

 // ...сортировать по алфавиту...

 .сортировать();

 // ...и выводим результат в консоль.

 console.log(ampImgAttrs);

 });

Вы освоили вышеуказанные обновления? Если вы чувствуете, что операция хлопотна, вы также можете выбрать Google AMP для создания веб-сайта в Yiyingbao Cloud Intelligent Website Building Platform. Создание веб-сайта занимает 3 минуты и быстрое освобождение глобальных серверов. Бесплатный опыт Горячая линия: 4006552477 15600002121