Warum Ihre Bilder auf ein CDN gehören (und was ein Bild CDN hinzufügt)
Bilder sind in der Regel die schwerste Sache, die Sie versenden und die einfachste große gewinnen Sie nicht nehmen. Was ein CDN behebt, und die vier Dinge, die ein Bild CDN macht, dass ein einfaches nicht tut.
Öffnen Sie DevTools auf fast jeder Seite, sortieren Sie das Netzwerk-Panel nach Größe, und schauen Sie auf die oberen zehn Reihen. Auf der überwältigenden Mehrheit der Seiten werden sie alle Bilder sein, und die erste wird mehrmals größer sein als alles andere.
Das ist wirklich eine gute Nachricht, denn es bedeutet, dass der größte Hebel, der Ihnen zur Verfügung steht, auch einer der einfachsten zu ziehen ist – und im Gegensatz zu JavaScript können Bilder ganz ohne Berührung Ihres Anwendungscodes optimiert werden.
Zwei getrennte Probleme
Die Bilder sind aus zwei unabhängigen Gründen langsam, und sie verwirren ist, warum die Menschen von Halbmaßen enttäuscht sind.
Sie sind weit weg: Ein 400 KB-Foto, das von einem Ursprungsort aus zugestellt wird, dauert so lange, bis Sydney erreicht ist wie jedes andere 400 KB, was eine Weile dauert. Und sie sind zu groß: die falschen Dimensionen, das falsche Format, Qualitätseinstellungen, die niemand gewählt hat.
Ein einfaches CDN behebt das erste Problem vollständig und das zweite überhaupt nicht. Es wird Ihr unnötig riesiges Foto sehr schnell liefern. Das lohnt sich — aber es ist die Hälfte des verfügbaren Gewinns, und in der Regel die kleinere Hälfte.
Die vier Dinge, die ein Bild CDN fügt
1. Anpassung pro Anfrage
Die größte Einsparung, und die geringste glamouröse. Ein 3000-Pixel-Foto, das in einer 400-Pixel-Karte angezeigt wird, trägt etwa 56-mal die Pixeldaten, die angezeigt werden. Resizing auf das, was tatsächlich angezeigt wird — etwa das Doppelte der CSS-Dimensionen, für High-DPI-Bildschirme — entfernt routinemäßig 70 bis 90 Prozent der Bytes, bevor eine Formatumwandlung in Betracht gezogen wird.
2. Formatierung der Verhandlungen
Browser werben, welche Bildformate sie auf jeder Anfrage annehmen. Ein Bild CDN liest diesen Header und dient AVIF für Clients, die es unterstützen, WebP für diejenigen, die es nicht, und das Original für etwas Älteres — Entscheidung pro Anfrage, ohne <picture> Element zu pflegen und kein Build-Schritt, um in synchron zu halten.
3. Transformiert durch die URL angetrieben
Das ist der Teil, der die Arbeitsweise verändert. Anstatt Varianten im Voraus zu generieren, fordern Sie die Variante an, die Sie als Teil der URL wünschen – eine Breite, eine Beschneidung, eine Qualität, ein Formatüberschreiben. Die Kante erzeugt sie bei der ersten Anfrage und speichert das Ergebnis, so dass nachfolgende Anfragen für die gleiche Variante gewöhnliche Cache-Hits sind.
Die praktische Wirkung ist, dass Ihre Medienbibliothek ein hochwertiges Original pro Bild und sonst nichts enthält. Keine Thumbnail-Regeneration, kein Wiederaufbau, wenn ein Designer eine Kartenbreite ändert, keine verwaisten Derivatdateien, die sich jahrelang ansammeln. Eine Änderung des Layouts wird zu einer Änderung einer Nummer in einer URL.
4. Lieferung aus der Nähe, mit allem zwischengespeichert
Das transformierte Ergebnis wird wie jedes andere Objekt am Rand zwischengespeichert, so dass die Umwandlungskosten einmal pro Variante und nicht pro Anfrage bezahlt werden.
Warum dies eine Bauzeitpipeline schlägt
Bildvarianten zur Bauzeit generieren funktioniert und funktioniert gut, bis es auf ein CMS trifft.
Build Pipelines brechen zusammen, weil Inhalt nicht gebaut ist. Jemand lädt ein 4000-Pixel-Produktfoto durch das Admin-Panel an einem Freitagnachmittag hoch, und kein Bau läuft. Ein Konstrukteur wechselt ein Gitter von drei Spalten auf vier, und jede vorgenerierte Breite ist jetzt falsch. Eine neue Gerätekategorie kommt an und es gibt keine Variante dafür. Jeder ist individuell beherrschbar und der Grund, warum die Bildoptimierung der meisten Standorte innerhalb von etwa achtzehn Monaten nach der Einrichtung stillschweigend aufhört zu arbeiten.
Die On-Demand-Transformation hat diesen Ausfallmodus nicht, da es nichts gibt, was synchron gehalten werden kann. Die richtige Variante ist, was immer die URL verlangt.
Dies ist in der Regel der schnellste verfügbare Weg zu einem besseren Größten Contentful Paint, denn das LCP-Element auf den meisten Seiten ist ein großes Heldenbild. Optimieren, dass ein Bild häufig einen Core Web Vital von rot nach grün an einem Nachmittag bewegt – was nicht etwas ist, was man über viele Performance-Änderungen sagen kann.
Die drei Dinge, um in Ihrem HTML richtig zu bekommen
Die Kante verarbeitet die Bytes; einige Markup-Details bestimmen, ob der Browser sie gut nutzt.
- Verwenden Srcset und Größen verwenden des Desktops ein und Skalierung es nach unten. Ohne dies, Resizing hilft nur die Besucher, die zufällig auf kleinen Bildschirmen sein.
- Breite und Höhe einstellen. Es kostet nichts und verhindert die Layoutverlagerung, die während der Datei immer noch ankommt.
- Das LCP-Bild niemals faul laden. Lazy Laden unterhalb der Falte ist eine echte Speichern; Anwendung auf Ihren Helden Bild verzögert das genaue Element Google misst. Überprüfen Sie, ob Ihr CMS nicht hinzugefügt wird
loading="lazy"auf alles wahllos.
Häufig gestellte Fragen
Was ist ein Bild CDN?
Ein Bild CDN ist ein Content Delivery Netzwerk, das auch Bilder auf Anfrage transformiert – sie zu resizing, Umwandlung in moderne Formate wie WebP oder AVIF, Anpassung der Qualität und Zuschneiden – und Caches die Ergebnisse an der Rand. Sie speichern ein hochwertiges Original, und jeder Besucher erhält eine Version, die ihrem Browser und dem Platz, den das Bild belegt, angemessen ist.
Soll ich meine Bilder auf ein CDN setzen?
Ja, für fast jede Website mit Besuchern außerhalb der unmittelbaren Region Ihres Servers. Bilder machen typischerweise den größten Teil des Gesamtgewichts einer Seite aus, so dass sie von einem nahe gelegenen Rand aus zu dienen die größte einzelne Verbesserung der Ladezeit zur Verfügung stellt. Hinzufügen von On-the-Fly-Resizing- und Formatkonvertierungsverbindungen es, da Distanz und Dateigröße separate Probleme sind und eine einfache CDN nur die erste anspricht.
Wie viel kann die Bildoptimierung das Seitengewicht reduzieren?
Häufig um 80 bis 90 Prozent für die Bilder selbst. Ein 2,4 MB Foto, das auf seine angezeigten Abmessungen angepasst wird, könnte auf etwa 900 KB sinken und das in AVIF umzuwandeln, kann unter 200 KB dauern. Die Größenänderung bedeutet normalerweise mehr von der Speicherung als die Formatänderung, da übergroße Bilder extrem häufig sind.
Ist ein Image-CDN besser als Bilder zur Erstellungszeit zu erzeugen?
Für Websites mit Inhalten, die über ein CMS verwaltet werden, in der Regel ja. Für Pipelines müssen alle benötigten Varianten im Voraus bekannt und regeneriert werden, was bricht, wenn jemand ein übergroßes Bild außerhalb eines Builds hochlädt oder ein Designer eine Layoutbreite ändert. Die On-Demand-Transformation hat nichts zu synchronisieren — die erforderliche Variante ist unabhängig von den URL-Anfragen, die einmal generiert und dann zwischengespeichert werden.
Brauche ich srcset noch, wenn ich ein Bild CDN verwende?
Doch. Das CDN kann jede gewünschte Größe erzeugen, aber nur der Browser kennt den Viewport, das Pixelverhältnis des Geräts und das Layout. srcset und Größen sind, wie der Browser dem CDN sagt, welche Größe es tatsächlich benötigt. Ohne sie, jedes Gerät verlangt das gleiche Bild unabhängig von der Bildschirmgröße, und ein großer Teil des Nutzens der On-Demand-Resizing geht ungenutzt.
Bilder sind der schwerste Teil der meisten Seiten und damit der größte verfügbare Gewinn. Ein CDN behebt den Abstand; ein Bild CDN behebt auch die Größe, indem es pro Anforderung resizing und converting und das Ergebnis caching. Laden Sie ein Original, Anforderung Varianten per URL, verwenden Sie srcset so Browser nach dem richtigen fragen, und halten Sie Ihr Heldenbild aus faulen Laden.
Sehen Sie, wie NordicCDN dies für Ihre Website tut:
Mads hat seit seinem 16. Lebensjahr in der IT gearbeitet — hauptsächlich als Hosting. Er beteiligte sich früh an einer SaaS-Firma und half, sie bis zur Übernahme durch Visma weiterzuentwickeln, hat Data-Center-Netzwerke aufgebaut und betrieben und diente als CTO eines dänischen Rechenzentrums. Er hat NordicCDN gestartet, um eine schnelle, sichere Infrastruktur einfach zu bedienen.
