7 bewährte Tipps zum Beschleunigen des Ladens von Bildern für eine schnellere WordPress-Site

Wussten Sie, dass Bilder 63 % der Größe einer durchschnittlichen Webseite ausmachen? Das heißt, wenn Sie Ihre Website schneller machen möchten, ist das Beste, was Sie tun können, das Laden von Bildern zu beschleunigen.

Schnellere Websites haben:

• Zufriedenere Besucher, weil langsame Ladezeiten die Benutzer frustrieren.
• Bessere Suchmaschinen-Rankings, da die Geschwindigkeit der Website ein Ranking-Faktor ist.
• Höhere Conversion-Raten, was bedeutet, dass Sie mehr Geld in der Tasche haben.

Aber wie beschleunigt man eigentlich das Laden von Bildern und profitiert von den Vorteilen einer schnelleren WordPress-Website? Nun, befolgen Sie die Tipps, die ich Ihnen gleich geben werde . Lassen Sie uns eintauchen.

Bevor Sie beginnen – besorgen Sie sich einen Benchmark zum Vergleich

Keine Sorge – ich zeige Ihnen, wie Sie Ihre Website und ihre Bilder beschleunigen können. Aber ich möchte Ihnen beweisen, dass dieses Zeug tatsächlich funktioniert. Deshalb möchte ich Sie bitten, mir einen Gefallen zu tun, bevor wir beginnen:

Finden Sie heraus, wie lange das Laden Ihrer Website derzeit dauert. Dies dient nicht nur als Beweis dafür, dass ich weiß, wovon ich spreche, sondern bietet Ihnen auch einen Maßstab, mit dem Sie vergleichen können. Auf diese Weise müssen Sie nicht raten, ob eine Änderung Ihre Website tatsächlich beschleunigt hat oder nicht. Sie werden die Daten haben, die Sie sicher wissen müssen .

Aber wie testen Sie, wie lange das Laden Ihrer Website dauert? Ok, du brauchst eine Stoppuhr und einen schnellen Finger ... warte, nein. Das hört sich nicht nach einer guten Idee an. Wie wäre es mit einer automatischen Vorgehensweise?

Versuchen Sie stattdessen Folgendes: Gehen Sie zu den Pingdom-Tools, geben Sie die URL Ihrer Website ein und klicken Sie auf die Schaltfläche „Test starten“ :

Dann gibt Pingdom genau an, wie lange das Laden Ihrer Website gedauert hat.

Welche Zahl Sie auch immer erhalten, es ist die Zahl, die Sie voraussichtlich schlagen werden, nachdem Sie diesen Beitrag zu Ende gelesen haben!

Meine Portfolio-Site (das Beispiel) ist bereits ziemlich gut optimiert – ich hoffe, dass Sie ähnliche Seitenladezeiten sehen, wenn Sie diese Tipps umsetzen …

1. Ändern Sie die Größe von Bildern, bevor Sie sie verwenden

Egal welches WordPress-Theme Sie verwenden, Ihr Theme kann Bilder nur bis zu einer bestimmten maximalen Breite anzeigen. Das heißt, wenn Sie Bilder hochladen, deren Abmessungen über dieser maximalen Breite liegen, verlangsamen Sie Ihre Website auf zwei Arten:

• Sie machen die Dateigröße Ihrer Bilder größer als nötig.
• Sie sorgen dafür, dass der Webbrowser Ihres Besuchers die Bildgröße ändert.

Beides ist nicht gut, wenn Sie das Laden von Bildern beschleunigen möchten! Um das Problem zu beheben, stellen Sie daher sicher, dass Sie die Größe Ihrer Bilder immer ändern, bevor Sie sie hochladen.

Welche Maße sollten Sie verwenden? Nun, die genauen Abmessungen hängen von Ihrem WordPress-Theme ab, daher kann ich keine pauschale Antwort geben. Als allgemeine Regel gilt jedoch, dass für die meisten WordPress-Themes eine Breite im Bereich von 700–800 Pixeln geeignet ist.

So ändern Sie die Größe von WordPress-Bildern

Es gibt zwei einfache Möglichkeiten, die Größe von WordPress-Bildern zu ändern.

Zunächst können Sie ein Plugin wie Imsanity installieren, das die Größe der Bilder, die Sie auf Ihre WordPress-Site hochladen, automatisch ändert.

Zweitens: Wenn Sie eine Lösung ohne Plugin bevorzugen, können Sie mit „Batch Image Resizing Made Easy“ ganz einfach die Größe von Bildern in großen Mengen ändern. Stellen Sie einfach sicher, dass Sie „Automatische Höhe“ wählen, damit das Tool Ihre Bilder während der Größenänderung nicht zuschneidet:

