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

Опубликовано: 2023-01-17


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

женщина использует портативный компьютер для удаления ресурсов, блокирующих рендеринг, со своего веб-сайта wordpress

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

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

Развивайте свой бизнес с помощью инструментов HubSpot для веб-сайтов WordPress

Не поймите меня неправильно — CSS и JavaScript великолепны. Без CSS веб-сайты были бы стенами простого текста. Без Ja=ooovaScript мы не смогли бы добавлять на наши веб-сайты динамические, интерактивные и привлекательные элементы. Но если выполнить их в неподходящее время, и CSS, и JavaScript могут снизить производительность вашего сайта.

И вот почему: когда веб-браузер впервые загружает веб-страницу, он анализирует весь HTML-код страницы, прежде чем отобразить ее на экране для посетителя. Когда браузер встречает ссылку на файл CSS, файл JavaScript или встроенный скрипт (то есть код JavaScript в самом HTML-документе), он приостанавливает синтаксический анализ HTML, чтобы получить и выполнить код, что замедляет все.

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

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

Если вы предпочитаете следовать видео, ознакомьтесь с этим пошаговым руководством, созданным WP Casts:

1. Определите ресурсы, блокирующие рендеринг.

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

Когда сканирование завершено, Google присваивает вашему веб-сайту общую оценку скорости от 0 (самый медленный) до 100 (самый быстрый). Оценка в диапазоне от 50 до 80 является средней, поэтому вам нужно попасть в верхнюю часть этого диапазона или выше его.

Чтобы определить файлы, блокирующие отображение, которые замедляют работу вашей страницы, прокрутите вниз до «Возможности » и откройте аккордеон « Устранение ресурсов, блокирующих отображение ».

the report from google pagespeed insights

Источник изображения

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

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

2. Удалите ресурсы, блокирующие рендеринг, вручную или с помощью плагина.

Теперь, когда вы определили проблему, есть два способа исправить ее в WordPress: вручную или с помощью плагина. Сначала мы рассмотрим плагин.

Несколько плагинов WordPress могут уменьшить влияние ресурсов, блокирующих рендеринг, на веб-сайтах WordPress. Я расскажу о двух популярных решениях: Autoptimize и W3 Total Cache.

Как устранить ресурсы, блокирующие рендеринг, с помощью плагина Autoptimize

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

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

1. Установите и активируйте плагин Autoptimize.

2. На панели инструментов WordPress выберите «Настройки» > «Автооптимизация» .

3. В разделе « Параметры JavaScript » установите флажок « Оптимизировать код JavaScript? ». .

4. Если флажок рядом с Агрегировать JS-файлы? отмечен, снимите его.

the settings page in the autoptimize plugin

5. В разделе « Параметры CSS » установите флажок « Оптимизировать код CSS?» . .

6. Если флажок рядом с Агрегировать CSS-файлы? отмечен, снимите его.

the settings page in the autoptimize plugin

7. В нижней части страницы нажмите Сохранить изменения и очистить кэш .

8. Просканируйте свой веб-сайт с помощью PageSpeed ​​Insights и проверьте наличие улучшений.

9. Если PageSpeed ​​Insights по-прежнему сообщает о файлах JavaScript, блокирующих рендеринг, вернитесь в «Настройки» > «Автооптимизировать» и установите флажки рядом с « Агрегировать JS-файлы? ». и агрегировать CSS-файлы? . Затем нажмите «Сохранить изменения» и «Очистить кэш » и повторите сканирование.

Как устранить ресурсы, блокирующие рендеринг, с помощью плагина W3 Total Cache

W3 Total Cache — это широко используемый подключаемый модуль кэширования, который помогает устранять запаздывания кода. Чтобы устранить блокировку рендеринга JavaScript с помощью W3 Total Cache:

1. Установите и активируйте плагин W3 Total Cache.

2. В меню панели инструментов WordPress будет добавлена ​​новая опция « Производительность ». Выберите «Производительность» > «Общие настройки».

3. В разделе Minify установите флажок рядом с Minify , затем установите для режима Minify значение Manual .

the minify options section in the W3 Total Cache plugin

4. Щелкните Сохранить все настройки внизу раздела Minify .

5. В меню панели инструментов выберите Performance > Minify .

