Statistiken wiederholen sich immer wieder über die starke Korrelation zwischen einem Rückgang der Seitenladegeschwindigkeit einer Website und einem Anstieg der Absprungrate mit einem Rückgang der Conversion. Ich werde Amerika nicht entdecken, wenn ich sage, dass die Site durch eine "aufgeblähte" Nutzlast (mit schlecht optimierten Bildern und redundantem HTML-Code) verlangsamt wird. Dies zwingt den Server zu unnötiger Arbeit. Ein großer Teil dieser Arbeit ist mit den Problemen der Bildoptimierung verbunden.
Richtig ausgewählte Bilder an sich ziehen die Aufmerksamkeit gut auf sich und tragen dazu bei, die Conversions zu steigern, Informationen in sozialen Netzwerken und anderen Besucherinteraktionen zu verbreiten. Daher werden sie weiterhin aktiv auf Webseiten veröffentlicht. Wie sich dies auf die Ladegeschwindigkeit dieser Seiten auswirkt, ist eine interessante Frage. Alles hängt von der Optimierungsstrategie ab.
Ich denke, dass Strategien, die auf der These beruhen, dass Bilder statische Inhalte sind, nicht sehr effektiv sind (ich werde diese Idee entwickeln und im gesamten Artikel Argumente vorbringen). Mobile Geräte machen mittlerweile einen großen Teil des Internetverkehrs aus, es gibt jedoch ein Problem: Diese Geräte haben unterschiedliche Größen, Bildschirmauflösungen, Betriebssysteme und Anwendungssoftware (z. B. Browser). Wie erstelle ich schnell eine Webseite (!) Und lade sie korrekt auf jeder Plattform und sehe zur gleichen Zeit gleich aus?
In diesem Artikel werden wir die Lösung für die Bildoptimierung in der Entwicklungsphase, der Projektzusammenstellung und / oder in der Phase der Pflege der fertigen Website reduzieren.
Einige Optimierungsstrategien können zwar den Entwurfs- und Entwicklungsprozess erheblich verkomplizieren und Wartungsprobleme verursachen. Ich schweige im Allgemeinen über die zunehmende Verschwendung von Ressourcen und Zeit während der Montage. Es gibt viele Methoden und Werkzeuge zur Optimierung von Bildern. Einige von ihnen sind jedoch nicht einfach zu bedienen, ohne komplexe und sich wiederholende Prozesse zu automatisieren. Wir werden uns vier Strategien ansehen und herausfinden, mit welcher Sie die automatische (dynamische) Bildoptimierung für verschiedene Geräte besser automatisieren und flexibel gestalten können.
Wir werden vier Strategien testen. Zunächst geben wir ohne Bildoptimierung einfach einen einfachen adaptiven Code mit allen Haltepunkten und Bildoptionen für den Server an den Server weiter. Anschließend werden wir uns mit der Optimierung in der Erstellungsphase befassen, in der spezielle Tools und Services zur Vorbereitung der erforderlichen Bildvarianten beitragen. Die dritte Strategie ist die Laufzeitoptimierung: Vor dem Absenden der Seite wendet ein automatisiertes Tool oder ein Onlinedienst die Optimierung des Bilds gemäß einer bestimmten Vorlage oder basierend auf Informationen aus dem Browser an. Die letzte Strategie besteht darin, Informationen über das Gerät und den Browser zu verwenden, die über andere spezialisierte Dienste abgerufen wurden, um optimierte Bilder zu generieren und zu liefern (ich werde auf jeden Fall am Ende des Artikels darüber sprechen).
Beachtung! Spoiler!
Eine gerätespezifische Bildoptimierungsstrategie liefert die besten Ergebnisse. In diesem Artikel werden die Vor- und Nachteile der Implementierung jeder Strategie und ihre Auswirkungen auf den Entwicklungsprozess von Webanwendungen erläutert.
Das ultimative Ziel der Bildoptimierung besteht darin, die Ladegeschwindigkeit von Webseiten zu verbessern. Ich verwende Google PageSpeed Insight , um Seiten zu prüfen . Sie können auf einfache Weise die Wirksamkeit einzelner Strategien analysieren. Wie ich oben geschrieben habe, werden wir mobile Seiten prüfen.
Strategie 1: Reaktionscode ohne Optimierung
Ich habe den Standard-Reaktionscode ohne Bildoptimierung verwendet: Der Browser wählt basierend auf der Bildschirmgröße einfach eine mehr oder weniger geeignete Option aus einer Reihe identischer Bilder unterschiedlicher Größe aus. Der Code enthält mehrere Haltepunkte für Bilder unterschiedlicher Größe. Sie werden durch die Anzeigegrößen von Mobiltelefonen, Tablets und Desktop-Computern bestimmt.
Aber auch hier das Problem: Es gibt Tausende solcher Konfigurationen, und jeden Tag gibt es mehr davon. Wir müssen immer mehr Haltepunkte hinzufügen. Dies erfordert jedoch mehr Entwicklungszeit, führt zu einem Überwachsen der Codebasis und in Zukunft zu Verwirrung und Fehlern.
Hier ist ein Beispiel mit vier Haltepunkten im srcset-Attribut:
<img srcset = "image-1920.jpg 1920w,
image-1280.jpg 1280w, image-640.jpg 640w, image-480.jpg 480w" size = "(min-width: 36em) 50vw, 100vw" src = " image-320.jpg "alt =" Responsive Bildsyntax "/> Überlegen Sie
nun, wie viel von diesem Code Sie in Ihrem Projekt haben können ...
Außerdem müssen Bilder für jede der aufgelisteten Größen separat erstellt werden. Dies erfordert Zeit und zusätzlichen Speicherplatz.
Sie können die Reaktionsfähigkeit auch mit CSS-Medienabfragen implementieren. Alternativ können Sie new und elements verwenden
<source>
, wobei <picture> ein Container für ein oder mehrere <source & gt-Elemente und ein <img & gt-Element ist. Alle diese Ansätze ermöglichen jedoch keine skalierbaren Lösungen.
Schließlich berücksichtigen diese Ansätze nicht die Besonderheiten des Geräts. Jedes Mal, wenn Sie Code wie diesen schreiben, versuchen Sie nur zu erraten, welche Haltepunkte verwendet werden sollen und welche Bildgrößen Sie benötigen. Darüber hinaus gibt es keine Garantie dafür, dass die Optionen, die Sie heute gut gewählt haben, morgen funktionieren.
Leistungen:
- Keine Notwendigkeit, Software zu kaufen oder ein Abonnement für zusätzliche Software oder Dienste zu bezahlen;
- Es ist relativ einfach, reaktionsschnellen Code basierend auf einem gut dokumentierten Standard zu schreiben.
Nachteile:
- Zum Speichern von Bildern unterschiedlicher Größe ist zusätzlicher Speicherplatz erforderlich.
- Zusätzliche Zeit und Mühe sind erforderlich, um eine solche „adaptive Multivarianz“ zu implementieren.
- das Wachstum des Codes und die Komplexität seiner Wartung;
- Dieser Code funktioniert nicht in allen Browsern gleich.
- keine Abhängigkeit vom Gerätekontext;
- Für die Skalierung ist ein separates CDN (Content Delivery Network) erforderlich.
- Die Fertigstellung neuer Geräte, Bildformate usw. nimmt viel Zeit in Anspruch.
Testergebnisse
Tests zeigen, dass ich nicht die besten Formate gewählt habe, auch nicht ohne Komprimierung. Und meine Bilder sind zu groß.
Strategie 2: Optimierung der Bauzeit
Eine Möglichkeit, das Erstellen von Bildvariationen zu vereinfachen, besteht in der Verwendung spezieller Bildbearbeitungs- oder Komprimierungsdienste wie Kraken , Compressor.io , Mozjpeg und Squoosh.
Sie laden Ihre Bilder und die Serviceprozesse hoch und optimieren die Bilder auf dem Server. Dann können Sie die optimierten Bilder in Ihrem Projekt verwenden. Sie können Standard- oder benutzerdefinierte Optimierungseinstellungen festlegen: verlustbehaftete oder verlustfreie Komprimierung, Größenänderung, Verkleinerung usw. Einige Dienste können mehrere Versionen desselben Bildes entsprechend den erforderlichen Abmessungen gleichzeitig bereitstellen.
Was ist, wenn Sie pleite gehen und den Grunt- oder Gulp-Builder verwenden, um Ihre Bilder zu optimieren ? Dazu reicht es aus, die entsprechenden Aufgaben zuzuweisen, die während des Builds ausgeführt werden sollen. Die Bildverarbeitung selbst kann vom imagemin js-Paket übernommen werden .
Es kann über npm installiert oder über die Befehlszeilenschnittstelle verwendet werden. Es ist eine modulare Lösung mit Plugins zum Komprimieren verschiedener Bildformate: Beispielsweise verwendet imagemin Mozjpeg für JPEG und pngquant für die PNG-Komprimierung. Das Festlegen von Bildoptimierungsoptionen ähnelt vielen SaaS-Tools.
Bei der Umsetzung dieser Strategie liegt die größte Belastung für die Entwickler. Sie müssen zuerst die Stapelverarbeitung von Bildern durch Optimieren von Tools von Drittanbietern automatisieren und dann ihren Code regelmäßig aktualisieren, um neue Bildformate zu unterstützen.
Leistungen:
- Die Bildoptimierung wird auf einem fremden Server durchgeführt.
- Dienste verarbeiten Bilder schnell genug;
- Die Optimierungssteuerung kann in Ihren Entwicklungs- und Bereitstellungsworkflow integriert werden.
- Dienste haben eine bequeme Schnittstelle zum Einstellen von Optimierungsparametern;
- viele kostenlose Tools (oder kostenlose Pläne) mit ziemlich umfangreichen Funktionen.
Nachteile:
- Auch hier dauert die Implementierung der adaptiven Multivarianz sehr lange.
- Es besteht immer noch keine Abhängigkeit vom Gerätekontext (Größe, Bildschirmauflösung usw.).
- benötigt noch Platz zum Speichern vieler Bilder;
- braucht noch ein CDN;
- Es werden noch mehr Arbeitsstunden benötigt, um die Integration mit Produkten von Drittanbietern über die API weiter zu implementieren.
- Jedes Mal, wenn neue Bildvarianten angezeigt werden, müssen Sie auch den gesamten Optimierungsprozess für bereits vorhandene Varianten ausführen.
Testergebnisse
In Bezug auf Punkte ist es etwas besser als die erste Strategie. Beschwerden über die Komprimierung haben sich beruhigt, aber über Formate und zu große Größen - sie bleiben bestehen.
Es ist wichtig zu beachten, dass die Gesamtnutzlast auf 1,4 MB gesunken ist. Dies ist 80% weniger als eine Lösung ohne Strategie und 50% weniger als eine Strategie mit adaptivem Code.
Strategie 3: Laufzeitoptimierung
Wenn wir die Seite von einem bestimmten Gerät aus besuchen, sendet der Browser eine Anfrage mit einem HTTP-Header an den Server. Der Header speichert Informationen zum Zugriffskontext und zu den Bildformaten.
Die Laufzeitoptimierung wird auf dem Server ausgeführt, kurz bevor die Antwort (Inhalt) an den Browser gesendet wird. Ziel dieser Optimierung ist es, die übertragene Datenmenge zu reduzieren, um das Laden der Webseite zu beschleunigen.
Der Header des Chrome-Browsers sieht beispielsweise folgendermaßen aus:
image / avif, image / webp, image / apng, image / *, * / *; q = 0,8
Mit dem Aufkommen von Client Hints können Sie weitere Informationen übertragen Felder, zum Beispiel DPR (Gerätepixelverhältnis, "Pixeldichte", ein Wert ähnlich der Auflösung) und Ansichtsfensterbreite (Bildschirmbreite).
Client Hints ist ein Protokoll, mit dem der Browser im HTTP-Anforderungsheader dem Server mitteilen kann, welche Art von Inhalt er empfangen möchte. Client-Hinweise fügen den HTTP-Anforderungsheadern zusätzliche Felder hinzu, die Informationen zum Browser enthalten. Eine der Hauptfunktionen dieses Protokolls besteht darin, den Server über die Größe der Bilder zu informieren, die die Seite benötigt.
Mithilfe dieser Daten bestimmen Laufzeitoptimierer, wie Bilder komprimiert werden und in welchem Format sie ausgegeben werden sollen. Für eine flexible Größenänderung müssen Sie jedoch die adaptive Logik basierend auf Haltepunkten manuell implementieren.
Diese Aufgaben werden von SaaS-Optimierern wie Cloudinary und imgix ausgeführt. Diese Plattformen verfügen normalerweise über eine automatische Optimierungsoption, wenn der Image-Server oder Proxy entscheidet, wie der Inhalt am besten optimiert werden soll. Sie können die Optimierungsparameter aber auch selbst über die API anpassen (normalerweise mithilfe einfacher URL-Parameter).
ImgIx ist ein CDN-Add-On (Amazon CloudFront), das die Bildverarbeitung in Echtzeit ermöglicht, bevor es zum Cache hinzugefügt wird. ImgIx bietet alle notwendigen Funktionen für die Bildverarbeitung sowie eine Reihe zusätzlicher Funktionen, z. B. Monochrom, Weichzeichnen, Halbton.
Oft können solche Dienste auch als CDNs dienen. Und Cloudinary verfügt über ein eigenes DAM-System (Digital Asset Management).
Alles ist in Ordnung, aber solche Optimierer können den Gerätekontext noch nicht analysieren. Der HTTP-Header kann Benutzeragentendaten übermitteln und signalisieren, dass die Seite beispielsweise über den Chrome-Browser auf einem Android-Gerät geöffnet wurde. Das reicht aber nicht. Es wird nichts darüber gesagt, ob es sich um ein Telefon oder ein Tablet handelt und wie hoch die diagonale Bildschirmauflösung ist.
Bilder werden auch auf den Servern der Plattform gespeichert, nicht auf Ihren eigenen Ressourcen. Normalerweise haben Sie jedoch ein festes Kontingent an Speicherplatz mit einem gewissen Spielraum für neue Images.
Leistungen:
- Es sind nur sehr geringe Anstrengungen erforderlich, um die Bilder zu optimieren.
- run-time CDN ;
- , , DAM ;
- URL;
- , /
- , ;
:
- , ;
- src , , -;
- - ;
- arbeitet normalerweise langsamer bei den ersten Anforderungen, da der Dienst ein Image von einer Quelle eines Drittanbieters abrufen und es dann ohne Cache optimieren muss.
Testergebnisse
Beschwerden über Komprimierung und Formate sind fast verschwunden, aber Sie können immer
noch Fehler an der Größe feststellen.
Im Vergleich zu den beiden vorherigen Strategien ist die Nutzlast um 88% gesunken. Jetzt sind es nur noch 897 KB.
Strategie 4: Optimieren für den Gerätekontext
Wie in der vorherigen Strategie benötigen wir einen Dienst mit einem Image-Server. Es sollten Anforderungsheader für die dynamische kontextsensitive Optimierung verwendet werden. Beispielsweise kann ein Browser die Unterstützung für AVIF über Akzeptieren in einer HTTP-Anforderung deklarieren. Dann überlegt sich der Dienst, welche Art von Bild im AVIF-Format angezeigt werden soll. Und hier beginnt die "Magie".
Betrachten Sie beispielsweise den ImageEngine- Dienst . Mithilfe der WURFL js-Bibliothek können vollständige Informationen über das Gerät aus dem Zugriffskontext abgerufen werden ... Neben dem Browser und dem Betriebssystem können die genaue Marke und das Modell des Geräts sowie die Bildschirmeigenschaften (Auflösung, PPI und viele andere) ermittelt werden. Es werden auch Client-Hinweise unterstützt, einschließlich des Headers zum Speichern von Daten, mit dem nicht alle Dienste arbeiten.
Dies ermöglicht einem solchen Optimierer, relevantere Bildoptionen für alle Gelegenheiten anzubieten und gleichzeitig das optimale Gleichgewicht zwischen Nutzlast und Bildqualität sicherzustellen.
Diese Dienste verwenden auch CDNs, um die Bildbereitstellung zu beschleunigen und die Cache-Trefferquoten zu verbessern. Dieser Ansatz hat im mobilen Segment des Internets einen großen Vorteil, da es so viele Geräte mit unterschiedlichen Bildschirmparametern gibt.
Diese Strategie erfordert fast keine Code-Vervollständigung. Es ist einfach genug, die src-Attributwerte des img-Tags zu aktualisieren, indem sie mit dem Optimierungsdienst verknüpft werden. Und alle.
Leistungen:
- erfordert minimalen Aufwand bei Entwicklung und Wartung;
- kann effektiv konfiguriert und vergessen werden (bei Verwendung der automatischen Optimierungseinstellungen);
- automatische und manuelle Optimierung von Bildern mithilfe von Anweisungen in der URL;
- größtmögliche Einsparungen bei der Bildnutzlast bei gleichzeitiger Beibehaltung maximaler Qualität;
- Sie können diese Strategie in wenigen Minuten implementieren und anwenden.
- Der Optimierungsservice bietet normalerweise das beste Preis- / Bandbreitenverhältnis.
- Kein Überwachsen der Codebasis: kein adaptiver Code und keine Haltepunkte.
Nachteile:
- src , , - ( );
- ;
- , , .
Jetzt freut sich Google PageSpeed Insights.
Die meisten Indikatoren haben sich deutlich verbessert. Der Dienst begann automatisch mit der Verwendung neuer Bildformate (z. B. AVIF mit optimaler Komprimierung entsprechend dem Zugriffskontext). Darüber hinaus ändern Bilder bei unterschiedlichen Bildschirmgrößen automatisch Länge und Breite und werden auch skaliert.
Unsere Gesamtnutzlast hat sich um ca. 95% verringert:
Und du wirst glücklich sein
Wie Sie sehen, haben alle Strategien ihre Vor- und Nachteile. Es besteht kein Zweifel, dass Bildoptimierungsdienste, insbesondere solche, die auf dem Gerätekontext basieren, einen Vorteil haben.
Mit der dritten und vierten Strategie können Sie den Entwicklungsprozess mit minimalen Problemen beim Erstellen, Verwalten und Speichern von Bildern rational gestalten. Darüber hinaus müssen Sie keinen verschlungenen und nicht skalierbaren Reaktionscode schreiben. Die Bildoptimierung funktioniert zuverlässig und flexibel, um neuen Geschäftsanforderungen und -anforderungen gerecht zu werden.
Machen Sie sich keine Sorgen, dass Sie die Kontrolle über Ihre Bildoptimierungseinstellungen verlieren, da Sie Ihre Anpassungen mithilfe von APIs oder einfachen URL-Parametern vornehmen können.
Natürlich müssen Sie für ein solches Vergnügen bezahlen. Vertreter der Dienststellen versichern jedoch, dass sowohl für Einzelpersonen als auch für kleine und mittlere Unternehmen kostengünstige Tarifpläne angeboten werden.
Cloud VDS von Macleod eignen sich hervorragend für das Hosting von Websites.
Registrieren Sie sich über den obigen Link oder indem Sie auf das Banner klicken und erhalten Sie 10% Rabatt für den ersten Monat der Anmietung eines Servers einer beliebigen Konfiguration!
