Web pages should load as fast as possible, otherwise visitors become impatient. There are many possibilities, tricks and tips to get slow websites back on track. Unfortunately, one area is often excluded, which is perhaps due to the rather dry name: We are talking about render blocking. Why this is important and how it can be prevented quite easily under WordPress, we will gladly show you in this article.

What is Render blocking of JavaScript and CSS?

If you have your page at Google's PageSpeed Insights or with other tools, then you have probably already checked this hint read: "Eliminate render blocking of JavaScript and CSS in Above-the-Fold content" - together with a request to solve this problem. You should not take this on the light shoulder and solve the problem instead, take an active approach. In many cases a few minutes are enough off.

Why all this? For visitors to the WP website, of course first of all, what is relevant is what you see directly on the screen, that is everything above-the-fold. To prevent longer waiting periods the website should be structured in such a way that it reflects the visible area directly - and this is not displayed by some CSS and JavaScript resources is slowed down.

Render blocking therefore takes place when the the fastest possible loading of the page is prevented.

How can Render blocking of JavaScript and CSS prevented?

There are several ways to avoid an unnecessarily slow Prevent loading of the web page. Render blocking is only a part of Puzzles, although a very relevant one. To prevent render blocking there are different approaches under WordPress, which we would like to present to you ...to introduce you.

Important: Depending on the type of WordPress installation, active plug-ins and themes, it may well be possible that one or the other solution is not optimal. That is precisely why we offer various possibilities so that you can find the best solution for your site.

CSS Resources deploy in an optimized manner

  • Cascading Style Sheets (CSS) show the browser how the page should be rendered. Here an optimized use is often Worth its weight in gold. It helps to identify them in a first step, which CSS is responsible for the visible area (Above-the-Fold). This Styles should be submitted together with the HTML.
  • Link elements should have the media attribute can be provided. In this way, conditional resources are identified that are not are required on all terminals and in all situations.
  • All other CSS resources should be asynchronously can be loaded.
  • If this is all too complicated right now sounds: Don't worry! There are tools and plugins for WordPress, which will give you can make work much easier. Basic knowledge of CSS and JavaScript should be but still be there.

WordPress plugins: Prevent Render Blocking

There are several extensions for WordPress available, to get the render blocking of JavaScript and CSS under control. The most of them are available free of charge in the plugin directory of WP, differ enormously in terms of functionality and overview. Premium versions are only worthwhile in this area in very rare cases, which is why we limit ourselves almost exclusively to free extensions.

Tip: Before directly installing and activating a plugin a benchmark test should be carried out in order to know exactly what will happen later, whether or not the plugin really did anything. PageSpeed Insights or the Pingdom Website speed test are recommended in this context.

Autoptimize

Autoptimize by the developer Frank Goossens is one of the most popular plugins in this area. It is at over one million WP installations and is constantly being further developed.

For the beginning it is already sufficient to check HTML, JavaScript and CSS in the settings of the plugin under Settings → Autoptimize.

This simple step should already have taken care of that, that the number of requests to the server when a page is called up clearly was reduced. The number of render blocking resources may also be cases, even if the problem is not entirely eliminated by the use of the will be created in the world. A first and perhaps already last step has already been taken - depending on how well the result is achieved after the use of Autoptimize looks like now.

Async JavaScript

Besides Autoptimize, you should also take a look at Async JavaScript to be thrown. The plugin comes from the same developer, but is still easier to use. It is used in over 100,000 WP installations in commitment and can point to a very good evaluation.

Async Javascript is less extensive and does not(!) care about render blocking of CSS. Instead, only JavaScript is loaded asynchronously. In the settings of the plugin, "Enable Async JavaScript" is activated for this purpose. Here you can also choose between the methods Defer and Async, which can have different effects depending on the web page. General statements are difficult to make here.

Async JavaScript can also be combined with Autoptimize, if the Settings of Autoptimize a corresponding check mark has been set. The Combination of both plugins can sometimes give even better results with PageSpeed Insights or the Pingdom Website Speed Test - and the Visitors to the website are pleased about faster loading times.

W3 Total Cache

