Eliminating Render-Blocking JavaScript and CSS on WordPress
Outstanding loading speed is an essential website feature for a high ranking in SERP (Search Engine Result Pages). PageSpeed Insights by Google is an excellent tool for precisely that — optimizing your website’s loading speed. Let’s say you’re using this tool and get the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning. No need to worry! In this tutorial, I will show you how to address the issue.
Understanding “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Warning
While reading Google’s PageSpeed rules, you can see that “Eliminate render-blocking JavaScript and CSS” is one of the rules. Failing to do this will affect your website’s loading speed — slow it down. Now you’re probably wondering how can JavaScript and CSS make your website slower?
To put it simply, whenever you set up a new plugin or theme, they will enrich the front-end with new JavaScript and CSS code. Therefore browsers may take longer to load the webpage.
ATF (Above The Fold) is the part of your website that is visible after the first load. Any other part — anything you see after scrolling down is BTF (Below The Fold).
This warning gets pretty clear now doesn’t it? If any irrelevant JavaScript and CSS are rendered when someone visits your website, you might receive a warning to decrease the range of render-blocking JavaScript and CSS in above-the-fold content.
Discovering Render-Blocking JavaScript and CSS Using Google PageSpeed Insights
To fix render-blocking, you should first test your website’s speed with PageSpeed Insights:
Since most websites score around 50 to 70, this should help you measure your score. Also, Google will list recommendations to improve the performance of your site.
If you happen to discover the recommendation to remove render-blocking JavaScript and CSS in above-the-fold content, then I’d suggest you settle the issue.
Remember that your site doesn’t have to reach the maximum score, which is 100. Your goal is to try to receive a nice score without sacrificing UX.
Also, understand that you shouldn’t remove any scripts that are crucial for quality UX only to get a bit higher score on PageSpeed Insights.
The rules on which Google evaluates your site are only directions to consider for improving your website. In the end: use your own judgment!
Solving the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Error
It is really easy to diminish render-blocking JavaScript and CSS resources on WordPress websites. There are my three plugin recommendations that would help you fix the error:
W3 Total Cache
One of my favorite plugins: W3 Total Cache. After you’ve finished installing and activating it follow these actions on your WordPress admin dashboard:
Autoptimize
Another option would be using the plugin called Autoptimize might also help in solving the render-blocking JavaScript and CSS error. Implement these actions on your dashboard after installing and activating the plugin:
To guarantee that the matter has been fixed, check your website on Google PageSpeed Insights once more. If the warning doesn’t appear, that’s great — you can move on! Otherwise, let’s try adding some additional optimizations:
Speed Booster Pack
Last but not least — Speed Booster Pack. This plugin also may be effective in getting rid of render-blocking JavaScript and CSS error on your website. In order to do this with the mentioned plugin, you should follow these actions:
Once you’ve tried the mentioned methods, try to run your website through Google PageSpeed Insights again to make sure that the render-blocking problem is solved.
Conclusion
Since search engines consider websites’ loading times when ranking results, it is one of the major elements in captivating and keeping visitors.
Google’s PageSpeed Insights gives the website a rating based on its loading speed. In a case where you’re testing your WordPress website and receiving the notorious “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning, you can efficiently resolve the problem with mentioned plugins!
WordPress. «Render-Blocking JavaScript and CSS». Как это исправить?
Скорость загрузки — очень важный фактор, влияющий на рейтинг сайта на SERP (Search Engine Result Page), или на странице результатов поиска. PageSpeed Insights от Google — отличный инструмент для оптимизации скорости загрузки вашего веб-сайта. Он не только показывает текущую скорость, но и определяет проблемы, которые тормозят ваш ресурс. В этом руководстве мы покажем, как устранить одну из наиболее частых проблем, с которой вы можете столкнуться, тестируя ваш сайт. Так что, если вы увидели предупреждение: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, — не волнуйтесь, решение в этой статье.
Что Означает Предупреждение “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
В правилах Google PageSpeed, вы найдёте следующее требование: “Eliminate render-blocking JavaScript and CSS”. Невыполнение этого требования может существенно повлияет на скорость загрузки вашего сайта — замедлить его. Наверняка у вас возник вопрос, как JavaScript и CSS могут замедлить работу сайта?
Проще говоря, всякий раз, когда вы устанавливаете новый плагин или тему, front-end пополняется новым кодом JavaScript и CSS. Следовательно, браузерам может потребоваться больше времени для загрузки этого кода, а соответственно веб-страницы.
Верхняя часть страницы, или ATF (Above The Fold) — это часть сайта, которую видит пользователь сразу же после его загрузки. Любая другая часть — всё, что вы видите, прокрутив вниз — это BTF (Below The Fold), или нижняя часть.
Теперь суть этого предупреждения становится намного понятней, не так ли? Если при посещении вашего сайта, загружается какой-либо нерелевантный JavaScript и CSS, вы получите предупреждение сократить количество JavaScript и CSS кода, блокирующего рендеринг в верхней части страницы
Ищем «Render-Blocking JavaScript and CSS» с Помощью Google Page Insights
Чтобы исправить эту ошибку, вы должны сначала проверить скорость вашего сайта с помощью PageSpeed Insights:
Средняя оценка большинства cайтов — от 50 до 70 баллов. Также ниже на странице вы найдёте рекомендации Google по улучшению производительности вашего сайта.
Если в этом списке будет рекомендация удалить код JavaScript и CSS, блокирующий отображение верхней части страницы, мы советуем решить эту проблему как можно быстрее.
Помните, что максимальное количество баллов, то есть 100 — это не главное. Ваша цель — попытаться получить хорошую оценку без ущерба для UX.
Также помните, что не стоит удалять скрипты, имеющие решающее значение для UX, только чтобы получить немного высший балл PageSpeed Insights.
Правила, по которым Google оценивает ваш сайт, являются лишь рекомендациями по оптимизации. Так что судите сами, что хорошо, а что может навредить вашему веб-ресурсу!
Устранение ошибки “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
Минимизировать ресурсы JavaScript и CSS, блокирующие рендеринг, на сайтах WordPress действительно просто. Мы рекомендуем использовать следующие плагины WordPress, чтобы устранить проблему:
W3 Total Cache
Один из моих любимых плагинов — W3 Total Cache. После того, как вы закончили установку и активацию, выполните следующие действия в административной панели WordPress:
Autoptimize
Ещё одно решение, которое также может помочь в устранении ошибок JavaScript и CSS, блокирующих рендеринг — плагин под названием Autoptimize. Плагин частично переведён на русский. Выполните следующие действия на панели инструментов после его установки и активации:
Этих трёх шагов должно быть достаточно, чтобы решить проблему. Но иногда используемая тема или другие активные плагины могут вызвать обратный результат.
Чтобы убедится, что проблема была решена, проверьте свой сайт в Google PageSpeed Insights ещё раз. Если предупреждение не появляется, здорово — вы можете двигаться дальше! В противном случае давайте попробуем выполнить некоторые дополнительные действия.
Speed Booster Pack
Последнее, но не менее важное решение — Speed Booster Pack. Этот плагин также достаточно эффективно устраняет проблему с JavaScript и CSS на вашем сайте. Чтобы исправить ошибку с помощью этого плагина, вы должны выполнить следующие действия:
После того, как вы выполнили одну из описанных выше инструкций, проверьте ваш сайт в Google PageSpeed Insights ещё раз, чтобы убедится что проблема блокировки отображения верхней части страницы действительно устранена.
Выводы
Поскольку поисковые системы учитывают время загрузки сайтов при ранжировании, это один из основных факторов, влияющих на посещаемость вашего ресурса.
Google’s PageSpeed Insights даёт оценку скорости загрузки сайтов, а также предлагает советы по их оптимизации. И в случае, когда, тестируя ваш сайт WordPress, вы столкнётесь с предупреждением “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, мы рекомендуем воспользоваться одним из выше упомянутых плагинов.
Что такое Eliminate render-blocking CSS и как это исправить?
Render-blocking элементы приостанавливают загрузку страницы до того момента, пока не будет загружен какой-то внешний ресурс. Например, загрузка CSS:
Когда браузер встретит эту инструкцию, он приостановит показ страницы, и будет ждать окончания загрузки файлы styles.css. Все это время посетитель будет видеть белую страницу.
Если человек впервые попадает на Ваш сайта это может быть проблемой. Вместо того, чтобы загрузить и показать HTML, браузер вынужден сделать несколько дополнительных запросов перед тем, как показать посетителю результат.
Убираем Render-blocking CSS
На страницах приземления от внешних стилей лучше избавляться. Вместо них лучше использовать встроенные стили, которые будут содержать только используемые на странице селекторы:
Убираем внешнюю загрузку CSS и используем встроенные стили
CSS Extractor позволит вырезать нужные стили. Для этого достаточно просто указать URL страницы и инструмент покажет набор стилей, которые используются только для нее.
После этого Вы просто вставляете показанные стили в тег style и обеспечиваете более эффективную работу сайта для новых посетителей.
Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.
WordPress.org
Support » Plugin: Autoptimize » jQuery problem – Eliminate render blocking
jQuery problem – Eliminate render blocking
I have been using your plugin for a long time and I’m not really sure if this has been caused by a recent update of Autoptimize.
But I must say I have had great performance results recently and always got near 100% at gtmetrix. Also, Lighthouse was giving me 100% on each test (mobile or desktop, excluding progressive web app).
On top of that, with my current settings, I was able to get all green in search console regarding core web vitals.
But since yesterday, I received some warning messages in search console saying that my mobile core web vitals need improvement.
When I re-did all the tests that I had done before, I noticed render-blocking problems. However, I was using your plugin with the same settings for a long time.
So since I did not change anything after I reached my goals regarding performance, I’m kinda curious what’s happening. Since it says jquery and render-blocking, I just thought that I may ask you first.
Do you have any suggestions?
I should also add that I did not install any plugins that may cause this. Actually, the best results that I got from GTmetrix, Lighthouse had the same set of plugins and settings.
Eliminate render-blocking resources
Potential savings of 310 ms
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
5 хитростей по устранению ресурсов, блокирующих рендеринг
Однако не все ресурсы, которые браузер считает блокирующими рендеринг, необходимы для первой отрисовки; все зависит от индивидуальных особенностей страницы. Есть передовые методы, которые вы можете использовать, чтобы превратить эти некритические ресурсы, блокирующие рендеринг, в некритические ресурсы, блокирующие рендеринг. Кроме того, вы также можете уменьшить количество и / или размер ресурсов, блокирующих рендеринг, которые все еще критичны и не могут быть устранены.
Зачем устранять ресурсы, блокирующие рендеринг?
Если вы уменьшите количество ресурсов, блокирующих рендеринг, вы можете сократить критический путь рендеринга и сократить время загрузки страницы, тем самым улучшив взаимодействие с пользователем и оптимизируя поисковую систему.
Есть три способа уменьшить количество и влияние ресурсов, блокирующих рендеринг:
Типы ресурсов, блокирующих рендеринг
Как правило, браузер обрабатывает все, что находит в разделе HTML-страницы, как блокировку рендеринга. Это включает в себя:
Изображения, медиафайлы и теги
С другой стороны, атрибут async сообщает браузеру, что сценарий полностью независим от страницы. Он будет загружен в фоновом режиме как ресурс, не блокирующий рендеринг, как и отложенные скрипты. Однако, в отличие от отложенных сценариев, асинхронные сценарии не следуют порядку документов, поэтому они будут выполняться всякий раз, когда они закончат загрузку, что может произойти в любое время.
Например, в приведенном ниже примере мы не можем быть уверены, какой сценарий запустится первым; это зависит исключительно от того, что загружается быстрее (обычно меньшее). Помните, что асинхронные сценарии независимы как от документа, так и друг от друга, поэтому порядок документов никоим образом не повлияет на них.
Атрибут async рекомендуется использовать для независимых сторонних скриптов, таких как рекламные объявления, трекеры и аналитические скрипты. Например, Google Analytics рекомендует добавить атрибут async для поддержки асинхронной загрузки в современных браузерах.
4. Минимизируйте и объедините CSS и JavaScript.
Помимо удаления несущественных CSS и JavaScript из критического пути рендеринга, вы также можете минимизировать и объединить ресурсы, блокирующие рендеринг, и ресурсы, не блокирующие рендеринг.
Например, вы можете создавать пакеты для файлов, которые используют одни и те же правила загрузки, и минимизировать каждый пакет отдельно. Поскольку минифицированные файлы легче, а пакеты означают меньшее количество файлов в критическом пути рендеринга, начальный рендеринг страницы завершится раньше. Кроме того, загрузка ресурсов без блокировки рендеринга в фоновом режиме займет меньше времени.
Существует множество инструментов, которые помогут вам выполнить минификацию и объединение в соответствии с передовыми практиками, включая Minify, CSS Minifier, Minify Code и PostCSS. Инструменты сборки, такие как webpack, Parcel и Rollup, имеют встроенные функции минификации, объединения и разделения кода, которые позволяют быстро уменьшить количество ресурсов, блокирующих рендеринг.
5. Загрузите пользовательские шрифты локально.
Поскольку пользовательские шрифты вызываются из раздела документа, они также блокируют отображение ресурсов. Например:
Если вы добавляете шрифты локально, вы также можете минимизировать свой CSS, связанный со шрифтами, и связать его с остальной частью вашего CSS. Вы можете использовать Google Web Fonts Helper для быстрого создания локальных правил @font-face для Google Fonts. Например, вот что вам нужно добавить, чтобы включить начертание шрифта Lato Regular:
Почему не следует загружать пользовательские шрифты асинхронно
В некоторых статьях о ресурсах блокировки рендеринга рекомендуется использовать загрузчик веб-шрифтов TypeKit для асинхронной загрузки пользовательских шрифтов. Когда-то это был достойный инструмент, но он не обновлялся с 2017 года, и у него много нерешенных проблем. Я бы не рекомендовал его использовать.
Хотя асинхронная загрузка шрифтов сокращает критический путь рендеринга, вы всегда должны делать это осторожно. Если шрифты загружаются позже, чем содержимое страницы, на странице может возникнуть общая проблема UX, называемая миганием невидимого текста (FOIT).