So optimieren Sie Bilder in WordPress (für beide Geschwindigkeit + SEO)

Wenn es um Bildoptimierung geht, haben Sie wahrscheinlich genug über Alternativtext gehört.


Es gibt tatsächlich 20 verschiedene Möglichkeiten, Bilder zu optimieren (wenn Sie sowohl SEO als auch Geschwindigkeitsoptimierung einbeziehen). Dadurch erhalten Sie bessere Ergebnisse in GTmetrix / Pingdom, können Sie bei der Suche möglicherweise höher einstufen und Ihre Inhalte viel schneller laden. Es ist mir gelungen, einen 100% GTmetrix-Bericht mit Ladezeiten von 0,5 Sekunden zu erhalten. Die Optimierung meiner Bilder in WordPress war ein großer Teil davon.

Optimieren Sie Bilder vor dem Hochladen – Wenn Sie ein Programm wie Photoshop verwenden, um Bilder vor dem Hochladen zu optimieren, können Sie viel Arbeit sparen. Sie können die Größe ändern, komprimieren, EXIF-Daten entfernen, im richtigen Format (z. B. PNG / JPEG) speichern und einen beschreibenden Dateinamen schreiben (der bei Verwendung von automatisch als Alternativtext verwendet wird Plugin für automatische Bild-Alt-Attribute). Das sind 6 Optimierungen!

Wenn Sie hochauflösende Bilder benötigen (z. B. eine Foto-Website) möchten Sie möglicherweise nicht die Größe ändern und komprimieren (Schritt 3 und 8), da diese die Qualität beeinträchtigen können, auch wenn sie nur geringfügig ist.

Hauptwerkzeuge, die ich benutze – Ich benutze GIMP Bilder in der Größe ändern / komprimieren (mein Bildeditor der Wahl), WP Rocket für mein Cache Plugin, Stellen Sie sich vor für weitere verlustfreie Komprimierung + Entfernen von EXIF-Daten, beides Cloudflare und StackPath CDN, Plugin für automatische Bild-ALT-Attribute um den Bilddateinamen automatisch als Alternativtext zu verwenden, und Optimaler Gravatar-Cache Gravatare in Kommentaren zwischenspeichern. ich benutze WP Review Pro als mein reichhaltiges Snippets Plugin, Bessere Suche ersetzen um Bilder in großen Mengen zu aktualisieren (sehr praktisch), und GTmetrix als mein Geschwindigkeitstest-Tool. Siehe die vollständige Liste der Werkzeuge.

1. Suchen Sie nach nicht optimierten Bildern

Führen Sie Ihre Site durch GTmetrix Diese Elemente werden auf den Registerkarten “Seitengeschwindigkeit / YSlow” angezeigt. Die ersten fünf sind normalerweise seitenspezifisch, Dies bedeutet, dass GTmetrix nur die nicht optimierten Bilder für die einzelne Seite anzeigt, die Sie testen. Die letzten 3 treten normalerweise auf Ihrer gesamten Site auf. Dies sind natürlich nur sieben Möglichkeiten, um Bilder zu optimieren, aber einige der wichtigsten. Deshalb werden wir diese zuerst ausführen.

  • Servieren Sie skalierte Bilder: Ändern Sie die Größe großer Bilder, um die Abmessungen zu korrigieren (Schritt 2)
  • Geben Sie die Bildabmessungen an: Geben Sie eine Breite / Höhe im HTML oder CSS des Bildes an (Schritt 3)
  • Bilder optimieren – Bilder verlustfrei komprimieren (Schritt 4)
  • Kombinieren von Bildern mit CSS-Sprites – Kombinieren Sie mehrere Bilder zu einem Bild (Schritt 5)
  • Vermeiden Sie URL-Weiterleitungen – Stellen Sie keine Bilder aus einer falschen WWW- oder http (s) -Version bereit (Schritt 6)
  • Verwenden Sie ein Content Delivery-Netzwerk – Bilder / Dateien von einem CDN bereitstellen (Schritt 7)
  • Nutzen Sie das Browser-Caching – Bilder / Dateien mit Ihrem Cache-Plugin zwischenspeichern (Schritt 8)
  • Machen Sie Favicon klein und zwischenspeicherbar – Verwenden Sie ein 16x16px-Favicon und zwischenspeichern Sie es (Schritt 9)

