So erhalten Sie 100/100 bei Google PageSpeed Insights mit einer WordPress-Website und dem Page Builder Elementor
Ich wollte prüfen, ob es möglich ist, mit einer mit WordPress, dem Page Builder Elementor und dem Astra-Theme erstellten Website eine perfekte Punktzahl von 100/100 bei Google PageSpeed Insights zu erreichen.
Ich habe beschlossen, meine eigene Website https://davidloor.com/ mit WordPress und Elementor zu erstellen und die Empfehlungen zu befolgen, die ich unten beschreiben werde. Meine Website erreicht 100/100, wie Sie im folgenden Screenshot sehen können.
Diese Anleitung geht davon aus, dass Sie eine WordPress-Website eingerichtet haben und diese läuft.
Erstellen Sie ein kostenloses Konto bei Cloudflare
"Cloudflare ist eines der größten Netzwerke, die im Internet operieren. Menschen nutzen die Dienste von Cloudflare, um die Sicherheit und Leistung ihrer Websites und Dienste zu erhöhen." Es gibt eine kostenlose Version, die ich für meine Website nutze.
Sie können hier ein kostenloses Konto erstellen: https://dash.cloudflare.com/sign-up
Für weitere Details zu Cloudflare können Sie deren eigene Dokumentation unter https://www.cloudflare.com/learning/what-is-cloudflare/ besuchen.
Nachdem Sie die Kontoerstellung abgeschlossen haben, gehen Sie zu https://dash.cloudflare.com/profile/api-tokens. Klicken Sie bei Global API Key auf View, geben Sie Ihr Passwort ein und kopieren Sie den Schlüssel, den wir in den folgenden Schritten verwenden werden.
Installieren Sie kostenlose WordPress-Plugins
Wir müssen zwei Plugins auf unserer WordPress-Website installieren. Wenn Sie nicht wissen, wie man ein Plugin in WordPress installiert, besuchen Sie bitte diesen Link und lernen Sie, wie es geht.
1. Autoptimize
Das Plugin kann von diesem Link heruntergeladen werden.
Aktivieren Sie auf dieser Seite https://IHRE-SEITE/wp-admin/options-general.php?page=autoptimize alle Optionen, aber lassen Sie die folgenden deaktiviert:
- Auch für eingeloggte Redakteure/Administratoren optimieren?
- HTML-Kommentare beibehalten?
Aktivieren Sie auf dieser Seite https://IHRE-SEITE/wp-admin/options-general.php?page=autoptimize_imgopt alle Optionen.
Aktivieren Sie auf dieser Seite https://IHRE-SEITE/wp-admin/options-general.php?page=autoptimize_extra alle Kontrollkästchen. Wenn Sie keine Google Fonts verwenden, wählen Sie die Option "Remove Google Fonts" (Google Fonts entfernen) und klicken Sie auf Speichern.
2. WP Cloudflare Super Page Cache
Das Plugin kann von diesem Link heruntergeladen werden.
Geben Sie auf dieser Seite http://IHRE-SEITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index
die E-Mail-Adresse ein, die Sie für die Erstellung des Cloudflare-Kontos verwendet haben, und den API-Schlüssel, den Sie wie oben beschrieben erhalten haben.
Stellen Sie auf dieser Seite https://IHRE-SEITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index
sicher, dass die Option Enable fallback page cache (Fallback-Seiten-Cache aktivieren) aktiviert ist, damit der Cache von der Festplatte verwendet werden kann, falls die Seite nicht in Cloudflare zwischengespeichert werden kann.
3. Deaktivieren Sie die Standard-Schriftarten des Astra-Themes und des Elementor-Plugins
Fügen Sie die folgenden Filter in die functions.php-Datei Ihres Themes ein.
/**
* Standard-Astra-Schriftarten deaktivieren.
*/
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
* Astra Google Fonts deaktivieren.
*/
add_filter('astra_google_fonts_selected', function($fonts) {
return [];
});
/**
* Google Fonts von Elementor deaktivieren.
*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Update vom 02.12.2022
Ich bin vom Astra-Theme zum Hello Elementor-Theme gewechselt, https://elementor.com/hello-theme/, und das hat geholfen, auch auf Mobilgeräten 100/100 zu erreichen.