Bild-Upload-Optimierung

Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels „So optimieren Sie das Laden von Bildern auf Ihrer Website“ .

Wenn die Site viele schöne Bilder enthält, ist dies großartig, aber sie können die Ladezeit erheblich verkürzen. Infolgedessen leidet SEO, und viele Benutzer schließen die Site, bevor sie geladen wird. Es kommt häufig vor, dass mehrere Megabyte Bilder heruntergeladen werden, um den Schieberegler auf der Hauptseite anzuzeigen.

Stellen Sie sich vor, Sie besuchen eine solche Site über ein langsames mobiles Internet. Dies kann viel Zeit in Anspruch nehmen und die meisten Benutzer schließen in dieser Situation Ihre Site einfach, noch bevor sie heruntergeladen wird. Eine gute Möglichkeit, dies zu testen, besteht darin, die Möglichkeit zu nutzen, die Internetgeschwindigkeit über Chrome Devtools zu begrenzen.

Das problem

Das Problem ist, dass es häufig vorkommt, dass der Inhalt selbst bereits geladen ist und die Bilder noch geladen werden. Infolgedessen kann der Benutzer den leeren Bereich sehen, in dem die Bilder langsam geladen werden. Dies ist eindeutig nicht das, was Sie möchten.

Im folgenden Beispiel habe ich eine einfache Website mit einem Hintergrundbild von 4,8 MB erstellt. Wie Sie sehen können, wurde das DOM in 1,14 Sekunden hochgefahren, d. H. In der Tat sieht der Benutzer den Inhalt nach 1,14 Sekunden, was für 3G-Internet ziemlich gut ist. Das Hintergrundbild wird jedoch in 27,32 Sekunden geladen. Während dieser Zeit kann der Benutzer Ihre Site bereits verlassen.



Darunter leidet nicht nur die User Experience. 2010 gab Google bekannt, dass die Download-Geschwindigkeit einer der Faktoren in ihrem Ranking-Algorithmus ist, und ich denke, dass dieser Faktor in Zukunft immer wichtiger wird.

Lösung

Wie kann man dieses Problem lösen? Nun, für den Anfang können wir unser Hintergrundbild einfach mit verschiedenen Werkzeugen komprimieren. Zum Beispiel TinyPNG , ImageOptimizer oder JPEGmini . Dies ist ein einfacher Gewinn und verkürzt die Startzeit auf ~ 10 Sekunden. Und es sieht zwar nach einem großen Entscheidungsschritt aus, aber 10 Sekunden sind immer noch zu viel.

Der nächste Schritt kann darin bestehen, das Stub-Bild herunterzuladen, bevor das Originalbild geladen wird. Ein Stub ist eine Version des Originalbildes, jedoch mit niedriger Auflösung. Wenn wir ein solches Bild erstellen, reduzieren wir die Auflösung von 7372 x 4392 Pixel auf 20 x 11 Pixel. Infolgedessen wird die Bildgröße von 4,8 MB auf 900 Byte reduziert.



Dadurch wird die Download-Geschwindigkeit von 10 Sekunden auf 550 Millisekunden reduziert. Jetzt haben wir als Hintergrund ein unscharfes Bild mit niedriger Auflösung. Dies ist eine großartige Lösung, während die Seite die ersten Sekunden lädt, aber wir möchten den Benutzern trotzdem das Originalbild mit hoher Auflösung zeigen.

Dazu müssen wir zuerst das niedrig aufgelöste Bild herunterladen und erst dann asynchron im Hintergrund das hochauflösende Original laden. Wenn die hochauflösende Version geladen ist, können wir sie an die Stelle des Stub-Bildes setzen. Dafür habe ich zuvor den folgenden Code verwendet.

(() => { 'use strict'; // Page is loaded const objects = document.getElementsByClassName('asyncImage'); Array.from(objects).map((item) => { // Start loading image const img = new Image(); img.src = item.dataset.src; // Once image is loaded replace the src of the HTML element img.onload = () => { item.classList.remove('asyncImage'); return item.nodeName === 'IMG' ? item.src = item.dataset.src : item.style.backgroundImage = `url(${item.dataset.src})`; }; }); })(); 

Dieser Code sucht nach Elementen mit der Klasse asyncImage werden alle im Attribut data-src angegebenen Bilder geladen. Sobald das Bild geladen ist, wird src für das Element <img> und für die übrigen Elemente wird das Hintergrundbild über css festgelegt.

 <div class="asyncImage" data-src="/images/background.jpg"> ... </div> 

oder

 <img class="asyncImage" src="/images/background-min.jpg" data-src="/images/background.jpg" alt="Beautiful landscape sunrise"> 

Da das Skript die Klasse nach dem Laden des Bildes aus dem Element entfernt, können wir auf Wunsch schöne Animationen mit CSS erstellen. Zum Beispiel verschwindet der Stub, wenn das Bild ersetzt wird.

Fazit

Was haben wir erreicht? Wir haben die Nutzererfahrung verbessert, das Laden der Website beschleunigt, sie für Nutzer ohne schnelles Internet zugänglicher gemacht und möglicherweise unser Ranking bei Google verbessert. Dies sind enorme Verbesserungen für solch eine kleine Veränderung.



Wie Sie sehen, laden wir den Stub für 570 Millisekunden herunter. Sobald er geladen wird, wird dem Benutzer eine niedrig aufgelöste Version unseres Originalbilds angezeigt. Sobald das Originalbild geladen wird, wird die niedrig aufgelöste Version ersetzt.

Sehen Sie hier ein funktionierendes Beispiel.

Lazy Laden von Bildern

Wenn Sie weiter gehen und das Laden von Bildern noch weiter verbessern möchten, ist es möglicherweise hilfreich, das verzögerte Laden von Bildern zu verwenden.

Lazy Loading ist eine Technik, bei der Bilder außerhalb des sichtbaren Bereichs der Seite erst geladen werden, wenn sich das Bild dem Rand des sichtbaren Bereichs nähert.

Der Vorteil ist, dass beim erstmaligen Laden weniger Daten geladen werden, da sehr oft nur ein kleiner Teil der Bilder im sichtbaren Bereich der Seite angezeigt wird und der Rest heruntergeladen werden kann, während der Benutzer einen Bildlauf durchführt. Ein Intersection Observer ist am besten geeignet, um dies zu implementieren.