Часто бывает, что купленная или полученная бесплатно готовая тема не набирает большой процент в проверке Google PageSpeed. В хроме встроен инструмент LightHouse для проверки сайта, который позволяет проверять не опубликованные сайты на домашнем сервере.
![](https://habrastorage.org/getpro/habr/upload_files/99f/152/7b4/99f1527b466c577b21c849e8626c6915.png)
Основные ошибки, возникающие при проверке:
1. Eliminate render-blocking resources. Решением служит необходимость переноса css и js из секции head вниз секции body.
![](https://habrastorage.org/getpro/habr/upload_files/177/0a5/acc/1770a5acc831aafbfecc14cacb392ede.png)
![](https://habrastorage.org/getpro/habr/upload_files/e2b/9c1/8d4/e2b9c18d40b4f046996fcb6215be2f81.png)
Это можно сделать при помощи платных или бесплатных плагинов, а также кодом:
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');
Перезапустив отчет заново, мы видим, как изменилось набранное число и убралась ошибка.
![](https://habrastorage.org/getpro/habr/upload_files/bea/a0b/7ec/beaa0b7ec00e024edc11751399564680.png)
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>
![](https://habrastorage.org/getpro/habr/upload_files/5f9/564/447/5f9564447ce1f614b7c19cfbdbee81a6.png)
![](https://habrastorage.org/getpro/habr/upload_files/022/0cd/c66/0220cdc66931704624692ac49f8e8bd9.png)
Также добавляю в 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. С вот такими настройками.
![](https://habrastorage.org/getpro/habr/upload_files/c79/58f/554/c7958f554aec2cf235a1e3c8ebc446d1.png)
В результате проблема может не уйти до конца, но позволит существенно ускорить отдачу сайта, с небольшими затратами.
![](https://habrastorage.org/getpro/habr/upload_files/1b2/66d/9fc/1b266d9fc941a3253633296efc0aa7a8.png)
Конечно хорошим решением было бы выкусить все css и js из плагинов и тем и упаковать при помощи gulp, но не всегда есть целесообразность применения данного решения.