Wie Sie amp-img und amp-video verwenden, um Ihre Website zu beschleunigen

Kurz gesagt, AMP ist eine Methode zur Optimierung von Websites, um schneller und leistungsfähiger zu sein.

AMP steht für "Accelerated Mobile Pages" (Beschleunigte Mobilseiten), und während der Schwerpunkt auf der Leistung auf mobilen Geräten liegt, sind die Geschwindigkeitsgewinne, die damit erzielt werden können, auf nicht mobilen Geräten ebenso hilfreich. AMP enthält eine Reihe von Optimierungsmethoden, die verschiedene Arten von Vergünstigungen bieten, aber die Möglichkeit, Websites schneller zu machen, ist auf bild- und videolastigen Websites möglicherweise am wichtigsten.

Da schnellere Websites für engagiertere Besucher sorgen und potenziell höhere Platzierungen in Suchmaschinen (und damit eine höhere Bekanntheit) bieten, lohnt es sich auf jeden Fall, über AMP nachzudenken, wenn Sie das nächste webbasierte Schaufenster Ihrer Arbeit erstellen.

AMP ist ein Open-Source-Projekt mit Google im Hintergrund und wird seit etwa September 2015 entwickelt. AMP-Versionen von Websites erscheinen seit dem 24. Februar dieses Jahres in den Google-Suchergebnissen. Wir haben AMP seit seiner Markteinführung Anfang des Jahres behandelt. Daher ist es eine großartige Idee, "AMP-Projekt: Werden Ihre Websites schneller werden" zu lesen, wenn Sie etwas Hintergrundwissen möchten, bevor wir fortfahren.

In diesem Artikel finden Sie viele Informationen zum Gesamtwert der Arbeit mit AMP. Wir werden uns jedoch die zwei wichtigsten Aspekte der Arbeit mit Bildern und Videos etwas genauer ansehen: AMP's Custom  und Elemente.

Was sind  und ?

Wenn Sie eine Seite gemäß den AMP-Anforderungen erstellen, verwenden Sie eine Reihe benutzerdefinierter Elemente anstelle einiger der standardmäßig verwendeten HTML-Elemente.

• Anstelle eines regulären Element, das Sie verwenden werden
• Anstelle einer  Element, das Sie verwenden werden

Wenn Sie diese benutzerdefinierten Elemente verwenden, greifen Sie automatisch auf einige der Vorteile von AMP zu. Schauen wir uns an, was sie sind und warum sie Ihrer Überlegung wert sind.

Warum verwenden? und ?

Sie wissen bereits, dass AMP dazu beitragen soll, Ihre Websites schneller zu machen und Elemente haben zu bieten? Die wichtigsten Vorteile sind wie folgt.

Faules Laden

Wenn Sie eine Seite mit mehreren Bildern haben, muss jedes Bild mit einem Klick geladen werden. Auf diese Weise kann die Gesamtladezeit Ihrer Website sehr leicht auf eine bestimmte Dauer verschoben werden. Je höher Ihre anfängliche Ladezeit ist, desto wahrscheinlicher ist es, dass Besucher Ihre Website verlassen, und desto schlimmer können Sie es in Suchmaschinen tun.

Bei einer Technik, die als "Lazy Loading" bezeichnet wird, können Sie stattdessen nur die ersten Bilder mit dem Rest laden, um später zu kommen. Es ist genügend Inhalt geladen, damit der Besucher die Seite betrachten kann, und die verbleibenden Bilder werden "faul geladen", wenn der Besucher nach unten blättert. Dadurch können Sie Ihre Ladegeschwindigkeit erheblich verbessern.

In den Tests, die ich beispielsweise als Teil meines Artikels "AMP-Projekt: Werden Ihre Websites schneller macht" ausgeführt wurde, habe ich festgestellt, dass es bei einer simulierten mobilen Verbindung 26 Sekunden dauerte, um eine Seite mit fünf 500-KB-Bildern zu laden. Bei einer AMP-Version desselben Standorts wurde die Ladezeit auf 16 Sekunden reduziert.

Kein Layout-Reflow

Eine der Hauptvorteile bei der Verwendung von AMP besteht darin, dass das Seitenlayout mehrmals "umgeschichtet" wird. 

Während eine Seite bedient wird, haben die Elemente der entladenen Medien zunächst keine Höhe oder Breite. Daher legt der Browser die Dinge so fest, als seien die Medien nicht Teil der Seite. Wenn ein Bild fertig geladen ist, muss das Layout neu berechnet werden, wobei andere Elemente verschoben und in der Größe verändert werden, damit sie sich an das Bild anpassen. Wenn auch andere Medien noch geladen werden müssen, muss die Seite für jedes Element immer wieder umfließen.

Insbesondere auf mobilen Geräten kann der Besucher frustriert sein, wenn er bereits beschäftigt ist und das, worauf er sich konzentriert, durch Reflow plötzlich außer Sicht gerät. Dies kann sehr leicht zu einer verringerten Aufmerksamkeit des Besuchers oder zum Verlassen der Website führen, insbesondere wenn dies mehrmals geschieht.

Bei AMP tritt kein Reflow auf. Dies liegt daran, dass jedem Medium ein Platzhalter mit korrekter Größe hinzugefügt wird, der von Anfang an in das Layout eingefügt wird. Sobald das Medium geladen ist, ersetzt es den Platzhalter. Es ist kein Reflow erforderlich.

Kostenloser CDN-Zugang

Speicher und Bandbreite für große Mengen an Medien können ziemlich schnell teuer werden. Die Auswahl eines Hosts, der den Zuschauern auf der ganzen Welt schnell liefern kann, ist nicht immer einfach.

