Hallo @rankosua,
Pagespeed bietet eine sehr schematische Prüfung deiner Website auf mögliche Performance-Probleme, bei der du aber auch recht zweifelhafte Lösungen vorgeschlagen bekommst. Da wird schon mal eine Webseite schlechter eingestuft, weil sich bei vier Bildern jeweils 10KB einsparen ließen. Vorausgesetzt, du möchtest nicht die Haarmode in Islamabad, Rio oder Tokio ändern, macht für einen Friseurbetrieb in Bad Münstereifel auch ein Content Delivery Network (also eine weltweite Verteilung der Daten an geografisch nähergelegene Server) wenig Sinn, selbst wenn Page Speed das höher bewerten würde. Kurz: Die Empfehlungen von PageSpeed & Co. sollten wirklich mehr als Hinweise gesehen und nicht bedingungslos umgesetzt werden. (Lesenswert: F*ck Pagespeed [NSFW]).
Mit dem „Blockieren des Rendern above the fold“ ist gemeint, dass schwergewichtige Stylesheets den Aufbau der Webseite verlangsamen können. Es ist deshalb sinnvoll, z.B. ein Print-Stylesheet erst im Footer zu laden, weil dann andere Inhalte bereits abgezeigt werden können, bevor das Stylesheet geladen wird. Es wird ja kaum jemand eine Webseite drucken wollen, bevor sie überhaupt angezeigt wird. Bei Stylesheets für die Bildschirmansicht (screen) kann es aber zu unschönen Effekten kommen, wenn erst das HTML angezeigt und erst später durch ein nachträglich geladenes Stylesheet formatiert wird. Dann hast du vielleicht eine performante Webseite, die aber … naja, unschön aussieht.
Für deine Website nutzt du bereits http/2, wodurch mehrere Dateien parallel geladen werden können. Die Stylesheets werden durch dein Cache-Plugin komprimiert und zusammengefasst und innerhalb einer Zehntelsekunden geladen. Ehrlich gesagt würde ich hier keinen zusätzlichen Aufwand betreiben. (Ein Stylesheet fällt zwar mit 800KB recht üppig aus, aber das ist „der Preis“, den du für ein Multipurpose-Theme „zahlst“. Irgendwie müssen die vielen möglichen Optionen des Themes ja abgedeckt werden.) Vielleicht lässt sich bei dem Sliderbild mit einem Plugin wie Imagify noch ein wenig rausholen.
Bei deinem Code-Beispiel hast du dich vermutlich an diesem Beitrag in Stack Exchange orientiert? Grundsätzlich funktioniert das, allerdings musst du schauen, welche Funktionen in deinem Theme im Header „eingehängt“ werden, um sie dann in den Footer zu verbannen. Bei gekauften Themes können wir dir aber leider nicht weiterhelfen, weil sie uns nicht zur Verfügung stehen.
Übrigens lädt dein Theme Google Webfonts, was nach meinen Informationen* nicht zur DSGVO passt. (*Ich bin allerdings kein Anwalt.) Schau dir dazu mal das Plugin https://de.wordpress.org/plugins/selfhost-google-fonts/ an.
Hallo rankosua,
bei den als blockierend bemängelten Objekten handelt es sich um CSS. CSS ist aber immer render-blocking, und das aus gutem Grund, den ansonsten erhieltest du zunächst nur eine Anzeige mit unformatierten Text.
Darüber hinaus sind 3 der 4 blockierenden CSS-Dateien von Deinem Cache (WP Fastest Cache) minifizierte Dateien. Evtl. kannst du hier auch mal die Einstellungen deines Plugin-Caches variieren.
Da haben sich unsere Antworten überschnitten. 😂
Hallo Bego Mario Garde und PraetorIM,
vielen Dank, dass Ihr Euch die Webseite angesehen habt. Es ist wirklich schön, von außen Tipps und Hinweise zu bekommen, wenn man sonst bei Herausforderungen an der Webseite auf sich allein gestellt ist.
Die Google Webfonts werden ich mir auf jeden Fall ansehen, nicht das noch eine Abmahnung im Briefkasten landet. Auch das Plugin werde ich noch einmal variieren, vielleicht verschwinden dann noch ein paar Optimierungsvorschläge.
Noch einmal vielen Dank, dass Ihr Euch die Zeit genommen habt, mir nützliche Tipps und Hinweise zu geben. Echt super =)
Für den Google-Browser Chrome gibt es ein interessantes AddOn, dass zusätzlich zur Performance auch Tipps zu SEO und Sicherheit gibt. Lohnt sich, mal anzuschauen:
https://www.checkbot.io/
