Ускорение темы Colormag

Сама по себе тема имеет очень неплохие показатели по скорости загрузки, но существуют некоторые моменты, которые могут помочь сделать показатели ещё лучше. О них в этой статье.

Ускорять будем данный сайт, смотрим только на показатель «скорость загрузки в мобильной версии». Имеем: colormag 2.4.2, скорость 55% по гугл спид тест, php 7.2.28, хостинг AdminVps.

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

Отключаем локальные шрифты и подключаем их через cdn

Для того чтобы отключить шрифты откройте файл inc/functions.php и пропишите по 2 слэша в строчках кода, отвечающих за подключение шрифтов. Это строчки 80 и 89 (сравните со скрином)

 

Теперь перейдите на главную страницу сайта и посмотрите изменился ли шрифт текста. Если да, то вы всё сделали правильно.

Теперь откройте footer.php и пропишите в самый конец, перед </body> эту строку и сохраните

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">

Теперь можно снова вернуться на главную и проверить шрифты. Они должны отображаться правильно. Обычно с этим проблем не бывает.

Отключаем Font Awesome и подключаем его через cdn

Для того чтобы отключить иконки откройте файл inc/functions.php и пропишите по 2 слэша в строчке кода, отвечающей за подключение иконок. Это строчка 146 (сравните со скрином)

отключаем иконки colormag

Теперь перейдите на главную страницу сайта и посмотрите пропали ли все иконки. Если да, то вы всё сделали правильно.

Теперь откройте footer.php и пропишите в самый конец, перед </body> эту строку и сохраните

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' />

Теперь можно снова вернуться на главную и проверить иконки. Они должны отображаться правильно. Обычно с этим проблем не бывает.

Удаляем вызов функции языковой версии в head

Откройте header.php

По умолчанию вызывается функция, которая отображает языковую версию сайта в заголовке

По сути это лишний запрос, который можно исключить. Для этого замените строку

<html <?php language_attributes(); ?>>

на

<html lang="ru">

lang=ru

Таким образом мы напрямую сообщаем, что наш сайт на русском языке. Если ваш сайт на другом языке, поменяйте ru на свою версию языка.

Удаляем rest api

Rest api загружается в самом первом файле, с которого начинается загрузка сайта. Обычно эти функции не нужны для работы. Вы не увидите их в Гугл Спид Тест, но gtmetrix показывает их наличие.

rest api colormag

Для того, чтобы отключить откройте functions.php и в самый конец файла добавьте следующий код:

// Disable REST API link tag
remove_action('wp_head', 'rest_output_link_wp_head', 10);
 
// Disable oEmbed Discovery Links
remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);
 
// Disable REST API link in HTTP headers
remove_action('template_redirect', 'rest_output_link_header', 11, 0);

Удаляем версии скриптов и стилей

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

// удаляю версию скриптов и стилей
function vc_remove_wp_ver_css_js( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

Отключаем поддержку emojis

Эмоджи — это смайлики на вашем сайте. Чтобы они отображались подгружается отдельный скрипт

emoji загрузка gtmetrix

Для того, чтобы их отключить откройте functions.php и в самый конец файла вставьте следующий код:

// Отключаем emoji's 
function disable_emojis() {
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
 add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );
 
 
function disable_emojis_tinymce( $plugins ) {
 if ( is_array( $plugins ) ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
 } else {
 return array();
 }
}
 
 
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
 if ( 'dns-prefetch' == $relation_type ) {
 /** This filter is documented in wp-includes/formatting.php */
 $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
 
$urls = array_diff( $urls, array( $emoji_svg_url ) );
 }
 
return $urls;
}

Загружаем код Яндекс метрики после загрузки страницы

Код Яндекс метрики может блокировать отображение страницы. Как правило этот показатель не всегда влияет на показатели Гугл спид Тест, тем не менее я стараюсь сделать так, чтобы он загружался после отображения страницы и ничего не блокировал. Для этого я использую событие window.onload

Для этого вам необходимо изменить ваш код на этот и указать ваш номер счётчика:

<script>
	window.onload = function() {
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
   ym(ваш номер, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
		};
</script>

Это стандартный код Яндекс метрики, меняются только номера счётчика. На скрине ниже видно, что код начинает загружаться после загрузки содержимого

яндекс метрика отложенная загрузка

Отключаем аватары

Этот параметр вообще не нужен и его лучше отключить. Настройки — Обсуждения — Аватары — снять галочку.

аватары вордпресс

Подключаем jquery через cdn

И последний момент, это перевод jquery из локальной версии в cdn. Если у вас в теме используется слайдер, то использовать данный код не нужно (слайдер не будет работать).

Для этого в конце файла functions.php добавьте следующий код:

// перевод jquery на cdn
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
 
	wp_deregister_script( 'jquery-core' );
	wp_deregister_script( 'jquery-migrate' );
 
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');
	wp_register_script( 'jquery-migrate', '//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js');
 
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery-migrate' );
 
}

В итоге данных улучшений я имею 86% в мобильной версии

гугл спид тест

Теперь попробуем подключить плагин кэширования и сжатия. Для этого я буду использовать Autoptimize со стандартными настройками. В результате получаю небольшое улучшение до 92%, то есть почти в 2 раза больше чем до оптимизации.

гугл спид тест зелёная зона

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *