Как организовать приоритет файлов CSS плагинов?

Содержание

Вопрос или проблема
Ответ или решение
Шаги для организации приоритета файлов CSS:
Финишные шаги
Заключение

Вопрос или проблема

Я разрабатываю веб-сайт на теме (Astra Pro с дочерней темой) и плагинах. Пока я проверяю свою производительность в инструментах разработчика Chrome, трассировка показывает некритические таблицы стилей с высоким приоритетом.

Пример — таблица стилей lightbox является одним из основных файлов:

Существует ли способ контролировать эти приоритеты, чтобы я мог разместить критические файлы первыми, а некритические позже?

Ответы на уровне начинающего будут очень полезны.

ПОПРАВКА #1:

Я добавил в файл functions.php моей дочерней темы следующий код:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 99 );
function theme_enqueue_styles() {
    wp_enqueue_style( 'slb_core-css', '/wp-content/plugins/simple-lightbox/client/css/app.css' );
}

a. slb_core-css — это идентификатор таблицы стилей
b. однажды я допустил ошибку в пути, у меня возникла ошибка 404, так что как-то это работает, но:

ничего не происходит. Таблица стилей находится в том же месте, что и раньше.

Я наткнулся на это на https://wordpress.org/support/topic/zerif-lite-child-theme/?replies=23#post-7476423

Похоже, что WordPress add_action позволит вам установить приоритет в виде целого числа.

add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

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

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 99 );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Ответ или решение

Организация приоритета файлов CSS плагинов на сайте, разработанном с использованием темы Astra Pro и дочерней темы, является важной задачей для оптимизации производительности. В пользовательских сценариях, когда приоритет не критических стилей, таких как стили для lightbox, оказывается высоким, это может негативно сказаться на восприятии пользователями и общей скорости загрузки страниц.

Шаги для организации приоритета файлов CSS:

Понимание системы подключения стилей в WordPress:
WordPress использует систему wp_enqueue_style, которая позволяет правильно подключать файлы CSS и управлять их зависимостями. С помощью этого механизма можно задать приоритет подключения стилей.
Регистрация стилей с установкой приоритета:
Вы можете использовать add_action() для регистрации ваших стилей с определенным приоритетом. Когда вы передаете приоритет как целое число, WordPress будет подключать стили в порядке возрастания этого числа. Например, значения 99 и выше будут загружаться позже, в то время как 10 – раньше.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 10 );
function theme_enqueue_styles() {
    // Подключаем стили первой
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Задаем более низкий приоритет для менее критичных стилей
    wp_enqueue_style( 'slb_core-css', '/wp-content/plugins/simple-lightbox/client/css/app.css', array(), null, 'all' );
}

Оптимизация подключения стилей плагинов:
Если есть стили от плагинов, которые вы считаете ненужными для первой загрузки, вы можете отключить их или подключить с более низким приоритетом. Если плагин не позволяет вам настроить порядок подключения, вы можете попробовать использовать wp_dequeue_style().

add_action( 'wp_enqueue_scripts', 'custom_dequeue_styles', 20 );
function custom_dequeue_styles() {
    wp_dequeue_style( 'плагин-идентификатор-стиля' ); // замените на идентификатор стиля плагина
}

Асинхронная загрузка стилевых файлов:
Если это возможно сделать в вашем проекте, вы можете использовать техники асинхронной загрузки, такие как preload для критических стилей и media=print для ненужных, чтобы избежать блокировок рендеринга.

<link rel="preload" href="path/to/critical-styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/critical-styles.css"></noscript>

Тестирование и профилирование:
После внесения изменений воспользуйтесь инструментами разработчиков Chrome (DevTools) для тестирования изменений. Проверьте вкладку "Network" для анализа загрузки стилей и убедитесь, что критические стили загружаются первыми.

Финишные шаги

Регулярно обновляйте плагины и тему для поддержания их оптимальных версий.
Анализируйте производительность вашего сайта с помощью инструментов, таких как Google PageSpeed Insights, чтобы идентифицировать возможные улучшения.
Если вы столкнетесь с продолжительными проблемами с производительностью, рассмотрите возможность использования специализированных плагинов для оптимизации CSS, таких как Autoptimize или WP Rocket, которые автоматизируют процесс.

Заключение

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