Googles "Accelerated Mobile Pages" (AMP) -Projekt hat in letzter Zeit dazu beigetragen, dass Websites schneller werden. Mit guter Technik und einem leistungsstarken Netzwerk zur Verteilung von Inhalten hat Google AMP-optimierte Websites direkt schneller gemacht. AMP hat jedoch auch indirekt gearbeitet, indem es uns ermutigt hat, die Optimierungen und Best Practices von AMP zu betrachten. Auch wenn Sie Ihre Website nicht AMP-konform machen möchten, ist es nützlich, AMP als ToDo-Liste für die Optimierung einer nicht AMP-Website zu verstehen.

Eine der Optimierungen auf dieser Liste ist eine Technik namens "Lazy Loading", die wir in unserem kürzlich erschienenen Artikel über die Verwendung von AMPs in Aktion gesehen haben  benutzerdefiniertes Element. Wenn ein Besucher zum ersten Mal auf einer Seite ankommt, werden nur die Bilder in oder in der Nähe des Ansichtsfensters geladen. Der Rest wird ausgelöst, wenn der Besucher nach unten blättert.

Durch Lazy Loading kann ein Besucher schneller mit Inhalten in Kontakt treten, und die höhere Ladegeschwindigkeit kann die Platzierung Ihrer Suchmaschine verbessern. Je mehr Bilder Sie auf einer Seite haben, desto schneller können Sie Verbesserungen erzielen.

In diesem Lernprogramm wird beschrieben, wie Sie Lazy Load auf Websites von Drittanbietern mithilfe eines Skripts mit dem Namen Layzr.js bereitstellen können. Wir werden die Funktionalität von AMPs replizieren Element so genau wie möglich, aber wir werden auch mit einigen der für Layzr spezifischen Funktionen arbeiten.

Lass uns anfangen!

1. Grundeinstellung

Als Teil des Artikels "AMP-Projekt: Werden Ihre Websites schneller?" Ich habe ein Grundlayout mit fünf Bildern erstellt. Damit Sie Vergleiche zwischen der Verwendung von AMP und dem Bereitstellen des verzögerten Ladevorgangs selbst erstellen können, erstellen wir dasselbe Layout für fünf Bilder. Ich werde Ihnen später in diesem Tutorial zeigen, wie verschiedene Lastgeschwindigkeitstests ausgeführt werden.

In den an dieses Tutorial angehängten Quelldateien finden Sie die AMP-Version des Layouts und die vollständige Version dessen, was Sie hier machen. Beide sind enthalten, um zu entscheiden, welcher Ansatz am besten zu Ihnen passt.

Wenn wir alles durchgehen, empfehle ich, Ihre Arbeit mit den Chrome Developer Tools zu testen (F12) mit dem Netzwerk Registerkarte geöffnet, Cache deaktivieren überprüft und Throttling auf gesetzt Normales 3G. Dies simuliert eine durchschnittliche mobile Verbindung, zeigt Ihnen in Echtzeit ein Diagramm über das Laden jedes Bildes und hilft Ihnen, einen klaren Überblick über die Funktionsweise Ihres Lazy Loading zu erhalten.

Wenn Sie die Seite zum Testen aktualisieren, halten Sie die Taste gedrückt neu laden Schaltfläche, wodurch ein Dropdown mit verschiedenen Optionen angezeigt wird. Wählen Leerer Cache und Hard Reload So simulieren Sie einen Besucher, der das erste Mal auf Ihrer Website ankommt.

Erstellen Sie eine HTML-Shell

Beginnen wir damit, die Grundlagen herunterzuschrauben. Erstellen Sie zunächst einen Ordner, in dem sich Ihr Projekt befindet, und erstellen Sie eine Datei mit dem Namen index.html.

Öffnen Sie es zur Bearbeitung und fügen Sie den folgenden Code hinzu:

         
Willkommen im faul geladenen Web
  

Mit dem obigen Code erhalten wir lediglich eine HTML-Shell und ein wenig CSS, um die Seite zu sichern Karosserie und Bilder haben keine unerwarteten Lücken um sie herum. 

Wir sind auch dabei Marge: 0 auto; Die später hinzugefügten Bilder werden zentriert.

Layzr laden

