Call 03332 207 677

Jack Evershed

Optimising Resource Structure For Perfect Site Speed

28th Jul 2015 SEO 4 minutes to read

Optimising Resource Structure For Perfect Site Speed

Site speed is possibly my favourite topic to address, because there always seems to be something to fix.

I’ve noticed that there are quite a few misconceptions floating around, such as “stick the JavaScript in the footer”, or “put the content above the fold” and a lot of the time, a bit of minifying and image compression is the best you’ll see.

Here, I’ll explain some concepts and best practices that can be applied to any website before the more common site speed fixes, that in theory, can get you a 100 pagespeed score.

Perfect Site Speed

The first thing to note is that you’ll need a bit of HTML and CSS knowledge to implement these tips, as the structure of your website will be altered.

Critical Render Path

The render path is the way in which a browser downloads all of a page’s resources and parses them.

The ‘critical’ portion is comprised only of the resources that are necessary to load the ‘initial’ view, which is where Google takes its page speed measurement.

The ‘initial’ view is the above-the-fold content and you want this to render first.

Optimising this correctly can knock seconds off your load time, keeping your users (and Google) happy.

Let’s look at how browsers render files:

  1. The browser downloads the HTML file.
  2. The browser then reads the HTML and sees that there is a CSS file, a JavaScript file and an image file.
  3. The browser starts downloading the image.
  4. The browser decides it can’t display the page without getting the CSS and JavaScript first.
  5. The browser downloads the CSS file and reads it to make sure nothing else is being called.
  6. The browser decides it still can’t display the webpage until it has the JavaScript.
  7. The browser downloads the JavaScript file and reads it to make sure nothing else is being called.
  8. The browser now decides it can display the webpage.

You can see that elements of the page are loaded sequentially, and every time the browser sees a resource, it has to stop loading and read that file. These are called DNS Lookups.

As you might already know, larger sites have tons of these files in no particular order; being called and therefore blocking page load.

The idea is to minimise these DNS lookups, and remove or defer those that aren’t needed to load the above-the-fold content.

The solution?

Consolidate Your CSS

Consolidate your CSS into one file.

This means that your site wont be making multiple requests to your server whilst your user stares at a white screen.

It is as simple as copying and pasting code from one stylesheet into another; just make sure the code is in the order you want to load – remember the ‘C’ in ‘CSS’ stands for ‘cascading’.

Inline Critical Portions

This is where things can get a bit hairy.

To totally negate render-blocking elements, you need to put the styles and JS required for the initial view into the HTML. This will mean no DNS lookups are required for your initial page load.

You’ll need to work out what you should take out from your external scripts to inline, as this is different for each individual site.

Inline CSS for Perfect Site Speed

Defer JS

Separate all your JS into two groups; one for JS that is needed to render the page, and one for all your extras.

It should be fairly easy to determine what you don’t need for the page to render. The sort of elements/scripts you might put in the defer file include Google Analytics snippets, third-party social sharing buttons, animations, etc.

Once you’ve established which JS is not required for page load, you can do the same as the CSS and consolidate it into one file.

You can use this great script from Feed The Bot to then load those elements only after the page has loaded. Make sure you put it just before the closing body tag (</body>) and replace ‘defer.js’ with whatever your file is called.

<script type=”text/javascript”>
function downloadJSAtOnload() {
var element = document.createElement(“script”);
element.src = “defer.js”;
if (window.addEventListener)
window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

Once all this is done, you can go ahead and do the following:

  • Use browser caching
  • Compress resources using GZIP
  • Minify Resources
  • Enable Keep-Alive
  • Use CSS image sprites

In theory, your site should then be as fast as it can be!

In an ideal scenario, you’d have one CSS file, and two JS files, with relevant portions from both of these inlined to remove DNS lookups from the initial view. Having a large site or a CMS makes this a bit more difficult and every website is different, so try and think of these concepts as targets rather than methods.

I hope you have found this useful, and don’t hesitate to let me know your thoughts in the comments section below or by contacting me via @Jack_Evershed.

Share this post

Jack Evershed
About the author

Jack Evershed

Straight-talking Jack is a bit of a know it all so be prepared for an all-out banter battle if you challenge his common knowledge – though he would make an awesome pub quiz partner. The whiskey-drinking, laid-back geezer will have you cracking up with his dead pan delivery and telling you exactly as it is.

Getting Started With Search Engine Optimisation: An SEO Guide

Your Free Whitepaper

40 pages of goodness

SEO Whitepaper Cover

1 Comment

What do you think?

Digital Ideas Monthly

Sign up now and get our free monthly email. It’s filled with our favourite pieces of the news from the industry, SEO, PPC, Social Media and more. And, don’t forget - it’s free, so why haven’t you signed up already?