Оптимизация WordPress: сжатие CSS и JS

Использовал на своих сайтах для оптимизации/сжатия CSS и JS плагин Better WordPress Minify, но через некоторое время заметил какие-то зависания в открытии страниц. Добавил всяких кэшируюших плагинов + добавил кешировние запросов в БД - но это не спасло ситуацию. По показателям оптимизации PageSpeed было 90+ из 100, но загрузка-открытие длилось 6-12 секунд.

Полез в исходный код страницы и обнаружил, что плагин Better WordPress Minify создает не нужный код в виде скрипта главной страницы и так для всего сайта. Пример паразитного кода в хедере:

<script type="text/javascript" src="http://site.com?ver=1.10.2"></script>

Вот по логам загрузки страницы значительное время приходилось на этот "скрипт". После отключения плагина нашел ему замену в виде WP Minify и жизнь сразу наладилась 🙂

Т.к. тема оптимизации очень актуальна - немного дополню:

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

1. находим скрипт с ошибкой, копируем его исходный код в буфер и вставляем на сайте для проверки jshint.com - большая часть ошибок - это или не закрытая скобка или не поставленные кавычки.
2. такой же сервис есть для стилей CSS - csslint.net

Так же некоторые плагины не обьеденяют\сжимают ваши кастомные скрипты\файлы прописанные напрямую в шаблоне темы. Для таких случаев нужно указать их через спец.подключения от вордпресса. Приведу пример:

<?php
if ( !is_user_logged_in() ) {
	
	wp_enqueue_style( 'bootstrap.min.css', '/wp-content/themes/my_theme/css/bootstrap.min.css' );
	wp_enqueue_style( 'bootstrap-theme.min.css', '/wp-content/themes/my_theme/css/bootstrap-theme.min.css' );
	
	wp_enqueue_script( 'bootstrap.min.js', '/wp-content/themes/my_theme/js/bootstrap.min.js' );
	wp_enqueue_script( 'wow.js', '/wp-content/themes/my_theme/js/wow.js' );
} else {
?>
	<link rel="stylesheet" media="screen" type="text/css" href="/wp-content/themes/my_theme/css/bootstrap.min.css">
	<link rel="stylesheet" media="screen" type="text/css" href="/wp-content/themes/my_theme/css/bootstrap-theme.min.css">
	
	<script type="text/javascript" src="/wp-content/themes/my_theme/js/bootstrap.min.js"></script>
	<script src="/wp-content/themes/my_theme/js/wow.js"></script>
<?php } ?>

вот таким кодом для всех гостей сайта мы выводим сжатые скрипты и стили, а для залогиненных - оригинальные