Bildoptimierung in WordPress zur Verbesserung der Ladezeit deiner Webseite

Deine WordPress-Website lädt nicht schnell genug? Häufig ist der größte Flaschenhals die Größe der Bilder auf deiner Seite. In diesem Tutorial führen wir dich durch den kompletten Prozess, wie du ein Plugin installierst und dafür sorgst, dass es deine Bilder automatisch optimiert und das kleinere .webp Format umwandelt.

Fehlermeldung „Verbindung nicht sicher“ beheben / SSL Zertifikat installieren

Dein Browser warnt dich beim Aufruf deiner WordPress-Webseite, dass die Verbindung nicht sicher ist bzw. es sich um eine ungesicherte Verbindung handelt. In dieser Anleitung erklären wir dir, worauf der Fehler zurückzuführen ist und wie du diesen in wenigen Schritten beheben kannst, um mehr Besucher auf deine Webseite zu bekommen.

Jede URL, die mit HTTP beginnt, verwendet das unsichere Protokoll. Der Browser warnt Webseiten-Besucher, dass die Verbindung nicht sicher ist bzw. man mit dieser Seite über eine ungesicherte Verbindung kommuniziert. Ebenso kann beim Aufruf einer Webseite über HTTPS eine Fehlermeldung angezeigt werden, die dich davon abhält, die Seite zu betreten, da die „Verbindung nicht sicher“ ist. Die häufigsten Ursachen bestehen im Fehlen eines SSL-Zertifikats sowie dem Laden von Ressourcen der Webseite wie Bildern über HTTP (anstelle von HTTPS).

Browser-Warnung: Verbindung nicht sicher

SSL/TLS bzw. HTTPS gehören zu den heutigen Sicherheitsstandards. Du bist gesetzlich ohnehin zur Umstellung von HTTP auf HTTPS verpflichtet, wenn personenbezogene Daten auf deiner Webseite erfasst werden (z.B. Login-, Kontaktformular, Payment-Vorgang etc.).

Wir zeigen dir, wie du den gesamten Datenverkehr zwischen deiner WordPress-Webseite und dem Browser eines Besuchers über eine verschlüsselte Verbindung herstellst. Zunächst installieren wir ein SSL-Zertifikat und anschließend bearbeiten wir die Datenbank, um den gesamten Webseiten-Traffic von HTTP auf HTTPS umzustellen, sodass die Besucher deiner Webseite keine verwirrende Warnung oder Fehlermeldung mehr sehen.

Voraussetzung: SSL-Zertifikat installieren

Um den Datenverkehr zwischen deiner Webseite und dem Browser abzusichern bzw. zu verschlüsseln, bedarf es der Installation eines gültigen SSL-Zertifikats. Falls du bereits ein gültiges SSL-Zertifikat installiert hast und der Browser immer noch eine Warnung bezüglich einer ungesicherten Verbindung anzeigt, kannst du gerne zum nächsten Abschnitt übergehen.

Die Installation eines SSL-Zertifikats ist in der Vorgehensweise von Webhoster zu Webhoster unterschiedlich. Idealerweise schaust du im Kundenportal deines Hosters nach, ob ein SSL-Zertifikat in deinem Webhosting-Tarif inklusive ist oder wie du eines beantragst.

Wir zeigen dir hier exemplarisch, wie die Installation eines SSL-Zertifikats beim von uns seit vielen Jahren bevorzugten Hoster all-inkl funktioniert.

  1. Logge dich zunächst in das KundenAdministrationsSystem (kurz KAS) von all-inkl ein.
  2. Wähle den Menüpunkt „“Domain“ aus und klicke bei der betreffenden Domain auf das „Bearbeiten“-Symbol.
  3. Unter „SSL-Schutz“ befindet sich der Menüpunkt „Let's Encrypt“.
  4. Lies und akzeptiere den Haftungsausschluss.
  5. Klicke auf den Button „jetzt ein Let's Encrypt Zertifikat beziehen und einbinden“.

Das Zertifikat wird nun automatisch installiert, was einige Minuten Zeit in Anspruch nehmen kann. Rufe nun deine Webseite im Browser erneut auf und kontrolliere das Schlosssymbol in der Adressleiste. Oftmals zeigt der Browser dennoch ein Warndreieck-Symbol neben der Adressleiste, obwohl ein SSL-Zertifikat installiert ist. Dies lässt sich meist auf Elemente auf der Seite zurückführen (wie Grafiken), die immer noch per HTTP anstelle von HTTPS ausgeliefert werden.

URLs in der Datenbank aktualisieren

In WordPress werden URLs von Grafiken sowie anderen Ressourcen mit ihrer vollständigen Adresse (inklusive des HTTP- bzw. HTTPS-Teils, meist auch als absoluter Pfad bezeichnet) in der Datenbank abgespeichert. Ein Beispiel für einen absoluten Pfad zu einer in WordPress hochgeladenen JPG-Datei:

http://example.org/wp-content/uploads/2022/01/logo.jpg