Das layzr.js-Skript verfügt über zwei praktische CDN-Quellen, aus denen Sie laden können. Wir verwenden eine von Cloudfare.

Fügen Sie diesen Code vor dem Schließen Ihrer HTML-Datei hinzu Etikett.

Wenn Sie es vorziehen, das Skript nicht von einem CDN zu laden, können Sie es stattdessen herunterladen und den kurzen Anweisungen folgen: https://github.com/callmecavs/layzr.js#download

Instanziieren

Nun, da wir Layzr geladen haben, müssen wir es ausführen, wenn die Seite geladen wird. Fügen Sie dazu diesen Code nach dem hinzu Skript Tags, die Sie gerade in den vorherigen Abschnitt eingefügt haben:

Dieser Code erstellt zunächst eine Instanz, die Layzr enthält, und sobald der DOM-Inhalt der Seite geladen wurde, verwendet er diese Instanz, um die Funktionalität von Layzr zu aktivieren.

Ihr bisheriger Code sollte jetzt so aussehen:

         
Willkommen im faul geladenen Web
    

2. Bilder hinzufügen (normale Auflösung)

Wenn Layzr geladen und bereit ist, können wir einige Bilder hinzufügen, damit es seine Magie entfalten kann. Sie können alle Bilder verwenden, die Sie möchten. Wenn Sie jedoch die genauen Codebeispiele verwenden möchten, die Sie in den folgenden Schritten sehen, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen. Dort finden Sie eine Bilder Ordner, den Sie kopieren und in Ihr eigenes Projekt einfügen können.

Wenn Sie mit Layzr Bilder hinzufügen, verwenden Sie ein reguläres Bild img Element, sondern anstelle der src Attribut, das Sie verwenden werden Daten-normal wie so:

Sicherstellen, dass Bilder Höhe haben

Damit ein Lazy-Loading-Skript funktionieren kann, muss es die Höhe aller Bilder auf einer Website kennen, damit es entscheiden kann, welche Bilder geladen werden müssen (weil sie sich im Ansichtsfenster oder in der Nähe davon befinden) und welche warten sollen.

Das Schwierige dabei ist jedoch, dass ein Bild erst dann eine Höhe hat, wenn es vollständig in eine Seite geladen wurde. Das heißt, wenn Lazy Loading funktionieren soll, benötigen wir eine Möglichkeit, der Seite Informationen über die Bildhöhe zu geben Vor Die Bilder werden geladen.

Wir werden zwei Methoden behandeln, um dies zu erreichen, eine für Bilder mit fester Größe und eine für Responsive. Das Erhöhen der Größe von Bildern durch Festlegen der Größe ist die einfachste Methode, da Sie nur hinzufügen müssen Höhe und Breite Attribute.

Machen Sie jetzt weiter und fügen Sie hinzu img Elemente über Ihren Skript-Tags mit der Daten-normal Attribut und einschließlich Höhe und Breite, für jedes Bild, das Sie laden möchten.

Diese Methode mit fester Größe lässt träge Ladevorgänge zu, verhindert jedoch, dass die Bilder reagieren, und dies ist nicht ideal. Wir werden etwas später erläutern, wie man Bildern sowohl die Höhe als auch die Reaktionsfähigkeit verleiht.

3. Legen Sie einen Ladeschwellenwert fest

Standardmäßig holt Layzr nur Bilder ein, die zum Zeitpunkt des Ladens sichtbar sind. Besucher haben jedoch ein ruhigeres Erlebnis, wenn Bilder, die sich in der nächsten Zeile (außerhalb des Ansichtsfensters) befinden, ebenfalls vorab geladen werden.

Setzen Sie dazu eine Option namens Schwelle wenn das Skript instanziiert wird. Die Funktionsweise besteht darin, dass Sie einen Wert angeben, der einen Prozentsatz der Höhe des Ansichtsfensters darstellt. Wenn Sie einen Wert von 100 festlegen, entspricht dies 100% der Höhe des Ansichtsfensters, z. 1200px. In diesem Fall wird auch etwas außerhalb des Bildschirms innerhalb von 1200 Pixel des Ansichtsfensters geladen.

Wenn Sie beispielsweise zwei große Bilder hatten, eines davon direkt außerhalb des Ansichtsfensters verschoben wurde und Ihr Schwellenwert auf 100 eingestellt war, würden beide Bilder geladen:

