Очень коротко о правильном подходе к ускорению сайта (хорошие результаты по PageSpeed Insights) и работе с файлами стилей и скриптов.
Ваш сайт наверняка уже дано работает на HTTP/2, если это не так, то ваш хостер остался в прошлом. Проверить можно в любом онлайн сервисе.
При использовании HTTP/2 объединение скриптов и стилей наносит достаточно серьезный вред производительности сайта. Почему и каким образом я описывать не буду. Пытливый ум всегда сам найдет информацию в интернете.
Для исправления ситуации можно отключить объединение в уже установленных плагинах или установить поддерживающий современные функции, скажем Fast Velocity Minify.
Но есть всегда проблема с плагинами такого рода, не просто их отладить, что бы не возникало ошибок и все работало. И если используется плагин кеширования, тог частенько будут появляться странички без стилей для пользователя.
Все из-за автоматизации процесса в плагинах и слабой синхронизации с остальными плагинами и еще масса разных проблем. Особенно с производительностью и нагрузкой.
Но все можно решить гораздо проще, конечно потребуется немного вашего времени, но проблем, как и нагрузки будет в разы меньше. Пару сниппетов в файл функций вашей темы и сайт будет быстр и без лишней нагрузки.
Собираем адишники скриптов, посмотреть можно в коде страницы и просто добавляем их в массив. К каждому будет добавлен defer="defer". Легко проверить на ошибки в консоле и при необходимости просто удалить конфликтное.
defer для скриптов js (в массиве айдишники даны для примера):
// откладываем скрипты
function yw_add_defer_attribute( $tag, $handle ) {
$handles = array(
'yw-menu',
'yw-passive-event',
'comment-reply',
'wp-embed',
'jquery-migrate',
);
foreach( $handles as $defer_script) {
if ( $defer_script === $handle ) {
return str_replace( ' src', ' defer="defer" src', $tag );
}
}
return $tag;
}
add_filter( 'script_loader_tag', 'yw_add_defer_attribute', 10, 2 );
Прелоад стилей поможет ускорить загрузку стилевых файлов. Мы должны попросить браузер быстро разобраться с нашими стилями. Для этого надо добавить для каждого файла стилей еще и
Приведу самый простой вариант и самый удобный для отладки, если вдруг что-то начнет выдавать ошибку.
Стили даны для примера, вы можете вписывать просто сразу полный адрес файла, если не знаете как пользоваться возможностями определенными в wp.
function yw_preload_font_files1() {
$dashicons_src = includes_url(). 'css/dashicons.min.css'; // если во фронте работают иконки
$block_src = includes_url(). 'css/dist/block-library/style.min.css'; // обычно есть у всех
$min_src = get_template_directory_uri() . '/assets/css/style.min.css'; //стили шаблона сайта
$child_src = get_stylesheet_directory_uri() . '/style.css'; // стили шаблона с учетом дочерней темы
$bar_src = plugins_url('yworld-site-optimizer/css/yw-bar.css' ); // стили плагина
$style_rcl = RCL_URL . 'assets/css/animate-css/animate.min.css'; // пример стилей Rcl
echo '',PHP_EOL;
echo '',PHP_EOL;
echo '',PHP_EOL;
echo '',PHP_EOL;
echo '',PHP_EOL;
echo '',PHP_EOL;
}
add_action( 'wp_head', 'yw_preload_font_files1', 1);
По возможности сохраняйте последовательность скриптов, как они у вас в коде, так по порядку и в сниппете для стилей пусть загружаются. У вас 20 для всех и делайте. Это займет время по сравнению с плагином, но вы точно будете контролировать ситуацию и не нагрузите свой сайт лишним.
Забыл про версии скриптов и стилей, что бы не парится с ними, просто их вырубить:
// удаляем версии скриптов и стилей
function yw_remove_ver_cj( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'yw_remove_ver_cj', 10, 2 );
add_filter( 'script_loader_src', 'yw_remove_ver_cj', 10, 2 );
Такая функция есть в дополнении Yworld Site Optimizer
Решать вам, плагин или руками, но есть смысл заняться этим вопросом. Желательно использовать минимизированные файлы, если они большого размера конечно.
PS сумбурно получилось, так как время очень мало было, но надеюсь понятно и полезно.
Автор публикации
Что-то фигня у меня получилась с кодом для стилей, точнее не все правильно в посте отобразилось, только заметил. Позже поправить попробую.
Все, что про ссылку вырезает и пока не понял как это обойти))
Скрин прикреплю.