Как устранить ресурсы, блокирующие рендеринг, в WordPress (очень просто)

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

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

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

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

В этой статье вы узнаете, как легко устранить ресурсы, блокирующие рендеринг.

Что такое ресурсы, блокирующие рендеринг?

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

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

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

Таким образом, под «устранением ресурсов, блокирующих рендеринг» Google подразумевает удаление ненужных ресурсов из верхней части вашего веб-сайта, потому что это замедляет загрузку контента веб-сайта.

Как найти ресурсы, блокирующие рендеринг

Прежде чем вы сможете решить проблему блокировки рендеринга, вам нужно знать, откуда она берется. Вы можете узнать, какие ресурсы блокируют рендеринг, запустив тест в Google PageSpeed ​​Insight или Web.Measure.

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

1. Посетите Google PageSpeed ​​​​Insight

2. Введите адрес своего веб-сайта и нажмите «Проанализировать».

3. Прокрутите вниз и обратите внимание на предупреждение об устранении ресурсов, блокирующих рендеринг.

Проверьте его как на мобильном, так и на рабочем столе.

Что касается BloggingTools, у нас нет проблем с блокировкой рендеринга для настольных компьютеров, но они есть для мобильных устройств. Поэтому для этого мы будем использовать Mobile, как вы можете видеть ниже.

Для мобильных устройств, как вы можете видеть выше, у нас есть 2 проблемы с блокировкой рендеринга. С оценкой 93. Оценка была выше, но ради этого поста мне пришлось деактивировать плагин Autoptimize.

BloggingTools.org получил эту оценку без оптимизации, потому что мы используем очень быструю и легкую тему под названием GeneratePress. Мы также размещаемся на очень быстром веб-хостинге, известном как Cloudways.

Примечание . Вы не должны зацикливаться на том, чтобы получить 100 баллов по оценке PageSpeed. Это только руководство. Обычно средний балл от 65 до 80 подходит для большинства людей. Не удаляйте файлы, которые необходимы для вашего бизнеса.

Преимущество WordPress в том, что вам не нужно делать все вручную. Есть несколько хорошо закодированных плагинов, которые помогут.

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

Выполните следующие действия, чтобы устранить проблему с ресурсами, блокирующими рендеринг:

1. Установите и активируйте Автооптимизацию

Есть много плагинов WordPress, которые могут это сделать, например, общий кеш W3, WP Rocket и так далее. Но из моего опыта работы со многими веб-сайтами Autoptimize всегда справляется с этим намного лучше, чем любой из них. Замечательно то, что Autoptimize совместим практически со всеми плагинами кэширования WordPress и является бесплатным.

Перейдите в каталог плагинов WordPress, чтобы установить и активировать Autoptimize.

2. Посетите настройки автооптимизации

Если вам когда-нибудь понадобится, где найти настройки автооптимизации, на панели инструментов WordPress нажмите «Настройки», затем нажмите «Автооптимизация».

3. Оптимизируйте JavaScript

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

4. Оптимизируйте CSS

В разделе «Оптимизировать CSS» выберите «Оптимизировать код CSS». Также выберите агрегировать CSS-файлы и «Также агрегировать встроенный CSS». См. Параметры, которые я использую для BloggingTools, ниже.

5. Оптимизируйте HTML

Если вам нужна более высокая производительность, вы также можете использовать Autoptimize для оптимизации HTML. В разделе «Параметры HTML» выберите «Оптимизировать HTML-код». Ниже вы можете увидеть настройки, которые я использую для BloggingTools.

6. Проверьте дополнительные параметры

Вы можете проверить «Разные параметры» и настроить некоторые параметры так, как вам удобно. Вы можете найти настройки для BloggingTools ниже.

7. Сохраните и очистите кеш.

Далее просто нажмите Сохранить и очистить кеш. Это все!

После всего этого вы можете снова проверить свой сайт в Google PageSpeed ​​Insight. Для BloggingTools сразу после этого наша оценка подскочила до 95, и все предупреждения об устранении ресурсов, блокирующих рендеринг, полностью исчезли. Смотри ниже.

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

Если вы хотите еще больше устранить, вы можете использовать Async JavaScript, плагин того же автора, что и Autoptimize. Они работают вместе. Я не рекомендую это, так как это может сломать ваш сайт. Автооптимизация сама по себе в порядке!

Вывод

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

Если после этого ваш сайт все еще очень медленный. Три наиболее вероятные проблемы могут заключаться в том, что ваша тема или ваш веб-хост плохие, или у вас установлены плохие плагины. Я рекомендую Coudways как лучший веб-хостинг и GeneratePress как лучшую тему. Если вы новичок, Bluehost справится, но если вы можете себе это позволить, лучше всего подойдет Cloudways. Вы можете начать бесплатно. Я использую GeneratePress и Coudways для TargetTrend.

Также читайте:

Как сделать WordPress очень быстрым

Как привлечь трафик на свой блог

Как заработать на блоге

Как начать вести блог