Um einen Schwellenwert festzulegen, ersetzen Sie diese Zeile in Ihrem Code:

const instance = Layzr ()

… mit diesem:

const-Instanz = Layzr (Schwelle: 100)

Sie können diesen Wert in den von Ihnen erstellten Websites ändern. Als interessanter Punkt scheint AMPs Lazy-Loading-Schwelle ungefähr 200 zu sein.

4. Fügen Sie Retina / HiDPI-Bilder hinzu

Das Beste an Layzr ist, dass es sehr einfach ist, Bilder für hochauflösende Geräte hinzuzufügen. Sie müssen nur das Attribut einfügen Daten-Retina. Zum Beispiel:

Aktualisieren Sie alle img Elemente in Ihrem HTML-Code, die Retina-Bilder enthalten, wie folgt:

5. Platzhalter für Responsive Image und Rückflussverhinderung

Es kann ein kniffliger Vorschlag sein, faul geladene Bilder ansprechbar zu machen. Wie bereits erwähnt, muss Layzr zunächst wissen, wann die Bilder geladen werden sollen. Da responsive Bilder ständig ihre Abmessungen ändern, ist ihre Höhe nicht vorhersagbar.

Darüber hinaus möchten wir auch etwas in unserem Seitenlayout haben, um ein Reflow zu verhindern. Reflow ist das, was passiert, wenn ein Bild vollständig geladen ist und keine Größe mehr hat, um Platz im Layout zu beanspruchen, wodurch sich alles um es herum bewegt. Dies kann für Besucher sehr frustrierend sein, die versuchen, sich auf Ihren Inhalt zu konzentrieren, nur damit sie auf der Seite herumspringen.

Wir können beide Probleme lösen, indem auf jeder Seite reaktionsfähige Platzhalter mit der richtigen Größe für jedes Bild vorhanden sind. Die Platzhalter stellen sicher, dass das Seitenlayout nicht umfließen muss, und geben Layzr-Höhen für die Arbeit frei. In diesem Artikel von Thierry Koblentz zum Thema "Erstellen intrinsischer Verhältnisse für Video" stützen wir uns auf eine geniale Technik..

Der einzige Vorbehalt besteht darin, dass Sie das Seitenverhältnis jedes vorab veröffentlichten Bildes kennen müssen, da CSS die Bilder entsprechend dem angegebenen Seitenverhältnis skaliert.

Fügen Sie einen Seitenverhältnis-Wrapper hinzu

Als erstes fügen wir ein div Wrapper um unser erstes Image div wird unser Platzhalter. Wir werden die Größe ändern div selbst mit CSS, dann setzen Sie das Bild innen, um es horizontal und vertikal zu füllen.

Wir werden das geben div Ein Klassenname, der das Seitenverhältnis des darin enthaltenen Bildes darstellt. In unserem Beispiel ist das erste Bild 960 Pixel breit und 640 Pixel hoch. Lassen Sie uns herausfinden, welches Seitenverhältnis es macht.

640 (unsere Höhe) beträgt zwei Drittel von 960 (unsere Breite), was bedeutet, dass das Bild pro 2 Höheneinheiten 3 Breiteneinheiten hat. Aspektverhältnisse werden typischerweise ausgedrückt als Breite Höhe, wie im Fall des bekannten 16: 9. Das Verhältnis unseres ersten Beispielbildes ist 3: 2.

Um dieses Seitenverhältnis darzustellen, geben wir unseren Wrapper div der Klassenname ratio_3_2.

Standard-Seitenverhältnis hinzufügen

Jetzt fügen wir das CSS hinzu, damit dies funktioniert.

Dazwischen das Bestehende Tags im Kopf Ihres index.html Datei, fügen Sie diesen Code hinzu:

 div [Klasse ^ = "Verhältnis _"] Position: relativ; Breite: 100%; 

Diese Auswahl wird unsere abholen ratio_3_2 Klasse, aber es wird auch jede andere Klasse abholen, die mit beginnt Verhältnis_. Dies bedeutet, dass wir später weitere Klassen erstellen können, um unterschiedlichen Seitenverhältnissen Rechnung zu tragen.