Wenn Sie an einer bestehenden Site arbeiten, sollten Sie auch zurückgehen und die Größe so vieler alter Bilder wie möglich ändern. Das Imsanity-Plugin kann Ihnen bei der Massenänderung der Größe vorhandener WordPress-Bilder helfen.

2. Komprimieren Sie Bilder, um noch mehr Größe zu sparen

Ok, die Größenänderung Ihrer Bilder ist also die halbe Miete. Sie können die Dateigröße Ihrer Bilder jedoch noch weiter verkleinern, indem Sie eine sogenannte Komprimierung durchführen. Durch die Komprimierung werden Größen auf zwei Arten verkleinert:

• Verlustfreie Kompression . Verkleinert die Dateigröße ohne Qualitätsverlust.
• Verlustbehaftete Komprimierung . Bietet größere Größeneinsparungen, jedoch auf Kosten der Qualität.

Normalerweise empfehle ich die verlustfreie Komprimierung für Fotos oder andere Bilder, bei denen die Qualität höchste Priorität hat. Aber für so etwas wie Tutorial-Screenshots (wie die Bilder in diesem Artikel) würde ich die verlustbehaftete Komprimierung empfehlen, um die größte Größeneinsparung zu erzielen.

So komprimieren Sie WordPress-Bilder

Wie bei der Größenänderung von Bildern können Sie entweder ein Plugin zur Hilfe nehmen oder ein eigenständiges Tool verwenden.

Was Plugins angeht, ist Smush Image Compression and Optimization eine großartige Option, da es in der neuesten Version Ihre Bilder sowohl komprimieren als auch in der Größe ändern kann.

Wenn Sie eine eigenständige Website wünschen, ist Kraken eine weitere solide Option, mit der Sie Bilder sowohl mit verlustfreien als auch mit verlustbehafteten Methoden komprimieren können:

Ich weiß, dass es mühsam ist, aber genau wie bei der Größenänderung von Bildern sollten Sie zurückgehen und so viele alte Bilder wie möglich komprimieren. Wenn Sie das Smush-Plugin verwenden, kann es sowohl alte als auch neue Bilder automatisch komprimieren.

3. Verwenden Sie ein CDN, um Ihre Bilder und andere Inhalte bereitzustellen

Ein CDN, kurz für Content Delivery Network, beschleunigt das Laden Ihrer Website und Bilder wie folgt:

Wenn jemand Ihre Website besucht, muss er normalerweise alle Dateien von Ihrem Hosting-Rechenzentrum herunterladen. Wenn sich Ihr Rechenzentrum in Dallas, Texas, befindet und jemand aus Kalifornien zu Besuch kommt, ist das kein Problem . Sie sind immer noch ziemlich nah beieinander!

Aber was ist, wenn jemand aus London, Großbritannien, zu Besuch kommt? Nun, das ist nicht so gut . Sehen Sie, so schnell das Internet auch ist, die Datengeschwindigkeit ist immer noch physikalisch begrenzt. Das heißt, der physische Abstand ist wichtig, wenn auch nur für den Bruchteil einer Sekunde.

CDNs lösen dieses Problem, indem sie die Dateien Ihrer Website in mehreren Rechenzentren auf der ganzen Welt speichern. Wenn dann jemand Ihre Website besucht, kann er Ihre Dateien von dem globalen Datenzentrum herunterladen, das ihm am nächsten liegt.

Sie sind ein ziemlich tolles Tool, um Ihre Website zu beschleunigen. Aber wie viel wird das kosten?

Mach dir keine Sorge! Sie können tatsächlich hochwertige kostenlose CDNs finden. Zwei solcher Optionen sind:

• Jetpack Site Accelerator – das Photon-Modul des Jetpack-Plugins fungiert als CDN für Ihre Bilder. Wenn Sie nur das Laden von Bildern beschleunigen möchten, ist dies eine gute Option.

• CloudFlare – eine beliebte Option, die einfach einzurichten ist und alle Ihre statischen Dateien, einschließlich Bilder und HTML, bereitstellt.

4. Aktivieren Sie Browser-Caching für Ihre Site

Wenn Sie jemals das Google PageSpeed ​​Insights-Tool verwendet haben, geistert der Satz „Browser-Caching nutzen“ wahrscheinlich in Ihren Träumen herum. Das heißt, es handelt sich um einen häufigen Vorschlag zur Beschleunigung Ihrer Website.

