Я протестировал свой веб-сайт WordPress в Google Page Speed Insight, и он набрал 95/100 баллов. Он предложил мне «Оптимизировать доставку CSS» 1 файла css:
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
Прямо сейчас он находится в нижнем колонтитуле вместе со всеми кодами javascript под ним. Я переместил его обратно между тегом head и получил те же результаты. Как оптимизировать доставку css файла css?
В случае большого файла CSS вам нужно будет определить и встроить CSS, необходимый для рендеринга содержимого верхней части страницы, и отложить загрузку оставшихся стилей до тех пор, пока содержимое верхней части страницы не будет загружено.
Взято из: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Не лучше всего собирать все css вместе. Вы должны сначала вызвать стиль, необходимый для рендеринга, а затем вызвать свою большую таблицу стилей.
И если вы хотите знать, как правильно откладывать таблицы стилей, вот как:
Оптимизация доставки CSS: как отложить загрузку CSS?
Надеюсь, я вас прикрыл :)
95/100 - отличный результат. Вы находитесь в той точке, когда дополнительная работа по достижению 100 баллов даст вам меньшую отдачу по сравнению с усилиями, затраченными на достижение этой цели.
Но если вы твердо намерены приблизиться к 100/100, вам нужно будет удалить приведенный выше CSS-код сгиба из файла и включить его в блок <style> в вашей теме. Затем вы можете отложить загрузку файла CSS до тех пор, пока не загрузится остальная часть страницы и она больше не будет блокировать рендеринг.
Вот некоторая информация, которую я написал по обработке CSS в верхней части страницы с помощью плагина WordPress Autoptimize, включая букмарклет JavaScript, который поможет вам начать поиск CSS в верхней части страницы.
Примечание. Для включения этого скрипта следует использовать функцию wp_enqueue_style(), а не включать его непосредственно в нижний колонтитул. Ознакомьтесь с этой статьей на моем веб-сайте, чтобы узнать, как правильно поставить скрипты и стили в очередь.
