As most people will tell you in the industry, site speed is an important metric with ever increasing emphasis as an SEO ranking factor and the ability to increase conversions. Don’t believe me? Then just look at how much you could increase your revenue by shaving a few seconds off your site.
There are quite a few tools out there that you can use to check your site speed, with the most popular likely being Google’s own Page Speed Insights. Running this tool provides you with a score out of 100 in speed for mobile and desktop: the higher score the faster and ultimately healthier your website is.
As part of this, it also gives you a suggestion summary for elements you should fix such as reducing server response time or compressing images, which go into three categories: should fix, consider fixing and passed rules.
It’s all well and good to fix these issues, I’m not saying that you shouldn’t, but what I am saying is you shouldn’t trust these tools to give you an accurate insight into what a user perceives as a slow site. The reason? Because these tools look at the total time it takes to load your website, which isn’t the most important factor the Document Object Model (DOM) load time is.
Why is the DOM time more important?
The reason that you can’t solely trust the rest of the tools is because they measure how long it takes to load every single element on your page. This doesn’t give you an accurate depiction of how your website is performing, as there may be particular elements that take a long time to load but have no effect on the user’s ability to use your website, such as social share buttons or certain images.
In Google Analytics the “Avg Document Interactive Time” is the time taken until the user can first interact with the website despite it not fully being loaded. This is the most important metric, as once a user can interact with your website then they are much less likely to leave. Therefore, you need to ensure that your DOM time is as low as possible, particularly on your most important landing pages.
How to identify and improve DOM timings
You should be trying to aim for timings of around 3.0 – 3.5 seconds in document interactive time, but the first thing you need to find out is if Document Object Model timings are an issue for your website.
There are a few great tools out there that you can use to help you visualize and improve the document interactive time.
Google Analytics
Obviously GA is a must when analysing your DOM Timings because it provides you with your actual user’s data. To find your Document Interactive Time you need to follow this path:
- Behaviour
- Site Speed
- Page Timings
- Under the Explorer tab select DOM Timings
- Change the compared to Site Average drop down to “Avg. Document Interactive Time (sec)”
- Organise By Page Views
- Click Into individual links to find their timings.
Page Load Time Chrome Plugin:
I find this plugin extremely useful as it gives you a breakdown of load timings in milliseconds for every web page you visit. Importantly, it also gives you DOM timings so you can identify on a page-to-page basis how long it has taken to load. The unfortunate thing about this is that you can only see this from your perspective and not from the viewpoint of other computers or countries.
Web Page Test:
This is a fantastic tool that not only gives you a visual representation of load time by every 0.5s, but it also tells you the percentage of load completion and the time in which you can first interact.
It also gives you a breakdown of every single element on the page and how long it has taken to load. This is extremely useful as it details exactly what files are attempting to load before the DOM timing line (in green), so in essence these are the files that you need to essentially make a page load faster. Here is a brief snippet of the kind of information this tool gives you:
In summary, improving your DOM timings is the most important aspect to look at when analysing your website’s page speed, and it is the main timing you should be concerned about. Improving this timing will help you retain your visits and improve your overall conversion rate. Essentially, DOM = $$$$!