Optimera kontaktformulär 7 för bättre prestanda

Kontaktformulär 7 är en av de mest använda fria kontaktformulären. Vid tidpunkten för denna artikel har den mer än 16 miljoner nedladdningar. Jag tycker att det bara är rätt att betrakta det mest använda kontaktformuläret.

Med den här stora publiken verkar optimering av användningen av Kontaktformulär 7 som att optimera ett betydande antal WordPress-användare. Om du inte redan vet det, innehåller kontaktformulär 7 dess CSS & JavaScripts-filer på varje sida på din webbplats.  

Denna överflödiga och slöseri med införandet bör behandlas. 

Varför gör vi det här?

En extra CSS och / eller JavaScript-fil på varje sida kommer att vara som extra bagage som du inte vill hämta när du går till fots. Två extra HTTP Förfrågningar kan påverka din belastningstid på din webbplats negativt. 

Om du har läst min nybörjare guide till WordPress SEO by Yoast, är du medveten om att Google älskar att rangordna de webbplatser som har sidladdningstid under 1s. Första 14 KB är de kritiska.

Du kanske vill ladda dessa CSS & JavaScript-filer bara på de sidor där du använder plugin Kontaktformulär 7 för att skapa en blankett. Det sparar din webbplats från att ladda extra filer på varje sida istället kommer dessa filer bara att laddas på sidorna med kontaktformulär.

Enligt pluginens författare, Takayuki Miyoshi:

Jag förstår känslan, men det finns en teknisk svårighet för ett plugin i att veta om sidan innehåller kontaktformulär eller inte i början av laddningen. 

Optimera kontaktformulär 7

Steg 1: Avregistrera CF7 CSS-filer

Först och främst måste vi kolla vilka sidor som har kontaktformulär. Då måste vi avregistrera CSS-filen genererad av CF7-plugin för alla andra sidor. 

Hitta Sida URL Slug 

Låt oss hitta slugen på din sida med kontaktformulär. Gå till sidor. Klick Snabbredigering och kopiera sluggen.

Låt oss ta ett tydligt exempel: Föreställ dig att du har en sida med titeln "Kontakta oss" som har en URL-slug kontakta ossLägg till följande kod i ditt tema functions.php fil i slutet.

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

Denna kod lägger till en funktion aa_deregister_styles () som kontrollerar om sidan inte är kontakta oss avregistrerar sedan stilen CSS av CF7 för andra sidor.

Steg 2: Avregistrera CF7 JavaScript-filer

På samma sätt med JavaScript-källorna kommer vi att avregistrera det för alla sidor utom de med kontaktformulär. 

Lägg till följande kod i ditt tema functions.php fil i slutet:

// Deregister Kontaktformulär 7 JavaScript-filer på alla sidor utan formulär add_action ('wp_print_scripts', 'aa_deregister_javascript', 100); funktion aa_deregister_javascript () if (! is_page ('contact-us')) wp_deregister_script ('contact-form-7'); 

Denna kod lägger till en funktion aa_deregister_javascript () som kontrollerar om sidan inte är kontakta oss sedan avregistrerar JavaScript-filen av CF7 för alla andra sidor.

Det är allt. Du har framgångsrikt optimerat ditt CF7-plugin.

Vad händer om jag har flera formulär på flera sidor?

Svaret på denna fråga är enkelt: Jag använder is_page ()  funktion som har massiv funktion referens på WordPress Codex: is_page (). Du kan lägga till en rad sidor. Det kan få parametervärde som Sid ID, Sidtitel eller Sidgalleri.

/ ** * is_page (array (ID, 'slug', 'Title')); * Returnerar sant när sidorna som visas är antingen posta ID 42 eller postnamn "om-mig" eller post_title * / is_page (array (42, "om-mig", "Kontakt"));

Medel 

  • WordPress Codex: is_page ()
  • Kontaktformulär 7