Render-Blocking jquery.js eliminieren

Christian Schreiber

Web Performance Consultant

Inhalt

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.

Picture of 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.
Der Einfluss von PageSpeed auf die Conversion-Rate

Optimierung von Google PageSpeed, Core Web Vitals und Ladezeiten für eine höhere Conversionrate: Warum eine schnelle Ladezeit für die Kundenbindung und Umsatzsteigerung unverzichtbar ist. Der