WebAscend Logo

WordPress Bilder Optimieren: Der vollumfassende Guide – Kompression, Dateiformate, Einbindung, Wasserzeichen etc.

WordPress Bilder Optimieren: Der vollumfassende Guide – Kompression, Dateiformate, Einbindung, Wasserzeichen etc.

Contents

Zum Inhaltsverzeichnis springen →

Manuelle Bildkompression: Eine Schritt-für-Schritt-Anleitung

Die manuelle Kompression bietet dir maximale Kontrolle über den Kompressionsprozess und kann zu deutlich kleineren Bilddateien führen, als es mit Plugins allein möglich wäre. Mein Tipp: Beginne immer mit einem hochauflösenden Bild, da die Qualität bei mehrmaligem Komprimieren leicht abnimmt. Je höher die Ausgangsqualität, desto weniger sichtbar ist der Qualitätsverlust nach der Kompression.

Der Prozess sieht in etwa so aus: Du verwendest verschiedene Kompressionsdienste nacheinander und wiederholst den Vorgang für jedes Bild mehrmals. Es ist keine Seltenheit, ein Bild 10-20 Mal zu komprimieren, bevor eine sichtbare Qualitätsverschlechterung eintritt. Oftmals kann man durch den Wechsel zwischen verschiedenen Diensten noch zusätzliche Kompressionsgewinne erzielen, selbst wenn ein Dienst keine weitere Komprimierung mehr zulässt.

Ein Beispiel für einen solchen Kompressionslauf:

TinyPNG > TinyPNG > TinyPNG > TinyPNG > TinyJPG > TinyJPG > TinyPNG > TinyPNG > 11zon > TinyPNG > 11zon > TinyJPG > TinyPNG

Wie du siehst, werden hier verschiedene Dienste wiederholt eingesetzt. Nach einer Kompressionsrunde mit einem Dienst probiere ich es erneut mit TinyPNG und TinyJPG. Diese beiden Dienste zeigen oft noch zusätzliches Einsparungspotenzial, nachdem andere Dienste bereits ihre maximale Kompression erreicht haben. Auch eine Konvertierung in ein anderes Bildformat kann neue Kompressionsmöglichkeiten eröffnen.

Hier noch einmal die wichtigsten Dienste im Überblick:

Denke daran, die Bildqualität nach jedem Komprimierungsschritt zu überprüfen. Sobald die Qualität merklich abnimmt (z.B. zu starke Körnung), verwende die letzte Version, die noch eine akzeptable Qualität aufweist. Das Ziel sollte eine Dateigröße von unter 100 KB sein. Ein Unterschied von 300 bis 400 KB kann einen großen Einfluss auf deine Pagespeed-Scores haben – von Werten im niedrigen 80er-Bereich bis hin zu Werten im hohen 90er-Bereich.

Der Aufwand mag zunächst hoch erscheinen, doch die Ergebnisse lohnen sich. Eine gründliche manuelle Kompression führt zu deutlich verbesserten Ladezeiten deiner Webseite.

 

Bildkompressions Plugins für WordPress

Manuelle Bildkompression ist zwar effektiv, aber zeitaufwendig. WordPress-Plugins bieten eine bequemere Alternative, besonders wenn du viele Bilder hast. Hier ein Überblick über einige Optionen, sowohl kostenlose als auch kostenpflichtige.

Kostenlose Plugins:

Kostenpflichtige Plugins:

  • Smush Pro: Die kostenpflichtige Version von Smush bietet zusätzliche Funktionen und Hintergrundoptimierung für große Websites.
  • ShortPixel: https://wordpress.org/plugins/shortpixel-image-optimiser/ Laut ThemeIsle-Tests eines der besten Plugins. Bietet neben der Komprimierung auch adaptive Bilder.
  • ShortPixel Adaptive Images: Erweiterung von ShortPixel für adaptive Bilder.
  • Perfmatters: https://perfmatters.io?ref=1300 Ein leistungsstarkes Optimierungsplugin mit Funktionen für Lazy Loading, Preload und Fetch Priority mit granularer Kontrolle.
  • Flyingpress: Ein Caching-Plugin mit Bildoptimierungsfunktionen (auch für fehlende width/height Attribute).
  • SpeedSize: https://wordpress.org/plugins/speedsize-ai-image-optimizer/ Ein KI-basiertes Optimierungsplugin mit interessanten Funktionen.
  • WebP Express Plus: Erweiterung von WebP Express mit zusätzlichen Funktionen.

Teste verschiedene Plugins und vergleiche die Ergebnisse. Die beste Lösung hängt von deinen spezifischen Bedürfnissen und der Größe deiner Website ab. Beginne mit kostenlosen Optionen und wechsle gegebenenfalls zu kostenpflichtigen, wenn du mehr Funktionen benötigst.

Denke daran, die Bildqualität nach der Komprimierung immer zu überprüfen. Eine gute Bildqualität ist wichtig für das Nutzererlebnis.

 

Farbreduzierung zur Dateigrößenminimierung

Neben der Komprimierung bietet die Reduzierung der Farbpalette in Bildern ein weiteres effektives Mittel zur Dateigrößenminimierung. Je weniger Farben ein Bild verwendet, desto kleiner wird die Datei. Dies funktioniert besonders gut bei Bildern mit großen Farbflächen oder weniger detaillierten Motiven. Bei Bildern mit vielen feinen Details kann eine starke Farbreduzierung zu sichtbaren Artefakten führen. Daher ist hier etwas Experimentieren notwendig, um den optimalen Kompromiss zwischen Dateigröße und Bildqualität zu finden.

Die erzielbaren Ergebnisse variieren stark von Bild zu Bild. Manchmal kann man eine beachtliche Reduzierung der Dateigröße erreichen, ohne dass der Qualitätsverlust deutlich sichtbar ist. In anderen Fällen ist der Qualitätsverlust bereits bei geringfügiger Farbreduzierung zu groß.

Hier sind einige kostenlose Online-Tools, mit denen du die Farbpalette deiner Bilder reduzieren kannst:

Beginne mit einer moderaten Reduzierung der Farbpalette und erhöhe den Wert schrittweise. Überprüfe nach jeder Änderung die Bildqualität sorgfältig. Speichere verschiedene Versionen mit unterschiedlicher Farbpalette, um am Ende die beste Variante auswählen zu können. Die beste Einstellung hängt stark vom jeweiligen Bild und dessen Charakteristika ab.

Die Kombination von Farbreduzierung und den bereits beschriebenen Kompressionstechniken kann zu einer erheblichen Reduzierung der Dateigröße führen, ohne dass die Bildqualität unakzeptabel leidet. Experimentiere mit verschiedenen Einstellungen und finde heraus, was für deine Bilder am besten funktioniert.

 

Installierbare Kompressionssoftware

