Пропустить

Как исправить блокировку рендеринга JavaScript и CSS в WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Вы хотите устранить блокировку рендеринга JavaScript и CSS в WordPress?

Если вы тестируете свой веб-сайт с помощью Google PageSpeed ​​insights, вы, вероятно, увидите предложение об устранении блоков рендеринга скриптов и CSS. Однако он не содержит подробностей о том, как это сделать на вашем веб-сайте WordPress.

В этой статье мы покажем вам, как легко исправить блокировку рендеринга JavaScript и CSS в WordPress, чтобы улучшить ваш показатель Google PageSpeed.

Но прежде, давайте узнаем вместе Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге.

Что такое JavaScript и CSS Render-Blocking?

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

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

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

Эти скрипты и таблицы стилей называются блокировщиками рендеринга JavaScript и CSS.

Владельцы веб-сайтов, пытающиеся набрать 100 очков в Google PageSpeed, должны будут исправить это, чтобы получить высший балл.

Что такое показатель Google PageSpeed?

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

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

Вам действительно нужна оценка "100" на Google PageSpeed?

Цель Статистика Google PageSpeed состоит в том, чтобы предоставить вам рекомендации по повышению скорости и производительности вашего сайта. От вас не требуется строго соблюдать эти правила.

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

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

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

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

Мы рекомендуем вам использовать правила Google Pagespeed в качестве предложения, и если вы можете легко реализовать их без ущерба для пользовательского опыта, тогда это здорово. Если нет, постарайтесь сделать как можно больше и не беспокойтесь об остальном.

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

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

1. Исправьте скрипты блокировки рендеринга и CSS с помощью WP Rocket

Для этого метода мы будем использовать плагин WP Rocket. Это лучший плагин кеширования WordPress на рынке и позволяет быстро улучшить производительность вашего веб-сайта без каких-либо технических или сложных навыков.

Прежде всего, вам необходимо установить и активировать плагин WP Rocket. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress..

WP Rocket активирует свой кеш с оптимальными настройками. По умолчанию он не включает параметры оптимизации JavaScript и CSS. Эти оптимизации могут потенциально повлиять на внешний вид вашего веб-сайта или определенные функции, поэтому плагин позволяет вам включить эти настройки в качестве опции.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Для этого вам нужно продолжать Настройки »WP Rocket, затем переключитесь на 'Оптимизация файлов ', Оттуда прокрутите вниз до раздела CSS файлы и отметьте поля Минимизировать CSS, Объединить файлы CSS et Оптимизировать доставку CSS.

Ремарка : WP Rocket попытается минимизировать все ваши файлы CSS, объединить их и загрузить только тот CSS, который необходим для видимой части вашего сайта. Это может повлиять на внешний вид вашего веб-сайта, поэтому вам следует тщательно протестировать свой веб-сайт на разных устройствах и экранах разных размеров.

Затем вам нужно перейти к разделу Файлы JavaScript, Отсюда вы можете отметить все варианты для максимального повышения производительности.

Вы можете минимизировать и комбинировать файлы JavaScript, как и файлы CSS.

Вы также можете запретить WordPress загружать файл. jQuery Migrate, Это скрипт, который загружается WordPress для обеспечения совместимости с плагинами и темами, использующими старые версии jQuery.

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

Затем прокрутите немного вниз и проверьте параметры 'Загрузить JavaScript отложено'и'Безопасный режим для jQuery.

Эти параметры задерживают загрузку несущественного JavaScript, а безопасный режим jQuery позволяет загружать jQuery для тем, которые могут использовать его встроенным.

Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить свои настройки.

После этого вы также можете очистить кеш в WP Rocket перед повторным тестированием своего сайта с помощью Google Page Speed ​​Insights.

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

2. Исправьте блокировку рендеринга JavaScript и CSS с помощью функции автоматической оптимизации.

