Was tun mit einem großen Bild, das die Website erheblich verlangsamt?

Dinge zu versuchen:

1. Wiederholte Hintergründe : Wenn ein Teil davon in ein sich wiederholendes Bild zerlegt werden kann, können Sie die Dateigröße auf diese Weise reduzieren (das Bild in Teile teilen, die sich nicht wiederholen) wie ein Logo und die Teile, die das tun, und verwenden Sie dann CSS, um es als Hintergrund zu wiederholen).

2. Caching : Sie sollten prüfen, ob das Bild ordnungsgemäß zwischengespeichert wird oder nicht. Es gibt keinen Grund, dass es bei jeder Seitenanforderung neu geladen werden sollte. Wenn die HTTP-Header das Caching korrekt zulassen, fordert der Browser sie nicht erneut an, bis das Image aus dem Cache gelöscht wurde.

   Weitere Informationen zur Cache-Steuerung mit HTTP-Headern finden Sie Ссылка .

   Verwenden Sie die Symbolleiste Web Developer , damit Firefox die Header für das Bild überprüft (drücken Sie die Taste Bild-URL, klicken Sie dann auf Informationen & gt; Antwort-Header anzeigen )

3. Dateiqualität oder -typ : Möglicherweise können Sie Photoshop auch verwenden, um das Bild entweder in einem anderen Format oder in einer niedrigeren Qualität erneut zu speichern. GIF- und JPG-Bilder können je nach Bildinhalt sehr unterschiedliche Dateigrößen für das gleiche Bild haben (GIF ist sehr gut für Grafiken mit begrenzten und / oder sich wiederholenden Farben, besonders wenn große Teile derselben Farbe in aufeinanderfolgenden horizontalen Pixeln ausgeführt werden) . Wenn das Bild fotoähnlich ist, kann JPG sehr gut sein, da eine hohe Komprimierung in sehr detaillierten Bildern verborgen werden kann.

Crunching (Entfernen unnötiger Metadaten und Finden eines effizienteren Komprimierungsalgorithmus) Das Bild mit einem ordentlichen Bildkompressor ist ein guter Anfang. Reduzieren Sie die Anzahl der Farben und ändern Sie das Format (GIF oder PNG24 in PNG8) wenn möglich.

Dies ist vielleicht völlig offensichtlich, aber ... verschiebt es, bis die Seite vollständig geladen ist (wenn der Kontrast der Farben im Hintergrundbild nicht benötigt wird, um den Vordergrundtext lesbar zu machen).

Eine einfache Möglichkeit ist, den CSS-Selektor für das Hintergrundbild von einer Klasse im Körper abhängig zu machen:

Natürlich sollte das "onload" -Attribut im body-Tag migriert werden (in ein SCRIPT-Tag am Ende der Seite oder in eine externe JavaScript-Datei). Auch für diesen Code ist keine JS-Bibliothek erforderlich. Es sollte wahrscheinlich einen Ereignisbeobachter verwenden.

Die zwei Dinge, die Sie tun möchten, sind:

1. Konvertieren Sie es in PNG (10-30% kleiner als GIF im Durchschnitt); und
2. Cache effektiv.

Der Weg zum Zwischenspeichern besteht darin, es zu versionieren und einen fernen Zukunft-Expires-Header zu verwenden. Für die Versionierung verwende ich im Allgemeinen nur die mtime (letzte modifizierte Zeit) der Datei als Abfragezeichenfolge:

Weitere Informationen finden Sie unter Tipps zur Geschwindigkeit: Hinzufügen von Kopfzeilen für zukünftige Expires zum Hinzufügen der Expires-Kopfzeile. Sie können dies mit einem Skript oder mit einer Webserverkonfiguration tun. Der Grund, warum Sie die Version benötigen, ist, dass Sie sie ändern können, um ein erneutes Laden der Datei zu erzwingen. Andernfalls müssen Sie sie umbenennen, wenn Sie sie ändern möchten.

Auf diese Weise wird der Hintergrund nur einmal heruntergeladen. Wenn Sie die Datei in mehrere Teile aufteilen, verschlechtert sich die Situation tatsächlich, da Browser dazu neigen, die Anzahl gleichzeitiger Downloads zu begrenzen, und Sie werden insgesamt mehr Daten herunterladen (mehr HTTP-Header plus Image-Datei-Overhead).

Das Bild auf einem CDN kann auch helfen (zusammen mit den anderen erwähnten Dingen), weil Leute Bilder vom CDN schneller als Ihr Server laden können.