Online-Dienste sind praktisch, aber für die wirklich tiefgreifende Optimierung einer großen Anzahl von Bildern lohnt sich der Einsatz von installierbarer Software auf deinem lokalen Rechner. Hier stelle ich dir einige leistungsstarke, kostenlose Optionen vor.

LibVips (kostenlos)

https://github.com/libvips/libvips

LibVips ist eine umfangreiche Bibliothek zur Bildverarbeitung und -optimierung. Sie geht weit über einfache Kompression hinaus und ermöglicht eine sehr detaillierte und präzise Steuerung des Optimierungsprozesses. Es bietet viele Funktionen zur Optimierung, die über das hinausgehen, was Online-Dienste leisten können. Du hast dadurch sehr viel Kontrolle über den Komprimierungsprozess und kannst Bilder tiefgreifend optimieren.

LibVips ist eine Bibliothek und benötigt für die praktische Anwendung eine Benutzeroberfläche (GUI). Hier kommt Nip2 ins Spiel.

Nip2 (kostenlos)

https://github.com/libvips/nip2

Nip2 ist eine grafische Benutzeroberfläche (GUI) für LibVips, die die Nutzung der Bibliothek deutlich vereinfacht. Mit Nip2 kannst du die leistungsstarken Funktionen von LibVips komfortabel nutzen, ohne dich mit der Kommandozeile auseinandersetzen zu müssen. Es ist ein mächtiges Werkzeug für die detaillierte Bildoptimierung.

WSRV (kostenlos)

https://wsrv.nl/ https://github.com/weserv/images

WSRV ist ein Bild-Caching- und -Resize-Service, der die LibVips-Bibliothek nutzt und um zusätzliche Funktionen erweitert. Anstatt die Bilder lokal zu verarbeiten, lädst du sie auf die WSRV-Server hoch. Diese verkleinern und optimieren die Bilder, speichern sie in ihrem Cache und liefern sie weltweit schnell aus. Dies ist besonders hilfreich, wenn du bereits ein Content Delivery Network (CDN) verwendest oder ein solches einrichten möchtest.

ImgProxy (kostenlos)

https://github.com/imgproxy/imgproxy https://docs.imgproxy.net/

ImgProxy ist ein eigenständiger Server für die schnelle und sichere Größenanpassung, Verarbeitung und Konvertierung von Bildern. Er basiert ebenfalls auf LibVips und bietet eine Vielzahl von Optimierungsfunktionen. Im Gegensatz zu WSRV installierst du ImgProxy jedoch direkt auf deinem eigenen Server. Dies bietet mehr Kontrolle, aber erfordert auch mehr Einrichtungsaufwand.

Diese installierbaren Lösungen bieten dir eine erhebliche Erweiterung deiner Möglichkeiten im Bereich der Bildoptimierung. Sie ermöglichen eine Granularität und Kontrolle, die Online-Tools nicht erreichen können. Besonders für die Optimierung einer großen Anzahl von Bildern im Batch-Modus sind sie sehr effizient.

 

Lazy Loading von Bildern und Videos: Schneller ladende Webseiten

Lazy Loading ist eine Technik, die das Laden von Bildern und Videos erst dann auslöst, wenn sie im sichtbaren Bereich des Nutzers (Viewport) erscheinen. Bilder und Videos, die sich unterhalb des sichtbaren Bereichs befinden („below the fold“), werden also erst geladen, wenn der Nutzer nach unten scrollt und sie sieht. Dadurch wird die Ladezeit der Webseite, besonders bei bildlastigen Inhalten, deutlich reduziert. Das verbessert nicht nur die User Experience, sondern auch die Performance-Metriken wie die Pagespeed-Scores.

Nutze Lazy Loading nur für Bilder unterhalb des sichtbaren Bereichs beim Seitenaufruf („above the fold“ Bilder sollten ausgeschlossen werden). Das Vorladen von Bildern, die der Nutzer sofort sieht, würde die Ladezeit sogar verlängern.

Die meisten Lazy Loading Plugins bieten die Möglichkeit, Bilder manuell von der Lazy Loading Funktion auszuschließen. Meistens findet man hierfür ein Eingabefeld, in das man die Dateinamen der auszuschließenden Bilder eintragen kann.

Hier sind einige beliebte WordPress Plugins für Lazy Loading:

Viele kostenpflichtige Caching-Plugins bieten Lazy Loading ebenfalls an. Es ist wichtig, nur ein Lazy Loading Plugin zu verwenden, um Konflikte zu vermeiden.

Überprüfe nach der Implementierung von Lazy Loading die Ladezeiten deiner Webseite mit einem Tool wie Google PageSpeed Insights oder GTmetrix. Du solltest eine deutliche Verbesserung feststellen.

 

Bildkonverter und -Formate: WebP, AVIF und mehr

Moderne Bildformate wie WebP und AVIF bieten gegenüber traditionellen JPGs und PNGs Vorteile in Bezug auf Dateigröße und Qualität. WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression und erzielt oft kleinere Dateigrößen bei gleicher oder besserer Qualität als JPG. AVIF, ein noch neueres Format, bietet im Allgemeinen eine noch bessere Kompressionsrate als WebP.

Die Unterstützung dieser Formate variiert je nach Browser. Während die meisten modernen Browser WebP unterstützen, ist die AVIF-Unterstützung noch nicht so weit verbreitet. Daher ist es wichtig, Fallback-Bilder im JPG- oder PNG-Format bereitzustellen, falls der Browser das neue Format nicht unterstützt. Viele Plugins bieten diese Funktion automatisch an.

Hier sind einige Möglichkeiten, deine Bilder in WebP und AVIF zu konvertieren:

Online-Konverter:

Es gibt zahlreiche kostenlose Online-Dienste zur Bildkonvertierung. Diese sind praktisch für kleinere Mengen an Bildern. Für große Mengen an Bildern empfehle ich jedoch die Verwendung von Plugins oder Software, um den Prozess zu automatisieren.

WordPress Plugins:

Software:

  • XnConvert (kostenlos): https://www.xnview.com/en/xnconvert/ Ein vielseitiges und leistungsstarkes Batch-Bildkonvertierungsprogramm, das auch WebP und AVIF unterstützt. Ideal für die Verarbeitung großer Mengen an Bildern auf deinem lokalen Rechner.

Beginne mit der Konvertierung in WebP, da dieses Format breitere Browser-Unterstützung hat. AVIF kann später hinzugefügt werden, sobald die Browser-Kompatibilität weiter verbessert ist. Teste immer die Bildqualität nach der Konvertierung.

 

Die richtige Bildgröße auswählen: Optimierung für Geschwindigkeit und Qualität

Die Auswahl der richtigen Bildgröße ist entscheidend für die Performance deiner Webseite. Zu große Bilder verlängern die Ladezeiten, während zu kleine Bilder an Qualität einbüßen. Das Ziel ist der optimale Kompromiss zwischen Dateigröße und visueller Qualität.

