Увеличение скорости загрузки сайта для CMS WordPress

Часто бывает, что купленная или полученная бесплатно готовая тема не набирает большой процент в проверке Google PageSpeed. В хроме встроен инструмент LightHouse для проверки сайта, который позволяет проверять не опубликованные сайты на домашнем сервере.

Основные ошибки, возникающие при проверке:

1. Eliminate render-blocking resources. Решением служит необходимость переноса css и js из секции head вниз секции body.

Это можно сделать при помощи платных или бесплатных плагинов, а также кодом:

function footer_enqueue_scripts(){
remove_action('wp_head','wp_print_scripts');
remove_action('wp_head','wp_print_head_scripts',9);
remove_action('wp_head','wp_enqueue_scripts',1);
add_action('wp_footer','wp_print_scripts',5);
add_action('wp_footer','wp_enqueue_scripts',5);
add_action('wp_footer','wp_print_head_scripts',5); }
add_action('after_setup_theme','footer_enqueue_scripts');
if ( !is_admin() ) {
	wp_deregister_script('jquery');
	remove_action( 'wp_head', 'rsd_link' );
	remove_action( 'wp_head', 'wlwmanifest_link' );
	remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
	remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
	remove_action( 'wp_head', 'wp_generator' );
	remove_action( 'wp_head', 'feed_links_extra', 3 );
}

Для удобства я создал отдельный файл wp-content/themes/storefront2/speed/functions.php

и разместил этот код в нем, а в wp-content/themes/storefront2/functions.php добавил его подключение:

include_once(get_parent_theme_file_path().'/speed/functions.php');

Перезапустив отчет заново, мы видим, как изменилось набранное число и убралась ошибка.

2. Preload key requests. В моем случае — это подключение шрифта. Решаю добавлением в head.php с атрибутом rel=»preload»

<link rel="preload" href="<?php echo get_stylesheet_directory_uri()?>/assets/fonts/fa-solid-900.woff2" as="font" type="font/ttf" crossorigin="anonymous"> 

3. Добавление белого экрана и прелодера, пока не загрузились скрипты внизу страницы:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri()?>/speed/css/preload.css" media="all" />

Внутри файла:

.preload-body{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999;
	text-align: center;
}
.preload-body img{
	position: absolute;
	width: 200px;
	display: initial;
	top: 50%;
	margin-top:-100px;
}

<div class="preload-body"><img src="<?php echo get_stylesheet_directory_uri()?>/speed/images/preload.gif" loading="lazy"></div>

Также добавляю в footer.php выключение экрана прелодера

<script type='text/javascript' src="<?php echo get_stylesheet_directory_uri()?>/speed/js/preload.js"></script>

Внутри файла:

jQuery(document).ready(function() {
   jQuery('.preload-body').hide();
});

4. Remove unused CSS и Remove unused JavaScript. Для решения этой проблемы я порекомендую бесплатный плагин Autoptimize. С вот такими настройками.

В результате проблема может не уйти до конца, но позволит существенно ускорить отдачу сайта, с небольшими затратами.

Конечно хорошим решением было бы выкусить все css и js из плагинов и тем и упаковать при помощи gulp, но не всегда есть целесообразность применения данного решения.