As the largest and most influential search engine, Google has a lot of say in the expectations on how businesses present themselves online. I’ve talked a bit about using Google’s PageSpeed Insight’s tool before and how to eliminate render-blocking CSS in above-the-fold content. Based on the reactions I received in my first blog, I thought I’d share how to pass Google’s eliminating render-blocking resources task to boost page speed performance. I highly recommend using PageSpeed Insights to audit which sources may be problematic for your page’s overall performance.
I will be showing how to pass a few common audit failures to help increase page performance.
Using the Preload Attribute for Critical Resources
First, here’s an example of the common way to load a CSS resource into the head section of a page:
<p> CODE: https://gist.github.com/thec2group-blog/242373c788c99e7a7308cff4dbdf34c3.js</p>
Now, here’s how you can preload that request. I’ve also added a noscript fallback for browsers blocking script:
<p> CODE: https://gist.github.com/thec2group-blog/0fee2987545548c83ffbcf96fd99b498.js</p>
We specified the preload value using the rel attribute, loaded the source in the href, used the as attribute to specify what type of resource we’re preloading, and then used the onload event to load the source when it’s ready. Again, preload attributes are great to start fetching resources we know that the browser is going to need soon.
Check out the following webfontloader code example:
<p> CODE: https://gist.github.com/thec2group-blog/9f8a57e22bca73d279863561f15d61e1.js</p>
Simply add in your custom Google fonts into the families array or specify your Typekit id to load the external font package.
NOTE: In this instance, it is possible that the rest of the page may render before the Web Font Loader is executed, which can cause a Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) so it’s important to have fallback fonts in your CSS.
Flash of Unstyled Text (FOUT) will occur when the font starts loading and immediately shows the text with the font-family fallback until the web font loads and the fallback font is replaced with the default font called from your CSS styles.
Flash of Invisible Text (FOIT) will occur when the font starts downloading and appears as non-existent until the web font loads and replaces that “invisible” text.
To account for this, I’ve added arial and sans-serif as a fallback for Google’s Open Sans font:
<p> CODE: https://gist.github.com/thec2group-blog/a366a62c227fb01853027c7758931bb7.js</p>
Using Async and Defer Attributes to Load Script
Async allows for the file to be downloaded asynchronously and then executed as soon as it’s downloaded. This means the file starts downloading while the HTML document parsers, and once downloaded, parsing is stopped for the script to execute and then continues parsing.
Using the async attribute to load a resource may look something like this:
<p> CODE: https://gist.github.com/thec2group-blog/ce99be21230c69d33a36df900201ea64.js</p>
Defer downloads the file asynchronously but is only executed after the HTML document parsing is complete. This means that the file starts downloading while the HTML document parsers, and even if finished loading, the file waits to be executed until after the HTML is fully parsed. When using defer, scripts are executed in the same order that they are called. Defer is a great option when a script depends on another script.
Below is an example of how we can use the defer attribute to load resources:
<p> CODE: https://gist.github.com/thec2group-blog/631fe1c71fb5bfa370cb38a1b0740cef.js</p>
When it comes specifically to combating render-blocking resources, these are all great methods to improving your overall site speed and performance. To get a good overall view of your site performance, I’d suggest following through the analysis Google provides with PageSpeed Insights and apply recommendations where necessary.