WordPress bietet standardmäßig verschiedene Bildgrößen an (z.B. „Thumbnail“, „Medium“, „Large“). Beim Hochladen eines Bildes werden diese automatisch generiert. Du kannst beim Einbinden des Bildes in deinen Beiträgen oder Seiten die passende Größe auswählen. Nutzt du einen Page Builder wie Elementor oder BricksBuilder, hast du oft noch mehr Kontrolle über die Bildgröße und kannst kleinere, optimierte Versionen wählen.

Überprüfe immer die Qualität der gewählten Bildgröße, bevor du sie auf deiner Webseite veröffentlichst. Zoomt man zu stark heran, könnten Kompressionsartefakte sichtbar werden.

Für eine feinere Kontrolle über die Bildgrößen gibt es verschiedene WordPress-Plugins:

  • Simple Image Sizes (kostenlos): https://wordpress.org/plugins/simple-image-sizes/ Dieses Plugin ermöglicht die Erstellung benutzerdefinierter Bildgrößen. Du kannst damit die von deinem Theme automatisch generierten Größen überschreiben und genau die Größen definieren, die du benötigst.
  • Better Image Sizes (kostenlos): https://wordpress.org/plugins/better-image-sizes/ Bietet umfangreiche Funktionen zur Verwaltung von Bildgrößen. Du kannst automatische Größen generieren lassen, bereits erstellte Größen löschen oder verschiedene Größen für verschiedene Zwecke definieren. Zusätzlich bietet es die Möglichkeit, den Fokuspunkt des Bildes anzugeben.
  • Imsanity (kostenlos): https://wordpress.org/plugins/imsanity/ Skaliert große Bilder automatisch beim Hochladen auf eine von dir definierte Maximalgröße. Hilft dabei, die Größe großer Bilder von vornherein zu begrenzen und somit die generierten Dateigrößen zu reduzieren.
  • Bulk Image Optimizer (kostenlos): https://wordpress.org/plugins/bulk-image-resizer/ Dieses Plugin ermöglicht das komprimieren und Verkleinern von Bildern in der Masse. Es kann auch in WebP konvertiert werden. Es arbeitet lokal auf deinem Server, ohne Drittanbieterdienste.

Adaptive Images Plugins ermöglichen es dir, verschiedene Bildgrößen für verschiedene Geräte (Desktops, Tablets, Smartphones) bereitzustellen. Dies verbessert die Nutzererfahrung und die Performance auf allen Geräten.

Die Kombination aus geeigneten Bildgrößen und optimierten Bildformaten sorgt für eine optimale Balance zwischen Qualität und Performance. Experimentiere mit verschiedenen Einstellungen und finde die perfekte Balance für deine Webseite.

Denke daran, dass die optimale Bildgröße auch vom Kontext abhängt. Für ein kleines Vorschaubild braucht man eine deutlich kleinere Bildgröße als für ein großes hero image.

 

CLS-Probleme (Cumulative Layout Shift) durch Bilder beheben

Cumulative Layout Shift (CLS) ist eine wichtige Metrik für die Webseiten-Performance. Ein hoher CLS-Wert bedeutet, dass sich der Webseiteninhalt während des Ladens unerwartet verschiebt, was für den Nutzer sehr störend ist. Bilder sind eine häufige Ursache für CLS-Probleme. Fehlende oder falsch gesetzte `width` und `height` Attribute sind dabei oft der Übeltäter.

Wenn ein Browser ein Bild lädt, ohne die Abmessungen zu kennen, reserviert er zunächst keinen Platz dafür. Erst wenn die Bilddaten geladen sind, wird der Platz belegt und der Rest des Inhalts kann sich verschieben. Dies führt zu CLS. Durch das Hinzufügen der `width` und `height` Attribute im HTML-Code teilst du dem Browser die Bildabmessungen mit, bevor die Bilddaten geladen werden. Er kann somit den Platz im Voraus reservieren und unerwartete Verschiebungen vermeiden.

Die Abmessungen sollten die tatsächlichen Pixel-Abmessungen des Bildes widerspiegeln. Vermeide es, willkürliche Werte anzugeben. Richtige Werte sind essenziell für ein gutes Ergebnis.

Hier sind verschiedene Möglichkeiten, um sicherzustellen, dass deine Bilder die nötigen Attribute besitzen:

Manuelle Methode:

Du kannst die `width` und `height` Attribute manuell in den HTML-Code deiner Bilder einfügen. Dies ist jedoch bei vielen Bildern sehr mühsam und fehleranfällig.



WordPress Plugins:


Die effizientere Methode ist der Einsatz von WordPress Plugins. Viele Plugins bieten die automatische Ergänzung fehlender `width` und `height` Attribute an, oft neben vielen anderen Optimierungsfunktionen. Hier eine Auswahl:



Teste verschiedene Plugins und vergleiche die Ergebnisse. Achte darauf, dass das gewählte Plugin keine Konflikte mit anderen Plugins verursacht. Überprüfe nach der Installation immer deine CLS-Werte mit einem Tool wie Google PageSpeed Insights.


 


Adaptive Bilder: Optimierung für verschiedene Geräte


Adaptive Bilder, auch bekannt als responsive Bilder, stellen sicher, dass deine Webseite Bilder in der optimalen Größe für jedes Gerät (Desktop, Tablet, Smartphone) anzeigt. Das verbessert nicht nur die Ladezeit, sondern auch die Benutzererfahrung, da die Bilder immer scharf und detailreich dargestellt werden, ohne unnötige Daten zu laden.


Statt ein großes Bild für alle Geräte zu laden, liefert ein adaptives Bildsystem verschiedene Bildgrößen aus, je nach den Fähigkeiten des Besuchers Browsers. Der Browser wählt dann automatisch die für sein Gerät am besten geeignete Version aus. Das reduziert die Ladezeit, spart Bandbreite und verbessert die Performance-Metriken.


Adaptive Bilder sollten immer in Kombination mit anderen Optimierungstechniken, wie Kompression, WebP-Konvertierung und Lazy Loading, eingesetzt werden, um den maximalen Effekt zu erzielen.


Hier sind einige WordPress Plugins, die dir dabei helfen, adaptive Bilder zu implementieren:


    

  • Adaptive Images (kostenlos): https://wordpress.org/plugins/adaptive-images/ Ein einfaches und effektives Plugin zur Generierung adaptiver Bilder. Es ist leicht zu konfigurieren und bietet eine gute Performance.
    • 

  • ShortPixel Adaptive Images (Freemium): https://wordpress.org/plugins/shortpixel-adaptive-images/ Integration von adaptiven Bildern in das ShortPixel-Ökosystem. Bietet zusätzliche Funktionen, wenn du bereits ShortPixel zur Bildoptimierung verwendest.
    • 

  • Enable Responsive Images for Gutenberg (kostenlos): https://wordpress.org/plugins/enable-responsive-image/ Dieses Plugin konzentriert sich auf die Implementierung von responsiven Bildern speziell für den Gutenberg-Editor. Es ist eine gute Wahl, wenn du hauptsächlich mit Gutenberg arbeitest.
    • 

  • Flying Images (kostenlos): https://wordpress.org/plugins/nazy-load/ Bietet neben vielen weiteren Funktionen auch die Generierung adaptiver Bilder. Eine gute All-in-One Lösung, wenn du mehrere Optimierungsfunktionen in einem Plugin bündeln möchtest.
    • 



