We take a brief look at render blocking and how eliminating render blocking can cause accessibility issues
If you run a site through Google PageSpeed Insights, there’s a chance that Google has warned you about render-blocking resources. It may seem like an easy problem to solve, but some methods of eliminating render blocking may also cause accessibility issues.
What is render blocking?
Render blocking is best understood when you understand how a web browser renders (reads) your website.
Very simply, a web browser reads your webpage’s code from the top, right down to the bottom of it.
Your website code may look like the following:
- Header meta
- HTML for your content
What are render blocking resources?
Images and videos are not render blocking resources, so don’t worry about these. Of course, it’s best practice to optimise any images you embed into your site. But optimising the delivery path of images is unnecessary.
The common ways of eliminating render blocking
With page load speed being important for SEO and user experience, it’s in everyone’s best interests to eliminate the render blocking resources. However, using the most common methods of render blocking will impact your website’s accessibility.
Why render blocking and asynchronous rendering is bad for accessibility
When a screen reader of a visually impaired user initially reads a website, it does so in the same fashion that a web browser does so. It reads the elements of the page in a top to bottom fashion.
Crucially though, a screen reader relies on the HTML to deliver the structural elements of each page and identifies where the user can skip to using their assistive technology.
Render blocking resources are bad for accessibility
For example, your site layout may be like this:
- HTML for first part of the page
- HTML for the rest of the page
- HTML footer.
Asynchronous rendering is bad for accessibility
How to eliminate render blocking and keep your website accessible
Using deferred rendering
This allows for a screen reader to read the whole page’s HTML without it pausing or coming across any blockers.
Adhering to best practice
Instead of implementing scripts across our website without thought, we should always ask “Is this what the user needs?” and moreover, we should ask “Will this be accessible for everyone?”