Управление CSS/JS, которые загружают плагины WordPress

2020-10-20 0 ∞

На днях один вопрос, который мы получили, привел нас к ряду рассуждений на тему плагинов WordPress, ресурсов, которые они загружают, и того, как они должны выглядеть в идеальном мире. Я написал некоторые свои мысли по этому вопросу и получил на них обратную реакцию. Я думаю, мы пришли к некоторому удовлетворительному заключению, так что можно написать об этом.

Как некоторые плагины работают сегодня

Как некоторые плагины работают сегодня

Давайте возьмем реальный пример. Плагин WP-Polls. Я думаю, что это хороший плагин. Он отлично подходит для опросов. Именно его я использую.

Если Вы хотите разместить на своем сайте опросы, вам нужен будет какой-нибудь JavaScript для обработки функционала (т.е. возможности голосовать и видеть результаты голосования без необходимости обновлять страницу) и CSS для определения стилей виджета опросов (панели с результатами и много чего еще).

CSS добавляется с помощью включения таблицы стилей через обращение wp_head(), размещенное в разделе <head>:

<link rel='stylesheet' id='wp-polls-css'  href='http://example.com/wp-content/plugins/wp-polls/polls-css.css?ver=2.67' type='text/css' media='all' />

JavaScript добавляется с помощью введения скрипта через обращение wp_footer(), размещенное в нижней части документа:

<script src='http://example.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.67'></script>

Это разумно. Это то, что они должны сделать, чтобы заставить этот плагин работать. Авторы плагинов должны обеспечить, чтобы их плагины были просты в использовании и работали.

Как разработчик, ориентированный на повышение производительности, я хочу, чтобы скрипты и стили были объединены

Теперь у нас есть эти два ресурса, которые предназначены для одной цели. Когда вы посмотрите материалы, посвященные веб-производительности и тому, как сделать сайты быстрее, первое что вы услышите от их авторов - это нужно объединять ресурсы. Хорошее правило: чем меньше ресурсов сайту необходимо загрузить, тем быстрее он работает.

Объединение ресурсов это не какая-то абстрактная концепция, о которой должны заботиться только самые элитные сайты. Это проблема для каждого веб-сайта. Люди решают эту проблему миллионом способов. CSS-спрайты призваны объединить все ресурсы изображений.

Шрифты иконок и SVG-спрайты предназначены для решения этой же проблемы. CSS-препроцессоры помогают объединить ваши таблицы стилей. Rails Asset Pipeline также помогает объединить ресурсы. Есть большое количество Grunt и Gulp плагинов, которые предназначены для того же самого.

Но мы сейчас говорим о WordPress, поэтому нам нужны решения именно для него.

Могут ли сами плагины помочь нам?

Первая идея, которая пришла мне в голову, это то, что плагины через графический интерфейс должны предоставлять нам возможность вычленить все, что они добавляют в очередь загрузки, чтобы это можно было добавить в сам плагин.

Даже пойти настолько далеко, чтобы предоставить ресурсы, которые они загружают, в текстовом поле, с тем, чтобы их можно было легко скопировать и вставить в нашу систему.

Теперь я думаю, что это уже немного чересчур. Это привело бы к глобальным изменениям в мире плагинов WordPress. Даже если бы это произошло, то привело бы к множеству лишних усилий, когда данный вопрос может быть решен более эффективно.

Решение 1: Используйте плагин

Плагин MinQueue предлагает решение, которое мне лично нравится. Он не делает ничего автоматически, что позволяет настроить, какие ресурсы вы хотите совместить, и в каком порядке.

В разделе плагина, в панели администрирования WordPress вы увидите небольшую вспомогательную ссылку:

Для нашей демо-версии, я хочу объединить CSS нашей темы и CSS плагина WP-Polls. Поэтому я беру эти имена из подсказки и помещаю их в новую "очередь загрузки" в настройках плагина:

Теперь ни один из этих файлов стилей больше не загружается отдельно. MinQueue создает объединенную (и закэшированную) версию и обслуживает ее:

<link rel='stylesheet' id='minqueue-117c22aa-ebc80003-css'  href='http://example.com/wp-content/uploads/minqueue-cache/minqueue-117c22aa-ebc80003.css' type='text/css' media='all' />

Вы можете создать несколько "очередей загрузки", что в сумме даст вам достаточно контроля. Например, возможно, подраздел вашего сайта загружает различные ресурсы, которые могут быть объединены отдельно, их не нужно объединять с основными разделами.

Обратите внимание, это означает, что вы должны будете иметь очередь загрузки стилей вашей темы, но это довольно просто.

Также имейте в виду, что популярный плагин W3 Total Cache также осуществляет объединение, но я считаю, это он делает это намного сложнее. Вы добавляете стили через URL-адреса, и мне кажется, что это чревато ошибками.

Решение 2: Вручную выделяйте элементы и объединяйте их

Плагины, которые добавляют ресурсы, делают это через wp_enqueue_script и wp_enqueue style. Вы можете покопаться в коде плагина и найти, где они делают это. Тогда вы можете увидеть имя, которое они применяют, когда делают это.

После чего в собственном файле темы functions.php (или пользовательском файле функций плагина) вы можете выделить их из очереди. Простой пример извлечения из очереди одной таблицы стилей:

add_action('wp_print_styles', 'my_deregister_styles', 100);

function my_deregister_styles() {
  wp_deregister_style('name-of-style');
}

Теперь как вы можете найти этот ресурс и объединить его с CSS, который вы по-прежнему загружаете на странице самостоятельно. Возможно, вы используете CSS-препроцессор, тогда вы можете импортировать этот ресурс.

Возможно, вы используете обработчик задач наподобие Grunt, тогда вы можете добавить его в список файлов, которые будут выделяться и объединяться. Или просто вручную скопировать и вставить содержимое ресурса в собственную таблицу стилей (просто помните, что в этом случае он не будет обновляться при обновлении плагина).

Решение 3: Используйте плагин для выделения из очереди загрузки элементов и их объединения

Конечно, я в состоянии покопаться в коде плагина и найти загружаемые ресурсы, однако не думаю, что это такой уж прогрессивный подход. Я бы предпочел делать это программно, чтобы уменьшить вероятность человеческой ошибки.

Во время предыдущих дискуссий на эту тему Нейт Райт из Theme of the Crop показал нам совершенно новый плагин, предназначенный для этих целей, под названием Asset Queue Manager. Через его интерфейс вы легко можете выделить элементы, без необходимости лесть в код.

Через интерфейс сайта вы можете нажать ссылку в панели администрирования, чтобы вывести выпадающее меню со списком всех загружаемых элементов страницы:

Решение 3: Используйте плагин для выделения из очереди загрузки элементов и их объединения

Плагин содержит кнопку для выделения элементов из очереди загрузки. Плагин выведет их из очереди загрузки, пока вы не отмените это действие. Теперь вы можете объединять загружаемые ресурсы по своему усмотрению. В Asset Queue Manager еще одна кнопка, которая позволяет связаться непосредственно с ресурсом, таким образом, его очень легко найти. Довольно круто!

Заключение

Есть много способов управления CSS и JavaScript, которые загружают плагины WordPress. Вы можете и должны сделать это для каждого загружаемого ресурса.