Adaptive Bilder sind ein wichtiger Bestandteil einer modernen, performanten Webseite. Sie verbessern die Benutzererfahrung, indem sie sicherstellen, dass die Bilder immer optimal auf dem jeweiligen Gerät angezeigt werden. Die Implementierung mit einem geeigneten Plugin ist relativ einfach und der Aufwand lohnt sich in jedem Fall.


 


Bilder vorladen (Preload): Ladezeiten optimieren mit dem preload-Attribut


Neben Lazy Loading bietet das `preload`-Attribut eine weitere Möglichkeit, die Ladezeiten deiner Webseite zu verbessern. Während Lazy Loading Bilder erst lädt, wenn sie im sichtbaren Bereich des Nutzers erscheinen, sorgt `preload` dafür, dass wichtige Bilder bereits im Hintergrund geladen werden, bevor der Nutzer sie sieht. Dadurch kann die wahrgenommene Ladegeschwindigkeit erhöht und das „First Contentful Paint“ (FCP) verbessert werden.


Das `preload`-Attribut priorisiert den Download bestimmter Ressourcen, in unserem Fall Bilder. Es ist leistungsfähiger als `fetchpriority` und hat Vorrang vor diesem Attribut. Wenn ein Bild so schnell wie möglich geladen werden soll, ist `preload` die bessere Wahl.


Setze `preload` strategisch ein. Wähle nur die wichtigsten Bilder aus, die für das erste Nutzererlebnis entscheidend sind (z.B. das Hero-Bild oder wichtige Bilder im oberen Bereich der Seite). Das Vorladen aller Bilder würde die Ladezeiten sogar negativ beeinflussen.


Hier sind einige Möglichkeiten, um das `preload`-Attribut zu verwenden und die Ladezeiten deiner Webseite zu optimieren:


Manuelle Implementierung:


Du kannst das `preload`-Attribut manuell in den HTML-Code deiner Bilder einfügen. Dies ist jedoch bei vielen Bildern sehr aufwendig.


Das `as=“image“`-Attribut teilt dem Browser mit, dass es sich um ein Bild handelt.




WordPress Plugins:


WordPress Plugins bieten eine viel effizientere Methode zur Implementierung von Preload. Sie automatisieren den Prozess und ermöglichen eine einfache Konfiguration.



 


Bild-Fetch-Priorität: Wichtige Bilder schneller laden


Die Fetch-Priorität ist ein HTML-Attribut, mit dem du dem Browser mitteilen kannst, welche Bilder zuerst geladen werden sollen. Das ist besonders nützlich, um die Ladezeiten wichtiger Bilder zu optimieren und die wahrgenommene Ladegeschwindigkeit deiner Webseite zu verbessern. Bilder mit hoher Priorität werden bevorzugt geladen, während Bilder mit niedrigerer Priorität erst später geladen werden, wenn die wichtigeren Bilder bereits angezeigt werden.


Das Attribut `fetchpriority` kann die Werte high, low oder auto annehmen. high gibt an, dass das Bild mit hoher Priorität geladen werden soll. low gibt an, dass das Bild mit niedriger Priorität geladen werden soll. auto lässt den Browser die Priorität selbst bestimmen. In der Regel sollte man für die wichtigsten Bilder im sichtbaren Bereich (above the fold) eine hohe Priorität festlegen.


Setze die Fetch-Priorität strategisch ein. Konzentriere dich auf die Bilder, die für das initiale Nutzererlebnis am wichtigsten sind. Das sind meist Bilder im oberen sichtbaren Bereich der Seite (above the fold). Das Setzen einer hohen Priorität für alle Bilder hat keine Vorteile und kann sogar die Ladezeiten verschlechtern.


Hier sind verschiedene Möglichkeiten, um die Fetch-Priorität deiner Bilder zu steuern:


Manuelle Methode:


Du kannst das `fetchpriority`-Attribut manuell in den HTML-Code deiner Bilder einfügen. Dies ist jedoch bei vielen Bildern sehr aufwendig.




WordPress Plugins:


WordPress Plugins bieten eine deutlich effizientere Methode. Sie automatisieren die Zuweisung der Fetch-Priorität und ermöglichen eine einfachere Konfiguration. Hier einige Optionen:


    

  • Custom Image Attributes (kostenlos): https://wordpress.org/plugins/custom-image-attributes/ Dieses Plugin ermöglicht das Hinzufügen verschiedener Bildattribute, einschließlich `fetchpriority`. Es bietet eine gute Kontrolle, da du die Priorität für jedes Bild einzeln festlegen kannst. Es ist ideal, wenn du eine präzise Kontrolle benötigst.
    • 

  • Image Prioritizer (kostenlos): https://wordpress.org/plugins/image-prioritizer/ Dieses Plugin optimiert das Laden von Bildern, die das LCP (Largest Contentful Paint) Element sind. Es ermittelt automatisch das LCP-Bild und setzt die Fetch-Priorität entsprechend. Praktisch, wenn du nicht jedes Bild manuell bearbeiten möchtest.
    • 

  • Fetch Priority Plugin (kostenlos): https://wordpress.org/plugins/fetchpriority/ Ein Plugin vom WordPress Performance Team, das automatisch das `fetchpriority` Attribut auf ein automatisch ermitteltes Bild anwendet. Es ist sehr einfach zu bedienen, bietet aber keine manuelle Konfiguration der Prioritäten.
    • 

  • Perfmatters (kostenpflichtig): https://perfmatters.io/docs/fetch-priority/?ref=1300 Ein leistungsstarkes Optimierungsplugin mit granularer Kontrolle über die Fetch-Priorität. Du kannst gezielt festlegen, welche Bilder eine hohe Priorität erhalten sollen. Es ist die beste Wahl, wenn du sehr präzise Kontrolle benötigst und viele Bilder zu verwalten hast.
    • 



 


SpeedSize (kostenpflichtig)


SpeedSize ist ein weiteres interessantes WordPress Plugin zur Bildoptimierung, das sich durch einige einzigartige Funktionen auszeichnet. Obwohl es kostenpflichtig ist, könnte es sich je nach deinen Anforderungen lohnen, da es KI-basierte Optimierungen nutzt. Ich selbst habe es bisher noch nicht ausgiebig getestet, kann dir daher noch keine detaillierte Einschätzung geben.


Laut den Angaben des Entwicklers bietet SpeedSize folgende Funktionen:


    

  • KI-basierte Komprimierung: SpeedSize nutzt künstliche Intelligenz, um deine Bilder optimal zu komprimieren, wobei die Qualität so gut wie möglich erhalten bleibt. Der Algorithmus analysiert jedes Bild individuell und wählt die beste Kompressionsmethode.
    • 

  • Automatische Optimierung: Du lädst deine Bilder hoch und SpeedSize kümmert sich um den Rest. Der Prozess ist vollautomatisch und erfordert minimalen manuellen Eingriff.
    • 

  • verschiedene Formate: Es unterstützt verschiedene Bildformate, wie JPG, PNG und WebP. Es wird automatisch das beste Format für jedes Bild ausgewählt.
    • 

  • Massenoptimierung: SpeedSize ist in der Lage, große Mengen an Bildern gleichzeitig zu optimieren. Das spart Zeit und Mühe, besonders wenn du viele Bilder auf deiner Webseite hast.
    • 

  • Qualitätssicherung: Es soll die Bildqualität so gut wie möglich erhalten, während es gleichzeitig die Dateigröße minimiert. Der Fokus liegt dabei auf dem Erhalt der Schärfe und der Details.
    • 



 


Bilddecodierung (asynchron): Verbesserte Performance durch asynchrones Laden


Die Art und Weise, wie Bilder auf deiner Webseite decodiert werden, hat einen erheblichen Einfluss auf die Ladezeiten und die Benutzererfahrung. Standardmäßig decodiert der Browser Bilder synchron, das heißt, der restliche Seitenaufbau wartet, bis das Bild vollständig decodiert ist. Bei großen oder vielen Bildern kann das zu spürbaren Verzögerungen führen.


Asynchrone Bilddecodierung bietet eine Lösung für dieses Problem. Dabei wird die Decodierung eines Bildes im Hintergrund durchgeführt, ohne den restlichen Seitenaufbau zu blockieren. Der Browser kann somit andere Elemente der Seite laden und rendern, während das Bild parallel decodiert wird. Das Ergebnis ist eine deutlich schnellere wahrgenommene Ladegeschwindigkeit und eine flüssigere Benutzererfahrung.


Die asynchrone Bilddecodierung wird durch das Attribut loading="lazy" erreicht, welches du im HTML-Tag des Bildes einfügen kannst. Es teilt dem Browser mit, dass das Bild erst dann decodiert werden soll, wenn es im sichtbaren Bereich des Nutzers erscheint.


Dieses Attribut ist mittlerweile weit verbreitet und wird von den meisten modernen Browsern unterstützt. Es ist eine einfache und effektive Methode, um die Performance deiner Webseite zu verbessern.


Leider gibt es nicht viele spezielle Plugins, die sich ausschließlich mit asynchroner Bilddecodierung befassen. Die meisten Optimierungsplugins integrieren dieses Feature jedoch mittlerweile in ihre Funktionsumfang. Plugins wie Flying Images oder diejenigen, die Lazy Loading unterstützen, nutzen implizit die asynchrone Bilddecodierung, da sie das loading="lazy" Attribut verwenden. Wenn du also eines dieser Plugins verwendest, profitierst du automatisch von diesem Vorteil.


Den Artikel, den ich hier verlinke, sollte man sich unbedingt durchlesen. Er geht auf unerwünschte Nebenwirkungen von `decoding=“async“` ein, und sollte man auf jeden Fall kennen. Man sollte die Nachteile dieses Attributs kennen, um es richtig einzusetzen. Man sollte sich mit den verschiedenen Aspekten der asynchronen Decodierung vertraut machen, um die optimalen Einstellungen für deine Webseite zu finden.


https://kybernaut.cz/en/clanky/the-unintended-consequences-of-decodingasync-on-your-wordpress-sites-lcp/


 


Bilder als Base64 einbetten: Vor- und Nachteile


Eine weitere Technik zur Bildoptimierung ist das Einbetten von Bildern als Base64-kodierte Daten direkt in den HTML-Code. Base64 ist ein binäres-zu-text-Codierungsschema, das binäre Daten, wie Bilder, in eine textbasierte Darstellung umwandelt, die direkt im HTML-Code eingefügt werden kann. Dadurch entfällt der zusätzliche HTTP-Request für das Bild, da die Bilddaten direkt im HTML enthalten sind. Das kann zu schnelleren Ladezeiten führen, besonders bei kleinen Bildern.


Funktionsweise: Ein Base64-kodierter Bild-String wird direkt im img-Tag über das src-Attribut eingebunden. Hierfür muss das Bild zuerst in Base64 umgewandelt werden. Es gibt zahlreiche Online-Tools und Programme dafür.




Vorteile:


    

  • Reduzierte HTTP-Requests: Das Bild wird nicht separat vom Server geladen, was zu schnelleren Ladezeiten führen kann.
    • 

  • Kein Caching-Problem: Die Bilddaten sind direkt im HTML integriert. Der Browser muss kein separates Caching-Verfahren anwenden.
    • 



Nachteile:


    

  • Größere HTML-Dateigröße: Base64-kodierte Bilder sind im Allgemeinen größer als die originalen Bilddateien. Der Base64-String vergrößert die HTML-Dateigröße. Dadurch kann die initiale Ladezeit der Seite beeinträchtigt werden, wenn die HTML-Datei bereits groß ist.
    • 

  • Lesbarkeit des Codes: Der Base64-String ist schwer lesbar und macht den HTML-Code unübersichtlich. Die Wartung des Codes wird dadurch erschwert.
    • 

  • Nur für kleine Bilder geeignet: Das Einbetten großer Bilder als Base64 ist nicht zu empfehlen, da es die HTML-Dateigröße erheblich vergrößert und die Ladezeit negativ beeinflusst. Nur sehr kleine Bilder (ideal unter 10 KB, maximal 20-30 KB) sollten in Base64 eingebettet werden.
    • 



Nutze Base64-Einbettung nur für sehr kleine Bilder, die keine hohe visuelle Qualität benötigen (z.B. Icons oder kleine Dekorationselemente). Für größere Bilder ist der Einsatz von Standardmethoden der Bildoptimierung deutlich besser geeignet. Überprüfe die Auswirkungen auf deine Ladezeiten, nach dem Einbetten eines Bildes in Base64. Oftmals ist die Performance Verbesserung minimal, oder die Nachteile überwiegen deutlich.