Innerhalb dieses Stils stellen wir sicher, dass unser Wrapper immer 100% der übergeordneten Breite beträgt. Wir setzen es auch auf Position: relativ; da dies das Bild absolut in seinem Inneren positionieren wird, werden Sie den Grund dafür später erkennen.

Geben Sie die Höhe des Seitenverhältnis-Wrappers an

Jetzt fügen wir diesen Code speziell zu unserem Code hinzu ratio_3_2 Nur Klasse:

 .ratio_3_2 / * Polsteraufsatz: berechnet (100% * (2/3)); * / Polsteraufsatz: 66,666667%; 

Das Polsterauflage Wert ist es, was uns erlaubt, unseren Wrapper zu behalten div am Seitenverhältnis wollen wir. Was auch immer die Breite der div, Durch diese Polsterung bleibt die Höhe bei 66,666667% (zwei Drittel), wodurch unser Seitenverhältnis von 3: 2 beibehalten wird.

Um festzustellen, wie viel Prozent Sie hier eingeben möchten, ermitteln Sie die Höhe Ihres Seitenverhältnisses, wenn Sie als Prozentsatz der Breite ausgedrückt wird. Das können Sie mit der Berechnung machen:

100% * (Höhe / Breite)

Für unser 3: 2-Verhältnis macht es das: 100% * (2/3) = 66,666667%

Sie können den korrekten Prozentsatz für Ihr gewünschtes Seitenverhältnis im Voraus berechnen oder wenn Sie möchten, können Sie CSS verwenden calc () Funktion wie im obigen Beispiel auskommentiert:

Polsterauflage: berechnet (100% * (2/3));

Füllen Sie den Seitenverhältnis-Wrapper mit Bild

Unser Wrapper für das Seitenverhältnis wird jetzt unabhängig von der Breite des Ansichtsfensters die gewünschten Abmessungen beibehalten. Jetzt müssen wir nur noch das darin enthaltene Bild so gestalten, dass es den Wrapper füllt und damit seine Abmessungen erbt.

Wir werden dies tun, indem wir jedes in einem verschachtelte Bild absolut positionieren Verhältnis_ klassifizierter Wrapper div, Platzieren Sie es in der oberen linken Ecke der Hülle und strecken Sie es dann auf 100% Höhe und Breite aus.

 div [class ^ = "ratio_"]> img position: absolut; oben: 0; links: 0; Breite: 100%; Höhe: 100%; 

Überprüfen Sie Ihr erstes Bild, und Sie sollten jetzt sehen, dass es sich bis zur Breite des Ansichtsfensters erstreckt. Es wird jedoch verkleinert, wenn Sie die Größe ändern, und behält dabei das Seitenverhältnis bei.

Fügen Sie zusätzliche Seitenverhältnisse hinzu

Sie haben wahrscheinlich Bilder mit allen möglichen Seitenverhältnissen und möchten diese aufnehmen können. In den Beispielbildern, mit denen wir in diesem Tutorial arbeiten, haben die ersten drei ein Seitenverhältnis von 3: 2, aber das vierte und fünfte sind 16: 9.

Um dies zu berücksichtigen, fügen Sie eine neue Klasse hinzu, die nach dem Seitenverhältnis benannt wird, d.h.. ratio_16_9, mit einem entsprechenden Polsterauflage Wert:

 .Ratio_16_9 / * Polsteraufsatz: berechnet (100% * (9/16)); * / Polsteraufsatz: 56,25%; 

Fahren Sie fort und fügen Sie das Seitenverhältnis hinzu div umhüllt den Rest der Bilder und verwendet die entsprechenden Klassen, abhängig von ihrer Größe. Sie können das auch entfernen Höhe und Breite Attribute aus Ihren Bildern, da sie jetzt alle von unserem CSS überschrieben werden.

Laden Sie die Vorschau Ihres Browsers erneut, und ändern Sie die Größe des Ansichtsfensters: Sie sollten jetzt feststellen, dass alle Ihre Bilder reagieren, während Sie die Funktion zum verzögerten Laden beibehalten und kein Reflow ausführen.

6. Fügen Sie srcset hinzu

Layzr unterstützt auch das Attribut srcset. In Browsern, die srcset unterstützen, wird dies vorrangig verwendet Daten-normal und Daten-Retina.