Browser-Caching weist den Browser Ihres Besuchers grundsätzlich an, bestimmte Dateien auf dem lokalen PC Ihres Besuchers zu speichern, anstatt die Dateien jedes Mal herunterzuladen. So müsste Ihr Besucher beispielsweise bei seinem ersten Besuch Ihr Logo-Bild herunterladen. Aber bei jedem weiteren Besuch würde Ihr Besucher diese Datei aus seinem lokalen Cache laden.

Das bedeutet schnellere Ladezeiten, da Ihr Besucher nicht alles direkt von Ihrem Server abrufen muss.

Der einfachste Weg, Browser-Caching einzurichten, besteht darin, einfach den folgenden Code zu Ihrer .htaccess-Datei hinzuzufügen:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Sie können Ihre .htaccess-Datei finden, indem Sie mit einem FTP-Programm eine Verbindung zum Stammverzeichnis Ihres Servers herstellen. Wenn Sie nicht wissen, wo Sie diese Datei finden, kann Ihnen der Support Ihres Webhosts weiterhelfen!

5. Stellen Sie sicher, dass Sie auch ein Plugin für das Seiten-Caching verwenden

Browser-Caching ist nicht die einzige Möglichkeit, Ihre WordPress-Site zu beschleunigen. Es gibt auch das sogenannte Seiten-Caching, das es Ihrer Website erleichtert, Inhalte bereitzustellen. Das Beste ist, dass das Seiten-Caching sowohl das Laden von Bildern als auch den Rest Ihrer Website beschleunigt!

Um das Seiten-Caching zu implementieren, empfehle ich ein Plugin namens Cache Enabler, da es leichtgewichtig und einfach einzurichten ist. Einfach installieren und aktivieren. Gehen Sie dann zu Einstellungen → Cache Enabler und konfigurieren Sie es wie folgt:

Das Beste ist, dass Cache Enabler auch Ihren Code minimiert, was eine weitere Technik zur Verkürzung der Seitenladezeiten darstellt.

6. Deaktivieren Sie Hotlinking für Ihre Bilder

Hotlinking bedeutet, dass andere Websites Bilder veröffentlichen, die auf Ihrem Server gehostet werden. Im Grunde genommen sorgt es dafür, dass Ihr Webserver Ressourcen nutzt, um die Website einer anderen Person zu verbessern . Das ist nicht gut!

Aus diesem Grund sollten Sie darüber nachdenken, Hotlinking zu deaktivieren. Auf diese Weise kann sich Ihr Server ausschließlich auf Ihre eigene Website konzentrieren.

Um Hotlinking zu deaktivieren, können Sie entweder das All In One WP Security & Firewall-Plugin verwenden oder den folgenden Code zu Ihrer .htaccess-Datei hinzufügen (dieselbe Datei, zu der Sie Browser-Caching hinzugefügt haben):

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

Stellen Sie einfach sicher, dass Sie yourdomain.com durch Ihren tatsächlichen Domainnamen ersetzen!

7. Alles andere schlägt fehl – ​​Wählen Sie einen schnelleren Host

Alles, was ich oben aufgelistet habe, sorgt dafür, dass Ihre Website und Ihre Bilder schneller geladen werden. Aber es gibt etwas, das all diese Tipps nicht lösen können:

Langsames Hosting .

Wenn Sie einen Webhost mit langsamen Reaktionszeiten haben, sind alle diese Tipps nur Notbehelfe. Das heißt, die Geschwindigkeit Ihrer Website wird immer durch die Leistung Ihres Hosts beeinträchtigt.

Wenn Sie also alles oben Genannte umgesetzt haben und immer noch mit den Ladezeiten Ihrer Seite enttäuscht sind, ist es möglicherweise an der Zeit, in den sauren Apfel zu beißen und zu einem Premium-Hosting-Anbieter zu wechseln.

Wenn Sie nach günstigeren, aber dennoch effektiven Optionen suchen, bin ich ein großer Fan von SiteGround*. SiteGround verwende ich für meine persönliche Portfolio-Site, die in weniger als 700 ms* geladen wird.

Alles zum Abschluss

Ich mache eine kurze Pause, während Sie zu Pingdom zurückkehren und Ihre Website erneut testen.

Geht es schneller? Sie sollten sein!

Und damit ist Ihre Website jetzt und in Zukunft für den Erfolg gerüstet. Denn mit der weiteren Verbreitung des mobilen Internets werden Seitenladezeiten immer wichtiger.

Möchten Sie Ihr Feedback geben oder sich an der Diskussion beteiligen? Fügen Sie Ihre Kommentare auf Twitter hinzu.

Speichern. Speichern