6. Убедитесь, что в разделе JS рядом с JS minify settings установлен флажок Включить . Затем в разделе «Операции в областях » откройте первый раскрывающийся список « Тип встраивания» и выберите «Неблокирующий», используя «отложить» .

the settings page in the w3 total cache plugin

7. В разделе « Управление файлами JS » выберите активную тему в раскрывающемся списке « Тема» .

8. Вернитесь к результатам предыдущего сканирования PageSpeed ​​Insights. Для каждого элемента в разделе Устранение ресурсов, блокирующих отрисовку, оканчивающихся на .js, щелкните Добавить сценарий . Затем скопируйте полный URL-адрес ресурса JavaScript из PageSpeed ​​Insights и вставьте его в поле URI файла .

the settings page in the w3 total cache plugin

9. После вставки всех ресурсов JavaScript, блокирующих рендеринг, о которых сообщает PageSpeed ​​Insights, нажмите « Сохранить настройки и очистить кэши » в нижней части раздела JS .

10. В разделе CSS рядом с настройками минимизации CSS установите флажок рядом с настройками минимизации CSS и убедитесь, что для метода минимизации установлено значение «Объединить и минимизировать» .

the settings page in the w3 total cache plugin

11. В разделе « Управление файлами CSS » выберите активную тему в раскрывающемся списке « Тема» .

12. Для каждого элемента в разделе Устранить ресурсы, блокирующие отрисовку, оканчивающиеся на .css в результатах сканирования PageSpeed ​​Insights, щелкните Добавить таблицу стилей . Затем скопируйте полный URL-адрес ресурса CSS из PageSpeed ​​Insights и вставьте его в поле URI файла .

the settings page in the w3 total cache plugin

13. После вставки всех ресурсов CSS, блокирующих рендеринг, о которых сообщает PageSpeed ​​Insights, нажмите « Сохранить настройки и очистить кэши » в нижней части раздела CSS .

14. Просканируйте свой веб-сайт с помощью PageSpeed ​​Insights и проверьте наличие улучшений.

Как устранить блокирующий рендеринг JavaScript вручную

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

Для этого найдите теги <script> в файлах вашего веб-сайта для ресурсов, определенных при сканировании PageSpeed ​​Insights. Они будут выглядеть примерно так:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

Теги <script> сообщают браузеру, что нужно загрузить и выполнить сценарий, указанный в атрибуте src (источник). Проблема с этим процессом заключается в том, что эта загрузка и выполнение задерживают синтаксический анализ веб-страницы браузером, что влияет на общее время загрузки:

a visualization of the default script loading timeline

Источник изображения

Чтобы решить эту проблему, вы можете добавить либо атрибут async (асинхронный), либо атрибут defer в теги script для ресурсов, блокирующих рендеринг. async и defer размещаются так:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
<script src="https://blog.hubspot.com/marketing/resource.js" defer>

Хотя они одинаково влияют на время загрузки, эти атрибуты говорят браузеру делать разные вещи.

Атрибут async сигнализирует браузеру о необходимости загрузки ресурса JavaScript при анализе остальной части страницы и выполняет этот скрипт сразу после его загрузки. Выполнение скрипта приостанавливает синтаксический анализ HTML:

a visualization of the script loading timeline with the async attribute

Источник изображения

Скрипты с атрибутом defer также загружаются во время анализа страницы, но эти скрипты загружаются с задержкой до первого рендеринга или до тех пор, пока не загрузятся наиболее важные части:

a visualization of the script loading timeline with the defer attribute

Источник изображения

Атрибуты defer и async не следует использовать вместе в одном и том же ресурсе, но один из них может лучше подходить для конкретного ресурса, чем другой. Как правило, если второстепенный сценарий полагается на запуск сценария перед ним, используйте defer . Атрибут defer гарантирует, что сценарий будет запущен после предыдущего необходимого сценария. В противном случае используйте асинхронность .

3. Повторно запустите сканирование сайта.

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

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

4. Проверьте свой сайт на наличие ошибок.

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

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

Оптимизация вашего сайта WordPress для повышения производительности

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

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

Используйте инструменты HubSpot на своем веб-сайте WordPress и соедините две платформы, не занимаясь кодом. Кликните сюда, чтобы узнать больше.