How Render Blocking Above the Fold Slows Page Load and Costs You Visitors

Are your site visitors waiting too long to see what they came for?

It’s likely you have too many render-blocking elements loading prior to the main content.

Instead of waiting to see something, visitors just bounce and leave your site.

And that costs you money.

Discover what render-blocking elements are and how to reduce them on your site for faster page load time.

How Much Render Blocking is Costing You

Think about all the work you do to create great content and drive traffic to your site.

How much does that cost you to do?

Well, none of it pays off if folks leave your site before they ever get to see your great content.

When one lifestyle blogger client first came to me, we checked her Analytics.

She was getting 10k visitors a day only to have 80% of them leave before they saw anything.

Those visitors bounced because they were just sitting there watching a little wheel spin on a blank screen instead of engaging with her great content.

She missed out on:

• Social media follows and shares
• Newsletter signup
• Payment via ads being clicked
• Building a tribe of loyal followers

In other words, folks left without any engagement and never came back to her site.

And that meant she had to find 8,000 new visitors every day.

That’s working too hard for your traffic!!!!!!

You need to plug that leak pronto!

And render-blocking is a big culprit.

What is Render-Blocking, Anyway?

Simply put, it’s anything that delays the important visual elements on your site from displaying, or rendering.

Your content text and images are visual elements.

And that’s what folks came to your site to see.

Instead, they are waiting for invisible things to load, or seeing unimportant stuff, like social media icons and ads and such.

The Order Elements Render Matters Like Crazy!!

Here’s how your blog post loads in a visitor’s browser.

The DOM is created.

Your WordPress site is made up of a bunch of files, like your header.php, sidebar.php, content area, footer.php, etc.

The host compiles all of that into an HTML document that tells every element when and where to load. That document is ready and delivered to the browser so it knows what kind of file types to expect.

That’s called the DOM point.

Theme CSS and JS Load First.

At the very top of the HTML doc is your theme’s CSS file. That Cascading Style Sheet tells the browser about your theme’s colors and fonts and such.

And then any critically important JS (JavaScript) files your theme needs are loaded next.

Those must load first so the browser can render the basic look of your theme.

Too Many Render-Blocking Elements at the Start

What loads next should be something your visitor can see, like your logo, or the title of your post, or maybe even the first image in your content.

Unfortunately, other non-critical site elements think they need to load first, like:

• Plugin CSS
• Plugin JS
• JS for ads
• Social media icons
• Ad images

This is where you get into Render-Blocking trouble.

We can’t see any of that invisible CSS and JS. Those things are not visual elements.

During site audits I’ve seen 40-50 such elements load before the first image.

And they took 10-15 seconds to do it!!

Who’s going to watch a little wheel spin on a blank screen for that long?

Nobody!!

And that’s why sites with too many render-blocking elements at the top of the load have such a high bounce rate.

Folks just leave before they see anything meaningful.

Above the Fold Rendering

All those non-critical elements should wait until the more important visual content at the top of the page has loaded.

On every device, there is a “fold” point, meaning the content you can see before you have to scroll.

In technical terms, it’s called the on_load point.

You definitely want your most important visual content to appear quickly in that “above the fold” section, and let the rest of those non-critical elements continue to load below that fold point.

By the time folks are ready to scroll, the rest of the page has loaded, including all the rest of those non-critical CSS and JS files, and images.

FYI, there is also an “engage point” in the load that signifies when a visitor can interact with your page, like scrolling it. That should happen fairly quickly too.

How to Fix Render-Blocking Above the Fold

So, how do you get rid of all that render-blocking stuff, especially at the top of the load?

You need to do 3 things, in this order.

Reduce the page weight.

Get rid of any plugins that have a high number of CSS and JS files and fonts.

Either delete them entirely or swap them out for lighter plugins.

This will also save you on the number of requests, or elements that have to be loaded overall.

And that will reduce your page weight.

This is where a site audit comes in super handy.

You will clearly see the plugins that are dragging down the site and be able to test how much benefit you get by deleting or swapping them.

Otherwise, you’re just throwing darts in the dark.

Minify

This processes squishes all site elements down into a smaller package for travel.

Did you watch the Harry Potter movies?

Remember in one of the later movies how Hermione carried a tent and tables and everything they needed in her bag?

Yep, that’s what minify is like.

Minify settings at a CDN like Cloudflare are generally safe and won’t break your site. But they don’t really bump up the speed much either.

Local caching plugins, like WP Fastest Cache and WP Rocket, also have minify settings, but they are more aggressive. They usually won’t break a well coded site either, and they give you more of a speed boost.

Combine

Local caching plugins have settings to help you lump as many CSS files into one as possible.

They do the same for JS files.

But there is a catch.

Combining could break things on your site.

That’s why you need to eliminate as much of the render-blocking elements as you can first.

That’s also why you need intelligent help from these plugins so that they help you identify critical elements to exclude so everything still works.

Both the premium version of WP Fastest Cache and WP Rocket have this intelligent help, and most often, it can detect what will break.

But, they are not 100% fool proof and you may need to hire help with this task.

There’s another catch.

If your site is HTTPS, you’re making use of the HTTP/2 super highway for delivery.

It is bringing in your site elements in parallel, which is faster.

So, sometimes you actually lose a bit of speed bringing in one big combined file compared to a bunch of smaller files that could be delivered simultaneously.

Think of it like one wide load taking up more lanes to deliver one big thing compared to a group of compact cars on all those lanes delivering bunches of smaller things.

Again, this is where you need a speed pro to help test and modify the settings and tweak them to perfection for you.

Plugins and Sites Are All Different

Each caching plugins does the combine and minify differently.

And, each site has different restrictions, like e-comm, member sites, and sites that run ads.

Plus, if you use a CDN like Cloudflare, the settings between it and the caching plugin must be coordinated.

So, you may need help choosing the best plugin and settings for your needs.

See What’s Really Going On With Your Site

There’s a LOT to getting ultimate speed on your site.

But that DOESN’T mean it has to be hard or expensive to do.

I have yet to conduct an audit where we didn’t find a ton of low hanging fruit that was easy and cheap to fix.

Sometimes all it took was swapping out a few plugins and better cache settings everywhere.

Get an Audit

In your site audit you’ll receive a 20-30 page report and a 2 hour live, non-geek-speak session to go over it.

You’ll clearly see the speed issues on your site.

And you’ll be educated so you can make good decisions about them too!

Want to run your own speed test first? Here’s how to run an accurate speed test.