/ Сайтостроение / Адаптивность / Ускорение сайта: новые требования

Ускорение сайта: новые требования

NEW

Интернет динамично развивается и требования к сайту меняются с каждым днем. Рассмотрим различные современные предписания 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 плагин начинает генерировать изображения найденные в соседних папках.

Рекомендация: перед генерацией копий нужно перепроверить нет ли лишних версий изображений и если таковые есть лучше от них избавится. Удалить значения в медиафайлах, удалить лишние форматы в функциях и перегенерировать с помощью плагина Regenerate Thumbnails, тем более в нем появилась функция удалять неиспользуемые ранее созданные форматы.

Использовать в миниатюрах сеты изображений 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

Особенности добавления шрифта

Несмотря на то, что шрифты у нас добавляются в стилях через @font-face, для важных шрифтов все равно нужно прописать в head и обязательный для шрифта атрибут crossorigin:

<link rel='preload' href='/wp-content/themes/meisterwerk/fonts/Arsenal/Arsenal-Regular.woff2' as='font' type='font/woff2' 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.

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Ускорение сайта: новые требования Ускорение сайта: новые требования
Отключаем стандартные метабоксы
Рекомендации для васОтключаем стандартные метабоксыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.