wordpress плагин загрузки скриптов
WordPress.org
Русский
Менеджер скриптов и стилей для WordPress
Описание
Важно понимать, что многие разработчики WordPress плагинов забывают о производительности при создании своих плагинов. Это означает, что многие плагины загружают собственные скрипты и стили в каждой записи и на странице вашего сайта. Это плохо, потому что это замедляет ваш сайт.
Вот почему мы создали Менеджер скриптов и стилей, с ним вы можете выбрать, какие сценарии и стили должны быть загружены на страницу, а какие — нет. Одним из примеров может быть плагин Contact Form 7. С помощью двух кликов вы можете отключить его везде, кроме как на странице где он используется.
Уменьшает количество загруженных HTTP-запросов (важно для более быстрой загрузки)
Уменьшает HTML-код фактической страницы (это даже лучше, если включено сжатие GZIP)
Удалите возможные конфликты между плагинами/темами (например, 2 файла JavaScript, которые загружаются из разных плагинов, и они мешают друг другу)
Лучшая оценка производительности, если вы проверяете свой URL-адрес на таких сайтах, как GTmetrix, PageSpeed Insights, Pingdom Website Speed Test
Google даст хорошую оценку вашему сайта, так как он будет быстрее, а быстрая загрузка страницы в настоящее время является фактором в ранжировании поиска
Мы использовали некоторые полезные функции из плагинов Asset Queue Manager, WP Asset CleanUp (Page Speed Optimizer), Clearfy – disable unused features, wp disable, Disabler, Admin Tweaks
Переводы
We are very need for your help with translating the
WordPress Assets manager plugin into your native language. We want to make it international and understandable for everyone. Please contact us via email inside the plugin, or create a topic on our support forum if you can help with the translations. In exchange for your help, we will give you better support and our premium plugins absolutely free!
РЕКОМЕНДУЕМ ПЛАГИНЫ
Мы приглашаем вас ознакомиться с несколькими другими бесплатными плагинами, которые наша команда также разработала:
Как добавить пользовательский JavaScript на WordPress-сайт
Существует несколько способов добавления пользовательского JavaScript в WordPress. В этом руководстве мы рассмотрим каждый из них.
Добавление пользовательского JavaScript на WordPress
Чтобы добавить собственный JavaScript-код на WordPress- сайт, нужно использовать:
Чего не нужно делать
Самый простой способ добавить пользовательский скрипт в WordPress – это использовать тег
1. Использование плагина для добавления пользовательского JavaScript-кода
Использование плагина рекомендуется, если:
1.1. Плагины для редактирования header.php и footer.php
Первый вариант – использование плагина для редактирования шаблонов header.php и footer.php темы оформления WordPress. Если нужно добавить скрипты, которые загружаются до содержимого страницы, необходимо отредактировать шаблон шапки. Скрипты, которые загружаются после содержимого веб-страницы, добавляются в шаблон футера.
Плагин Insert Headers and Footers позволяет редактировать шаблоны хедера и футера. Он добавляет скрипты к хукам действий wp_head или wp_footer соответственно.
1.2. Плагины для добавления пользовательского JavaScript
1.3. Скрипты, специфичные для плагинов
Создатели популярных JavaScript-библиотек часто публикуют бесплатные плагины в репозитории WordPress.org для добавления своих скриптов. Подобные плагины поставляется со встроенными параметрами конфигурации для конкретной JavaScript-библиотеки.
Например, плагин GA Google Analytics позволяет интегрировать Google Analytics на сайт прямо из панели администрирования WordPress. Он поставляется со встроенными функциями, специфичными для скрипта Google Analytics.
2. Редактирование файла functions.php дочерней темы оформления
Также можно использовать встроенные в WordPress функции и хуки действий. В этом случае необходимо отредактировать файл functions.php и вручную загрузить скрипт на используемый сервер. Также желательно создать дочернюю тему оформления для сохранения ваших настроек.
Затем добавьте PHP-код, который ставит в очередь или выводит пользовательский JavaScript-код, в functions.php дочерней темы оформления. Это можно сделать через меню Внешний вид> Редактор тем в панели администрирования WordPress.
2.1. Добавление собственных скриптов в очередь с помощью функции wp_enqueue_script()
С помощью wp_enqueue_script() можно добавить собственный JavaScript в шаблоны хедера и футера. По умолчанию функция размещает скрипты в раздел страницы.
Чтобы добавить скрипт в хедер, нужно определить собственный дескриптор (‘custom’ в примере, приведенном ниже) и путь к скрипту. А также использовать функцию get_stylesheet_directory_uri() для получения URI каталога дочерней темы оформления.
Функция WordPress wp_enqueue_script() и хук действия wp_enqueue_scripts имеют почти одинаковые имена. Но это разные методы.
Функцию wp_enqueue_script() можно использовать для добавления пользовательского JavaScript-кода в шаблон футера. Для этого потребуется определить дополнительные параметры:
Для добавления зависимости, которая не зарегистрирована в WordPress, нужно использовать собственный дескриптор. Но перед этим необходимо зарегистрировать его и поставить зависимость в очередь с помощью функции wp_enqueue_script().
2.2. Вывод встроенного скрипта с помощью хуков действий wp_head и wp_footer
Пример использования хука wp_head для вывода скрипта в шаблоне хедера:
Пример использования wp_footer для вывода скрипт в шаблоне футера:
Скрипты, добавленные с помощью этих хуков, не будут загружаться в панели администрирования и на странице входа. Чтобы запускать пользовательские скрипты в панели администрирования WordPress, необходимо использовать хуки действия admin_head и admin_footer в функции add_action().
Заключение
Использование плагина для добавления пользовательского JavaScript является рекомендуемым методом. Эти плагины гарантируют, что скрипты будут загружаться в правильном порядке.
Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, подписки, лайки!
Как ускорить загрузку JS скриптов, CSS и HTML сайта WordPress: плагин Autoptimize
Вступление
Плагины WordPress, отличные инструменты улучшить функционал сайта, имеющие один существенный недостаток. Плагины увеличивают, а в некоторых случаях, значительно увеличивают, скорость загрузки страниц сайта.
Почему плагины увеличивают скорость загрузки
Почти каждый плагин WordPress при установке подключает свои стили и скрипты JS. Традиционно JS подключаются в header сайта, что увеличивает количество запросов на сервер еще до загрузки основной страницы.
Особенно «ругается» на это поисковик Google. На сервисе проверок скорости загрузки сайта ( https://developers.google.com/speed/pagespeed/insights/ ), не оптимизированные скрипты и стили относит к серьезным ошибкам, требующим немедленного устранения.
Как решается проблема стилей и JS на WordPress
Теоретически, проблему нескольких JS скриптов и нескольких стилей CSS можно решить их объединением. На практике, можно использовать популярный и работающий плагин Autoptimize.
Плагин Autoptimize «обучен» сжимать JS скрипты стили объединив их в один файл.
Принцип работы плагина Autoptimize (оптимизировать JS и CSS WordPress)
Плагин Autoptimize помогает оптимизировать JS и CSS WordPress следующим образом. Перед выводом страницы, плагин обходит HTML код страницы и находит все js файлы. Найдя их, он их вырезает и пишет их в общий файл. Ссылку на этот файл плагин размещает в конце страницы. То же действо плагин проводит с фалами стилей css, но ссылки на них плагин ставит в начале страницы.
Недостатки плагина Autoptimize
Более того, по умолчанию размер кеш-памяти плагина ограничена и приходится её часто чистить. На особо посещаемых сайтах я увеличил эту папку до 10Гб (об этом чуть ниже), увеличение скорости загрузки не вижу.
Кроме этого, автор плагина рекомендует его использование и отсутствие конфликтов с плагинами: WP Super Cache, HyperCache, Comet Cache, KeyCDN’s Cache Enabler, WP Fastest Cashe и WP Speed of Light.
Настройка плагина Autoptimize
Я уверен, вы знаете, как установить плагин. Страница плагина: https://ru.wordpress.org/plugins/autoptimize. Настройки плагина элементарные, но всё-таки пройдемся по ним.
Вся настройка заключается в выделении чек боксов. В принципе, все дополнительные настройки плагина, выставлены в максимально приемлемом режиме. Поэтому они и скрыты. Я выделяю три основных чекбокса JS, HTML, CSS и сохраняюсь. В манипуляциях с дополнительными настройками эффекта в ускорении не заметил.
Важно понимать! Дополнительные настройки помогут вам, если вырезка JS из header приводит к неправильной загрузки шаблона и после установки плагина ваш сайт отражается некорректно.
Это может быть важно! Я не привожу советов по тонким настройкам плагина, потому что, на каждом шаблоне, сервере плагин может вести себя по-разному. Экспериментировать с настройками придется самостоятельно. В экспериментах, не забывайте чистить кеш плагина и учитывать, что ускорение не моментальное, кеш должен накопиться.
оптимизировать JS и CSS WordPress: Настройки плагина Autoptimize
Как увеличить размер cash хранилища Autoptimize
Недавно обнаружил, что размер cash хранилища Autoptimize, мягко сказать, небольшое. На 500 Mb, значок плагина в toolbar начинает желтеть, а к 750 Mb, начинает мигать красным. Для большой посещаемости сайта, хранилища хватает на 2-3 дня. Это значит, что вся работа плагина сводится к нулю.
Решение проблемы вы можете найти на сайте автора. Я его озвучу и подтвержу из практики.
Чтобы увеличить, размер cash хранилища плагина Autoptimize, я делаю следующее:
С помощью плагина вставляю один из следующих Snippet (на выбор):
Размер кеша 1Гб
Размер кеша 10Гб
Этим я увеличиваю размер cash хранилища Autoptimize до 1 Gb или до 10 Gb.
Проблема чистки кэш плагина Autoptimize
08-04-2020. Со времени написания статьи плагин значительно изменился. Добавлена функция ленивой загрузки изображений и работа по оптимизации изображения не стороннем сервере. Плагин стал вновь радовать работой, но осталась проблема автоматической читки кеша.
Решить её можно так. Рекомендую, пока работает, использовать плагин «Autoclear Autoptimize Cache». Он чистит именно кеш этого плагина по настройкам объёма. Работает гарантированно.
Второй вариант можно попробовать через код. Опять используем описанный выше плагин Code Snippet и делаем с его помощью такой сниппет:
Альтернативные плагины оптимизировать JS и CSS WordPress (плохо обновляются)
Оба плагина: This plugin hasn’t been tested with the latest 3 major releases of WordPress.
На этом всё! Я надеюсь вам удалось оптимизировать JS и CSS WordPress и ускорить его загрузку.
Лучшие способы для загрузки скриптов в WordPress
Существует несколько способов загрузить скрипты для WordPress. Выбор в пользу одного из них надо делать, ориентируясь на свои задачи: нужно ли вам, чтобы скрипт выполнялся для всей темы, только для отдельных постов или только для конкретных страниц. В этой статье речь пойдет о том, как использовать и загружать скрипты JavaScript либо jQuery в темах WordPress путем простой вставки в настраиваемые мета-боксы.
В целом, можно использовать 2 сценария загрузки скриптов:
Загрузка скриптов для использования на всём сайте
Есть по меньшей мере 2 способа для добавления файлов JavaScript или других скриптов, чтобы в последствии использовать их на сайте. Вот как добавляются скрипты для «шапки» или «подвала» сайта в панели администратора практически в любой современной теме:
Примечание: После однократной регистрации скрипта нет необходимости регистрировать его повторно; его можно вызывать в зависимости от указанных условий в функции wp_register_script :
Загрузка скриптов только для определенных страниц или постов
Качественные платные фреймворки и темы наподобие Genesis облегчают задачу по настройке WordPress путем вызова необходимых скриптов для каждой отдельной страницы или определенного типа постов. Под каждой страницей или постом вы найдете отдельный бокс для добавления скриптов.
Если в вашей теме таких боксов нет, кликните по вкладке «Настройки экрана» справа вверху и активируйте отображение боксов для скриптов на экране в режиме редактирования:
Загрузка скриптов для дочерней темы
Единственная разница между загрузкой скриптов для родительской и дочерней темы заключается в следующем:
Приведенный ниже код следует применять для загрузки скриптов в зависимости от указанных условий в родительской теме:
Загрузка скриптов при помощи кода
Загрузка скриптов для настраиваемого фона
Загрузка скриптов для плагинов вручную
Большинство плагинов, включающих в себя скрипты, также содержат и код для загрузки скриптов, так что от вас никаких дополнительных действий не потребуется. Но если вам попался плагин, который содержит только сам код или только PHP-скрипт, то вам пригодится вот этот метод для загрузки jQuery-скриптов в плагинах:
Для загрузки скриптов применяется метод, аналогичный загрузке таблиц стилей CSS, включая функции wp_register и wp_enqueue для корректной обработки и взаимодействия с файлом style.css.
Плагин Simple Scripts
Если в вашей теме нет отдельных полей для добавления скриптов, можно просто установить вот этот плагин под названием Simple Scripts.
Как “Отложить” Загрузку JavaScript на Сайте WordPress
Введение
Есть несколько причин для того, чтобы “отложить” (парсинг) загрузку JavaScript на сайте WordPress. Самой важной, станет скорость и производительность сайта. В основном JavaScript находится между тегами и когда сайт открывается, он загружает весь код, начиная с самого верха и донизу. Это означает, что большое количество скриптов или длинных строк увеличит время загрузки сайта и появления его контента, так как сначала ему необходимо полностью загрузить все JavaScript. Откладывая парсинг JavaScript, сайт не будет ждать загрузки JS кода, что выльется в более быстрое время загрузки сайта. В этом руководстве мы рассмотрим два способа для “откладывания” загрузки JavaScript в WordPress.
Что вам понадобится
Перед тем, как вы начнете это руководство, вам понадобится следующее:
Шаг 1 — Анализ сайта
Чтобы выяснить, необходимо ли вам применить это руководство, вы можете проанализировать ваш WordPress используя инструмент GTMetrix.
Средняя рекомендованная оценка в GTMetrix должна быть не менее 71%. Вот результаты тестового сайта на WordPress:
Шаг 2 — «Откладывание» загрузки JavaScript на сайте WordPress
На выбор есть несколько способов, которые помогут вам «отложить» загрузку JS на вашем сайте WordPress.
ВАЖНО! Убедитесь, что перед началом сделали резервное копирование сайта.
Вариант 1 – «Откладывание» загрузки JavaScript через плагины WordPress
Использование WordPress плагинов, таких как WP Deferred JavaScript, является одним из самых легких и быстрых путей для «откладывания» загрузки JS на сайте WordPress.
Еще один плагин который поможет вам в этом деле, это Speed Booster Pack. Помимо основного своего предназначения, он также предлагает вам несколько дополнительных методов оптимизации вашего WordPress.
После установки Speed Booster Pack вам необходимо перейти в раздел Settings (Настройки) плагина.
Отметить флажком Defer parsing of javascript files и нажать Save Changes (Сохранить изменения).
В случае если вы не знаете, как устанавливать плагины WordPress, вы можете найти детальное руководство по этому вопросу здесь.
Вариант 2 – «Откладывание» загрузки JavaScript через functions.php
Для этого, вы должны скопировать данный код в нижнюю часть вашего файла wp-includes/functions.php:
Шаг 3 — Проверка изменений
Используйте тот же инструмент для проверки работы сайта WordPress снова. Здесь представлены результаты после проведенных манипуляций:
Поздравляем, следуя этим простым шагам, вы улучшили производительность вашего сайта для более приятных ощущений от его просмотра.
Заключение
В этом кратком руководстве вы узнали, как улучшить скорость и производительность вашего сайта на WordPress с помощью откладывания загрузки JavaScript. Запомните, чем быстрее и плавнее ваш сайт, тем больше трафика и счастливых посетителей у вас будет!
Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.