Google Page Speed: Render-Blocking lösen
2248 - schlaub - 23.06.2017 17:53 Uhr - Version: 1 - - verlinken als BB-Code
Google Page Speed: das Google PageSpeed Insights-Tool (https://developers.google.com/speed/pagespeed/insights/?hl=de) ist den meisten sicher bekannt.
Einige Verbesserungsvorschläge von Google wie z.B. die Optimierung der Bildgrößen oder die Verwendung von gzip sind einfach umzusetzen.
An erster Stelle der Optimierungen steht allerdings meist die Entfernung der Render-Blocking Javascript und CSS-Dateien. Heisst: der Seitenaufbau für den ohne Scrollen sichtbaren Bereich (sog. above-the-fold) verzögert sich, weil noch css- und javascript-Dateien geladen werden müssen. Die Google-Ressourcen führen dann auf Entwicklerseiten, die für den Durchschnitts-User leider gar nicht verständlich sind...Bei Erklärungen wie "Den kritischen Rendering-Pfad mit Navigation Timing messen" setzt das Wissen einmal aus.
Vor kurzem bin ich über ein sehr praktisches Tool gestolpert: criticalcss.com. Hier gibt man seine URL ein und bekommt eine css-Datei zum download, die nur css-Anweisungen enthält, die für den sichtbaren Bereich relevant sind. Diese css-Datei baut man dann inline in den <head>-Bereich ein (also mit <style>hier kommen die css-Anweisungen</style>
. Arbeitet man mit Wordpress, gibt es auch das praktische plugin: autoptimize - hier kann mann die css-Anweisungen reinkopieren.
Müssen nur noch die javascript-Dateien "entfernt" werden. Bei Wordpress gelingt das sehr gut mit dem Plugin scripts-to-footer, bei kleinen js-Dateien kann man diese inline laden, sonst kann man mit dem Attribut "async" ein verzögertes Laden erreichen: <script async src="my.js">.
Nachdem das Render-Blocking viele Punkte einbüßt, können plötzlich Spitzenwerte erreicht werden. Bei meiner Seite (https://kalender-2018.de) war ich mit blockierten Dateien bei Werten um die 72 Punkte - nach dem Entfernen liegt die Seite bei 96/100 bei Mobil und 94/100 bei Desktop. In Summe waren es etwa 10 Dateien, die blockiert haben.
Also: criticalcss.com einmal testen - das hat es echt gebracht.
Happy PageSpeed im grünen Bereich!