Интернет динамично развивается и требования к сайту меняются с каждым днем. Рассмотрим различные современные предписания PageSpeed Insights и реализуем их на wp.
Современные форматы изображений
Одним из первых в очереди требований стоит этот пункт. Исполнил его с помощью плагина WebP Express (10 000). Плагин создает копии изображений с расширением .webp и при выводе подменяет стандартные форматы .jpg и .png.
При этом в стилях (путь к изображениям) и там где изображения выводятся не в виде функции thumbnail нужно самостоятельно прописывать измененный url:
было:
/wp-content/uploads/2018/12/head-bg.jpg
стало:
/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2018/12/head-bg.jpg.webpт.е. в начале добавляем /wp-content/webp-express/webp-images/doc-root/ а в конце расширение .webp
При массовой генерации копий нужно следить за процессом, т.к. после генерации папки uploads плагин начинает генерировать изображения найденные в соседних папках.
Массовая генерация может остановить после обработки ~4000 файлов, но при перезагрузке страницы и повторном нажатии кнопки Bulk Convert, генерация продолжится с того файла на котором она остановилась в предыдущей итерации.
Рекомендация: перед генерацией копий нужно перепроверить нет ли лишних версий изображений и если таковые есть лучше от них избавится. Удалить значения в медиафайлах, удалить лишние форматы в функциях и перегенерировать с помощью плагина Regenerate Thumbnails, тем более в нем появилась функция удалять неиспользуемые ранее созданные форматы.
Почему плагин WebP Express перестал существовать, в принципе исчез из репозитория, а на странице плагина указано что дальнейшая поддержка прекращена. Теперь нужно искать альтернативные варианты конвертации.
Альтернативные пути к .webp
Плагин WP Enable WebP (800 установок) только позволяет загружать на сайт файлы формата .webp. Если установить на Photoshop дополнение WebPFormat64, то можно сохранять изображения этого формата. Но при выводе их на сайт, не все браузеры поддерживают .webp. Chrome не поддерживает, Firefox поддерживает.
Использовать в миниатюрах сеты изображений srcset
Эта тема уже не нова, в миниатюрах wp используется давно. Но используется не во всех решениях и плагинах. При этом нужно более грамотно продумать размеры генерируемых миниатюр.
Также с этим атрибутом уже успешно работает и скрипт lazyload.
Атрибут preload
Для важных элементов сайта, которые нужны для отображения в первую очередь, нужно прописывать rel=»preload»
Если подгружаем стили скриптом, то просто прописать этот атрибут + указание на формат as=’style’:
$("head").append("<link rel='stylesheet preload' as='style' id='font-awesome-css' href='/wp-content/themes/meisterwerk/css/font-awesome.css' type='text/css' media='screen' />");Если мы добавляем стили функцией, то нужно добавить вот такую функцию подмены для каждого стиля:
add_filter('style_loader_tag', 'wpse_231597_style_loader_tag');
function wpse_231597_style_loader_tag($tag){
$tag = preg_replace("/rel='stylesheet' id='style-css'/", "rel='preload' id='style-css' as='style' onload=\"this.rel='stylesheet'\"", $tag);
return $tag;
}Существующие форматы: audio, document, embed, fetch, font, image, object, script, style, track, worker, video
Этот метод подключения стилей не поддерживается в браузерах Firefox, IE и Safari
Особенности добавления шрифта
Несмотря на то, что шрифты у нас добавляются в стилях через @font-face, для важных шрифтов все равно нужно прописать в head и обязательный для шрифта атрибут crossorigin:
<link rel='preload' href='/wp-content/themes/meisterwerk/fonts/Arsenal/Arsenal-Regular.woff2' as='font' type='font/woff2' crossorigin='anonymous'>Указать preload в header
Если указывать 2 параметра в rel, то предупреждение о preload не всегда снимается. Иногда нужно отдельно от вызова стиля или шрифта в шапке вызывать preload, примеры:
<link rel='preload' href='/wp-content/themes/agat/css/fontawesome5.css' as='style' />
<link rel='preload' href='/wp-content/themes/undermoon/fonts/Arsenal/6galBhvWCLID9.woff2' as='font' crossorigin='anonymous' />Свойство шрифта font-display
Также всем шрифтам при инициализации (@font-face) рекомендуется прописывать свойство font-display. Оно может принимать следующие значения:
- auto (подгружаем шрифт исходя из настроек браузера)
- block (устанавливает короткий период блокировки вывода текста (3 секунды) и бесконечный период замены при подгрузке шрифта)
- swap (устанавливает период блокировки в 0 секунд и бесконечный период замены)
- fallback (устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды). Если за это время шрифт не подгрузился текст остается с замененным шрифтом)
- optional (устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды)
В большинстве случаем необходимо использовать font-display:swap;
Также из рекомендаций: нужно убирать все скрипты и стили из шапки в подвал. А также рекомендуется важные стили влияющие на загрузку шапки и первого экрана вмонтировать head в виде <style>.
Пару слов о минимизации кода и кэшировании. Чистая минимизация Autoptimize работает некорректно, он зачем то изменяет названия файлов, а код в некоторых остается несжатым. Кэширование (WP Super Cache) при стандартных настройках почему снижает балы PageSpeed Insights.
Отложенная загрузка сторонних скриптов
Предположим что у нас на сайте установлены такие решения как Redconnect, Jivosite, Callhunter и прочие. При загрузке страницы они начинают подтягивать различные скрипты и стили. Отложим на несколько секунды их загрузку, до полной загрузки самой страницы.
Отложенная загрузка Redconnect
Оставляем все как есть, но у скрипта убираем атрибут src (скопировав адрес), а в свои скрипты вставляем следующее:
jQuery(document).ready(function() {
setTimeout(function(){
$("#rhlpscrtg").attr("src", "https://web.redhelper.ru/service/main.js?c=identificator");
}, 10000);
});В скрипт вставляем скопированный адрес с идентификатором.
[site-socialshare]
