So optimierst du Contact Form 7 für eine bessere Ladezeit

Ein einfaches Kontaktformular ist für viele Websites nahezu unentbehrlich. Vor allem Dienstleister, die auf Ihrer Website Ihre Leistungen bewerben, schwören auf ein solches Formular für eine einfachere Kontaktaufnahme. Kein Wunder, schließlich geht das Ausfüllen jenes Formulars für Laien schneller von der Hand als das Schreiben einer E-Mail. Das wohl beliebteste WordPress-Plugin, um ein solches Formular auf der eigenen Website einzubinden, ist Contact Form 7. Hinsichtlich der Ladezeitoptimierung gibt es hier aber noch einiges an Potential.

Contact Form 7: Script nur auf Kontakt-Seite laden

Contact Form 7 lädt CSS- und JS-Dateien, auch wenn sie nicht benötigt werden.

Das WordPress-Plugin Contact Form 7 ist im Handumdrehen installiert und sofort startklar. Nach kurzer Konfiguration kann das gewünschte Formular bequem auf der Unterseite seiner Wahl eingebunden werden. Oft findet sich jenes Formular auf einer eigenst eingerichteten Kontakt-Seite. Logisch, schließlich gehört diese heutzutage zum Standard und wird von vielen Besuchern erwartet.

Das Problem findet sich dann jedoch in der Funktionsweise des Plugins selbst. Um das benötigte Kontaktformular darzustellen, werden weitere Dateien benötigt, die das Plugin in den Header des Website einfügt. So werden sowohl Style- als auch eine Javascript-Datei bei jedem Aufruf der Website geladen wie es auch verschiedene Tools beweisen. Obwohl sich das Kontaktformular beispielsweise lediglich nur auf einer Unterseite des eigenen Internetauftritts befindet, muss der Besucher die Dateien also auch beim Aufruf der Startseite und sämtlichen anderen Unterseiten laden.

Code-Schnipsel schafft Abhilfe

Die geladenen Dateien sind zwar nicht groß, dennoch ist es unnütz, diese Dateien wirklich jedem Besucher auszuliefern. Gerade Ladezeit-Fanatiker, die wirklich jedes Potential aus der eigenen Website auszuschöpfen möchten, dürften sie ein Dorn im Auge sein.

Glücklicherweise lässt sich hier mit einem einfachen Code-Schnipsel tricksen, der diesen unschönen Umstand entfernt. Dieser sollte einfach wie gewohnt in die functions.php des WordPress-Themes (am besten in einem Child Theme) eingefügt werden und schon werden jene unerwünschten Dateien nur noch auf der ausgewählten Unterseite geladen. Jene Seite muss nur in Form ihrer Page-ID in den Code-Schnipsel eingefügt werden – wie du diese finden kannst, wird zum Beispiel hier beschrieben.

function contactform7_only_specific_page(){
   //  Page-ID der Kontakt-Seite hier statt 555
   if(! is_page(555) )    
   {		
      wp_dequeue_script('contact-form-7'); // JS entfernen.
      wp_dequeue_style('contact-form-7');  // CSS entfernen. 
   }
}

add_action( 'wp_enqueue_scripts', 'contactform7_only_specific_page' );