Render-Blocking jquery.js eliminieren

Während der Ladezeit- und Google PageSpeed Score-Optimierung tritt mitunter immer wieder das folgende Problem auf:

 

Die Datei „jquery.js“ blockiert das Rendering der Seite

Alle anderen Scripte werden meist bereits per Defer- oder Async-Attribut asynchron geladen oder werden erst im Footer aufgerufen, sodass ein asynchrones Nachladen nicht erforderlich ist.

Das jQuery-Script muss allerdings meist vor allen anderen Scripten geladen werden und so befindet es sich häufig im Website-Header und blockiert dann in Folge dessen das Rendering der Seite.

 

Die Lösung/Vorgehensweise allgemein

1) Zusammenfassung und Komprimierung aller JS-Dateien und Inline-Scripten in einer oder wenigen Dateien.

2) Aufruf der zusammengefassten Datei im Footer der Website. Zusätzlich: Verwendung von Defer- oder Async-Attribut im Script-Tag.

3) Positionierung des jQuery Scripts an erster Stelle der zusammengefassten, komprimierten jQuery-Datei. Somit werden alle anderen Scripte später geladen.

 

Die Lösung spezifisch für WordPress

Falls WordPress als CMS verwendet wird, so kann man beispielsweise das Plugin Autoptimize für die Komprimierung und Zusammenfassung der JS-Dateien nutzen.

Wichtig dabei ist, dass man vor der Aktivierung der Zusammenfassung in den Einstellungen von Autoptimize prüft, dass sich das jQuery-Script nicht in der Ausschlussliste der nicht zu optimierenden Dateien befindet und dass das Script im Quellcode vor der Optimierung mittels Autoptimize als erstes Script referenziert wird, denn Autoptimize fasst die Script in der Reihenfolge zusammen wie sie vor der Optimierung (ohne Autoptimize Plugin) im Code aufgerufen werden.

Christian Schreiber
Christian Schreiber
Ich bin seit dem Jahr 2009 als SEO-Berater mit technischem Schwerpunkt tätig. Als studierter Wirtschaftsinformatiker und Web-Entwickler begleite ich Marketing-Spezialisten und Programmierer aus Start-ups, Mittelständlern, Konzernen und Agenturen bei der Umsetzung der Ladezeit-Optimierung für hochperformante Websites.
Google Maps: HTTP-Requests deutlich reduzieren

Google Maps: HTTP-Requests deutlich reduzieren

Die Problematik Die Einbindung von Google Maps Karten verursacht leider viele Anfragen/Requests, wie man auf der folgenden Abbildung aus dem Tool webpagetest.org gut sehen kann:

Performance-Verbesserung für Cookie-Hinweise

Performance-Verbesserung für Cookie-Hinweise

Die verpflichtenden Cookie-Hinweise wirken sich leider häufig negativ auf die Website-Performance und User Experience aus. Insbesondere ist dies in der Google PageSpeed Analyse ersichtlich. Allgemein