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

На скорость веб-сайта может влиять широкий спектр факторов, но факторы, обсуждаемые в этой статье, имеют наибольшее влияние. Уравнение идеального веб-сайта может быть сложно решить, поскольку некоторые элементы не зависят от ваших действий. Они диктуются каждой конкретной ситуацией (например, географическим положением, скоростью интернета). Однако вы можете оптимизировать доставку CSS, изменив элементы, которыми вы можете полностью управлять. Узнайте больше об этой теме ниже в этой статье, созданной нашей командой в wpDataTables.

Определение содержимого, блокирующего рендеринг, и содержимого верхней части страницы

Блокировка рендеринга

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

Контент в верхней части страницы

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

О блокировке рендеринга в JavaScript и CSS

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

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

Выявление блокирующих рендеринг JavaScript и CSS

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

Как устранить блокировку рендеринга JavaScript и CSS в содержимом верхней части страницы?

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

Удалите JavaScript из критического пути рендеринга

Критический путь рендеринга должен включать только те элементы, которые необходимы для веб-сайта. Вы можете удалить ненужные ресурсы JavaScript из этого пути. Это делается путем добавления определенных атрибутов там, где требуется JavaScript. Атрибуты:

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

Проверьте, как доставляются ресурсы CSS, и оптимизируйте их.

Чтобы устранить ресурсы, блокирующие рендеринг, в CSS, вам необходимо:

Определите ресурсы, необходимые для содержимого верхней части страницы, и встройте стили CSS в HTML.
Используйте другой атрибут для определения ресурсов CSS, которые абсолютно необходимы (атрибут мультимедиа).
Загружайте ресурсы CSS асинхронно (используя атрибуты, описанные выше).

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

Автооптимизация

Чтобы устранить блокировку рендеринга JavaScript и CSS в содержимом верхней части страницы WordPress, вы можете использовать такие плагины, как Autoptimize. Этот плагин ускоряет загрузку вашего сайта WordPress, комбинируя фрагменты кода, уменьшая блоки кода, удаляя ненужные символы (сжатие) и так далее. Благодаря этим изменениям код становится легче читать, а размер файла уменьшается, что сокращает время загрузки на несколько сотен миллисекунд или даже секунд.

Чтобы установить этот плагин, вам просто нужно получить доступ к панели инструментов WordPress и перейти на вкладку «Плагины». Затем выберите параметр «Добавить новый», расположенный в верхней части окна. После этого вы можете искать Autoptimize или другие плагины в строке поиска. Нажмите «Установить сейчас», активируйте его для нужного веб-сайта, и все готово.

Общий кэш W3

У Autoptimize есть много других альтернатив, которые вы можете использовать для удаления ресурсов, блокирующих рендеринг, из WordPress. Плагин W3 Total Cache — один из лучших. Что интересно в этом плагине, так это то, что он включает в себя несколько дополнительных функций для оптимизации WordPress. Кэширование представляет собой процесс, при котором определенные файлы сохраняются на компьютере пользователя, чтобы улучшить его работу с веб-сайтом. Последующие посещения будут проще, а время загрузки уменьшится.

Набор ускорителей скорости

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

JCH Оптимизация

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

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

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

Мы также написали о нескольких связанных темах, таких как встраивание iframe WordPress, как найти идентификатор страницы в WordPress, как загрузить медиатеку WordPress, как остановить DDoS-атаку и как скрыть заголовок страницы в WordPress.

Источник записи: wpdatatables.com