Как без особых хлопот оптимизировать доставку CSS в WordPress

CSS может улучшить общий вид вашего веб-сайта, его легко использовать, редактировать и поддерживать. Единственным недостатком является возможность замедления скорости загрузки вашей страницы. Поэтому эта статья, созданная нашей командой в WpDataTables, покажет вам, как оптимизировать доставку CSS в WordPress.

Если CSS не доставлен должным образом, браузеру необходимо будет обработать и загрузить данные, прежде чем он закончит отображение вашей страницы. Это означает, что посетители будут видеть вашу страницу с задержкой и могут щелкнуть ее, потому что она не загружается. Отсюда важность оптимизации доставки CSS, поэтому читайте дальше, чтобы узнать, как избежать ловушек, которые могут замедлить работу вашей веб-страницы.

Все о доставке CSS

По сути, CSS, каскадная таблица стилей, делает веб-сайты привлекательными, и без них веб-сайты все еще застряли бы в 90-х годах.

Веб-страницы, в том числе веб-страницы WordPress, стилизованы с помощью CSS. Каждая тема WordPress использует файл style.cc для создания стильного внешнего вида. Добавление плагинов добавит больше таблиц стилей, например, если загрузить плагин виджета, он добавит дополнительный файл CSS (таблицу стилей) для создания желаемого вида.

Сценарии CSS загружаются до того, как ваш сайт станет видимым, что означает, что ваш браузер не будет отображать контент, пока не будет обработана данная информация CSS.. Это приводит к блокировке рендеринга, которая возникает, когда браузер загружает все сценарии CSS перед отображением сайта.

CSS можно использовать несколькими способами для доставки в WordPress с множеством различных настроек.

Независимо от того, как вы настроили свою веб-страницу, CSS действительно может помочь сделать ваш сайт быстрее.

Блокирующий рендеринг JavaScript и CSS — что это такое?

В нашем высокотехнологичном обществе ожидаются сайты с быстрой загрузкой, и это жизненно важно для высокого рейтинга SEO. Google PageSpeed ​​Insights может помочь вам понять скорость загрузки вашего сайта. Иногда при использовании инструмента появляется предупреждение — «Удалите код JavaScript и CSS, блокирующий рендеринг, в содержимом верхней части страницы», но вот решение этой проблемы.

Отображение HTML необходимо, прежде чем браузер сможет отобразить любую веб-страницу. Пока он это делает, он обнаружит сценарии и таблицы стилей и должен остановиться, чтобы запросить и загрузить этот файл. Затем он выполняет его и продолжает просмотр HTML. Большинство тем и плагинов для WordPress используют множество файлов JavaScript и/или CSS, из-за чего рендеринг даже одной страницы вашего сайта может занять много времени.

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

Эти ненужные файлы известны как блокирующие рендеринг CSS и JavaScript. Продолжайте читать, чтобы узнать, что это такое и как удалить их с вашего сайта WordPress.

Используйте Google Pagespeed Insights, чтобы обнаружить блокирующие рендеринг CSS и JavaScript

Медленно загружающиеся браузеры обычно пытаются обработать значительный объем кода CSS и поэтому не могут отобразить страницу, однако не каждый ресурс CSS блокирует отрисовку.

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

Важно понимать, какие элементы необходимы, а какие нет, чтобы оптимизировать доставку CSS.

Чтобы запустить процесс блокировки рендеринга, сначала проверьте скорость своего сайта с помощью Google PageSpeed ​​Insights.

Вот как:

• Перейдите на страницу Google PageSpeed ​​Insights.
• Скопируйте и вставьте URL нашего сайта в соответствующее поле.
• Нажмите «Анализ»
• В результате будет отчет. Обратите внимание на скрипты, которые появляются как «Устранить блокирующий рендеринг JavaScript и CSS».

Обычно эти CSS имеют решающее значение для вашего сайта:

• Стили верхней части страницы
• Темы
• Цвет фона
• Другие, в зависимости от типа сайта

Эти CSS обычно менее важны:

• Ниже сгиба CSS
• CSS для других устройств

Уменьшите количество скриптов, блокирующих рендеринг

Можно свести к минимуму количество скриптов, блокирующих рендеринг, на вашем сайте:

• Уменьшение количества CSS и JavaScript. Вы можете удалить все ненужные пробелы и комментарии.
• Объединение вашего CSS и JavaScript. Возьмите разные файлы .css и .js и соедините их вместе, что приведет к меньшему количеству файлов.
• Отложенная загрузка JavaScript. Вы можете заставить их загружаться последними после загрузки всего остального, используя асинхронную загрузку.

WordPress использует один комбинированный фильтр для регистрации интерфейсных скриптов, поэтому вы можете видеть входящие файлы CSS или JavaScript. Вы можете не знать, что искать, поэтому полезно использовать плагин.

l CSS не нужен постоянно на всех страницах. Тем не менее, это не просто так, и вы будете использовать все это на каком-то этапе, где требуется критический путь рендеринга.

На странице «Свяжитесь с нами» и на странице «Услуги, которые мы предлагаем» могут потребоваться разные части CSS. Когда кто-то загружает страницу «Услуги, которые мы предлагаем», части CSS, предназначенные только для страницы «Свяжитесь с нами», в это время не требуются, однако этот CSS по-прежнему загружается, поскольку веб-мастеру нужны все загруженные файлы CSS для отображения веб-страницы.

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

CSS и JavaScript, которые блокируют рендеринг в верхней части страницы, — это серьезная проблема, которую необходимо исправить как можно скорее.

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

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

Оптимизация критического пути рендеринга в WordPress

Критический путь рендеринга обозначает порядок, в котором браузер выполняет задачи по рендерингу вашей страницы, то есть последовательность, в которой он загружает и обрабатывает CSS, HTML и JavaScript и показывает их в браузере.

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

Чтобы максимально быстро загрузить вышеописанную фальцованную секцию, необходимо:

• Создайте HTML так, чтобы он отдавал приоритет загрузке частей выше сгиба
• Минимизируйте данные, используемые CSS, JS и HTML.

Дополнительные пояснения можно найти в руководстве Google PageSpeed. Иногда данные, необходимые для загрузки ATF, превышают размер окна перегрузки (составляя 14,6 КБ). В этом случае необходимо больше сетевых переходов с сервера на браузер и обратно. Мобильные сети с высокой задержкой обнаружат, что это препятствует загрузке страницы.

DOM строится браузером по частям, что может сократить время, необходимое для рендеринга ATF. Структурируйте HTML таким образом, чтобы сначала загружалось содержимое верхней части страницы, а затем — остальная часть страницы.

Процесс оптимизации требует постоянного улучшения, мониторинга и измерения.

Хотя CSS можно использовать несколькими способами для создания гладких веб-страниц, наиболее важным является то, что он загружается быстро. Очистите код и выполните описанные выше шаги, чтобы ускорить загрузку страниц.

Если вам понравилось читать эту статью о том, как оптимизировать доставку CSS в WordPress, вы должны прочитать эту о том, как добавить метатеги в WordPress без плагина.

Мы также писали о нескольких связанных темах, таких как встраивание pdf в WordPress, встраивание excel в html, как скрыть избранное изображение в сообщении WordPress, как узнать, является ли сайт WordPress, как удалить WordPress из cPanel. и как создать веб-сайт, подобный Amazon.