Support » Allgemeine Fragen » CSS Render Blocking – Google Pagespeed

  • Hallo Forum,

    ich hoffe sehr, dass mir jemand helfen kann. Um meine Webseite schneller zu machen, nutze ich das Plugin WP Fastest Cache. Bei Google Pagespeed erhalte ich folgenden Optimierungsvorschlag:

    JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen

    https://financeshark.de/wp-content/cache/wpfc-minified/88ejd1dt/47gvd.css
    https://financeshark.de/wp-content/cache/wpfc-minified/88ejd1dt/47gvd.css
    https://cdn.jsdelivr.net/…4.7.0/css/font-awesome.min.css?ver=4.7.0
    https://financeshark.de/…nt/cache/wpfc-minified/ez8q2k6/47l6y.css

    Kann mir jemand sagen, wie ich diesem Optimierungsvorschlag nachkommen kann. Ich weiß, dass Google will, dass die aufgeführten CSS-Dateien im Footer geladen werden sollen. Ich habe bereits versucht mit dem folgenden Script in der functions.php alle CSS-Dateien im Footer zu laden. Leider hat es nicht funktioniert.

    // Custom Scripting to Move JavaScript from the Head to the Footer
    
    function remove_head_scripts() { 
       remove_action('wp_head', 'wp_print_scripts'); 
       remove_action('wp_head', 'wp_print_styles', 8);
       remove_action('wp_head', 'wp_print_head_scripts', 9); 
       remove_action('wp_head', 'wp_enqueue_scripts', 1);
    
       add_action('wp_footer', 'wp_print_scripts', 5);
       add_action('wp_footer', 'wp_print_styles', 5);
       add_action('wp_footer', 'wp_enqueue_scripts', 5);
       add_action('wp_footer', 'wp_print_head_scripts', 5); 
    } 
    add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
    
    // END Custom Scripting to Move JavaScript

    Ich hoffe sehr, dass mir jemand bei diesem Problem helfen kann. Vielen Dank im Voraus =)

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • 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.

    Moderator PraetorIM

    (@praetorim)

    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.

    CSS ist aber immer render-blocking, und das aus gutem Grund, den ansonsten erhieltest du zunächst nur eine Anzeige mit unformatierten Text.

    Sag ich doch. 😂

    Moderator PraetorIM

    (@praetorim)

    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/

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Das Thema „CSS Render Blocking – Google Pagespeed“ ist für neue Antworten geschlossen.