Для этого метода мы будем использовать другой плагин, созданный специально для улучшения доставки файлов CSS и JS вашего сайта. Хотя этот плагин выполняет свою работу, ему не хватает других мощных функций, которые предлагает WP Rocket.

Первое, что вам нужно сделать, это установить и активировать плагин Autoptimize. Для более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

При активации необходимо посетить страницу Настройка »Автоматическая оптимизация настроить параметры плагина.

Прежде всего, вам нужно отметить опцию 'Оптимизировать код JavaScript'под блоком JavaScript Опционы, Убедитесь, что опция «Объединить все связанные JS-файлы» не отмечена.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Затем прокрутите вниз до области Параметры CSS и отметьте опцию ' Оптимизировать код CSS?». Убедитесь, что опция 'Агрегировать все связанные CSS-файлы'не проверяется.

Теперь вы можете нажать кнопку «Сохранить изменения и очистить кеш», чтобы сохранить свои настройки.

Идите вперед и протестируйте свой сайт с помощью Page Speed ​​Insights. На нашем демонстрационном веб-сайте мы смогли решить проблему зависания рендеринга с помощью этих основных настроек.

Если скрипты блокировки рендеринга все еще существуют, вам нужно вернуться на страницу настроек плагина и посмотреть параметры JavaScript и CSS.

Например, вы можете разрешить плагину включать JS Inline и удалять сценарии, которые по умолчанию исключены, например, seal.js или jquery.js.

Нажмите кнопку «Сохранить изменения и очистить кеш», чтобы сохранить изменения и очистить кеш плагина.

Как только вы закончите, продолжайте и снова проверьте свой веб-сайт с помощью инструмента Page Speed ​​Insights.

Как это работает?

Autoptimize объединяет все файлы JavaScript и CSS. После этого он создает минифицированные файлы CSS и JavaScripts и обслуживает кэшированные копии вашего веб-сайта синхронно или отложенно.

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

помощь

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

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

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

Однако может быть довольно сложно узнать, какой код CSS вам нужно отобразить.

Откройте для себя также некоторые темы и премиальные плагины WordPress

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Плагин WordPress для оптимизации скорости

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

Этот плагин предназначен для того, чтобы предлагать вам функции почти различных плагинов WordPress от 6 до 8. Просто установите и настройте его, чтобы увидеть явное улучшение загрузки ваших страниц.

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

скачать | Демонстрация | веб-хостинг

2. Социальный Share & Locker Pro

Расширение Social Share & Locker Pro было разработано, чтобы ваш сайт был более заметным в социальных сетях. Всего за несколько щелчков мыши вы можете либо установить положение значков социальных сетей, либо заблокировать контент, требуя публикации в одной из предложенных вами социальных сетей.

У вас есть предопределенные темы 10, и это должно охватывать самые распространенные пожелания. Все ее темы - Retina и чудеса творчества.

Кроме того, с Social Share & Locker Pro вы сможете просматривать полное название социальных сетей или просто значок. Это будет зависеть от вашего дизайна, свободного места или ваших пожеланий.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

скачать | Демонстрация | веб-хостинг

3. WordPress PDF изображения лайтбокс

WordPress PDF Lightbox - это расширение WordPress, позволяющее создавать программы просмотра PDF. Просмотрщик PDF - это набор фотографий, которые можно сохранить в формате PDF.

С помощью этого расширения вы можете создать столько PDF-программ для просмотра, сколько захотите. Для каждого зрителя администратор может установить определенные параметры, такие как:

  • Изображение обложки: которое будет добавлено в качестве первой страницы созданного пользователем PDF
  • Максимальные кадров в средстве просмотра
  • Изображение водяного знака: для нанесения на страницы PDF
  • Отправка по электронной почте: если эта функция активирована, контактная форма будет предложена сразу после галереи изображений. С помощью этой формы пользователи смогут отправлять созданные PDF-файлы по электронной почте кому угодно.

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Откройте для себя другие рекомендуемые ресурсы, которые будут сопровождать вас при создании и управлении вашим сайтом.

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

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

...

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация