Bilder - die größten Bremser
Die häufigste Ursache für langsame Websites liegt immer noch bei den Bildern - ganz unabhängig davon, welches CMS verwendet wird. 3 Faktoren sind für die Dateigröße (und damit für die Ladezeit) wichtig, wenn man ein Bild verwendet: die Speichergröße, die Dimension und schliesslich die Bildauflösung, die verwendet wird.
Die Bildgröße - Speichergröße
Die Datenmenge, die für ein Bild benötigt wird, ist von 2 Faktoren abhängig: dem Bildinhalt und dem Speicherformat. Vereinfacht kann man feststellen, dass man für
- Icons - SVG
- Grafiken - PNG
- Fotos - JPG, WEBP oder AVIF
verwenden soll.

Während bei Icons und flächigen Grafiken durch das richtige Dateiformat (SVG, PNG) schon sehr viel gewonnen ist lohnt es sich, die drei von WordPress unterstützen Bildformate für Fotos näher anzusehen. Das Beispielbild oben wurde gewählt, weil es einerseits einen großen Anteil mit unscharfen, leicht zu komprimierenden Bildanteil links hat, auf der rechten Site aber mit den gelben Blüten und dem Schmetterling in der Mitte ein Motiv hat, das unter einer zu starken Komprimierung stark leiden würde.
Das klassische JPG-Format ist bei einer 100%igen Qualität unbrauchbar gross (1,3 MB), während eine Qualitäts-Reduktion auf 75% eine Bildgröße von 200 kB erreicht. Verwendet man das von Google entwickelte WEBP-Bildformat so kommt man - bei gleichen oder sogar besseren Ergebnissen- auf 360 kb bzw. auf 82 kB. Ein sehr guter Wert. Das neue AVIF kommt bei voller (!!!) Qualität bereits auf 97 kB.
Es spricht genau nichts dagegen, moderne Bildformate zu verwenden und die Qualitäts-Verluste so einzustellen, dass kein optischer Nachteil entsteht.
Die Dimension der Bilder
Es mag sehr trivial wirken, aber bei der Vorbereitung der Bilder ist es eine gute Idee, wenn man weiss, wo und wofür ich diese dann verwenden will.
Beispiel: ein Bild, das nie breiter als die Inhaltsbreite sein wird braucht auch nicht breiter als die Inhaltsbreite sein. Und wer nicht weiss, welche Breite eingestellt ist: 1140 px ist die default-Einstellung im Theme Hello Elementor. Nur wer unter
Panel > Website-Einstellungen > Layout …
die Breiten verändert hat bzw. zusätzliche Breakpoints aktiviert hat benötigt ev. Bilder in diesen Breiten. Und Herobilder? Hier kommt es wieder sehr auf das Motiv an, aber praktisch kann man sagen, dass in den meisten Fällen ein Breite von 1600 px wohl ausreichen wird. Nur sehr detailreiche Bilder werden bei breiteren Bildschirmen dann unschön - genau hier ist der einzige sinnvolle Anwendungsbereich für den zusätzlichen Breakpoint Widescreen zu finden.
Schmälere Bilder sind dann natürlich in Relation zu den oben genannten Breiten zu setzen, also zB. 570 px für eine Spalte mit halber Inhaltsbreite oder 800 px bei halben Fullwidth-Design.
Bildauflösung korrekt wählen
WordPress speichert beim Upload neben der Originaldatei mind. 3 weitere Kopien von Bildern in den Größen Thumbnail (Vorschaubilder), Medium (Mittelgroß) und Large (Groß).
Welche Dimensionen diese Formate haben kann man übrigens unter
Dashboard > Medien
Für jede WordPress-Installation gesondert einstellen. Bilder deren Original noch größer ist werden in zusätzlichen Dimensionen gespeichert.

Das automatische Abspeichern der Bilder in verschiedenen Dimensionen ist aber nur die Hälfte: erst wenn man im Bildwidget unter Bildauflösung auch die geeignete Datei auswählt optimiert man die Ladezeit richtig.
Wichtig: hier wird ausgewählt, welche Datei geladen wird - wie groß das Bild dann angezeigt wird stellt man an anderer Stelle (zB. im Stil-Tab) ein.
Hinweis: natürlich kann man auch mit dem Blockeditor die korrekte Datei auswählen, nicht alle Beiträge werden mit Elementor gestaltet.








