0
47
2018-12-13

Contact From 7 - отложенная загрузка скриптов и стилей для ускорения WordPress

Если Вы пользуетесь Contact Form 7 и хотите улучшить производительность Вашего сайта. Значит пришло время рассмотреть отложенную загрузку скриптов и стилей плагина.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Отложенная загрузка для файла /contact-form-7/includes/js/scripts.js через function.php

И так, если Вы такой же “помешанный” на скорости администратор WordPress как и я, значит Вам будет полезно знать что в наших силах осуществить подключение скрипта scripts.js плагина CF7 в defer режиме. Для этого добавьте код ниже в файл темы function.php.

Добавляем в function.php

if ( ! function_exists( 'add_defer_to_cf7' ) )
{
    function add_defer_to_cf7( $url )
    {
        if ( // comment the following line out add 'defer' to all scripts
        FALSE === strpos( $url, 'contact-form-7' ) or
        FALSE === strpos( $url, '.js' )
        )
        { // not our file
            return $url;
        }
        // Must be a ', not "!
        return "$url' defer='defer";
    }
    add_filter( 'clean_url', 'add_defer_to_cf7', 11, 1 );
}

Официальный вариант подключения стилей и скриптов

Самый что ненаесть официальный вариант отложенного подключения, написанный из слов разработчиков плагина Contact Form 7.

Как загрузить .js и .css файлы плагина только тогда, когда это необходимо

В своих настройках по умолчанию Contact Form 7 загружает свою таблицу стилей и JavaScript на каждую страницу. Вы можете подумать, что это будет излишним или расточительным, и если Вы хотите загружать их только на те страницы, которые содержат контактные формы. Я понимаю это чувство, но плагин испытывает техническую трудность, так как не знает, содержит ли страница контактные формы или нет (при загрузке страницы). Тем не менее, я могу показать вам способ обойти это.

Шаг 1: Прекратить загрузку таблицы стилей JavaScript и CSS на всех страницах

Когда значение WPCF7_LOAD_JS = false (по умолчанию: true ), плагин не загружает JavaScript. Вы можете установить значение этой константы в вашем wp-config.php следующим образом:

define('WPCF7_LOAD_JS', false);

Аналогично, вы можете контролировать загрузку таблицы стилей CSS с помощью WPCF7_LOAD_CSS. Контактная форма 7 не загружает таблицу стилей CSS, когда значение WPCF7_LOAD_CSS = false (по умолчанию: true ). Вы можете установить его в wp-config.php следующим образом:

define('WPCF7_LOAD_CSS', false);

Или вы также можете отключить загрузку JavaScript и CSS, добавив несколько строк кода в файл functions.php вашей темы, например так:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Теперь вам удалось остановить загрузку таблицы стилей JavaScript и CSS, но, к сожалению, вы также “убили” их на страницах, содержащих контактные формы, поэтому нам действительно нужно вернуть их на нужные страницы. Итак, следующий шаг - это то, что вам нужно сделать для загрузки файлов именно на те страницы, на которых они вам нужны.

Шаг 2: Загрузите файлы на страницах, которые содержат контактные формы

Например, предположим, у вас есть страница с именем «Контакты», и это единственная страница, которая содержит форму контакта. И предположим, что у вас есть файл шаблона для страницы «Контакты» с именем contact.php в папке вашей темы. Теперь вам нужно загрузить таблицу стилей JavaScript и CSS контактной формы 7 специально на странице «Контакты».

Для этого вы должны отредактировать файл шаблона contact.php и вставить в него следующие строки:

<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }

    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>

Обратите внимание, что wpcf7_enqueue_scripts() и wpcf7_enqueue_styles() должен быть вызван до вызова wp_head().

Источник: https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/

Lazy CF7 Assets - Дополнительный плагин для загрузки ресурсов Contact Form 7 только на страницах с формами

Повышает производительность за счет отложенной загрузки файлов JavaScript контактной формы 7 только в том случае, если на странице существует одна из ее форм. Используйте этот пакет на веб-сайте WordPress с активным плагином Contact Form 7 и отключенным вручную JavaScript. Примеры использования

В начале отключаем загрузку JS плагина например так:

// В файле functions.php вашей темы:
 add_filter ( ' wpcf7_load_js ' , ' __return_false ' );

// Также можно удалить CSS из очереди. 
// Показано здесь только для справки - 
// CSS не будет загружен лениво этим скриптом 
// add_filter ( ' wpcf7_load_css ' , ' __return_false ' );

После отмены автоматического включения JavaScript, вы можете теперь настроить подключение файлов JavaScript плагина для динамической загрузки, импортировав Lazy CF7 Assets и инициализировав его из пакета JavaScript вашего сайта, например:

import lazyform from 'lazy-cf7-assets';
// Initialise once the DOM is ready, ie. at the end of the `body` tag.
lazyform.init()

В качестве альтернативы, если ваши сценарии включены в head тег, а не в конец body тега, вы должны убедиться, что инициализация происходит после того, как все элементы страницы были отрисованы, таким образом:

import lazyform from 'lazy-cf7-assets';

lazyform.init({
  // Set an absolute path to the alternate loading gif
  gifPath: '/wp-content/themes/my-theme-name/images/ajax-loader.gif'
});

Ознакомиться с дополнением CF7 можно по данной ссылке: