AMP Toolbox 1.0 veröffentlicht

AMP Toolbox existiert bereits seit einiger Zeit, aber ich denke, jetzt, wo wir die 1.0-Meilenstein erreicht haben, ist es eine gute Idee, eine korrekte Einführung zu geben. Kurz gesagt ist die AMP Toolbox eine Sammlung von Kommandozeilen-Tools und JS-APIs, die das erfolgreiche Veröffentlichen von AMP-Seiten erleichtern. Jedes Tool kann einzeln heruntergeladen und genutzt werden.

Die Version 1.0 umfasst zwei wichtige Updates:

1. Ein Linter für AMP-Dokumente: Der AMP Linter meldet Fehler und verdächtige Strukturen, wie fehlende oder falsch dimensionierte Bilder, fehlende CORS-Header oder ungültige Elementdaten.

2. Effektive AMP-Optimierung: Der AMP Optimizer kann jetzt valides AMP generieren, wodurch optimierte AMP-Seiten einfacher zu hosten sind.

Aber es gibt noch Cooleres! Schauen wir uns genauer an, was die AMP Toolbox sonst noch bietet.

AMP CLI

Zunächst einmal haben die meisten Funktionen in der AMP Toolbox eine Kommandozeilen-Schnittstelle. Sie können sie global über NPM installieren:

$ npm install @ ampproject / toolbox-cli

$ amp help

Oder Sie können den integrierten NPM `npx`-Tool verwenden, um einen einmaligen Befehl auszuführen:

$ npx @ ampproject / toolbox-cli help

AMP Linter

Der brandneue Toolbox-Linter prüft Ihre AMP-Dokumente auf häufige Fehler und Best Practices:

$ amp lint https://amp.dev

PASS 1x1 images are specified by <amp-pixel>

WARN All <amp-img> have reasonable width and height

> [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: actual ratio [1999/1140 = 1.75] does not match specified [16/9 = 1.77]

> [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: actual ratio [3680/2314 = 1.59] does not match specified [16/9 = 1.77]

PASS Videos are under 4MB

PASS <amp-video><source/></amp-video> syntax is used for video

PASS Endpoints are accessible from cache

PASS Endpoints are accessible from origin

FAIL <meta charset> is the first <meta> tag

> <meta charset> not the first <meta> tag

PASS Runtime is preloaded

Oder ohne Installation:

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

Wenn Sie SXG-Unterstützung zu Ihrer Website hinzufügen, ist der SXG-Modus des AMP Linters sehr nützlich:

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

PASS /amppkg/ is forwarded correctly

PASS application/signed-exchange content negotiation is correct

PASS dump-signedexchange -verify does not report errors

AMP Optimizer

Der AMP Optimizer ist ein serverseitiges Tool zur Verbesserung der Leistung von AMP-Seiten. Der AMP Optimizer implementiert AMP-Best-Practices und unterstützt serverseitiges Rendering von AMP. Diese Optimierungen können die FCP-Zeit um bis zu 50% reduzieren. 

Sie können ihn über die CLI verwenden:

$ amp optimize https://amp.dev

$ amp optimize file.html

Für die Produktion ist es jedoch am besten, den Toolbox-Optimizer als Teil Ihres Build- oder Renderingsprozesses zu integrieren. Es gibt auch ein Express-Middleware: amp-optimizer-express, das dynamisches serverseitiges Rendering von AMP ermöglicht.

AMP Cache-URLs

Für Tests ist es ratsam zu überprüfen, ob AMP-Seiten für alle AMP-Caches geeignet sind. Verwenden Sie toolbox-cache-url, um die Original-URL in das AMP-Cache-URL-Format umzuwandeln.

$ amp curls 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

Oder für einen bestimmten Cache:

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

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

AMP Cache-Liste

Es gibt auch eine API, um eine Liste aller offiziellen AMP-Caches abzurufen. Dies ist besonders nützlich bei der serverseitigen Implementierung von CORS:

const Caches = require('@ampproject/toolbox-cache-list');

Caches.list().then(console.log);

Manchmal ist es notwendig, AMP-Dokumente schnell aus dem AMP-Cache zu aktualisieren oder zu entfernen. Die Verwendung der CLI-Version der AMP Update Cache API macht dies sehr einfach: 

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

Natürlich gibt es auch eine API-Version als Teil des toolbox-update-cache-Pakets.

AMP CORS

Viele AMP-Komponenten (wie amp-list oder amp-state) nutzen CORS-Anfragen, um Remote-Endpoints zu verwenden. Ein Teil der AMP Toolbox ist ein Connect/Express-Middleware, das automatisch alle für AMP-Seiten erforderlichen CORS-Header hinzufügt. Fügen Sie einfach die Toolbox-CORS-Middleware zu Ihrer Express-App hinzu, und Sie können beim Bereitstellen von AMP-Seiten CORS vergessen:

const express = require（'express'）;

const ampCors = require（'@ ampproject / toolbox-cors'）;

const app = express（）;

// That's it!

app.use(ampCors())

AMP Validierungsregeln

Wenn Sie AMP-spezifische Code-Vervollständigung für Ihren bevorzugten Texteditor implementieren möchten, sehen Sie sich amp-validator-rules an: Eine JavaScript-Bibliothek zum Abfragen der AMP-Validierungsregeln. Das folgende Beispiel listet alle gültigen Attribute des amp-img-Elements auf:

import validatorRules from '@ampproject/toolbox-validator-rules';

validatorRules.fetch().then(rules => {

 // Get all website specific tag rules ...

 const tags = rules.getTagsForFormat('AMP');

 // ...find the definition of the amp-img tag...

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

 const ampImgAttrs = ampImg.attrs

 // ...filter global, layout and amp-bind attributes...

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

 // ...extract the name...

 .map(e => e.name)

 // ...sort alphabetically...

 .sort();

 // ...and display result in the console.

 console.log(ampImgAttrs);

}）;

Haben Sie die oben genannten Updates verstanden? Falls Ihnen die Handhabung zu umständlich erscheint, können Sie auch in der Yiyunbao Cloud-Intelligent-Website-Plattform die Google AMP-Option wählen, um eine Website in 3 Minuten zu erstellen und schnell auf globalen Servern zu veröffentlichen. Kostenlose Testversion. Hotline: 4006552477  15600002121