Having your website load quicker than the human eye is every website owners goal but how would you test this as accurately as possible? I will explain the tools I use to test websites.
Understanding the issues
Before I start optimising the website, I want to understand what problems I may be faced with. Understanding the cause of a problem is a the quickest way to understand how to fix the problem.
I use a few different tools to get an understanding, these include:
All of the above are websites / apps used to measure a websites load time but they all have different uses (for me).
Common Speed problems
Some of the most common issues I come up against are:
- uncompressed images, css and js files
- no server and browser caching
- video files = the website hasn't been compressed using Gzip or Brottli
My main goal when optimising a website is to make the website as small as possible without changing the content. I am paid to make the clients website faster and in most cases they don't want to remove functionality from their site even though it may affect their speed website. This guide doesn't go into optimising the server for speed purposes.
Find out the pain points
My first step is to build a list of the issues I need to look at, I will fire up each of the tools above to build my list of things to do.
My first test is using Pingdom, I don't recommend it's speed score but I use it for the UI of showing assets and page size.
Above are my results, I found out the following from the test:
- the website is a beastly 3mb in size and has 165 assets
- there is no minification or combining going on with the css and js
- the website has external assets (facebook, twitter etc) which can be preloaded.
- the websites images have been compressed quite well
- the website has no browser caching enabled
The other test I use is webpagetest which is one of the most accurate speed tests available, it has tons of features from selecting location, connection speed and browser used. By default it does 3 concurrent tests to get a realistic speed.
As you can see we get a median of the 3 tests and I had 6.5 seconds load time for document complete and 9.6 seconds for fully loaded.
Google defines these terms as follows:
Document Complete: The metrics grouped together under the Document Complete heading are the metrics collected up until the browser considered the page loaded (onLoad event for those familiar with the javascript events). This usually happens after all of the images content have loaded but may not include content that is triggered by javascript execution.
Fully Loaded: The metrics grouped together under the Fully Loaded heading are the metrics collected up until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads.
Optimising the website
I use both results as a guide, I will complete 1 task (such as minifying css) and run both test again to see what impact the task had on the results from a speed and statistic view. My main aim is to make the website faster but also leaner, the smaller a website is, the quicker it is to load especially on mobile devices. Depending on the website I would aim for the following statistics:
- Less than 3 seconds document load time
- Less than 1.5mb page weight
- Less than 80 combined assets
But how do I make the changes you ask? I will go into that next time, hopefully this quick guide has given you an understanding on how to test your website and what to look for when using testing tools.
Top comments (0)