Um einfach und schnell alle Vorkommnisse von HTTP-URLs durch HTTPS-URLs in der Datenbank zu ersetzen, empfehlen wir das kostenlose WordPress-Plugin „WP Migrate DB – WordPress Migration Made Easy“ von Delicious Brains.

Tipp:

Vor jeder größeren Veränderung an deiner Seite, solltest du ein Backup anlegen!
  1. Installiere und aktiviere das Plugin.
  2. Das Plugin findest du im WordPress-Backend unter Tools > Migrate DB.
    Wordpress-Plugin Migrate DB im Menü öffnen
  3. Klicke im Plugin-Menü auf „MIGRATE“ und anschließend auf „Find & Replace“.
    Wordpress Plugin Migrate DB: Find & Replace
  4. Klicke im Reiter „Database“ zwei Mal auf den Button „+ ADD ROW“. Denn wir brauchen insgesamt drei Zeilen.
  5. Nehmen wir an, deine Domain hieße example.org.
    In die linken Spalten unter „FIND“ trägst du alle zu ersetzenden Vorkommnisse in verschiedenen Varianten und in die rechten Spalten unter „REPLACE“ jeweils die neue URL in der HTTPS-Variante – angepasst an deine Domain – wie folgt ein.
    Migrate DB URLs ersetzen
    Links steht:

    https://www.example.org
    http://www.example.org
    http://example.org
    

    Rechts steht:

    https://example.org
    https://example.org
    https://example.org
    

    Dir fällt auf, dass die rechten Spalten 3x die gleiche URL enthalten. Das ist richtig so.

  6. Klicke unten auf „PREVIEW CHANGES“ und du siehst nun, wie das Plugin alle Datenbanktabellen durchsucht und dir anschließend eine Vorschau mit allen Funden anzeigt.
    DB Migrate Preview (Find & Replace)
  7. Um nun alle HTTP-URLs durch HTTPS-URLs zu ersetzen, bestätigst du dies per Klick auf den unteren Button „APPLY CHANGES“.

Rufe deine Startseite im Browser erneut auf. Siehst du jetzt keine Warnung mehr, sondern ein geschlossenes bzw. grünes Schlosssymbol in der Adressleiste, ist der gesamte Datenverkehr verschlüsselt und die Arbeit getan.

URLs in CSS- und Javascript-Dateien anpassen

Solltest du immer noch eine Warnung im Browser sehen, dass die Verbindung nicht sicher ist, liegt dies wahrscheinlich an hart gecodeten HTTP-URLs in CSS- oder Javascript-Dateien.

Das kannst du einfach in Erfahrung bringen, indem du die Entwickler-Werkzeuge (Developer Tools) des Browsers öffnest. Drücke dazu die F12-Taste. In Google Chrome öffnest du den „Network“-Tab und in Firefox die Netzwerkanalyse. Lade deine Webseite jetzt neu. Du siehst eine Tabelle mit allen Ressourcen deiner Seite. Solltest du Einträge mit einem rot durchgestrichenen Schlosssymbol sehen, werden diese nicht über HTTPS ausgeliefert. Beim Hovern über solche Datei-Einträge erfährst du, wo genau sich die jeweilige Datei befindet, damit du sie öffnen und darin nach Vorkommnissen von HTTP-URLs durchsuchen kannst.
Netzwerkanalyse im Browser - Ressourcen

Die betroffenen Dateien kannst du entweder per FTP herunterladen, bearbeiten und wieder auf den Server laden oder du nutzt einfach den Theme Editor von WordPress.
Wordpress Theme Editor - URLs von HTTP zu HTTPS ändern
Hier sehen wir eine HTTP-URL in der style.css-Datei. Durch Ersetzen von http durch https wird auch diese URL über eine gesicherte Verbindung geladen. Aus allen http:// muss https:// werden. Speichere die Datei anschließend per Klick auf „Update File“.

Prüfen, ob Fehlermeldung „Verbindung nicht sicher“ noch auftaucht

Rufe die Startseite deiner Webseite erneut auf und kontrolliere das Schlosssymbol.

SSL / HTTPS: Verbindung sicher

Die Verbindung ist nun sicher und Webseiten-Besucher erhalten keine Warn- oder Fehlermeldung mehr.

In diesem Tutorial hast du gelernt, wie man eine WordPress-Webseite von HTTP auf SSL / HTTPS umstellt, indem du ein SSL-Zertifikat installiert und alle HTTP-URLs in der Datenbank und in Dateien durch sichere HTTPS-URLs ersetzt hast.

Hat dir der Beitrag weitergeholfen? Bitte bewerte ihn mit einem Klick auf die Sterne. Hast du noch Fragen? Dann hinterlasse uns gerne einen Kommentar.

Beitrag bewerten

fürchterlich!mehgutsehr gut!fantastisch! (Bewertungen: 3, Durchschnitt: 4,67 von 5)
Loading...

Fragen oder Anregungen zum Beitrag?
Hinterlasse einen Kommentar!

0 Kommentare

Einen Kommentar abschicken

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