Tempo dieser Seite TTFB … LCP …
Uncategorized

Contact Form 7 beschleunigen

Selim Koç 4 Min. Lesezeit

Open Source · Rufo

Contact Form 7.
Nur dort, wo es hingehört.

Rufo entfernt die ungenutzten CSS- und JavaScript-Dateien von Contact Form 7 automatisch von jeder Seite ohne Formular. Kostenlos auf WordPress.org.

Das Problem

5 Millionen Websites.
Jede Seite ausgebremst.

Wussten Sie, dass das Plugin Contact Form 7 von Takayuki Miyoshi auf über 5 Millionen WordPress-Websites im Einsatz ist? Seit Jahren ist es die erste Wahl für Kontaktformulare unter WordPress, funktionsreich und denkbar einfach zu bedienen. Beim Thema Geschwindigkeit gibt es allerdings ein großes Problem: Contact Form 7 bindet seine CSS- und JavaScript-Dateien auf jeder einzelnen Seite Ihrer Website ein, auch dort, wo gar kein Kontaktformular ist. Die Dateien sind zwar nicht riesig, bremsen Ihre Website aber trotzdem aus. Und das wiegt schwer, gerade jetzt, wo alle ihre Websites schneller machen wollen.

Was Rufo macht

Dateien nur dort, wo Formulare sind.

/contactEnthält ein Contact Form 7-Formular
CF7-Dateien geladen
/blog, /about, /shop …Kein Formular auf der Seite
Entfernt

Automatisch. Keine Konfiguration nötig.

Installation

In einer Minute einsatzbereit.

  1. Melden Sie sich im WordPress-Dashboard an.
  2. Öffnen Sie im linken Menü Plugins.
  3. Klicken Sie auf Neues Plugin hinzufügen.
  4. Suchen Sie nach „Rufo“.
  5. Installieren und aktivieren. Fertig.

Zum Deinstallieren deaktivieren und löschen Sie es einfach. Rufo nutzt keine Datenbank und keine sonstigen Ressourcen Ihrer Website.

Die Anleitung

Lieber Code? So funktioniert es.

Zwei Wege, um zu verhindern, dass Contact Form 7 seine Dateien auf Seiten ohne Formular lädt.

Das Problem ist erkannt. Kommen wir zu den Lösungen. Hier sind zwei Möglichkeiten, die Dateien von Seiten ohne Kontaktformular zu entfernen:

Option 1: Eigener PHP-Code

Sie können eigenen PHP-Code schreiben und ihn in die Datei functions.php Ihres Themes einfügen. Dieser Code weist WordPress an, die Dateien von Contact Form 7 auf Seiten ohne Kontaktformular nicht zu laden.

Aber Vorsicht: Wenn Sie Änderungen an einem Theme vornehmen, das später aktualisiert werden könnte, verwenden Sie besser ein Child-Theme. So gehen Ihre Änderungen bei einem Update des Haupt-Themes nicht verloren.

Dafür gibt es zwei Wege:

Option 1, A. Konkrete Seitenangaben verwenden

Wenn Sie die ID der Seite mit dem Kontaktformular kennen, können Sie diesen Code verwenden. Er weist WordPress an, die Dateien von Contact Form 7 auf der Seite mit der angegebenen ID nicht zu laden.

if ( !is_singular() && get_the_ID() != 65 ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

Falls Sie Kontaktformulare auf mehreren Seiten haben, etwa mit den IDs 65 und 99:

if ( !is_singular() && !in_array(get_the_ID(), [65,99]) ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

Falls Sie statt der ID den Slug der Seite verwenden möchten:

if ( !is_singular() ) { 

    $page_slug = get_post_field( 'post_name', get_queried_object_id() );
    $excluded_slugs = ['example-page-slug-1', 'example-page-slug-2']; 
    
    // Add your excluded slugs here 
    if ( !in_array($page_slug, $excluded_slugs) ) { 
          add_filter( 'wpcf7_load_js', '__return_false' ); 
          add_filter( 'wpcf7_load_css', '__return_false' ); 
    } 
}

Option 1, B. Seiteninhalt nach dem Shortcode des Kontaktformulars durchsuchen:

Dieser Code prüft, ob der Inhalt einer Seite den Shortcode von Contact Form 7 enthält. Findet er keinen, werden die CSS- und JavaScript-Dateien auf dieser Seite nicht geladen.

function globaliser_page_has_contact_form() 
     {

        global $post;

        if ( is_singular() ) 
        {
           $content = $post->post_content;   
           if ( has_shortcode( $content, 'contact-form-7' ) ) 
           {
             return true;
           }
        }
        return false;
     }


     if ( !globaliser_page_has_contact_form() ) 
     {
         add_filter( 'wpcf7_load_js', '__return_false' ); 
         add_filter( 'wpcf7_load_css', '__return_false' );
     }

Option 2: Rufo WordPress-Plugin

Sie möchten nicht im Code herumbasteln? Kein Problem! Alternativ können Sie das WordPress-Plugin Rufo verwenden. Es erkennt Seiten ohne Kontaktformular automatisch und entfernt die überflüssigen CSS- und JavaScript-Dateien. Eine einfachere und benutzerfreundlichere Lösung, als eigenen Code zu schreiben.

Es macht dasselbe wie die zweite Methode oben: Es entfernt CSS- und JavaScript-Dateien automatisch von Seiten ohne Kontaktformular.

Warum ein Plugin statt einfach Code? Manche raten dazu, das Plugin Contact Form 7 direkt zu bearbeiten, in der WordPress-Welt ist das aber keine gute Idee.

Außerdem haben wir recherchiert und festgestellt, dass auch andere Lösungen auf zusätzlichen Code setzen. Deshalb haben wir dieses Plugin entwickelt, um es allen leichter zu machen, vor allem denen, die nicht so technikaffin sind.

Übrigens: Wenn Sie eigene WordPress-Plugins mit einer eleganten Architektur namens MVC entwickeln möchten, haben wir mit ATA ein weiteres Plugin, das Ihnen dabei hilft. Aber das ist eine andere Geschichte.

Ihre Erfolgsgeschichte könnte die nächste sein.

Noch Fragen? Wir helfen Ihnen, die richtige Entscheidung zu treffen.

Ihre Erfolgsgeschichte könnte die nächste sein.

Fragen? Wir helfen Ihnen, die richtige Entscheidung zu treffen.