Bildoptimierungen in GTmetrix

Korrigieren Sie zunächst Bilder, die auf mehreren Seiten angezeigt werden: Logo-, Seitenleisten- / Fußzeilenbilder usw. Beginnen Sie auch mit der Bereitstellung von skalierten Bildern, da Sie möglicherweise die Größe ändern / sie mit neuen Abmessungen erneut hochladen müssen.

2. Skalierte Bilder bereitstellen

Wenn du siehst dienen skalierte Bilder Fehler in GTmetrix bedeuten, dass Sie übergroße Bilder haben und diese auf die richtigen Abmessungen anpassen müssen (die GTmetrix Ihnen zur Verfügung stellt). Solange Sie Ihrem Spickzettel für Bildabmessungen folgen (siehe unten), sollten diese Fehler nicht angezeigt werden. Wenn Sie jedoch bereits übergroße Bilder hochgeladen haben, müssen Sie die Größe manuell ändern oder ein Plugin verwenden.

Serve-Scaled-Images

Größenänderung von Bildern mithilfe eines Plugins – Das Problem dabei ist, dass unterschiedliche Bilder unterschiedliche Dimensionen erfordern (Widgets, Schieberegler, Bilder mit voller Breite). Während die meisten Plugins zur Bildoptimierung die Option haben, die Größe von Bildern auf eins zu ändern Single Bei bestimmten Maßeinheiten sollten Sie diese vor dem Hochladen wirklich zuschneiden / in der Größe ändern. Wenn Sie die Größe von Bildern mithilfe eines Plugins ändern, werden Sicherungskopien der Originalbilder gespeichert (und nur einige davon getestet), falls Sie mit den Ergebnissen nicht zufrieden sind.

Ändern Sie die Größe großer Bilder

Ändern Sie die Größe von Bildern manuell – Holen Sie sich die richtigen Abmessungen von GTmetrix und ändern Sie die Größe / laden Sie sie erneut hoch. Denken Sie daran, dass GTmetrix nur nicht optimierte Bilder für die einzelne Seite anzeigt, die Sie testen.

Erstellen Sie einen Spickzettel mit den Bildabmessungen Ihrer Website
Ihre Schieberegler, die Blog-Seitenleiste, die vorgestellten Bilder und der Blog-Inhaltskörper erfordern bestimmte Dimensionen, auf die die Größe der Bilder geändert werden soll. Erstellen Sie einen Spickzettel, damit Sie die Größe ändern können, bevor Sie sie in WordPress hochladen. Dies ist besonders hilfreich, wenn in vielen Bereichen Ihrer Website unterschiedliche Bildgrößen erforderlich sind und wenn Sie mehrere Designer / Redakteure haben.

Beispiel:

  • Schiebereglerbilder: 1900 (B) x 400 (H)
  • Karussellbilder: 115 (h)
  • Widget-Bilder: 414 (w)
  • Bilder von Blogposts in voller Breite: 680 (w)
  • Ausgewählte Bilder: 250 (B) x 250 (H)
  • Yoast Facebook OG Bild: 1200 (B) x 628 (H) – Schritt 11
  • Yoast Twitter OG Bild 1024 (B) x 512 (H) – Schritt 11

Rechteck mit 680 Pixel Breite

3. Geben Sie die Bildabmessungen an

Dies bedeutet, dass Sie dem HTML oder CSS des Bildes eine Breite / Höhe hinzufügen. Der visuelle Editor erledigt dies für Sie (aber Widgets, einige Seitenersteller und benutzerdefiniertes HTML unterlassen Sie). Testen Sie einige Seiten in GTmetrix.

GTmetrix zeigt Ihnen die Abmessungen des Bildes an.

Spezifische Bildabmessungen GTmetrix

Fügen Sie die Breite / Höhe zum HTML-Code des Bildes hinzu.

Geben Sie die Bildabmessungen an

4. Komprimieren Sie Bilder verlustfrei

Hierbei handelt es sich um Elemente zum Optimieren von Bildern in GTmetrix. Viele Programme (z. B. Photoshop und Gimp) können beim Exportieren komprimiert werden. Obwohl dies ein guter Anfang ist, erzielen Bildkomprimierungs-Plugins normalerweise noch bessere Ergebnisse. ich bevorzuge Stellen Sie sich vor, Krake, ShortPixel, oder Smush. Es ist bekannt, dass andere Plugins die Bildqualität visuell verringern und Fehler bei Ihren Bildern verursachen können.

Komprimieren von Bildern mit Imagify

  1. Melden Sie sich an für Stellen Sie sich vor
  2. Installiere das Stellen Sie sich das Plugin vor
  3. Sie werden mit den folgenden Anweisungen aufgefordert:
  4. Geben Sie Ihren API-Schlüssel über Ihr Imagify-Konto ein
  5. Stellen Sie Ihre Komprimierungsstufe ein (normal, aggressiv, ultra)
  6. Imagif’em all (Foto unten) mit Bulk optimiert alle Bilder auf Ihrer Website
  7. Wenn Sie Ihr Limit erreicht haben, zahlen Sie 4,99 USD oder warten Sie im nächsten Monat, um Ihr Limit zurückzusetzen

sich vorstellen

Testen Sie, wie Bilder mit unterschiedlichen Komprimierungsstufen aussehen.

Stellen Sie sich einen Komprimierungsvergleich vor

Sobald Sie sich angemeldet haben, optimieren Sie alle Bilder auf Ihrer Website in großen Mengen.

Imagify-WordPress-Image-Optimierung

Stellen Sie die Option zum Optimieren von Bildern beim Hochladen ein…

Stellen Sie sich vor, Sie optimieren Bilder beim Hochladen

5. Kombinieren Sie Bilder zu CSS-Sprites

Auf meiner Homepage sehen Sie vielleicht 21 Symbole, aber es handelt sich tatsächlich um ein einzelnes Bild. Das ist ein CSS-Sprite, Hier kombinieren Sie mehrere Bilder zu einem einzigen Bild. Dies reduziert die Anzahl der Bilder (und Anfragen), weshalb meine Homepage nur 10 Anfragen hat. Anstatt 21 Bilder zu laden, wird 1 geladen. Dazu benötigen Sie CSS-Kenntnisse oder verwenden a CSS-Sprite-Generator.

CSS Sprites

GTmetrix CSS Sprites

Verwenden Sie CSS-Sprites nur für dekorative Bilder – Sie verlieren viele Bild-Alt-Tags, wenn Sie 21 Bilder zu 1 kombinieren. Kombinieren Sie wichtige Bilder NICHT zu CSS-Sprites, wenn sie Ihren Inhalt beschreiben. Was mich betrifft, ist die Geschwindigkeit meiner Homepage wichtiger als SEO … Ich verwende den GTmetrix-Bericht meiner Homepage an vielen Stellen (also muss ich ihn sauber halten) und meine Homepage, ob Sie es glauben oder nicht, zielt nicht auf a ab Stichwort. Ziel ist es, meine Tutorials zu skizzieren … und schnell zu laden.

6. Vermeiden Sie Bild-URL-Weiterleitungen

Wenn Sie zu HTTPS oder WWW-Versionen gewechselt sind oder Bilder von einem CDN bereitgestellt haben, sollten Sie alle Ihre Bilder (und Links) mithilfe von Massenaktualisierungen aktualisieren Bessere Suche ersetzen Sie bedienen also die richtige Version. Andernfalls können Sie sehen Weiterleitungen minimieren oder Verwenden Sie Cookie-freie Domains Fehler.

Weiterleitungen minimieren

Cookie-freie Domains

Verwenden Sie das Plugin “Better Search Replace”, um Bild-URLs in großen Mengen zu aktualisieren.

