Как удалить ресурсы, блокирующие рендеринг, с вашего сайта WordPress
Опубликовано: 2023-01-17Вы когда-нибудь заканчивали создание веб-сайта WordPress, любили все в нем и сразу же начинали его ненавидеть, осознав, что он загружается целую вечность? Освоение устранения ресурсов, блокирующих рендеринг, поможет диагностировать эту проблему. Но как?
Низкая скорость загрузки не только доставляет неудобства вам и вашим посетителям, но и может стоить вам дорого, когда дело доходит до SEO. С 2010 года алгоритмы Google учитывают скорость загрузки при принятии решений о ранжировании, поэтому медленные страницы отображаются ниже на страницах результатов.
Возможно, вы знакомы с распространенными причинами низкой производительности страницы — чрезмерным содержанием, несжатыми файлами изображений, недостаточным хостингом и отсутствием кэширования, и это лишь некоторые из них. Но есть еще один преступник, которого часто упускают из виду: ресурсы, блокирующие рендеринг.
Что такое ресурсы, блокирующие рендеринг?
Ресурсы, блокирующие рендеринг, — это части кода в файлах веб-сайта, обычно CSS и JavaScript, которые препятствуют быстрой загрузке веб-страницы. Эти ресурсы занимают относительно много времени для обработки браузером, но могут быть не нужны для непосредственного взаимодействия с пользователем. Ресурсы, блокирующие рендеринг, могут быть удалены или отложены до тех пор, пока браузеру не понадобится их обработать.
Не поймите меня неправильно — CSS и JavaScript великолепны. Без CSS веб-сайты были бы стенами простого текста. Без Ja=ooovaScript мы не смогли бы добавлять на наши веб-сайты динамические, интерактивные и привлекательные элементы. Но если выполнить их в неподходящее время, и CSS, и JavaScript могут снизить производительность вашего сайта.
И вот почему: когда веб-браузер впервые загружает веб-страницу, он анализирует весь HTML-код страницы, прежде чем отобразить ее на экране для посетителя. Когда браузер встречает ссылку на файл CSS, файл JavaScript или встроенный скрипт (то есть код JavaScript в самом HTML-документе), он приостанавливает синтаксический анализ HTML, чтобы получить и выполнить код, что замедляет все.
Если вы оптимизировали производительность своей страницы в WordPress и по-прежнему испытываете проблемы, виновником могут быть ресурсы, блокирующие рендеринг. Иногда этот код важно запустить при первой загрузке, но в большинстве случаев его можно удалить или протолкнуть до самого конца очереди.
В этом посте мы покажем вам, как удалить этот надоедливый код с вашего веб-сайта WordPress и повысить производительность.
Если вы предпочитаете следовать видео, ознакомьтесь с этим пошаговым руководством, созданным WP Casts:
Как устранить ресурсы, блокирующие рендеринг, в WordPress
- Определите ресурсы, блокирующие рендеринг.
- Удалите ресурсы, блокирующие рендеринг, вручную или с помощью плагина.
- Повторно запустите сканирование сайта.
- Проверьте свой сайт на наличие ошибок.
1. Определите ресурсы, блокирующие рендеринг.
Прежде чем вносить какие-либо изменения, вам сначала нужно найти ресурсы, блокирующие рендеринг. Лучший способ сделать это — воспользоваться бесплатным онлайн-тестом скорости, например инструментом Google PageSpeed Insights. Вставьте URL своего сайта и нажмите Анализировать .
Когда сканирование завершено, Google присваивает вашему веб-сайту общую оценку скорости от 0 (самый медленный) до 100 (самый быстрый). Оценка в диапазоне от 50 до 80 является средней, поэтому вам нужно попасть в верхнюю часть этого диапазона или выше его.
Чтобы определить файлы, блокирующие отображение, которые замедляют работу вашей страницы, прокрутите вниз до «Возможности » и откройте аккордеон « Устранение ресурсов, блокирующих отображение ».
Источник изображения
Вы увидите список файлов, замедляющих «первую отрисовку» вашей страницы — эти файлы влияют на время загрузки всего контента, который появляется в окне браузера при начальной загрузке страницы. Это также называется «контентом выше сгиба».
Обратите внимание на любые файлы, оканчивающиеся на расширения .css и .js, поскольку именно на них вам следует сосредоточиться.
2. Удалите ресурсы, блокирующие рендеринг, вручную или с помощью плагина.
Теперь, когда вы определили проблему, есть два способа исправить ее в WordPress: вручную или с помощью плагина. Сначала мы рассмотрим плагин.
Несколько плагинов WordPress могут уменьшить влияние ресурсов, блокирующих рендеринг, на веб-сайтах WordPress. Я расскажу о двух популярных решениях: Autoptimize и W3 Total Cache.
Как устранить ресурсы, блокирующие рендеринг, с помощью плагина Autoptimize
Autoptimize — это бесплатный плагин, который изменяет файлы вашего веб-сайта для более быстрой загрузки страниц. Автооптимизация работает путем агрегирования файлов, минимизации кода (т. е. уменьшения размера файла путем удаления избыточных или ненужных символов) и задержки загрузки ресурсов, блокирующих рендеринг.
Поскольку вы изменяете серверную часть своего сайта, не забудьте соблюдать осторожность с этим плагином или любым подобным плагином. Чтобы устранить ресурсы, блокирующие рендеринг, с помощью Autoptimize:
1. Установите и активируйте плагин Autoptimize.
2. На панели инструментов WordPress выберите «Настройки» > «Автооптимизация» .
3. В разделе « Параметры JavaScript » установите флажок « Оптимизировать код JavaScript? ». .
4. Если флажок рядом с Агрегировать JS-файлы? отмечен, снимите его.
5. В разделе « Параметры CSS » установите флажок « Оптимизировать код CSS?» . .
6. Если флажок рядом с Агрегировать CSS-файлы? отмечен, снимите его.
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 .
4. Щелкните Сохранить все настройки внизу раздела Minify .
5. В меню панели инструментов выберите Performance > Minify .
6. Убедитесь, что в разделе JS рядом с JS minify settings установлен флажок Включить . Затем в разделе «Операции в областях » откройте первый раскрывающийся список « Тип встраивания» и выберите «Неблокирующий», используя «отложить» .
7. В разделе « Управление файлами JS » выберите активную тему в раскрывающемся списке « Тема» .
8. Вернитесь к результатам предыдущего сканирования PageSpeed Insights. Для каждого элемента в разделе Устранение ресурсов, блокирующих отрисовку, оканчивающихся на .js, щелкните Добавить сценарий . Затем скопируйте полный URL-адрес ресурса JavaScript из PageSpeed Insights и вставьте его в поле URI файла .
9. После вставки всех ресурсов JavaScript, блокирующих рендеринг, о которых сообщает PageSpeed Insights, нажмите « Сохранить настройки и очистить кэши » в нижней части раздела JS .
10. В разделе CSS рядом с настройками минимизации CSS установите флажок рядом с настройками минимизации CSS и убедитесь, что для метода минимизации установлено значение «Объединить и минимизировать» .
11. В разделе « Управление файлами CSS » выберите активную тему в раскрывающемся списке « Тема» .
12. Для каждого элемента в разделе Устранить ресурсы, блокирующие отрисовку, оканчивающиеся на .css в результатах сканирования PageSpeed Insights, щелкните Добавить таблицу стилей . Затем скопируйте полный URL-адрес ресурса CSS из PageSpeed Insights и вставьте его в поле URI файла .
13. После вставки всех ресурсов CSS, блокирующих рендеринг, о которых сообщает PageSpeed Insights, нажмите « Сохранить настройки и очистить кэши » в нижней части раздела CSS .
14. Просканируйте свой веб-сайт с помощью PageSpeed Insights и проверьте наличие улучшений.
Как устранить блокирующий рендеринг JavaScript вручную
Плагины могут справиться с внутренней работой за вас. С другой стороны, сами плагины — это просто дополнительные файлы, добавленные на ваш веб-сервер. Если вы хотите ограничить количество этих дополнительных файлов или предпочитаете заниматься программированием самостоятельно, вы можете вручную решить проблему JavaScript, блокирующего рендеринг.
Для этого найдите теги <script> в файлах вашего веб-сайта для ресурсов, определенных при сканировании PageSpeed Insights. Они будут выглядеть примерно так:
<script src="https://blog.hubspot.com/marketing/resource.js">
Теги <script> сообщают браузеру, что нужно загрузить и выполнить сценарий, указанный в атрибуте src (источник). Проблема с этим процессом заключается в том, что эта загрузка и выполнение задерживают синтаксический анализ веб-страницы браузером, что влияет на общее время загрузки:
Источник изображения
Чтобы решить эту проблему, вы можете добавить либо атрибут 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:
Источник изображения
Скрипты с атрибутом defer также загружаются во время анализа страницы, но эти скрипты загружаются с задержкой до первого рендеринга или до тех пор, пока не загрузятся наиболее важные части:
Источник изображения
Атрибуты defer и async не следует использовать вместе в одном и том же ресурсе, но один из них может лучше подходить для конкретного ресурса, чем другой. Как правило, если второстепенный сценарий полагается на запуск сценария перед ним, используйте defer . Атрибут defer гарантирует, что сценарий будет запущен после предыдущего необходимого сценария. В противном случае используйте асинхронность .
3. Повторно запустите сканирование сайта.
После внесения изменений проведите окончательное сканирование своего веб-сайта с помощью PageSpeed Insights и посмотрите, как ваши изменения повлияли на вашу оценку.
Надеюсь, есть заметное улучшение, но не волнуйтесь, если нет. Многие факторы могут снижать производительность страницы, и вам, возможно, придется еще немного покопаться, чтобы найти источник низкой производительности.
4. Проверьте свой сайт на наличие ошибок.
В дополнение к повторному сканированию проверьте свои страницы, чтобы убедиться, что ваш сайт работает. Страница загружается корректно? Все ли элементы отображаются? Если что-то сломалось или не загружается должным образом, отмените изменения и устраните проблему.
Если вы достигли точки, когда вы неоднократно пробовали различные меры с минимальным приростом скорости, возможно, лучше рассмотреть другие способы ускорения ваших страниц, а не рисковать поломкой вашего сайта.
Оптимизация вашего сайта WordPress для повышения производительности
Многие факторы влияют на взаимодействие пользователей с вашим веб-сайтом, но немногие из них важнее, чем время загрузки. Всякий раз, когда вы вносите большие изменения в контент или внешний вид своего сайта WordPress, вы всегда должны учитывать, как такие изменения влияют на производительность.
Теперь, когда вы устранили ресурсы, блокирующие рендеринг, вы должны продолжить оптимизировать скорость своего веб-сайта, проанализировав другие функции, которые, как известно, замедляют производительность. Попробуйте включить регулярное тестирование скорости в график обслуживания вашего сайта — опережение любых потенциальных проблем будет иметь решающее значение для вашего успеха.