Für ein gutes Benutzererlebnis ist die Ladezeit einer Webseite ein wichtiger Ansatzpunkt. Dies hat auch Auswirkungen auf deine Suchmaschinenplatzierung. Spätestens seit der “Mobile First” Strategie von Google ist die Ladezeit ein nicht zu unterschätzender Rankingfaktor.
Oftmals sind zu große Bilder die Übeltäter, warum eine Seite zu lange lädt. Zwar gibt es super Plugins für WordPress, die Bilder beim Upload oder sogar danach optimieren. Da diese aber mit standardisierten Einstellungen arbeiten, kann es sinnvoll sein mit Fleißarbeit manche Bilder manuell zu bearbeiten.
Sind also manche Bereiche deiner Homepage langsam, macht eine händische Analyse Sinn. Wie ich vorgehen würde, beschreibe ich nun in diesem Blogpost.
Große Elemente herausfinden
Um herauszufinden, welche Elemente auf deiner Seite besonders groß sind, gibt es mehrere Möglichkeiten.
Du kannst zum Beispiel externe Tools wie Pingdom nutzen, um die Ladezeit zu überprüfen. Dort wird am Ende aufgeschlüsselt, wie groß die Elemente sind und wie lange sie zum Laden benötigen.
Das hat aber mittlerweile auch jeder Browser auf dem Kasten. Ich zeige das exemplarisch im Firefox. Aber jeder moderne Browser kann das, nur kann es sein, dass sich die Bezeichnungen unterscheiden.
- Du gehst auf die gewünschte Seite.
- Du klickst mit Rechtsklick auf eine frei Fläche und wählst “Element untersuchen”.
- Anschließend gehst du auf “Netzwerkanalyse” und lädst die Seite neu.
- Nun noch absteigend nach Größe sortieren.
In meinem Beispiel sieht man, dass das Bild viel zu groß ist. Von der Dateigröße, aber auch vom Bildformat.
Die richtige Auflösung
WordPress generiert bei jedem Hochladen unterschiedlich große Bilder, damit man eben kein Bild der Auflösung 2048*1365 Pixel in einem 594 * 396 Pixel Fenster einbetten muss.
Im Idealfall geht man auf die Beitragsseite und ändert einfach nur das eingebettete Bildformat. In meinem Fall zum Beispiel auf “Groß”.
Nun kann es sein, dass das Bild trotzdem noch zu groß ist, oder man es noch viel mehr optimieren möchte.
Im “Untersuchungsmodus” deines Browsers kannst du mit dem Inspektor über das Bild fahren und so die aktuelle Auflösung sehen.
Hier siehst du, dass das Bild eine Breite von ~595 px und eine Höhe von ~397 px besitzt.
Im Untersuchungsmodus kannst du allerdings am Dateinamen erkennen, dass WordPress das Bild mit der Auflösung 1536 x 1024 Pixel verwendet hat. Dies könntest du später zum Beispiel mit einem Bildbearbeitungstool auf 600 * 400 herunter skalieren. Allerdings solltest du dir sicher sein, dass 600 * 400 wirklich die maximale Auflösung für dieses Element ist.
Wenn deine PC-Auflösung 1920 * 1080 ist, sollte das in der Regel passen.
Bilder bearbeiten und optimieren
Um dieses Bild zu optimieren, benötigst du jetzt Serverzugriff. Zum Beispiel mittels FTP-Zugang. Den kannst du dir in der Regel bei deinem Webhoster im Login-Bereich anlegen.
Ich nutze dafür gerne FileZilla. Dieses Tool gibt es nicht nur für Windows, sondern auch für iOS und Linux. Tipp: Um Drag-and-Drop zu verwenden ist meistens ein Neustart nötig. Manche Hoster wie Strato erlauben nur SFTP, das kann FileZilla auch, nur musst du dich dazu anders einloggen (Anleitung von Chip).
Hier loggst du dich mit deinen Zugangsdaten ein und navigierst dich zu dem Pfad des Bildes. In meinem Beispiel wäre das der Ordnerpfad “/wp-content/upload/2020/09“. Zu sehen an der Bild-URL.
Dort holst du dir das gewünschte Bild, in meinem Fall “squirrels-5550173-1536×1024.jpg“, lädst es auf deinen Rechner und öffnest es mit einem Bildbearbeitungstool. (Kopie anlegen nicht vergessen, falls was schief geht).
Da ich aus der Windows-Welt komme, kenne mich ich mich mit OS x nicht besonders aus. Ich selbst verwende mit Windows das aufgemotzte, kostenlose PaintNET. Auf OS x weiß ich, dass zum Beispiel Gimp die gleichen Möglichkeiten bietet, aber ein wenig overpowert ist für diese Mini-Bearbeitungen.
Hier kannst du nun die Größe entsprechend anpassen. Die Seitenverhältnisse beibehalten ist meistens eine gute Idee.
Der größte Einspareffekt in der Dateigröße ist allerdings die Komprimierung. Zumindest bei .JPG / .JPEG Dateien. In der Regel wird die Komprimierungsoption beim Speichern abgefragt.
Hier komprimierst du so weit runter, wie du mit dem Qualitätsverlust einverstanden bist.
Anschließend lädst du das optimierte Bild über FTP / SFTP wieder hoch und prüfst, ob du mit der Qualität und Größe des Bildes zufrieden bist.
 Ich freue mich von dir zu hören! | Du kommst bei deinem Projekt nicht weiter oder brauchst einen Boost? Dann lass dir von mir helfen zum Beispiel bei: ► Beratung für Selbständige, Gründer & Ideenschmiede Egal, ob du erste Tipps brauchst. Einmal über deine Idee reden möchtest oder mit mir das Konzept für das nächste Facebook ausarbeiten willst. ► Entwicklung von Software, APPs & Webseiten Beispielsweise: WordPress Shops & Plugins, (Gaming-)Apps, Datenbank-Applikationen oder andere smoothe Anwendungen! Mehr Infos, Preise und Kontaktmöglichkeiten findest du hier! |
