{"id":2227,"date":"2022-04-28T10:47:04","date_gmt":"2022-04-28T08:47:04","guid":{"rendered":"https:\/\/www.startup-force.com\/?p=2227"},"modified":"2023-07-31T17:44:55","modified_gmt":"2023-07-31T15:44:55","slug":"website-optimierung-page-speed","status":"publish","type":"post","link":"https:\/\/www.startup-force.com\/blog\/website-optimierung-page-speed\/","title":{"rendered":"Website Optimierung: 10 Page Speed Tricks f\u00fcr WordPress \ud83d\ude80"},"content":{"rendered":"\n
\"\"
Seitdem Google Inhalte von Webseiten nur mehr mobil erfasst (Mobile-First-Index) geht es nicht mehr ohne Optimierungen f\u00fcr mobile Ger\u00e4te. Hintergrundfoto: Stanislav<\/a><\/figcaption><\/figure>\n\n\n\n

Wir haben die Herausforderung angenommen: Vor der Website Optimierung erreichte unsere Startup Force Webseite nur traurige 44 von 100 Punkten \ud83d\ude31 im Google PageSpeed Insights Test. Wir zeigen Ihnen, wie auch Ihre Webseite 90 Punkte \ud83e\udd73 auf mobilen Ger\u00e4ten erreichen kann*<\/p>\n\n\n\n

*Der Wert kann schwanken und ist meistens zwischen 85 und 95 angesiedelt<\/p>\n\n\n\n

Darum sollten Sie eine Page Speed Website Optimierung machen<\/h2>\n\n\n\n

Bereits seit M\u00e4rz 2021 ist das Mobile First Indexing bei Google Standard. Das bedeutet vereinfacht gesagt, dass Google Webseiten nur mehr mit Crawler indiziert, die Mobilger\u00e4te wie Smartphones imitieren. <\/strong>Bis dahin wurden unterschiedliche Crawler zum Indizieren Ihrer Webseite eingesetzt. Wenn Ihre Webseite auf Desktop-Ger\u00e4ten im Google Speed Test gute Werte hatte, dann hatte das auch positive Auswirkungen auf Ihr Suchmaschinen-Ranking (am Desktop).<\/p>\n\n\n\n

Gute Werte auf Desktop-Ger\u00e4ten wie z. B. Laptops sind recht einfach zu erreichen. Auf Mobilger\u00e4ten ist das wesentlich schwieriger. Daf\u00fcr sind mehrere Faktoren verantwortlich. In vielen F\u00e4llen ist die Internetverbindung von mobilen Ger\u00e4ten langsamer. Prozessoren von Smartphones sind nicht so leistungsstark. Und so weiter.<\/p>\n\n\n\n

Wie gut die Rankings Ihrer Webseite in Suchmaschinen sind, h\u00e4ngt somit stark von Website Optimierungen auf mobilen Ger\u00e4ten ab. Dies beeinflusst direkt Ihr SEO<\/a> Ranking. Das ist aber nicht der wichtigste Grund f\u00fcr Page Speed Optimierungen.<\/strong> An erster Stelle sollte das UX Design<\/a> (Benutzererfahrung) stehen. Die User Experience leidet massiv unter langsamen Webseiten. Wie sicher jeder von uns kennt.<\/p>\n\n\n\n

Ob Ihre Webseite schon grunds\u00e4tzlich f\u00fcr mobile Ger\u00e4te optimiert wurde, k\u00f6nnen Sie mit diesem Tool von Google<\/a> herausfinden. Das Tool pr\u00fcft Ihre Webseite auf Responsive Design, jedoch \u00fcberpr\u00fcft es nicht die Ladezeiten. Die Page Speed Ihrer Webseite k\u00f6nnen Sie mit diesem Tool<\/a> testen.<\/p>\n\n\n\n

H\u00e4ufig kommen sogenannte Pagebuilder wie Divi oder Elementor bei WordPress Webseiten zum Einsatz. Neben den enormen M\u00f6glichkeiten und Vorteilen, die diese Tools bei der Gestaltung von Webseiten bieten, machen Sie Webseiten leider auch etwas langsamer.<\/p>\n\n\n\n

Erfahren Sie, wie Sie trotzdem hervorragende Werte auf mobilen Ger\u00e4ten<\/strong> erreichen k\u00f6nnen.<\/p>\n\n\n\n

Provider wechseln: Von Shared Hosting zu Managed Cloud Hosting<\/h2>\n\n\n\n

Wir kennen sie alle, die verlockenden Angebote von Providern. Wer bezahlt nicht gerne nur \u20ac 3,70 f\u00fcr das Hosting der Webseite. Oftmals ist auch der E-Mailserver bereits inkludiert. Dabei handelt es sich meistens um sogenanntes Shared Hosting<\/strong>. Was nichts anderes bedeutet, als dass sich Ihre Webseite die Leistung eines Servers mit anderen Webseiten teilt. Nur dadurch ist es f\u00fcr Provider m\u00f6glich, derart g\u00fcnstige Angebote anzubieten. Leider sind diese Pakete nicht gut f\u00fcr schnelle WordPress Webseiten geeignet<\/strong>. <\/p>\n\n\n\n

Als Alternative boten sich bisher dedizierte Server an. Diese brachten die Vorteile von schnelleren Reaktionszeiten, da Ihre Webseite dabei allein \u00fcber reservierte Ressourcen (Leistung des Servers) verf\u00fcgt. W\u00e4hrend diese Angebote wesentlich teurer sind, haben Sie leider einen massiven Nachteil: Sie sind selbst f\u00fcr die Sicherheit des Servers verantwortlich. Es ist oft schon eine Herausforderung, WordPress<\/a> und alle Plug-ins am aktuellen Stand zu halten. Wer will sich dann noch zus\u00e4tzlich um die Sicherheit des Servers k\u00fcmmern?<\/p>\n\n\n\n

Managed Cloud Hosting vereint die Vorteile der Performance eines dedizierten Servers mit den Vorteilen der Sicherheit von Shared Hosting Angeboten<\/strong>. Sie bekommen maximale Leistung und m\u00fcssen sich dabei nicht um den Server k\u00fcmmern. Wir haben uns deshalb f\u00fcr Cloudways Managed Hosting<\/a> entschieden und konnten damit die Erstreaktionszeiten und generell die Performance unserer Webseite massiv steigern.<\/p>\n\n\n\n

Die Kosten sind \u00fcberschaubar: Ab circa \u20ac 10,- pro Monat <\/strong>sind Sie dabei. Haben Sie viele Zugriffe, k\u00f6nnen Sie jederzeit mehr Leistung zukaufen, ohne den Provider oder Server wechseln zu m\u00fcssen. Sie k\u00f6nnen einen Serverstandort in Europa (Amsterdam, Paris, Frankfurt, u. a.) w\u00e4hlen, was auch f\u00fcr die Einhaltung von DSVGO-Vorgaben in der EU wichtig ist.<\/p>\n\n\n\n

Fazit: <\/strong>Eine zentrale und besonders wichtige Ma\u00dfnahme bei einer Website Optimierung ist das Hosting. Da hilft die beste Onpage Website Optimierung nur wenig, wenn ein langsamer Server den Flaschenhals darstellt.<\/p>\n\n\n\n

Performance Einstellungen<\/h2>\n\n\n\n

Wir arbeiten bei unseren WordPress Webseiten sehr gerne mit Divi. Der Pagebuilder erm\u00f6glicht enorme technische und kreative M\u00f6glichkeiten bei der Gestaltung von Webseiten. Werden Pagebuilder wie Divi oder Elementor jedoch nicht korrekt konfiguriert, dann machen Sie Webseiten tendenziell langsamer.<\/p>\n\n\n\n

Die gute Nachricht: Divi hat 2021 massiv in die Optimierung des Pagebuilders investiert.<\/strong> Standardm\u00e4\u00dfig kommen Funktionen wie CSS- und JavaScript Minifying, intelligentes Laden von Ressourcen und noch viel mehr zum Einsatz.<\/p>\n\n\n\n

Unser Tipp: Aktivieren Sie alle Einstellungen<\/strong> unter Divi \u279d Allgemeines \u279d Performance<\/strong> aktiviert. Aber Vorsicht: Die Aktivierung aller Performance Einstellungen kann die Ladezeiten zwar drastisch reduzieren, jedoch auch zu Fehlern auf der Webseite f\u00fchren.<\/p>\n\n\n\n

\"\"
Unser Tipp f\u00fcr mehr Divi Performance:<\/strong> Aktivieren Sie alle Einstellungen. Vorsicht: Nicht jede Einstellung muss mit Ihrer Webseite kompatibel sein. Testen Sie also ausf\u00fchrlich.<\/figcaption><\/figure>\n\n\n\n

Caching aktivieren<\/h2>\n\n\n\n

Intelligentes Caching ist zentral, wenn Sie Ihre Webseite schneller machen m\u00f6chten. <\/strong>Dabei wird Ihre Webseite und die Ressourcen (Seiten, Bilder, CSS, JavaScript, Schriften, \u2026) am Server und im Browser Ihrer Besucher zwischengespeichert. Dadurch k\u00f6nnen diese schneller bereitgestellt werden.<\/p>\n\n\n\n

Es gibt daf\u00fcr eine Reihe von Plug-ins f\u00fcr WordPress wie W3 Total Cache oder WP Rocket, die bei der Website Optimierung helfen. Wir haben hervorragende Erfahrung mit WP Rocket<\/a> gemacht und k\u00f6nnen dieses Plug-in weiterempfehlen. Das Plug-in erfordert eine gewisse Konfiguration und kostet circa \u20ac 44,- pro Jahr.<\/p>\n\n\n\n

Wenn Sie sich aber, wie wir (siehe erster Tipp<\/a>) f\u00fcr Managed Cloud Hosting haben, dann profitieren Sie vom kostenlosen Breeze Plugin<\/a> von Cloudways<\/strong>. Das WordPress Plug-in wurde speziell f\u00fcr die Server von Cloudways optimiert und liefert bei nur geringem Konfigurationsaufwand beachtliche Page Speed Steigerungen Ihrer Webseite. Das Plug-in wird bei einem Wechsel zu Cloudways automatisch vorinstalliert.<\/p>\n\n\n\n

Content Delivery Network (CDN) aktivieren<\/h2>\n\n\n\n

Ein Content Delivery Network hostet Ihre Webseite, neben vielen anderen Funktionen, auf mehreren Servern verteilt \u00fcber die ganze Welt. Dadurch k\u00f6nnen Webseiten schneller geladen werden, da immer der n\u00e4heste Server die Webseite ausliefert.<\/p>\n\n\n\n

\u00dcberdies bieten CDNs auch Sicherheitsfeatures, die Ihre Webseite u. a. vor DDoS-Attacken sch\u00fctzt. Oder v\u00f6llig automatisiert Ihre Bilder optimiert, komprimiert und in modernen Formaten wie WebP umwandelt.<\/strong><\/p>\n\n\n\n

Wenn Sie Managed Cloud Hosting<\/a> von Cloudways nutzen, dann k\u00f6nnen Sie f\u00fcr einen geringen Aufpreis von circa \u20ac 4,70 ein umfangreiches Enterprise Paket von Cloudflare<\/strong> nutzen. Darin ist das globale CDN Netzwerk von Cloudflare, Sicherheitsfunktionen, automatische Optimierung von Bildern, mobile Optimierung und einiges mehr enthalten. Mehr Informationen dazu finden Sie hier<\/a>. Ein unschlagbarer Preis f\u00fcr viele wertvolle Funktionen.<\/p>\n\n\n\n

Eingeschr\u00e4nkte CDN Funktionen von Cloudflare<\/a> k\u00f6nnen auch kostenlos genutzt werden.<\/p>\n\n\n\n

Google Schriften lokal hosten<\/h2>\n\n\n\n

Kaum eine Webseite kommt mehr ohne aus: Google Fonts<\/a>. Die Auswahl an Schriftbildern ist enorm und bereichert jedes Design. In den meisten F\u00e4llen werden die Schriften direkt \u00fcber leistungsf\u00e4hige Server von Google eingebunden. Der Nachteil: <\/strong>Daf\u00fcr sind mehrere externe Requests notwendig, die den Aufbau der Seite blockieren und somit verlangsamen. Mehr dazu finden Sie auch im Abschnitt „Render-Blocking Ressourcen identifizieren<\/a>„.<\/p>\n\n\n\n

Das Einbinden von Google Fonts \u00fcber deren Server ist auch nicht DSGVO-konform, weil Google so auch Daten von Benutzer sammelt und speichert.<\/p>\n\n\n\n

Die gute Nachricht: Sie m\u00fcssen nicht auf Google Fonts verzichten! <\/h4>\n\n\n\n

Finden Sie heraus, welche Schriften und Varianten Sie verwenden. Dabei kann Ihnen Fount<\/a> behilflich sein. Sie hinterlegen Fount als Lesezeichen in Ihrem Browser hinterlegen. Danach bekommen Sie \u2013 auf jeder beliebigen Webseite \u2013 Detailinformationen zu den verwendeten Schriften. <\/p>\n\n\n\n

Es gibt zwar eigene Plug-ins zum lokalen Einbinden von Google Fonts. Wir raten zur manuellen Einbindung \u00fcber das Caching Plug-in oder ein Child-Theme in WordPress. Wenn Sie dann Ihre Liste der verwendeten Google Fonts fertig haben, dann k\u00f6nnen Sie diese mit dem Google Webfonts Helper<\/a> herunterladen. Dabei erhalten Sie weitere Informationen, wie Sie die Fonts per CSS in Ihre Webseite einbinden k\u00f6nnen. Erstellen Sie dazu eine eigene CSS Datei. Binden Sie die Schriften nur im .woff2 und .woff Format ein. Damit kommen die allermeisten modernen Browser zurecht und Sie reduzieren damit zus\u00e4tzliche Ladezeiten.<\/p>\n\n\n\n

\"\"
Das kostenlose Google Webfont Helper Tool hilft Ihnen bei der lokalen Einbindung von Google Fonts in Ihre Webseite<\/figcaption><\/figure>\n\n\n\n

Danach binden Sie die neue CSS-Datei direkt \u00fcber die functions.php Ihres Child-Themes ein. Oder noch besser: Sie hinterlegen das Stylesheet in Ihrem Caching Plug-in. Breeze bietet hierzu unter Einstellungen \u279d <\/strong>Breeze \u279d <\/strong>Preload \u279d <\/strong>Preload Webfont<\/strong> eine Konfigurationsm\u00f6glichkeit. Andere Plug-ins wie WP Rocket bieten \u00e4hnliche Funktionen.<\/p>\n\n\n\n

\"\"
Die neue CSS-Datei mit den lokalen Google Fonts mit der \u201ePreload Webfont\u201c Funktion von Breeze einbinden.<\/figcaption><\/figure>\n\n\n\n

Bilder optimieren: Formate, Gr\u00f6\u00dfe und Komprimierung<\/h2>\n\n\n\n

Wenn Sie das Enterprise CDN Zusatzpaket von Cloudflare verwenden, dann wird Ihnen ein Gro\u00dfteil der Optimierung Ihrer Bilder automatisch abgenommen. Dabei wird auch eine automatische Konvertierung in das neue WebP Format vorgenommen.<\/p>\n\n\n\n

Trotzdem sollten Sie bei der Verwendung von Bildern mehrere Punkte beachten:<\/strong><\/p>\n\n\n\n