WordPress Plugin: Das Plugin „Inline Image Base64“ (https://wordpress.org/plugins/inline-image-base64/) ermöglicht die automatische Base64-Einbettung von Bildern. Beachte jedoch die Einschränkungen hinsichtlich der Bildgröße.


 


Miniaturbild-Regeneration: Optimierte Bildgrößen für WordPress


WordPress generiert beim Hochladen eines Bildes automatisch verschiedene Größen, sogenannte Miniaturbilder (Thumbnails). Diese werden für verschiedene Anwendungsfälle verwendet, z.B. in Beitragsübersichten, in Galerien oder als Featured Images. Die Qualität und Größe dieser Thumbnails haben einen direkten Einfluss auf die Ladezeiten deiner Webseite. Manchmal kann es jedoch vorkommen, dass die generierten Thumbnails nicht optimal sind oder fehlerhaft erzeugt wurden. In solchen Fällen ist eine Regeneration der Thumbnails notwendig.


Eine Regeneration der Thumbnails erzeugt alle Bildgrößen neu, basierend auf den aktuellen Einstellungen. Das kann helfen, Probleme mit fehlerhaften oder verschwommenen Thumbnails zu beheben oder einfach die Qualität zu verbessern, wenn sich die Einstellungen für die Bildgrößen geändert haben. Auch nach dem Wechsel von Themes oder Plugins kann eine Regeneration sinnvoll sein.


Die manuelle Regeneration jedes einzelnen Bildes ist bei vielen Bildern sehr mühsam. Glücklicherweise gibt es dafür praktische WordPress Plugins.


Das Regenerate Thumbnails Plugin (kostenlos):


https://wordpress.org/plugins/regenerate-thumbnails/


Das „Regenerate Thumbnails“ Plugin ist die wohl gängigste und einfachste Lösung für die Massen-Regeneration von Thumbnails. Es ermöglicht dir, alle Thumbnail-Größen für ein oder mehrere Bilder neu zu generieren. Du kannst einzelne Bilder, mehrere Bilder oder sogar alle Bilder deiner Medienbibliothek auswählen.


Sichere deine Webseite vor der Verwendung des Plugins unbedingt. Auch wenn das Plugin als zuverlässig gilt, kann es bei fehlerhaften Daten oder sehr großen Medienbibliotheken zu Problemen führen. Ein Backup schützt dich vor Datenverlust.


Funktionsweise: Nach der Installation und Aktivierung des Plugins findest du im Admin-Bereich unter „Medien“ einen neuen Eintrag „Regenerate Thumbnails“. Dort kannst du die Bilder auswählen, für die du die Thumbnails regenerieren möchtest. Das Plugin führt den Prozess dann automatisch durch. Die Dauer der Regeneration hängt von der Anzahl der Bilder und der Größe deiner Medienbibliothek ab.


Einstellungen: Das Plugin bietet verschiedene Optionen, um den Regenerationsprozess anzupassen, wie z.B. die Auswahl spezifischer Bildgrößen oder die Möglichkeit, den Fortschritt zu verfolgen. Es ist gut dokumentiert und einfach zu bedienen.


Bevor du alle Thumbnails regenerierst, teste das Plugin zuerst mit einer kleinen Auswahl an Bildern, um sicherzustellen, dass es wie erwartet funktioniert. So vermeidest du unerwartete Probleme und kannst eventuelle Fehler frühzeitig erkennen.


 


Remote Image Thumbnails: Externe Bilder als Featured Images verwenden


Manchmal möchtest du ein Bild verwenden, das nicht direkt auf deinem WordPress Server gespeichert ist. Das kann beispielsweise bei Bildern aus einer externen Galerie oder einem anderen Server der Fall sein. Anstatt das Bild herunterzuladen und auf deinem Server zu speichern, kannst du es direkt als Featured Image verwenden. Das spart Speicherplatz und Bandbreite. Allerdings muss man beachten, dass man vom Drittanbieter abhängig ist, und das Bild daher nicht mehr kontrollieren kann. Änderungen am Quellbild wirken sich direkt auf die Darstellung auf deiner Website aus.


Diese Methode bietet sich insbesondere dann an, wenn du regelmäßig Bilder von einer externen Quelle verwendest oder wenn du nur ein kleines Vorschaubild benötigst und die volle Auflösung nicht auf deinem Server speichern möchtest. Denke aber daran, dass du auf die Verfügbarkeit und Stabilität des externen Dienstes angewiesen bist.


Zum Einbinden externer Bilder als Featured Images eignet sich das Plugin „WP Remote Thumbnail“:


WP Remote Thumbnail (kostenlos)


https://wordpress.org/plugins/wp-remote-thumbnail/


WP Remote Thumbnail ist ein sehr leichtgewichtiges Plugin, das ohne Konfiguration mit einem Klick eingerichtet werden kann. Es erlaubt dir, jedes beliebige externe Bild als Featured Image für Beiträge, Seiten oder Custom Post Types zu setzen. Die Einrichtung ist denkbar einfach und intuitiv.


Verwende WP Remote Thumbnail in Kombination mit einem Resource Hints Plugin, wie z.B. Pre-Party, um `preload` und `preconnect` Attribute für die externe Domain hinzuzufügen. Dies verbessert die Ladezeiten, indem es dem Browser ermöglicht, die Verbindung zum externen Server frühzeitig herzustellen und die Bilder vorzuladen. Ohne diese zusätzlichen Attribute kann es zu Verzögerungen beim Laden der externen Bilder kommen.


Funktionsweise: Nach der Installation und Aktivierung des Plugins kannst du beim Bearbeiten eines Beitrags oder einer Seite direkt die URL des externen Bildes im Featured Image Feld einfügen. Das Plugin kümmert sich um den Rest. Es erstellt kein lokales Kopie des Bildes, sondern verlinkt direkt auf die externe Quelle. Somit ist es besonders ressourcenschonend und schnell.


 


Dynamische Bild-Caching mit IndexedDB


Dynamisches Bild-Caching verbessert die Ladezeiten deiner Webseite, indem Bilder lokal gespeichert und wiederverwendet werden. IndexedDB bietet eine clientseitige Möglichkeit, Bilder im Browser zu cachen, wodurch wiederholte Anfragen an den Server vermieden werden. Dies ist besonders bei Websites mit vielen Bildern oder einer Galerie von Bildern hilfreich.


IndexedDB ist eine Datenbanklösung, die im Browser läuft und große Datenmengen, inklusive Bilder, verarbeiten kann. Im Gegensatz zu lokalen Storage Mechanismen wie localStorage, ist IndexedDB für größere Datenmengen skalierbar. Hier ist eine Schritt-für-Schritt-Anleitung zur Implementierung eines dynamischen Bild-Caches mit IndexedDB und Blobs:


Implementierungsschritte:


    

  1. Datenbank öffnen: Verwende JavaScript, um eine IndexedDB Datenbank zu öffnen. Wenn noch keine Datenbank für Bilder vorhanden ist, erstelle einen Object Store dafür. Der Name des Object Stores (z.B. „imageCache“) sollte aussagekräftig sein.
    2. 

  2. Bilder abrufen und speichern: Wenn ein Bild von einer externen Quelle (z.B. einer Galerie) abgerufen wird, speichere es als Blob (Binary Large Object) im IndexedDB Object Store. Verwende einen eindeutigen Schlüssel (z.B. die Bild-URL oder eine eigene ID) als Key für jedes Bild, um es später wiederzufinden. Die Verwendung von Blobs ermöglicht es, die Bilddaten binär im Cache zu speichern.
    3. 

  3. Cache zuerst prüfen: Bevor ein Bild von der externen Quelle abgerufen wird, prüfe, ob es bereits im IndexedDB Cache existiert. Wenn ja, lade das Bild von dort. Das reduziert die Ladezeiten deutlich, da der Server nicht noch einmal angefragt werden muss.
    4. 

  4. Aktualisierungsstrategie: Definiere eine Strategie, um den Cache aktuell zu halten. Bei statischen Bildern reicht es vielleicht aus, den Cache nur gelegentlich zu aktualisieren (z.B. einmal täglich oder wöchentlich). Bei Bildern, die sich häufig ändern (z.B. in einer Galerie mit regelmäßig neuen Bildern), ist eine dynamischere Aktualisierungsstrategie erforderlich. Dies könnte beispielsweise durch regelmäßige Prüfungen auf dem Server oder durch Metadaten, die den letzten Aktualisierungszeitpunkt angeben, realisiert werden. Ein mögliches Verfahren wäre die Verwendung von ETags oder Last-Modified Headers, um zu überprüfen ob sich das Bild seit dem letzten Caching geändert hat.
    5. 



Beispiel-JavaScript-Code (vereinfacht):


Dieser Code dient nur zur Veranschaulichung und ist nicht vollständig. Die Implementierung muss an deine spezifischen Bedürfnisse angepasst werden.



let dbPromise = idb.open('imageCache', 1, function(upgradeDb) {
  upgradeDb.createObjectStore('images', { keyPath: 'url' });
});

function getImageFromCache(url) {
  return dbPromise.then(function(db) {
    let tx = db.transaction('images');
    let store = tx.objectStore('images');
    return store.get(url);
  });
}

function cacheImage(url, blob) {
  return dbPromise.then(function(db) {
    let tx = db.transaction('images', 'readwrite');
    let store = tx.objectStore('images');
    store.put({ url: url, blob: blob });
    return tx.complete;
  });
}

// Beispiel für die Nutzung
getImageFromCache('bild.jpg').then(function(cachedImage) {
  if (cachedImage) {
    // Bild aus dem Cache verwenden
    let img = document.createElement('img');
    img.src = URL.createObjectURL(cachedImage.blob);
    // ...
  } else {
    // Bild vom Server laden und cachen
    fetch('bild.jpg')
      .then(response => response.blob())
      .then(blob => cacheImage('bild.jpg', blob))
      .then(() => {
        // Bild anzeigen
      });
  }
});



Dieser Code zeigt, wie man IndexedDB verwenden kann, um Bilder zu cachen und die Ladezeit zu optimieren. Es ist wichtig, dass man die Fehlerbehandlung berücksichtigt und den Code an die spezifischen Anforderungen der Webseite anpasst. Die Implementierung eines robusten und effizienten Caches erfordert eine gründliche Planung und Tests.


Beginne mit einem einfachen Setup und füge schrittweise zusätzliche Funktionen hinzu. Überprüfe nach jeder Änderung die Performance deiner Webseite, um sicherzustellen, dass die Änderungen die gewünschten Ergebnisse erzielen. Die Kombination aus dynamischem Caching mit anderen Optimierungsmethoden, wie Lazy Loading und Kompression, führt zu optimalen Ergebnissen.


Dynamisches Bild-Caching mit IndexedDB ist eine leistungsstarke Technik zur Optimierung der Ladezeiten deiner Webseite, insbesondere bei bildlastigen Inhalten. Die Implementierung erfordert JavaScript Kenntnisse, lohnt sich aber aufgrund der deutlichen Performance-Verbesserung.


 


 


Kostenlose, hochwertige Bilder: Ressourcen für deine Webseite


Hochwertige Bilder sind essentiell für eine ansprechende Webseite. Doch professionelle Bilder kosten oft Geld. Zum Glück gibt es zahlreiche Ressourcen, die kostenlose, hochwertige Bilder anbieten. Hier ein Überblick über einige der besten Optionen:


Bilddatenbanken mit kostenfreien Bildern:


    

  • Unsplash: https://unsplash.com/ Unsplash bietet eine große Auswahl an hochauflösenden Bildern, die von professionellen Fotografen zur Verfügung gestellt werden. Die Bilder sind kostenlos nutzbar, auch für kommerzielle Zwecke, unter der angegebenen Lizenz. Du musst dich lediglich an die Lizenzbedingungen halten, um Probleme zu vermeiden.
    • 

  • Pexels: https://www.pexels.com/ Ähnlich wie Unsplash bietet Pexels eine umfangreiche Sammlung von Bildern in hoher Auflösung. Auch hier sind die meisten Bilder für private und kommerzielle Nutzung kostenlos verfügbar, mit entsprechenden Lizenzbedingungen.
    • 

  • Pixabay: https://pixabay.com/ Pixabay ist eine weitere beliebte Plattform mit einer großen Auswahl an Bildern, Illustrationen und Vektorgrafiken. Die Bilder sind unter einer liberalen Lizenz frei nutzbar.
    • 

  • Gratisography: https://gratisography.com/ Gratisography bietet eine einzigartige Sammlung von ungewöhnlichen und kreativen Bildern. Die Bilder sind kostenlos und können auch kommerziell genutzt werden.
    • 

  • Picjumbo: https://picjumbo.com/ Picjumbo bietet eine Auswahl an kostenlosen Bildern, die sich besonders für Blogbeiträge oder Webseiten eignen. Es gibt sowohl kostenlose als auch kostenpflichtige Optionen.
    • 

  • Flickr: https://www.flickr.com/ Flickr ist eine Plattform für Fotografen, und es gibt viele Bilder, die unter Creative Commons Lizenzen veröffentlicht werden, die eine freie Nutzung erlauben. Achte aber sorgfältig auf die jeweiligen Lizenzbedingungen, da diese variieren können. Man muss also genau auf die Lizenz achten, bevor man ein Bild verwendet.
    • 



Überprüfe immer die Lizenzbedingungen der Bilder, bevor du sie auf deiner Webseite verwendest. Die Lizenzen variieren und manche Bilder dürfen nicht für kommerzielle Zwecke verwendet werden. Einige Lizenzen erfordern eine Namensnennung des Urhebers.


WordPress Plugin: Instant Images


Das Plugin „Instant Images“ (https://wordpress.org/plugins/instant-images/) bietet eine weitere Möglichkeit, kostenlos hochwertige Bilder zu erhalten. Es integriert eine Suchfunktion für verschiedene kostenlose Bilddatenbanken direkt in dein WordPress Dashboard. Das erleichtert die Suche und das Einfügen von Bildern erheblich. Es ist eine praktische Lösung, wenn du schnell und einfach hochwertige Bilder in deine Beiträge und Seiten einfügen möchtest, ohne verschiedene Webseiten besuchen zu müssen.


 


Bild-Wasserzeichen: Schutz und Branding deiner Bilder


Bilder sind ein wichtiger Bestandteil deiner Webseite. Um sie vor unbefugter Verwendung zu schützen und dein Branding zu stärken, bietet sich das Hinzufügen von Wasserzeichen an. Wasserzeichen sind kleine, meist transparente Markierungen, die in das Bild eingebettet werden. Sie sind in der Regel dezent gestaltet und beeinträchtigen die Bildqualität nur minimal. Dennoch machen sie es deutlich schwieriger, das Bild ohne Erlaubnis zu verwenden.


Es gibt verschiedene Arten von Wasserzeichen: Textwasserzeichen (z.B. dein Name oder der Name deiner Webseite), Grafikwasserzeichen (z.B. dein Logo) oder eine Kombination aus beidem. Die beste Wahl hängt von deinen individuellen Bedürfnissen und dem Design deiner Webseite ab.


Wähle ein Wasserzeichen, das dezent genug ist, um die Bildqualität nicht zu stark zu beeinträchtigen, aber dennoch deutlich genug, um die Urheberschaft zu kennzeichnen. Experimentiere mit verschiedenen Positionen, Größen und Transparenzwerten, um das beste Ergebnis zu erzielen. Ein zu auffälliges Wasserzeichen kann das Bild unansehnlich machen und die User Experience negativ beeinträchtigen.


Das manuelle Hinzufügen von Wasserzeichen zu jedem einzelnen Bild ist sehr zeitaufwendig. Zum Glück gibt es hierfür praktische WordPress Plugins, die den Prozess automatisieren.


    

  • Image Watermark (kostenlos): https://wordpress.org/plugins/image-watermark/ Ein sehr leichtgewichtiges Plugin zum Hinzufügen von Wasserzeichen. Es bietet grundlegende Funktionen und ist einfach zu konfigurieren. Ideal für Webseiten mit einer kleineren Anzahl von Bildern oder wenn du nur einfache Wasserzeichen benötigst. Es ist eine gute Lösung für Nutzer, die ein unkompliziertes Plugin suchen und keine komplexen Funktionen benötigen.
    • 


				

				

		

				

																														

				

					Johannes Arnz				

				

									Als Geschäftsführer von WebAscend setze ich meine 9-jährige Expertise in WordPress-Management, SEO und Suchmaschinenmarketing ein, um kleinen Unternehmen zu helfen, ihre Online-Sichtbarkeit zu maximieren. Meine Begeisterung für Technologie und mein Streben nach ständigem Fortschritt ermöglichen es mir, die fortschrittlichsten Ansätze für Ihr Projekt zu liefern.								

				

							


						

				
								
			

			
						


									

						
							Erhalte den besten WordPress-Newsletter						
					

				
				
			

			
		

						

				

				

							

			
			
			

							
			
			

								

													
											

								

					
				

			

		

						

				

		

				

					
Mein Hosting-Tipp
				

				

																
															
															

				

									
Und das aus gutem Grund:
  • der Support ist spitze (in der Regel unter 5 Minuten Antwortzeit)
  • das serverside Caching macht den Unterschied bei der Performance. Wenn Hosting, dann Raidboxes.
								

				

										
						
									Hier klicken
					
					
								

				

		

				

									
Hat der Artikel dir weitergeholfen? 
Dann kannst du mir hier einen ☕kaufen😉
								

				

				

				

		

					

				

					
Wie ist deine Meinung dazu? Möchtest du weiteren Content zu einem bestimmten Thema oder hast du eine Frage? 


Einfach hier stellen →
				

				

					


	
		

		
Schreibe einen Kommentar 
Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert
 
 



 


	

	


				

					

				

				

				

			

					

				

			
  

		

		

		

		

				

							


			
						


									

						
							Über mich						
					

				
									

						WordPress ist meine Leidenschaft - und so hat es sich entwickelt, dass ich immer mehr Unternehmen zu WordPress berate. Auch du hast die Chance😄. Schreib mir einfach 📱					

				
			

			
		

						

				

		

				

					
Offizieller Partner von:
				

				

							

			
						
		

						

				

																														

				

					
				

				

					
				

				

				

		

		

				

									©2025 WebAscend Leon Seitz & Johannes Arnz GbR								

				

							
						

				

							
						

				

		

				

									©2025 WebAscend Leon Seitz & Johannes Arnz GbR								

				

							
						

				

							
						

				

				

							
						

				

									
Ein Hinweis: Einige Links auf dieser Seite sind Affiliate-Links. Wenn du darüber einkaufst, erhalten wir eine Provision, für dich bleibt der Preis gleich. Damit unterstützt du uns direkt. Danke! ❤️
								

				

				

					

				

				

		

		

					

						

					

			

					

						

						

					

			

						

					
Case Study 

SEO Laser-Haarentfernung
				

				

									
Lade dir jetzt unser gesamte Case Study herunter und erfahre, wie du deine Website SEO optimierst.
								

					

		

				

			

						

																														

					

		

					

		

				

				

							

			
			
			

							
			
			

								

												
														
											

								

												
														
											

								

												
														
											

								

							

			
				
							
		

						

								

					
				

			

		

						

				

					

		

					

		

				

				

					

						

					

			

					

						

						

					

			

						

					
Tech-Stack WordPress PDF
				

				

									
Erhalte deine unsere PDF wie du deine WordPress Website am besten aufbaust
								

					

		

				

			

						

																														

					

		

					

		

				

				

							

			
			
			

							
			
			

								

												
														
											

								

												
														
											

								

												
														
											

								

							

			
				
							
		

						

								

					
				

			

		

						

				

					

		

					

		

				

				

					

						

					

			

					

						

						

					

			

						

					
Nutzen Sie jetzt Ihre Chance auf ein kostenloses SEO-Audit!
				

				

									
Lassen Sie uns Ihnen helfen, Ihre Online-Präsenz zu verbessern.
								

					

		

				

			

						

																														

					

		

					

		

				

									
Jetzt Analyse anfordern!
								

				

				

							

			
			
			

							
			
			

								

												
														
											

								

					
				

			

		

						

				

					

		

					

		

				

				

					

						

					

			

						

							

			
						
		

						

					

		

				

			

						

							

			

						

		

						

					

		

					

		

				

						

					

			

						

					
				

				

								
					
					
						

				

									
WebAscend