Ein Preload soll eine wichtige Ressource früh verfügbar machen. Zeigt er auf eine andere Datei als das spätere Bild, kann er zusätzlichen Datenverkehr erzeugen. Ein scheinbar ähnlicher Dateiname bedeutet nicht, dass der Browser dieselbe Ressource wiederverwendet.
Vergleiche im Netzwerkprotokoll die vollständigen Adressen einschließlich Queryparametern. Ein Bild aus /hero.webp?width=1200 und eines aus /hero.webp?width=800 sind zunächst unterschiedliche URLs.
Den tatsächlichen Kandidaten berücksichtigen
Bei einem responsiven Bild kann der Browser einen anderen Kandidaten wählen als die fest vorgegebene Preload-Adresse. Dafür gibt es unterstützte Preload-Attribute für Bildkandidaten und Größen; ihre Verwendung muss zur tatsächlichen Bildausgabe passen. Eine pauschale zusätzliche Preload-Zeile für jedes Bild ist keine Lösung.
Halte für einen kontrollierten Vergleich fest:
Ansicht: schmaler Produkt-Hero
Preload-URL: welcher vollständige Pfad?
currentSrc des Bildes: welcher vollständige Pfad?
Netzwerk: ein genutzter Abruf oder zusätzliche ungenutzte Ressource?
Prüfe auch Anfragemodus, CORS-Einstellungen und Dateityp. Ein unnötiger Preload lässt sich manchmal besser entfernen, wenn das Bild ohnehin früh aus dem HTML entdeckt wird. Wähle die Änderung anhand der Messung.
Vergleiche nach der Korrektur dieselbe Ansicht mit frischem Cache. Teste zusätzlich einen breiten Bildschirm und eine andere Pixeldichte. Weniger Abrufe sind nur dann ein sinnvoller Befund, wenn das richtige Bild vollständig und rechtzeitig erscheint. Halte Ansichtsbreite und Pixeldichte im Vergleich fest.