Вы хотите устранить блокировку рендеринга 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. Эти оптимизации потенциально могут повлиять навнешний вид вашего сайта или определенные функции, поэтому плагин позволяет вам включить эти настройки в качестве опции.
Для этого вам нужно продолжать Настройки »WP Rocket, затем переключитесь на 'Оптимизация файлов ', Оттуда прокрутите вниз до раздела CSS файлы и отметьте поля Минимизировать CSS, Объединить файлы CSS et Оптимизировать доставку CSS.
Ремарка : WP Rocket попытается минимизировать все ваши CSS-файлы, объединить их и загрузить только необходимый CSS для видимой части вашего сайта. Это может повлиять навнешний вид вашего сайта, поэтому вам следует тщательно протестировать свой веб-сайт на разных устройствах и размерах экрана.
Затем вам нужно перейти к разделу Файлы JavaScript, Отсюда вы можете отметить все варианты для максимального повышения производительности.
Вы можете минимизировать и комбинировать файлы JavaScript, как и файлы CSS.
Вы также можете запретить WordPress загружать файл. jQuery Миграция, Это скрипт, который загружается 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-файлы» не отмечена.
Затем прокрутите вниз до области Параметры 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 станет идеальным решением всех ваших забот.
Этот плагин разработан, чтобы предоставить вам функциональность почти 6-8 различных плагинов WordPress. Вам просто нужно установить и настроить его, чтобы увидеть заметное улучшение загрузки ваших страниц.
Мы хотели бы отметить, что это не кеш плагин или CDN, но результат, тем не менее, впечатляет. Так что не стесняйтесь попробовать этот плагин WordPress, чтобы увидеть, на что он способен.
скачать | Демонстрация | веб-хостинг
2. Социальный обмен и Locker Pro
Плагин Social Share & Locker Pro был разработан, чтобы сделать ваш сайт более заметным в социальных сетях. С помощью всего нескольких щелчков мышью вы можете либо установить положение своих социальных иконок, либо заблокировать свой контент, потребовав публикации в одной из предлагаемых вами социальных сетей.
У вас есть предопределенные темы 10, и это должно охватывать самые распространенные пожелания. Все ее темы - Retina и чудеса творчества.
Кроме того, с Social Share & Locker Pro вы сможете отображать полное название социальных сетей или только значок. Это будет зависеть от вашего дизайна, доступного пространства или ваших пожеланий.
скачать | Демонстрация | веб-хостинг
3. WordPress PDF изображения лайтбокс
WordPress PDF Lightbox — это Расширение WordPress который позволяет создавать программы просмотра PDF-файлов. Просмотрщик PDF - это набор фотографий, которые можно сохранить в формате PDF.
С помощью этого расширения вы можете создать столько программ для просмотра PDF, сколько захотите. Для каждого зрителя администратор может установить некоторые параметры, например:
- Обложка: которая будет добавлена как первая страница созданного пользователем PDF-файла.
- Максимальное количество изображений на зрителя
- Изображение водяного знака: для нанесения на страницы PDF
- Отправка по электронной почте: если эта функция активирована, Контактная форма будет предлагаться сразу после галереи изображений. С помощью этой формы пользователи смогут отправить созданный PDF-файл кому угодно по электронной почте.
скачать | Демонстрация | веб-хостинг
Рекомендуемые ресурсы
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
- 10 WordPress плагины для улучшения SEO вашего сайта
- Премиальные плагины 5 для WordPress для оптимизации ваших категорий
- 10 плагинов WordPress для конвертации валюты
- 10 WordPress плагинов для интеграции аудио-плеер в веб-сайт
Заключение
Вот ! Это все для этого урока. Мы надеемся, что эта статья помогла вам узнать, как исправить блокировку рендеринга JavaScript и CSS в WordPress. Вы также можете увидеть наши полное руководство о том, как повысить производительность WordPress для начинающих.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
Не стесняйся поделиться с друзьями в ваших любимых социальных сетях. А если у вас есть предложения или замечания, оставьте их в нашем разделе. Комментарии.
...