Bessere Suche Ersetzen Sie WWW-Versionen

Bessere Suche Ersetzen Sie HTTP durch HTTPS

7. Stellen Sie Bilder von einem CDN bereit

Dies erfordert das Ändern der Bild-URLs, um Ihre einzuschließen CDN-URL

  • Alte Bild-URL (ohne CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Neue Bild-URL (mit CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Ich benutze beide Cloudflare und StackPath da mehr Rechenzentren = schnellere Bereitstellung von Inhalten. Cloudflare hat Über 200 Rechenzentren, StackPath hat Über 34 Rechenzentren die stark in den Vereinigten Staaten liegen (woher kommen die meisten meiner Besucher). Cloudflare weist Ihnen keine CDN-URL zu Daher verwenden wir das CDN von StackPath, um Bilder bereitzustellen.

StackPath-Rechenzentren

Schritt 1: Wählen Sie ein CDN. ich benutze StackPath (Sie haben eine 30-Tage-Testversion).

Schritt 2: Klicken Sie dann im Dashboard auf die Registerkarte CDN Erstellen Sie eine StackPath-CDN-Site

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Schritt 3: Kopieren Sie Ihre CDN-URL und fügen Sie sie in Ihr Cache-Plugin ein (unten für WP Rocket)…

WP-Rocket-CDN

Schritt 4: Ersetzen Sie Bild-URLs durch Ihre CDN-URL (mithilfe von Bessere Suche ersetzen).

Bessere Suche CDN-URL ersetzen

Schritt 5: Suchen Sie mit nach alten Bild-URLs Chrome DevTools. Manchmal ist Ihr Cache-Plugin oder CDN Enabler kümmert sich darum, mit Ausnahme von Links in CSS und JavaScript, die fest codiert sind. Für die Links, die zurückgelassen werden, sind sie normalerweise in Dateien (wie CSS oder Javascript), die manuell überprüft und ersetzt werden müssen. Chrome DevTools zeigt Ihnen alle derzeit verwendeten Domains an.

Schritt 6: Führen Sie Ihre Site in GTmetrix und “Content Delivery Network” sollte in YSlow grün sein. Sie sollten auch keine Fehler bei “Weiterleitungen minimieren” oder “Cookie-freie Domains verwenden” haben.

CDN GTmetrix YSlow

8. Bilder zwischenspeichern

Die meisten Cache-Plugins haben eine Option für Browser-Caching, welches Bilder zwischenspeichert. Ich verwende WP Rocket, das in mehreren Facebook-Umfragen als das Cache-Plugin Nr. 1 eingestuft wurde, und ich habe ein Tutorial dafür. Schnelle Leistung ist im Allgemeinen das beste kostenlose Cache-Plugin (ich habe auch ein Tutorial dafür).

Browser-Caching

9. Machen Sie Favicon klein und zwischenspeicherbar

Stellen Sie sicher, dass Ihr Favicon 16x16px groß ist, das Format favicon.ico hat und mithilfe Ihres Cache-Plugins zwischengespeichert wird.

10. Entfernen Sie EXIF-Daten

Exif-Daten Enthält Informationen wie Blende, Verschlusszeit, ISO, Brennweite, Kameramodell, Aufnahmedatum und mehr. Sie benötigen dies nicht für Bilder auf Ihrer Website. Das VA Entfernen des Exif-Plugins Entfernt Exif-Daten automatisch, sobald Bilder hochgeladen wurden.

Die meisten Bildoptimierungs-Plugins (einschließlich Imagify, ShortPixel, Kraken, EWWW und Smush) bieten die Option, EXIF-Daten automatisch zu entfernen. Hier sind die Einstellungen für Imagify…

Stellen Sie sich vor, Sie entfernen EXIF-Daten

11. Cloudflare-Bildoptimierung

Cloudflare bietet auch einige Möglichkeiten zur Optimierung von Bildern. Mirage und Polish finden Sie in Ihrem Cloudflare-Geschwindigkeitseinstellungen während Hotlink Protection in Ihrem gefunden wird Scrape Shield-Einstellungen.

Cloudflare Mirage (Pro Feature) – Reduziert Bildanforderungen, verzögert das Laden von Bildern und verbessert die Ladezeiten von Bildern auf Mobilgeräten mit langsamen Netzwerkverbindungen. Hier sind weitere Details…

  • Ändert die Größe von Bildern basierend auf dem Gerät / der Verbindung eines Besuchers. Ein Besucher mit einer schlechten Verbindung erhält eine kleinere Version (niedrigere Auflösung), bis er wieder eine höhere Bandbreite hat.
  • Reduziert die Anzahl der Anfragen – anstatt mehrere Anfragen für alle Bilder auf der Website zu senden, zieht Mirage diese in eine Anfrage, damit Besucher Bilder sofort sehen können.
  • Lazy lädt Bilder (lädt sie erst, wenn Benutzer nach unten scrollen und das Bild tatsächlich sehen)..

Cloudflare Image Mirage

Cloudflare Polish (Pro Feature) – Entfernt EXIF-Daten und komprimiert Bilder.

Cloudflare Image Polish

Cloudflare-Hotlink-Schutz – verhindert, dass Personen Ihre Bilder kopieren und auf ihrer eigenen Website einfügen, wodurch (da Sie dieses Bild noch hosten) Ihre Bandbreite aufgebraucht wird.

Cloudflare-Hotlink-Schutz

12. Lazy Load Images

Dies verzögert das Laden von Bildern, bis Benutzer die Seite nach unten scrollen und das Bild sichtbar sehen. Während es die anfänglichen Ladezeiten verbessert, kann das ständige Laden von Bildern beim Scrollen sehr ärgerlich sein. Ich persönlich lade nur faul Videos, da das Laden viel länger dauert als das Laden von Bildern.

Du kannst den … benutzen Lazy Load Plugin, Lazy Load For Videos Plugin, oder benutze WP Rocket…

WP-Rocket-Lazy-Load

13. Als korrektes Format speichern

PNG vs. JPEG – PNG ist unkomprimiert (größere Datei) und sollte in einfachen Bildern ohne viele Farben verwendet werden. JPEG ist eine komprimierte Datei (kleinere Dateigröße), die die Bildqualität geringfügig verringert, jedoch kleiner ist und in Bildern mit vielen Farben verwendet wird. GIMP und andere Bildbearbeitungsprogramme sollten automatisch das richtige Format verwenden, dies ist jedoch immer noch gut zu wissen.

jpg_vs_png

Illustration von Labnol

14. Bilddateinamen

Suchmaschinen verwenden sowohl alternative Text- als auch Bilddateinamen. Benennen Sie Ihre Dateien, bevor Sie sie in WordPress hochladen. Wenn Sie ein Plugin verwenden, Fügt automatisch Alternativtext hinzu Basierend auf dem Dateinamen ist die Benennung Ihrer Dateien alles, was Sie tun müssen! Füllen Sie keine Schlüsselwörter, sondern beschreiben Sie nur das Bild.

Beschriften Sie die Bilddateinamen

15. Alt Text

Diese sollten mit dem Namen Ihrer Bilddatei übereinstimmen. Du kannst den … benutzen Plugin für automatische Bild-Alt-Attribute um den Dateinamen automatisch als Alternativtext zu verwenden. Solange Sie relevante Bilder verwenden, sollten einige von ihnen natürlich (Bits) Ihres Keywords enthalten. Es gibt absolut keinen Grund, Keywords in Bilder einzufügen Keyword-Stuffing-Strafe.

Alttext automatisch zu Bildern hinzufügen – Verwenden Sie die Plugin für automatische Bild-Alt-Attribute. Wenn Sie jetzt ein Bild hinzufügen, fügt das Plugin Alternativtext hinzu, der dem Dateinamen entspricht.

alt ="WP-Fastest-Cache-Plugin" Breite ="577" Höhe ="247" /.>

Finden Sie fehlenden Alt-Text – Screaming Frog ist ein kostenloses Tool, mit dem alle Bilder angezeigt werden, denen Alternativtext fehlt.

  • Herunterladen Schreiender Frosch SEO Spider
  • Geben Sie Ihre Website ein und klicken Sie auf “Start”, um die Website zu crawlen
  • Klicken Sie auf die Registerkarte Bilder
  • Gehen Sie zu Übersicht → Fehlender Alt-Text (siehe unten)
  • Suchen Sie diese Bilder auf Ihrer Site und fügen Sie Alternativtext hinzu

Fehlendes Bild Alt Text - Schreiender Frosch

16. Grafik öffnen (Facebook + Twitter)

Dadurch wird Ihr Inhaltsformat korrekt, wenn es auf Facebook / Twitter geteilt wird, insbesondere Ihr Bild, da beide Netzwerke benutzerdefinierte Abmessungen verwenden, um es anzuzeigen. Andernfalls sieht es lustig aus.

Facebook teilen

Wenn Sie Yoast verwenden, gehen Sie zu den “Social” -Einstellungen und aktivieren Sie Open Graph für Facebook / Twitter…

Yoast-Social-Meta-Daten

Bearbeiten Sie nun eine Seite / einen Beitrag und klicken Sie dann in Yoast auf den Link “Teilen”. Sie sehen Optionen zum Hochladen von benutzerdefinierten Bildern für Facebook (1200 x 628) und Twitter (1024 x 512)..

yoast-social-media-optimierung

17. Bilder in vorgestellten Ausschnitten

Ausgewählte Schnipsel Dies ist der Fall, wenn Google Teile Ihrer Inhalte oben in den Suchergebnissen anzeigt und ein Bild einfügen kann (dies ist jedoch nicht garantiert). Google zieht diese aus jedem Ergebnis der ersten Seite, Es liegt jedoch an ihnen, ob sie überhaupt ein bestimmtes Snippet oder Bild anzeigen. Dadurch wird Ihr Snippet auch zweimal angezeigt und ist eine unglaubliche Möglichkeit, viel Verkehr zu erhalten.

3 Arten von vorgestellten Snippets

  • Antworten
  • Tabellen
  • Listen

Featured-Image-Snippets

So erhalten Sie ausgewählte Snippets in Google

  • Zielen Sie auf ein Keyword ab, bei dem Personen eine möchten prägnant Antworten
  • Verwenden Moz Keyword Explorer um Schlüsselwörter zu identifizieren
  • Verwenden Sie Answer The Public, um noch mehr Fragen zu finden
  • Wählen Sie aus, ob die Antwort ein Absatz, eine Liste oder eine Tabelle sein soll
  • Entwerfen Sie eine schöne Grafik (oder machen Sie ein Foto), die das Schlüsselwort beschreibt
  • Verwenden Sie die optimale Zeichenlänge (siehe Foto unten aus Moz)
  • Erstellen Sie faktenbasierte Inhalte mit Qualitätsreferenzen (Links, Grafiken usw.)
  • Ziel-Keywords, die bereits über ein Feature-Snippet verfügen, aber schlechte Arbeit leisten
  • Wenn Sie das Antwortfeld anstreben, richten Sie Ihr Keyword mit einer genauen Übereinstimmung aus
  • Stellen Sie sicher, dass Sie sich auf der ersten Seite für das Keyword befinden. Wenn nicht, verbessern Sie den Inhalt

Optimial Featured Snippets Länge

18. Strukturierte Daten

Bilder können in verwendet werden strukturierte Daten (und Abzeichen) für folgende Inhaltstypen:

Video Rich Snippet

Rezeptreiche Schnipsel

Produktreiches Snippet

Welches Rich Snippets Plugin soll ich verwenden??
ich benutze WP Review Pro von MyThemeShop (Hier ist eine Seite, auf der ich sie verwende), die 14 Datentypen unterstützt, einschließlich Rezepte und Produktbewertungen. Früher habe ich WP Rich Snippets verwendet, aber der Entwickler hat das Plugin aufgegeben und es wurde seit mehr als 2 Jahren nicht mehr aktualisiert All In One Schema Plugin ist nur langweilig (es hat einen Mangel an Optionen und Styling). WP Review Pro ist sehr einfach zu bedienen.

19. Stylen Sie Bilder

Vergessen Sie nicht, Ihre Bilder zu stylen! Ich benutze Grenzen für die meisten von mir.

  • Bildtitel
  • Bild-Links
  • Bildränder
  • Bildunterschriften

20. Ändern Sie die Größe von GIFs

Genau wie Sie die Größe von Bildern auf die richtigen Abmessungen ändern, sollten auch GIFs die Größe ändern (verwenden GIF GIF).

Ändern Sie die Größe des GIF…

Ändern der Größe von GIFs

Dann komprimieren Sie es …

GIFs komprimieren

Das Ergebnis :-)

Hunde-GIF optimieren

21. Gravatare zwischenspeichern

Wenn Sie Beiträge mit vielen Kommentaren haben, Gravatare kann Ihren Bericht völlig ruinieren. Sie können sie deaktivieren, Kommentare unterbrechen, um nur eine bestimmte Anzahl von Kommentaren anzuzeigen, oder ein Gravatar-Cache-Plugin ausprobieren. Möglicherweise müssen Sie einige Tests durchführen, da einige Plugins auf einigen Websites nicht funktionieren.

  • Cache Gravatars (Optimum, Harrys, oder FV Gravatar Cache)
  • Deaktivieren Sie Gravatars vollständig
  • Setzen Sie Ihren Standard-Gravatar auf leer
  • Löschen Sie Kommentare, die keinen Mehrwert bieten
  • Stellen Sie Ihren Standard-Gravatar auf ein benutzerdefiniertes Bild auf Ihrem Server ein
  • Beschränken Sie Ihre Gravatar-Bilder auf kleinere Abmessungen (z. B. 32 Pixel).
  • Kommentare in WP paginieren Deaktivieren Sie diese Option, um jeweils nur 20 Kommentare anzuzeigen
  • Wenn nichts davon funktioniert, überprüfen Sie Das Caching-Gravatars-Tutorial von WP Rocket

Cache-Gravatar-Bilder

22. Vermeiden Sie das Einbetten von Bildern von externen Websites

Laden Sie immer Bilder auf Ihre Website hoch, kopieren Sie sie niemals und fügen Sie sie nicht ein. Andernfalls erhalten Sie zusätzliche Anforderungen, da das Image nicht auf Ihrem Server gehostet wird und daher von einem anderen Ort abgerufen werden muss.

23. Tools zur Bildoptimierung

Vermeiden Sie die Verwendung von Plugins mit doppelter Funktionalität – Imagify, ShortPixel, Kraken, EWWW und Smush machen im Grunde alle dasselbe (verlustfreie Komprimierung, Entfernung von EXIF-Daten, Größenänderung von Bildern). WP Rocket bietet Optionen für verzögertes Laden, Zwischenspeichern und CDN (und Datenbankbereinigung + lokales Hosten von Google Analytics), die die meisten Cache-Plugins nicht bieten, sodass Sie keine zusätzlichen Plugins verwenden müssen.

  • Super Screenshot – Chrome-Erweiterung zum Aufnehmen von Screenshots.
  • Automatische Bild-Alt-Attribute – fügt automatisch Alternativtext unter Verwendung des Bilddateinamens ein.
  • Bessere Suche ersetzen – Verwenden Sie es, um Bilder in großen Mengen zu aktualisieren.
  • Cloudflare – Kostenloses CDN mit mehr als 200 Rechenzentren, Hotlink-Schutz, Trugbild, Polieren.
  • Chrome DevTools – Zeigt Domains an, die verwendet werden, wenn GTmetrix-Umleitungsfehler vorliegen.
  • CSS Sprite Generator – Kostenloses Tool zum Kombinieren mehrerer Bilder in einem CSS-Sprite.
  • EWWW Image Optimizer – verlustfreie Komprimierung, EXIF-Entfernung, Größenänderung.
  • GifGifs – Ändert die Größe von GIFs.
  • GIMP – kostenlose Bildbearbeitungssoftware, die ich benutze.
  • GTmetrix – zeigt Ihnen, welche Bilder optimiert werden müssen.
  • Stellen Sie sich vor – verlustfreie Komprimierung, EXIF-Entfernung, Größenänderung.
  • Imsanity – Ändert die Größe eines großen Bildes, um “skalierte Bilder bedienen” in GTmetrix zu korrigieren.
  • Krake – verlustfreie Komprimierung, EXIF-Entfernung, Größenänderung.
  • Faule Ladung – Plugin, das das Laden von Bildern verzögert, bis sie sichtbar werden.
  • Lazy Load für Videos – Plugin, das das Laden von Videos verzögert, bis sie sichtbar werden.
  • Optimaler Gravatar-Cache – Gravatare zwischenspeichern (oder versuchen Harrys Gravatar-Cache).
  • Schreiender Frosch SEO Spider – Finden Sie fehlenden Alternativtext, Meta-Beschreibungen usw..
  • ShortPixel – verlustfreie Komprimierung, EXIF-Entfernung, Größenänderung.
  • Smush – verlustfreie Komprimierung, EXIF-Entfernung, Größenänderung.
  • StackPath – 10 USD / Monat CDN mit 31 Rechenzentren.
  • Swift Performance Lite – # 1 kostenloses Cache-Plugin in den meisten Facebook-Umfragen.
  • WP Review – Rich Snippets Plugin (hilft dabei, Bilder in den Suchergebnissen anzuzeigen).
  • WP Rocket – # 1 Cache Plugin in den meisten Facebook-Umfragen.
  • VA Entfernen von Exif – Entfernt unnötige Daten aus Bildern.
  • Zoomen  -Chrome-Erweiterung für den perfekten Zoom beim Aufnehmen von Screenshots.
  • Yoast – Aktiviert Facebook / Twitter-Metadaten, damit Bilder beim Teilen richtig formatiert werden.

Häufig gestellte Fragen

&# x2705; Wie behebt man Optimize Image-Fehler in GTmetrix??

Durch verlustfreies Komprimieren mit einem Plugin wie ShortPixel, Imagify oder Smush. Ich benutze ShortPixel, weil es diesen Fehler in GTmetrix immer behebt.

&# x2705; Wie behebt man Serve Scaled Image-Fehler in GTmetrix??

Dies bedeutet, dass Sie Bilder auf die richtigen Abmessungen zuschneiden / deren Größe ändern müssen. Wenn die Bilder zu groß sind, zeigt GTmetrix skalierte Bildfehler an und teilt Ihnen die richtigen Abmessungen mit, auf die die Größe geändert werden soll.

&# x2705; So beheben Sie Fehler bei der Angabe von Bildbemaßungen in GTmetrix?

Zeigen Sie den HTML-Code des Bildes an und stellen Sie sicher, dass es eine bestimmte Breite und Höhe hat, wie in diesem Lernprogramm gezeigt.

&# x2705; Alle anderen Möglichkeiten, um das Laden von Bildern zu beschleunigen?

Das Entfernen von EXIF-Daten und die Verwendung eines CDN zur Bereitstellung Ihrer Bilder macht den größten Unterschied außerhalb der Empfehlungen in GTmetrix.

&# x2705; Welche Bildoptimierung ist am besten??

Ich verwende ShortPixel, weil es praktisch keinen Qualitätsverlust gibt und das Element “Bilder optimieren” in GTmetrix behoben wird.

Was denken Sie?
Sieht Ihr GTmetrix-Bericht etwas besser aus? Lass es mich in den Kommentaren wissen! Und wenn Sie mehr Tipps wünschen, mit denen Sie noch bessere Ergebnisse / Ladezeiten erzielen, lesen Sie meinen vollständigen WordPress-Geschwindigkeitsführer.

Prost,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map