The popular caching plugin W3 Total Cache uses a different center of gravity, but can also be used to prevent render blocking can be used. However, the use is only recommended if W3 Total cache is already part of the website anyway. To "only" block rendering W3 Total Cache is too large and too extensive.

W3 Total Cache requires a little more work. In the main settings, you first have to check Minify (Minification) and set the mode to manual. Then the addresses of the JavaScript and CSS files concerned must be entered by yourself.

Tip: PageSpeed Insights and other tools list which files for render blocking. These URLs must then be used even for W3 Total Cache must be entered.

Hummingbird

Also with the Plugins Hummingbird good results can be achieved achieve. The extension used to be subject to a fee, but is now free of charge to get. Just like W3 Total Cache, it is a rather extensive plugin that not only prevents render blocking, but also can be used.

The biggest advantage here is that the plugin can search for problems itself. For this purpose the button "Check Files" in the extension's settings is used.

After the test, all CSS and JavaScript files can can be selected. They can be compressed and combined or stored in the Header and Footer area can be moved. Here, however, step step by step, instead of putting all files in one pot throw. After each step a benchmark should be performed again.

Hummingbird makes a very good figure, which is the prevention of render blocking of JavaScript and CSS. PageSpeed Insights and the visitors should be able to use Feel the difference clearly.

JCH Optimize

The use of the free JCH Optimize can be downloaded from may also cause render blocking to be prevented - even if the extension does not explicitly mention it anywhere.

JavaScript and CSS files can be combined, which at least leads to fewer requests to the server. This means that fewer resources to load the page, which can prevent render blocking.

If there is no advanced knowledge about CSS and JavaScript, the plugin can take over the different configuration options itself. To do this, you only need to check the basic options.

JavaScript and CSS are then used by JCH Optimize combined and compressed, which leads to fast loading times and less render blocking leads. If you want to have more functions, you can JCH Optimize Pro look at. The premium version of the plugin is available from 29 dollars and can also be used on any number of WordPress pages.

Speed booster pack

Finally a short look at the Plugin Speed Booster Pack. It is a rather simple extension, which nevertheless offers many possibilities for individual configuration.

In the settings of the plugin you can, among other things Move Javascript files to the footer area of the theme to enable parsing and the display of the visible area (above-the-fold) is not possible. to disturb.

CSS can be loaded asynchronously via another menu, where care must be taken here. It may well happen that the website then is displayed for a short moment without CSS instructions, which is certainly not gives a good picture. In this case the corresponding hook should be be removed.

Although the Speed Booster Pack often offers good results in render blocking, this can sometimes happen, that the requests to the server are increased by the plugin itself. In this In this case an alternative plugin should be used.

Bottom line: Render blocking of JavaScript and CSS

To reduce the loading time of the WordPress web page and for Tools like PageSpeed Insights or the Pingdom Website Speed Test better ...just a few minutes might be enough. Depending on... configuration of the website and the active plugins, it can be quite a bit take longer until the desired result is achieved.

Automatic solutions have the advantage that no special knowledge about CSS and JavaScript is required. Manual solutions cost more time, but are ultimately more effective and more efficient. If a comprehensive caching plugin is already in use, it is worthwhile to browse through the settings. Many such plugins offer the ability to prevent render blocking of JavaScript and CSS.

Pro versions are in many cases not suitable for render blocking simply not necessary, since the free versions also do a very good job do. The only real advantage is the support, which can be to take care of any problems that may arise or to assist in the removal of render block ...can stand aside.

About Christian

My name is Christian and I am co-founder of the platform fastWP. Here in the magazine I am responsible for the more "technical" topics but I like to write about SEO, which has been my passion for over 10 years now.

2 thoughts on “So geht’s: Render-Blocking von JavaScript und CSS verhindern”

  1. The only question is why your own page loads so slowly... An FCP of 3.1s and an LCP of 3.6s are not really fast - Google itself rates this article page with 51 (of 100) and states as one of the main points: "Eliminate render-blocking resources".
    - not a good reference if you want to tell someone something about how to accelerate your website 😉

Leave a Comment

Your email address will not be published. Required fields are marked *

en_GB