Contact Form 7
Chcete-li vytvořit formulář pro odesílání zpráv z webu, existují na to různé pluginy. Občás též používám Contact Form 7. Je to šikovný, bezplatný a oblíbený plugin pro vytváření kontaktních formulářů.
Ať už použijete jakýkoli plugin, dříve nebo později začne chodit SPAM z takového formuláře. Contact Form 7 má antispamovou ochranu použitím Google reCaptcha. Díky ní je eliminován téměř veškerý SPAM z kontaktních formulářů.
reCaptcha a problém s rychlosti a výkonem webu
Ale tato výhoda v používaní Google reCaptcha má svou nevýhodu, které čelíme, když optimalizujeme a zrychlujeme web. Samotný plugin se svými styly a skriptem nemá téměř žádný vliv na výkon webu, ale s reCaptcha je vše komplikovanější.
Služba Google reCaptcha je hostována na vzdálených serverech a tím prodlužuje se doba provádění kódu, kód třetí strany blokuje hlavní vlákno. S reCaptcha se připojí k webu, při jeho načítáni, 6 dalších souborů, mezi nimi jsou i zcela zbytečné, například fonty, na které sám Google potom nadává a doporučuje je optimalizovat nebo odstranit, stejně tak JavaScript kód.
Stručně řečeno, v testu Google Pagespeed Insight zhoršuje reCaptcha výkon webu v následujících bodech:
- Odstraňte nepoužívaný kód JavaScript
- Odstraňte nepoužívaný kód CSS
- Zajistěte, aby text při načítání webfontů zůstal viditelný
- Snižte vliv kódu třetích stran
- Minimalizujte práci v hlavním podprocesu
- Zkraťte dobu provádění JavaScriptu
- Nezřetězuje kritické požadavky
- V hlavním podprocesu nepoužívejte dlouhé úlohy
Jak víte, Google Pagespeed Insight neměří rychlost načítání stránky. Kontroluje shodu zdroje s určitou sadou kritérií a čím více shod v nich máte, tím vyšší je výsledné skóre, které web obdrží při testování. V souvislosti s tím zde vidíme 8 bodů, podle kterých bude stránka webu s reCaptcha hodnocena níž, než by měla.
Ale tady je hlavní problém – i když je váš kontaktní formulář umístěn pouze na jedné stránce (například pouze na stránce „Kontakt“), reCaptcha a její změť souborů načte se napříč webem, na každé stránce, i tam, kde nejsou žádné kontaktní formuláře. Instalace reCaptcha tedy, i když vás ušetří od moře spamu, technicky zhoršuje možnosti webu, načte se prostě všude. Při řešení jednoho problému vytvoříme nevědomky další.
Řešeni
Existuje způsob, jak se s tímto problémem vyrovnat – omezit reCaptchu, použivat ji a její související soubory pouze na stránce s formulářem, kde je to skutečně potřeba. Zároveň tam pošleme skripty a styly samotného Contact Form 7.
Pokud používáte standardně dostupné šablony nebo vlastní šablony, je váš kontaktní formulář umístěn buď na domovskou stránku, nebo na stránku Kontakty (nebo obojí). Oba jsou vytvořené pomocí šablon stránek (page_template). Zakážeme použiti skriptů a stylu kontaktních formulářů (stejně jako reCaptcha) na celém webu a poté je připojíme pouze k určitým šablonám stránek.
Přidejte následující kód do souboru functions.php šablony (nejlépe však pomocí pluginu Code Snippets:
/* nacitame styly a scripty a reCaptchu pouze na strance s formularem */
funkce contactform_dequeue_scripts () {
$ load_scripts = false;
if (is_page_template ('contact-page.php')) {
$ load_scripts = true;
}
if (! $ load_scripts) {
wp_dequeue_script ('contact-form-7');
wp_dequeue_style ('contact-form-7');
wp_dequeue_script ('google-recaptcha');
wp_dequeue_script ('wpcf7-recaptcha');
wp_dequeue_style ('wpcf7-recaptcha');
}
}
add_action ('wp_enqueue_scripts', 'contactform_dequeue_scripts', 99);
Klíčový řádek je tento
if (is_page_template ('contact-page.php')) {Zde zadáme název souboru, což je šablona pro stránku s formulářem, v tomto příkladu je to contact-page.php
Pokud je váš formulář zobrazen pouze na hlavní stránce, místo contact-page.php zadáme home.php nebo front-page.php nebo main-page.php – záleží na použité šabloně:
if (is_page_template ('home.php')) {
Pokud je váš formulář použit jak na hlavní stránce, tak na stránce kontakty, zadáme oba soubory oddělené čárkou:
if (is_page_template ('home.php', 'contact-page.php')) {
Výsledkem je, že se u jedné stránky s formulářem nic nezmění, ale zbytek webu se stane svižnějším, rychlejším, což se okamžitě projeví ve výsledcích testu v Google Pagespeed Insight.
Ve skutečnosti můžete stránky kontrolovat nejen podle názvu souboru, ale také podle ID. Navrhovaná možnost se mi líbí lépe, protože ID číslo sémanticky nic neznamená a z názvu souboru je okamžitě jasné, které stránky jsou do procesu zahrnuty.
Jak víte, zda řešení funguje? reCaptcha má ikonku (badge), který se zobrazuje v pravém dolním rohu na každé stránce webu. Všechno funguje tak, jak má, pokud po instalaci tohoto kódu uvidíte, že ikonka zmizela ze všech stránek, kromě stránky s formulářem. Můžete také otevřít zdrojový kód webu a vyhledat v něm adresu:
https://www.google.com/recaptcha/api.js
Pokud vše funguje správně, bude tato adresa nalezena pouze na stránce s formulářem. Pokud něco nefungovalo nebo pokud máte další dotazy, napište mi do komentářů.