ИТ Блог. Разработка сайтов на CMS Wordpress
Недавно один из наших читателей задал нам, как они могут перемещать скрипты в низ чтобы увеличить скорость загрузки страницы. Мы рады, что спросили, потому что мы честно хотели написать об этом. Ранее мы говорили о том, как правильно добавлять JavaScript и стили CSS в WordPress. В этой статье мы покажем вам, как перенести скрипты в вниз в WordPress, так что вы можете улучшить время загрузки вашего сайта, и ваша страница в Google набрать скорость.
JavaScript – это клиентский язык программирования. Она выполняется и управляется в веб-браузере пользователя, а не на веб-сервере. Когда вы поместите код JavaScript в верху, браузеры могут исполнять процесс или JavaScript – код перед загрузкой остальной части вашей страницы. Когда скрипты помещаются вниз, ваш веб-сервер будет быстро рендерить страницы, а затем браузер пользователя будет выполнять сценарии JavaScript. Поскольку все серверные рендеринги уже сделано, код JavaScript будет загружаться в фоновом режиме, что делает общую нагрузку быстрее.
Это улучшит вашу скорость при тестировании с Google страницы. Google и другие поисковые системы в настоящее время рассматривают скорость страницы, как одну из матриц при отображении результатов поиска. Это означает, что сайты, которые загружаются быстрее появится более заметными в результатах поиска.
WordPress имеет мощную систему, которая позволяет тема и плагин разработчикам добавлять свои скрипты в очередь и загружать их по мере необходимости. Отправляя скрипты и стили правильно можно существенно улучшить Скорость загрузки веб страниц.
Чтобы показать тебе простой пример, мы добавим немного JavaScript в тему WordPress. Сохранить свой JavaScript в файле .JS и помести его в вашу тему в каталог JS. Если ваша тема не имеет каталога для Java-скриптов, то создайте его. После размещения файла скрипта, отредактируйте файл вашей темы functions.php и добавьте этот код:
function wpb_add_scripts() {
wp_register_script('my-script', get_template_directory_uri() . '/js/my-script.js','','1.2', true);
wp_enqueue_script('my-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_add_scripts' );
В этом коде мы использовали функцию wp_register_script(). Эта функция имеет следующие параметры:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Чтобы добавить скрипт в футере (или внизу) страницы WordPress, все, что вам нужно сделать, это установить $in_footer параметра значение в True.
Мы также использовали другую функцию get_template_directory_uri() , которая возвращает URL-адрес каталога шаблонов. Эта функция должна использоваться для регистрации скриптов и стилей в теме WordPress. Для плагинов мы будем использовать функцию plugins_url().
Проблема:
Проблема заключается в том, что несколько раз плагины WordPress добавляют собственный JavaScript для страницы внутри <Head> или внутри тела страницы. Для того чтобы переместить эти скрипты на футер, необходимо редактировать файлы плагинов и правильно переместить скрипты в низ.
Откройте ваш сайт в браузере и посмотрите на исходный код страницы. Вы увидите ссылку на файл JavaScript с указанием местоположения и источник файла. Например, на скриншоте ниже говорит нам, что наш сценарий принадлежит плагин под названием ‘тест-plugin101’. Файл скрипта находится в папке JS.
Иногда вы увидите, JavaScript, добавленный непосредственно на страницу и не связан через отдельный файл .JS. В таком случае, вам нужно будет деактивировать все плагины по-одному. Обновите страницу после каждой деактивации плагина, пока не найдете то добавление скрипта к Web-страницам. Если JavaScript не исчезает даже после отключения всех плагинов, то попробуйте переключиться на другую тему, чтобы увидеть, может JavaScript добавляется через Вашу тему.
После того как вы нашли плагин, или тему, которая является добавление JavaScript в заголовок раздела, следующий шаг – узнать, где плагин имеет запрашивают файл. В одной вашей темы или плагина файлов PHP вы увидите призыв к конкретному файлу .JS.
Если плагин или тема уже отправляют через добавить файл JavaScript, то все, что вам нужно сделать, это изменить wp_register_script функцию в своем плагине или темы и добавить True для параметра $in_footer. Такой:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Давайте предположим, что ваш плагин или тема добавляет JavaScript в заголовке или между содержанием. Найти необработанный код JavaScript в плагине или файлов темы, скопируйте JavaScript и сохранить его в файле .JS. Затем используйте функцию wp_register_script(), как показано выше, чтобы переместить JavaScript в нижнюю часть.
Примечание редактора: важно понимать, что когда вы вносите изменения в ядро при обновлении плагина ваши изменения будут удалены. Лучший способ сделать это, было бы вычеркнуть из списка сценарий и перерегистрировать его из вашей темы в файл functions.php. Как это сделать, посмотрите этот учебник.
Помимо перемещения скриптов в футер, вы должны также рассмотреть возможность использования более быстрых плагин социальных медиа и загрузки изображений. Вместе с тем вы должны также использовать плагин кэш-памяти, чтобы улучшить скорость вашего сайта.
Мы надеемся, что эта статья помогла вам понят как переместить скрипты в футер в WordPress и повысить скорость загрузки. Для вопросов и обратной связи, пожалуйста, оставьте комментарий ниже.
(1 оценок, среднее: 5,00 из 5)
Загрузка...
