Ottimizzazione del modulo di contatto 7 per prestazioni migliori

Contact Form 7 è uno dei plug-in gratuiti per i moduli di contatto. Al momento di questo articolo, ha più di 16 milioni di download. Penso che sia giusto considerarlo il plugin del modulo di contatto più usato.

Con questo grande pubblico, l'ottimizzazione dell'uso di Contact Form 7 sembra l'ottimizzazione di un numero significativo di utenti di WordPress. Se non lo conosci già, Contact Form 7 include i suoi file CSS e JavaScripts su ogni pagina del tuo sito.  

Questa inclusione ridondante e dispendiosa dovrebbe essere affrontata. 

Perché stiamo facendo questo?

Un file CSS e / o JavaScript aggiuntivo su ogni pagina sarà come un bagaglio extra che non vuoi raccogliere quando cammini a piedi. Due in più HTTP le richieste possono influire negativamente sul tempo di caricamento del tuo sito. 

Se hai letto la mia Guida per principianti a WordPress SEO di Yoast, sei a conoscenza del fatto che Google ama classificare i siti che hanno un tempo di caricamento delle pagine inferiore a 1 s. I primi 14 KB sono quelli critici.

È possibile caricare questi file CSS e JavaScript solo sulle pagine in cui si utilizza il plug-in Contact Form 7 per creare un modulo. Salverà il tuo sito dal caricare file aggiuntivi su ogni pagina invece questi file verranno caricati solo sulle pagine con i moduli di contatto.

Secondo l'autore del plugin, Takayuki Miyoshi:

Capisco la sensazione, ma c'è una difficoltà tecnica per un plugin nel sapere se la pagina contenga o meno moduli di contatto all'inizio del caricamento. 

Ottimizzazione del modulo di contatto 7

Passaggio 1: Cancellazione dei file CSS CF7

Prima di tutto, dobbiamo controllare quali pagine hanno i moduli di contatto. Quindi dobbiamo annullare la registrazione del file CSS generato dal plugin CF7 per tutte le altre pagine. 

Trova lo slug URL della pagina 

Scopriamo la lumaca della tua pagina con il modulo di contatto. Vai a pagine. Clic Modifica rapida e copia lo slug.

Facciamo un esempio esplicito: immagina di avere una pagina intitolata "Contattaci" che ha uno slug URL ContattaciAggiungi il seguente codice nel tuo tema functions.php file alla fine.

// Deregister Contact Form 7 styles add_action ('wp_print_styles', 'aa_deregister_styles', 100); function aa_deregister_styles () if (! is_page ('contact-us')) wp_deregister_style ('contact-form-7');  

Questo codice aggiunge una funzione aa_deregister_styles () che controlla se la pagina non lo è Contattaci quindi de-registri lo stile CSS da CF7 per le altre pagine.

Passaggio 2: annullamento della registrazione dei file JavaScript CF7

Allo stesso modo con le fonti JavaScript, lo annulleremo per tutte le pagine tranne quelle con i moduli di contatto. 

Aggiungi il seguente codice nel tuo tema functions.php file alla fine:

// Deregister Contact Form 7 File JavaScript su tutte le pagine senza un modulo add_action ('wp_print_scripts', 'aa_deregister_javascript', 100); function aa_deregister_javascript () if (! is_page ('contact-us')) wp_deregister_script ('contact-form-7'); 

Questo codice aggiunge una funzione aa_deregister_javascript () che controlla se la pagina non lo è Contattaci quindi registri il file JavaScript da CF7 per tutte le altre pagine.

Questo è tutto. Hai ottimizzato con successo il tuo plug-in CF7.

Cosa succede se ho più moduli su più pagine?

La risposta a questa domanda è semplice: sto usando is_page ()  funzione che ha un enorme riferimento alla funzione in WordPress Codex: is_page (). Puoi aggiungere una serie di pagine. Può ottenere il valore del parametro come ID pagina, Titolo pagina o Pagina Slug.

/ ** * is_page (array (ID, 'slug', 'Title')); * Restituisce true quando le pagine visualizzate sono post ID 42, o post_name "about-me", o post_title * / is_page (array (42, 'about-me', 'Contact'));

risorse 

  • Codice WordPress: is_page ()
  • Modulo di contatto 7