Anstatt die Straße zu benutzen srcset Attribut sollte jedoch mit vorangestellt werden Daten- genau wie die anderen Attribute, die wir bisher verwendet haben. 

Aktualisieren Sie den Code Ihres ersten Bildes auf:

Um zu sehen, wie dies funktioniert, gehen Sie zur Vorschau Ihres Browsers. Verkleinern Sie den Darstellungsbereich auf unter 320px Breite, laden Sie ihn neu und beobachten Sie das Netzwerkfenster. Die kleinste Version Ihres Images sollte zuerst geladen werden. Erhöhen Sie dann die Größe des Ansichtsfensters, und Sie sollten sehen, dass die mittleren und großen Versionen geladen werden.

Der in den Quelldateien enthaltene Bilderordner enthält kleine, mittlere und große Versionen jedes Bildes. Aktualisieren Sie Ihren Code, um alle in Ihrem zu verwenden data-srcset Attribute wie folgt:

Fügen Sie eine Lade-Animation hinzu

Wir sind fast fertig, aber um eine letzte Polierschicht zu erstellen, fügen wir eine Ladeanimation hinzu. Dies hilft den Besuchern mitzuteilen, welche Teile des Layouts als Platzhalter für Bilder fungieren und dass diese Bilder gerade geladen werden.

Wir verwenden einen reinen CSS-Loader, eine leicht modifizierte Version dieses großartigen Stiftes von Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

Um zu vermeiden, dass Sie zusätzliche Markierungen benötigen, wird unsere Ladeanimation in einem enthalten :nach dem psuedo-Element, das an jeden Wrapper mit Seitenverhältnis angehängt wird. Fügen Sie Ihrem CSS Folgendes hinzu:

 div [class ^ = "ratio _"]: after content: "; display: block; width: 3rem; height: 3rem; border-radius: 50%; border: .5rem double # 444; border-left: .5rem double weiß; Position: absolut; oben: berechnet (50% - 2rem); links: berechnen (50% - 2rem); Animation: Spin 0,75 s unendlich linear; @keyframes spin 0% transform: drehen (0deg); 100% umwandeln: drehen (360 Grad);

Der obige Code erstellt ein kleines kreisförmiges Ladeprogramm, zentriert es und lässt es alle 0,75 Sekunden um 360 Grad drehen.

Wir werden unseren Seitenverpackungen auch eine dunkelgraue Hintergrundfarbe hinzufügen, damit sie sich leicht vom Rest des Layouts unterscheiden lassen. Füge das hinzu Hintergrundfarbe: # 333; Zeile wie folgt:

 div [Klasse ^ = "Verhältnis _"] Position: relativ; Breite: 100%; Hintergrundfarbe: # 333; 

Schließlich müssen wir nur sicherstellen, dass sich unser Lader nicht über den Bildern befindet. Dazu fügen wir die Zeile hinzu z-Index: 1; zu unseren Bildern, verschieben Sie sie auf eine Ebene über den Ladern:

 div [class ^ = "ratio_"]> img position: absolut; oben: 0; links: 0; Breite: 100%; Höhe: 100%; z-Index: 1; 

Aktualisieren Sie Ihre Seite jetzt und Sie sollten Ihre Lade-Animation in Aktion sehen.

Ihr endgültiger Code

Nach all dem sollte der Code nun so aussehen:

         
Willkommen im faul geladenen Web
 
  
 
  
 
  
 
  
 
  
    

Einpacken

Sie haben jetzt das langsame Laden von Hand vollständig implementiert, wobei die Parität mit AMP so nahe wie möglich ist.

Es gibt ein paar Dinge, die AMP automatisch erledigt, z. B. die Verarbeitung des Seitenverhältnisses bei reaktionsfähigen Bildern. Auf der anderen Seite können Sie jedoch selbst steuern, indem Sie die Steuerung selbst vornehmen.

Wenn Sie diesen Prozess hoffentlich durchlaufen haben, können Sie entscheiden, welchen Ansatz Sie bevorzugen.

Kleine Techniker mit Netzwerkkabeln, Kirill_M / Photodune.

Danke an Michael Cavalea für ein hervorragendes Drehbuch! Weitere Informationen zu Layzr.js erhalten Sie unter: https://github.com/callmecavs/layzr.js