Ich bin in einer kleinen Stadt in Costa Rica aufgewachsen, wo ich nur 6k/s Internet hatte (56k wäre ein wahr gewordener Traum gewesen), also bin ich sehr wählerisch, wenn es um die Optimierung einer Website auf Geschwindigkeit geht. Ich bemühe mich immer, die Seiten so schnell wie möglich zu laden. Ich denke, Themelocal.com hatte irgendwann einen Google Page Speed-Rang von 97-98. Natürlich jetzt mit Social-Media-Buttons und so, was ich unterbringen musste.
Neben der allgemeinen Codierung Ihres WordPress-Themes sind Bilder der andere Faktor, der einen großen Einfluss auf die Geschwindigkeit Ihrer Website hat. Heutzutage sind WordPress-Themes extrem „bildlastig“ und natürlich übernehme ich einen Teil der Schuld, denn ich liebe es, nach Möglichkeit vorgestellte Bilder hinzuzufügen 🙂
Dies ist nur ein kurzer Beitrag mit einigen Tipps, wie Sie die Bilder auf Ihrer Site optimieren können, um die Ladezeiten Ihrer Site zu erhöhen. Wenn Sie ein WordPress-Benutzer oder Theme-Entwickler sind, kann Ihnen dieser Beitrag ein wenig helfen. Schreibt gerne noch ein paar Tipps in die Kommentare!
Tipps zum Beschleunigen der Bildladezeit
Im Folgenden finden Sie einige allgemeine Tipps, damit Ihre Bilder schnell auf Ihrer Website geladen werden. Nichts Besonderes, nur einige Vorschläge:
- JPGs haben in der Regel geringere Dateigrößen als PNGs
- Wenn Sie Photoshop verwenden, stellen Sie sicher, dass Sie Ihr Bild „für das Web“ speichern
- Verwenden Sie nicht die IMG-Tags für Breite und Höhe, um die Größe Ihrer Bilder zu ändern, sondern schneiden Sie sie nach Möglichkeit zu
- Stellen Sie sicher, dass Sie die Breiten- und Höhenattribute definieren, damit der Browser keine Arbeit machen muss
Bildoptimierungs-Plugins und -Dienste
Im Folgenden finden Sie mehrere Dienste und einige WordPress-Plugins, mit denen Sie Ihre Bilder optimieren können, um deren Dateigröße zu verringern und/oder das Laden von Bildern auf Ihrer Website zu beschleunigen.
Smush it & Das WP Smush.it Plugin
Smush.it ist ein großartiger Dienst von Yahoo, der es Ihnen ermöglicht, Bilder hochzuladen und unnötigen Meta-Junk zu entfernen oder PNGs zu reduzieren, um ihre Dateigröße zu verringern. Sie können ihre Website besuchen, um Ihre Bilder zu optimieren, aber noch besser bieten sie eine API an, die die Optimierung durchführt (außer beim Strippen von JPEG-Metadaten).
Alex Dunae hat die WP Smush.it Plugin, das die API verwendet, damit Sie die Bilder auf Ihrer WordPress-basierten Website beim Hochladen automatisch zerkleinern können.
Es ist eines der besten Bildoptimierungs-Plugins auf dem Markt und Sie werden es auf allen haben wollen
Ihrer Websites.
PunnyPNG
PunnyPNG ist ein weiterer prahlender Dienst zur Bildkomprimierung, den ich Theme-Entwicklern empfehle.
PunnyPNG geht von smush.it noch einen Schritt weiter, um Ihre Bilder weiter zu optimieren und ist ideal für die Bilder in Ihren Themendateien, die auf all Ihren Seiten geladen werden.
Verwenden eines CDN (Content Delivery Network)
Der wahrscheinlich effektivste Weg, das Laden von Bildern auf Ihrer Website zu erhöhen, ist das CDN – Content Management System. Ein CDN ist im Grunde ein Netzwerk von Computern, das Kopien Ihrer Daten über verschiedene Knoten eines Netzwerks hinweg speichert und Ihren Besuchern die Daten vom nächstgelegenen Standort zum Besucher bereitstellt. Dies kann dazu beitragen, die Zeit zum Laden von Bildern auf Ihrer Website erheblich zu verkürzen.
Alle „Platzhirsche“ verwenden CDN-Dienste und dies kann einen wirklich großen Unterschied in den Ladezeiten ausmachen. Es kann jedoch ziemlich teuer sein, daher werden die meisten Blogger wahrscheinlich keinen verwenden, besonders wenn sie nicht viel Verkehr haben.
Für Entwickler: Verwenden Sie das WordPress Featured Image Stattdessen Von Timthumb
Viele Theme-Entwickler (das war ich damals) verwenden das TimThumb-Skript, um Bilder automatisch in der Größe zu ändern. Das Problem bei diesem Skript besteht darin, dass es immer dann ausgeführt wird, wenn Seiten geladen werden (sofern die Bilder nicht bereits zwischengespeichert sind), sodass es Zeit braucht, das Skript auszuführen und das zwischengespeicherte Bild zu speichern. Außerdem ist es ein datenbankintensives Skript, insbesondere wenn Sie viele Seiten auf Ihrer Site haben und wenn Sie irgendwo wie das MediaTemple-Grid gehostet werden, wird es einen großen Teil Ihrer monatlichen GPU-Nutzung in Anspruch nehmen.
Auf der anderen Seite werden durch das Definieren bestimmter Bildgrößen für vorgestellte Bilder alle Ihre Bilder beim Hochladen (oder wenn Sie das Regenerate Thumbnails Plugin ausführen) beschnitten und Sie müssen kein Skript ausführen, nur um ein Bild auf der Site anzuzeigen. WordPress ändert auch die Qualität der verkleinerten Bilder ein wenig, wodurch die Dateigröße etwas kleiner werden kann.
Ändern der Bildqualität von JPEG-Miniaturbildern
Ich habe diesen super genialen Trick von Glyin Mooney bei Skidoosh.co.uk gefunden, um die JPEG-Qualität in WordPress zu ändern…
Grundsätzlich können Sie Ihrer Datei functions.php eine einfache Funktion hinzufügen, um die Standard-JPEG-Qualität für Ihre Bilder zu definieren. Während viele Leute dies verwenden, um die Qualität auf 100 zu erhöhen (wie er in dem Beitrag vorschlägt), können Sie es auch verwenden, um die Qualität zu verringern und Ihre Website zu beschleunigen.
Die aktuelle JPEG-Qualität für Miniaturansichten mit geänderter Größe in WordPress beträgt 90. Fügen Sie einfach Folgendes hinzu, um den Wert zu ändern (sagen wir, wir möchten wirklich beschissene Bilder mit 60% der Originalqualität)
add_filter('jpeg_quality', function($arg){return 60;});
Ändern Sie einfach den „Rückgabewert“ auf die gewünschte Qualität Ihrer Bilder. Und wenn Sie einen „unerwarteten T_FUNCTION“-Fehler erhalten, versuchen Sie stattdessen die folgende Funktion:
function jpeg_quality_callback($arg) { return (int)100; } add_filter('jpeg_quality', 'jpeg_quality_callback');
Wie hältst du dein WordPress schnell geladen?
Haben Sie weitere tolle Tipps zur Optimierung Ihrer Bilder, die in Ihrem Blog verwendet werden, um die Geschwindigkeit zu erhöhen? Welche weiteren Schritte unternehmen Sie, damit Ihre Website schnell läuft und Google und Ihre Nutzer zufrieden sind?
Notiz: Tolle Leute hinterlassen Kommentare 🙂