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

Eugen200 schrieb am 22.01.2015 um 22:39 Uhr

Hallo zusammen!

Ich bin dabei die Webseite im Punkt "Ladegeschwindigkeit" zu optimieren. Nach dem die Seite hier https://developers.google.com/speed/pagespeed/insights/ analysiert wurde, zeit Google einen kritischen Fehler, den ich leider ohne Ihre Hilfe nicht beseitigen kann. Hier ist Screenshot:

Hier ist ist es noch mal, um besser lesen zu können:

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

Ihre Seite enthält 7 blockierende Skript-Ressourcen und 7 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.

Keine der Seiteninhalte "above the fold" (ohne Scrollen sichtbar) konnten ohne Wartezeiten für das Laden der folgenden Ressourcen gerendert werden. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder laden Sie kritische Bereiche dieser Ressourcen direkt inline im HTML.

Entfernen Sie JavaScript, das das Rendering blockiert:http://www.au-pair-grenz.de/index_html_files/menu.js
http://www.au-pair-grenz.de/index_html_files/roe.js
http://www.au-pair-grenz.de/index_html_files/jquery.js
http://www.au-pair-grenz.de/index_html_files/datamap.js
http://www.au-pair-grenz.de/…ex_html_files/jquery.nivo.slider.pack.js
http://www.au-pair-grenz.de/index_html_files/nivoslider_config.js
http://www.au-pair-grenz.de/index_html_files/1.js

Optimieren Sie die CSS-Darstellung für die folgenden URLs:http://www.au-pair-grenz.de/index_html_files/xr_fonts.css
http://fonts.googleapis.com/…family=Finger+Paint:regular&subset=latin
http://www.au-pair-grenz.de/index_html_files/xr_main.css
http://www.au-pair-grenz.de/index_html_files/xr_text.css
http://www.au-pair-grenz.de/index_html_files/custom_styles.css
http://www.au-pair-grenz.de/index_html_files/default.css
http://www.au-pair-grenz.de/index_html_files/nivo-slider.css

Meine Fragen:

Wie stelle ich genau fest, in welcher Datei der Fehler ist? html_files/roe.js, files/jquery.js,.... das sagt mir nichts. In den "above the fold" (ohne Scrollen sichtbar) Bereich der Startseine kann ich JavaScript nur in Menüleiste vermuten. Dort kann ich ja je nicht viel ändern.

Wie kann ich das Problem lösen? Ggf. wie kann ich blockierende Ressourcen asynchron laden zu lassen?

Hat jemand vielleicht das gleiche Problem schon gehabt und gelöst?

Ich freue mich auf euren Tipps und Unterstützung!

mfg Eugen

Kommentare

BeRo schrieb am 22.01.2015 um 23:22 Uhr

Die gemeldeten "Fehler" in den CSS/JS Ressourcen kannst Du getrost vernachlässigen. Alle genannten Dateien sind elementare Bestandteile einer ganz normalen Website, die der WD nach Deinen Vorgaben (Layout und Inhalt) erstellt hat.
Diese Dateien sind für den normalen Benutzer des WD nur marginal veränderbar.

Hier mal ein Auszug der Empfehlungen, die diese Dateien betreffen und die zu kürzeren Ladezeiten führen (Quelle).

--------------------------------
[...]
JavaScript und CSS Ressourcen, die das Rendering blockieren

Jede Datei die mit eingebunden wird, bedeutet für den Browser eine weitere Server-Anfrage und beeinflusst den page speed Score einer Seite enorm.

Falsch platzierte JavaScript oder CSS Einbindungen blockieren den Browser kurzfristig und beeinflussen direkt den page speed.

Auch hier ist in erstler Linie der Designer gefragt, bzw. die Struktur des eigenen Templates.

JavaScript und CSS Dateien, die nicht benötigt werden, um den Hauptteil einer Webseite korrekt darzustellen, (above-the-fold-region), können aus dem HEAD in einen hinteren Bereich der Seite verschoben werden. Kleinere Anweisungen, oder Anweisungen die sofort benötigt werden, können direkt in die HTML Seite geschrieben und nicht in externe JavaScript Dateien ausgelagert werden.

Außerdem sollte man soviel Dateien zusammenfassen, wie möglich. Entweder macht man dies direkt, in dem man alle Scripte und CSS Dateien zu einer großen Datei zusammenfasst, oder man lässt diese Aufgabe ebenfalls durch sein CMS inklusive plugin erledigen.
[...]
-------------------------------

Wenn Du die Empfehlungen durchführen willst, müsstest Du Dich mit den Entwicklern des WD kurzschließen und mit denen gemeinsam einen dahingehend verbesserten WD entwickeln...

Klar, dass das kaum zu machen ist.

Andere Empfehlungen, die Du in der oben genannten Quelle nachlesen kannst, sind aber machbar.

Dazu zählen:

Dateigröße von Bildern (Grafiken) reduzieren.
Zielseiten-Weiterleitungen vermeiden.
Browser-Caching nutzen.
[...]

Allzu groß sind die Möglichkeiten also nicht, die Du als WD Nutzer hast, aber immerhin...

Viel Spaß noch beim weiteren Website Design