Недавно я посетил встречу WordPress по оптимизации скорости, где мы говорили об использовании кэширования для улучшения результатов Google PageSpeed. Я представил пример сайта, который я только что создал с использованием лучших практик и хорошей оценкой, но возникли вопросы о том, как подходить к устаревшим сайтам с большим количеством плагинов и далеко не идеальными условиями.
Наш местный эксперт по поисковой оптимизации предположил, что показателем для принятия решения об улучшении страницы является PageSpeed 40 или меньше. В этих обстоятельствах ваш рейтинг может быть скомпрометирован вашим счетом.
Поэтому я решил посмотреть на оценку одного из моих старых сайтов с большим количеством плагинов… это было не очень хорошо:
Хорошо, здесь много возможностей для улучшения. Я добавил заголовки expires в свой файл .htaccess, чтобы решить проблемы с кешированием в браузере:
# begin expires expiresactive on expiresdefault “access plus 10 days” expiresbytype text/css “access plus 1 week” expiresbytype text/plain “access plus 1 month” expiresbytype image/svg+xml “access 1 month” expiresbytype image/gif “access plus 1 month” expiresbytype image/png “access plus 1 month” expiresbytype image/jpeg “access plus 1 month” expiresbytype application/x-javascript “access plus 1 month” expiresbytype application/javascript “access plus 1 week” expiresbytype application/x-icon “access plus 1 year” # end expires
Затем я изменил все свои вызовы wp_enqueue_script(), чтобы убедиться, что они загружают JavaScript в нижний колонтитул. Например, скрипт в моем файле functions.php нужно изменить с этого:
wp_enqueue_script(‘site-search’, get_stylesheet_directory_uri() . ‘/js/site-search.js’);
Чтобы отразить более декларативную версию wp_enqueue_script(), которая включает jQuery в качестве аргумента зависимости и истинное логическое значение в качестве последнего аргумента, $in_footer:
wp_enqueue_script(‘site-search’, get_stylesheet_directory_uri() . ‘/js/site-search.js’, [‘jquery’], NULL, true);
В некоторых случаях вы также захотите управлять порядком, в котором скрипты ставятся в очередь, добавляя приоритет к функции add_action():
add_action( $tag, $function_to_add, $priority, $accepted_args)
Приоритет по умолчанию равен 10, более низкие числа имеют более высокий приоритет и выполняются раньше, а более высокие числа выполняются позже.
Итак, после небольшой очистки очереди, я добавил фрагмент для постановки jQuery в нижний колонтитул:
// Defer jQuery to Footer
add_action( ‘wp_enqueue_scripts’, ‘defer_jquery’ );
function defer_jquery() {
if ( !current_user_can( ‘edit_pages’ ) ) {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, includes_url( ‘/js/jquery/jquery.js’ ), false, NULL, true );
wp_enqueue_script( ‘jquery’ );
}
}
В этом коде я использую wp_deregister_script(), чтобы переопределить аргументы очереди по умолчанию теми, которые вместо этого будут загружать jQuery в нижнем колонтитуле.
Предупреждение. этот код может нарушить работу вашего сайта, поэтому после его включения вам следует подготовиться к отладке из консоли.
Если вам повезет, вы не увидите никаких ошибок, но если вы обнаружите что-нибудь, говорящее о том, что jQuery не определен, вам все еще нужно внести некоторые корректировки в очередь. Можно использовать тот же метод извлечения jQuery из очереди, что и для обновления загрузки скриптов за пределами вашей дочерней темы.
Для моего следующего трюка я добавил как WP Super Cache, так и Автооптимизация. На самом деле лучше подождать, пока вы не решите все проблемы, связанные со сценарием jQuery. В противном случае вы будете тратить много времени на очистку кешей снова и снова, пытаясь разрешить зависимости.
Я включил все рекомендуемые параметры в Super Cache и включил оптимизацию HTML, JavaScript и CSS в Autoptimize и провел еще один тест:
Хорошо, не так уж плохо… определенно что-то происходит, но Google говорит мне, что мне нужно оптимизировать изображения и "убрать код JavaScript и CSS, блокирующий рендеринг, в содержимом верхней части страницы". Несмотря на то, что у меня есть настройка Autoptimize для объединения и минимизации моего JavaScript и CSS, Google это не нравится.
К счастью, в Autoptimize есть параметр «Встроить и отложить CSS», который позволяет вставлять CSS, который будет встроен, в то время как минимизированный CSS загружается после начальная загрузка страницы с помощью функции обратного вызова JavaScript. Довольно изящно, но как в любом случае получить верхний или критический путь CSS?
Я вам скажу! Существует множество инструментов, и Эдди Османи составила отличный список: Инструменты CSS для критического пути (выше страницы). Существуют серверные инструменты для задач Grunt, букмарклеты Chrome и даже онлайн-инструмент для создания css критического пути. Однако, попробовав все это — и еще несколько, которых не было в списке, — я нашел на https://www.sitelocity.com инструмент, который делает все это с нулевой конфигурацией:
Вы просто вставляете свой URL-адрес, и он дает вам уменьшенную версию css критического пути, отлично!
Итак, я взял результат и вставил его (без тегов ‹style›) в опцию Autoptimize Inline and Defer CSS:
Я выполнил некоторую оптимизацию изображений с помощью плагина TinyPNG Compress JPEG & PNG Images:
И еще раз проверил с PageSpeed:
Эй хорошо! Проходной балл! Как обычно, они рекомендуют оптимизировать изображения до отвращения, но я уверен, что мои изображения уже оптимизированы, поэтому я проигнорирую это, вместо того, чтобы оптимизировать до точки деградации изображения.
В заключение, это определенно требует некоторой работы, но вы можете оптимизировать практически любой сайт, чтобы улучшить показатель PageSpeed, используя те же самые методы. Несколько других замечаний об этом процессе, которые могут быть вам полезны:
- По возможности используйте SVG вместо изображений.
- Размещайте свои шрифты локально, а не через Google Fonts или какой-либо другой сервис.
- Если у вас есть сторонние скрипты, такие как загрузка Facebook SDK, попробуйте ограничить их использование на домашней странице, иначе вы получите предупреждение «Используйте кеширование браузера» от PageSpeed.
Надеюсь, вы скоро научитесь оптимизировать свои сайты! Если у вас есть вопросы или комментарии о моем процессе или идеях по улучшению скорости страницы, которые я не упомянул, не стесняйтесь добавлять их в комментарии или писать мне в Твиттере: Джейсон Джонсон