Wenn Sie AMP verwenden, erhalten Sie jedoch Zugang zu einem von Google kostenlos bereitgestellten CDN. Solange Sie eine Seite erstellen, die die AMP-Gültigkeitsprüfung bestanden hat, speichert Google Ihre HTML-Dokumente, JS-Dateien und Bilder automatisch im AMP-CDN.

Relativ freihändig

Die Wahrheit ist, dass die meisten Dinge, die AMP für Sie tut, auch auf andere Weise mithilfe verschiedener Skripts und Methoden ausgeführt werden können. Einer der großen Vorteile der Verwendung von AMP besteht jedoch darin, dass Sie sich nicht mit den technischen Details vertraut machen müssen, die für die Einrichtung gleichwertiger Optimierungen erforderlich sind.

Durch die Verwendung von AMP können Sie das manuelle Auswählen, Konfigurieren und Verwalten mehrerer Skripts und Prozesse vermeiden. Stattdessen verwenden Sie einfach AMP wie vorgeschrieben, und alles geschieht im Hintergrund, ohne dass Sie dabei mitwirken müssen.

Erste Schritte mit AMP

Bevor wir uns mit den Besonderheiten der Verwendung beschäftigen und Sie müssen wissen, wie Sie eine AMP-Seite mit dem erforderlichen Boilerplate-Code erstellen. Wir haben in einem anderen Tutorial erklärt, wie man das macht. Um den Ball ins Rollen zu bringen, kannst du zu "Wie erstelle ich eine grundlegende AMP-Seite von Grund auf".

Es ist nicht notwendig, das vollständige Tutorial durchzuführen. Wenn Sie also bis zum Ende des Abschnitts mit dem Titel "Inline CSS behandeln" durcharbeiten, können Sie hierher zurückkehren.

Wie benutzt man

Auf einer AMP-Seite verwenden Sie jedes einzelne Bild laden. Lassen Sie uns durchgehen, wie der Code richtig verwendet wird und was die zugehörigen Attribute tun.

(Sie finden die vollständige Dokumentation für auf der AMP-Projektreferenz-Website).

Wesentliche Einschlüsse

Beim Hinzufügen eines  Element gibt es einige wesentliche Attribute, die Sie hinzufügen müssen. Wie bei einem regulären Sie müssen ein Element verwenden src Attribut, um den Ort Ihres Bildes anzugeben, und ein alt Attribut, um einen Text-Fallback festzulegen.

Es ist auch ein Anforderung in AMP, den Sie angeben Höhe und Breite jedes Mal. Dies liegt daran, dass AMP die Attribute height und width verwendet, um die Größe der Platzhalter festzulegen, bevor das Bild geladen wird.

Wenn Sie sich Sorgen machen, wie sich Bilder bei der Festlegung fester Bemaßungen verhaltensabhängig verhalten sollen, machen Sie sich keine Sorgen, denn AMP verfügt über eine Funktionalität, um responsive Anpassungen vorzunehmen, auf die wir später noch eingehen werden.

Ein grundlegendes Beispiel für die Element mit diesen wesentlichen Einschlüssen ist:

Srcset verwenden

Das Element liefert ein srcset Attribut, mit dem alternative Bilder angegeben werden können, die entweder mit unterschiedlichen Breiten oder Pixeldichten angezeigt werden. 

Es wird genauso verwendet wie in einem normalen  Element, so können Sie das Attribut unter: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset vollständig heruntergefahren bekommen

Um beispielsweise verschiedene Bilder mit unterschiedlichen Pixeldichten bereitzustellen, können Sie Folgendes verwenden:

Oder laden Sie unterschiedliche Bilder abhängig von der Breite des Ansichtsfensters, das Sie verwenden könnten:

Beachten Sie, wenn Sie Werte verwenden, die enthalten w das src Attribut wird in Browsern ignoriert, die srcset unterstützen.

Attribution hinzufügen

Wenn Sie einem Bild einen Kredit geben müssen, können Sie es verwenden Zuschreibung, zum Beispiel:

Design von Platzhaltern

Wenn Sie das Erscheinungsbild der Platzhalter steuern möchten, die auf Ihrer Seite angezeigt werden, während Bilder geladen werden, können Sie dies mit CSS anstreben Amp-Img Element, zum Beispiel:

amp-img Hintergrundfarbe: grau; 

Wie benutzt man

In einer AMP-Seite verwenden Sie wann immer Sie ein Video aus Ihrer eigenen Quelle einbetten möchten. Wenn Sie Videos von Drittanbietern einbetten möchten, beispielsweise von YouTube oder über einen iFrame, können Sie stattdessen andere Elemente wie verwenden oder .

(Wieder finden Sie die vollständige Dokumentation für auf der AMP-Projektreferenz-Website).

Wesentliche Einschlüsse

Wie bei , Bei der Verwendung gibt es einige wesentliche Einschlüsse . Noch einmal src ist erforderlich, um den Ort des Videos und beide anzugeben Höhe und Breite sind erforderlich, damit AMP die Seite beim Laden korrekt anordnen kann.

Ein grundlegendes Beispiel mit den erforderlichen Attributen könnte sein:

Einen Fallback hinzufügen

Falls das Video aus irgendeinem Grund nicht geladen oder angezeigt wird, ist es möglich, einen Fallback durch Schachteln von a einzurichten

 
 
Video konnte nicht geladen werden. Bitte überprüfen Sie, ob Ihr Browser HTML5-Video unterstützt.
 
 

 
 
Video konnte nicht geladen werden. Bitte überprüfen Sie, ob Ihr Browser HTML5-Video unterstützt.