Have you ever thought about how to improve page speed for your website? Confused about what all the metrics and data available to you mean? Your website has to impress browsers in a fast moving, performance-driven world. Is it up to speed? And I mean literal speed.
Your website’s “page speed” is the speed at which your website loads its content so users can see it. It’s a strong deciding factor in whether they’ll stay on the site and whether they’ll be back for more. We’ve all experienced a slow loading site only to navigate away due to the lag, and you can bet your own visitors will do the same thing.
Getting your site speed increased can be done in two ways.
- Install a whole heap of plugins and scripts that may appear to do the job, but only put more load on the server and destroy image quality.
- Understand what is loading and when, and executing based on fact, not an assumption.
I’ve always said;
“Adding more code and scripts to make less code load is adding more water in a bucket that has a crack in it – You’ll never properly fill the bucket.”
It’s worth the effort of getting this right. Taking the time to understand everything can really. So let’s dive in.
What is Google PageSpeed?
Google picks obvious names, so you don’t even have to guess what the PageSpeed Insights tool is for. It was launched by Google to help website owners gauge their own page speeds.
To test your “PageSpeed” visit the URL: https://developers.google.com/speed/pagespeed/insights/
Simply type in your URL and Google will test your page.
What feedback will you get?
You’ll see a percentage score of how well your website follows best practices. Secondly, you’ll get evaluated on how fast your website:
- Loads content above the fold
- Loads a new requested page’s content
You’ll be rated as either Fast, Average or Slow.
After getting your ratings, you’ll be given suggestions as to how to make your score better for PageSpeed. While fairly insightful, providing good information, PageSpeed doesn’t give you a full range of metrics to understand what to do it, and why to do it.
What is YSlow?
Another method is using Yahoo’s YSlow. http://yslow.org/
This is a tool that measures your page speed but also tells you how to improve it. It uses Yahoo!’s guidelines of how a high-performance website operates.
You simply have to make sure your website complies. It’s easy because the tool has a checklist of 23 items. Analyze and fix them on your website & you’ll increase your traffic.
All seem a little too confusing so far?
If you’re scratching your head as to what metric you’re meant to follow, you’re actually not alone. Many people guess what to optimise their website for and what really matters. Developers or designers can really get caught up on overall load speeds and big green letters and numbers found on the likes of GTMetrix, a powerful tool that provides you with so much information.
So, what should we be focusing on?
Understanding GT Metrix
Measuring page speed can be frustrating. Different tools may give you different feedback. Why? Because they use different algorithms and measure different site speed factors.
That’s why you need GT Metrix. This tool combines the power of Google PageSpeed and Yahoo! YSlow. Together these give you the most accurate rating of how users experience your page.
Below is what comes up on the Page Details in GT Metrix:
Fully Loaded Time – Not the full story
For a long time tools such as GTMetrix measured pages’ loading times according to “Onload time”. This is when most content is loaded such as images and CSS. But it doesn’t take into account some JavaScript features.
For this reason, measurements are now mostly done according to “Fully loaded time”. The downside of this measurement is of that if your website requires a lot of scripts in the background to be loaded after the site has loaded, your load time rating is going to be bad.
Why is Fully Loaded time not the be all and end all to improve load time?
Because user experience comes first, and background scripts may be running the background without the user even realising, you could have a big number, but the user experience could be perfectly fine.
What are some examples of this?
- Extensive eCommerce Websites
- Extensive marketing sites with a lot of tracking software
- Web Applications with user profiles like social media, bank applications, etc.
These sites all have very fast loading sites, but full loading times could be off the chart. If you’re the nosey type and have scanned real high-end websites, you might find that a lot of the big guys will have slow “Fully loaded Times”. Even some of Googles sites have a bad Full loaded time. This may make you puzzled and telling yourself, “I could have done a better job!”
Well, there’s a reason why. If these websites cut back on all the scripts needed, they’d have a website that does not work at all, killing the user experience completely.
Timings – The full story of load time.
This is where you can really understand what the user is experiencing and what to really focus on. Below is what we believe are the most important timings to focus on in order to really keep your site speed blistering fast!
See Below – Our Websites Fully Load Speed was 5.5 Sec (Image Above). But it takes 1.1sec for the user to see it. Blazing Fast!
TTFB – All about The Server
You want your page to start responding as soon as possible. This is determined by the TTFB (Time to First Byte). It’s the time from the moment a user makes a request, to when the first byte related to that request is received.
In simple terms, the first moments your website’s server responds to the browser. You could have a 1-second loading website, only for it to be spoiled by a 3-second loading server. This is really important to make sure you understand whats taking longer to load, the website, or the server.
This is mostly related to technical aspects and can easily be improved:
- Use the best application codes
- Use caching so future activities load faster
- Upgrade outdated server hardware
- Configure web servers
First Paint – What us humans start to see
Remember, Google monitors how users experience your website. If they navigate away quickly, it will ruin your ratings.
Even if your page full page loads slowly, your visitors may stay on the page as long as they know something is about to happen. This is why “First Paint” is very important. It’s the moment when rendering on the page starts, even if it’s only showing a plain background. Ideally, it must instantly show content.
Contentful Paint – What us humans can use
If your First Paint timing is optimal, it will sync with “Contentful Paint”. This is when the content fills the page. This is the reason your visitors opened your site so it must happen quickly to provide them with an optimal user experience.
This number we can expect to be the number that you can rely on for the User Experience. If your Fully loaded site is 5 seconds, but contentful paint is 1.5 seconds, this is the time you’re users can start browsing your website.
Waterfall – The pieces to solve the puzzle.
The waterfall is a visual representation of what loads and when. This is the WHAT in making your website load faster. You’ll visually get to see how long the website takes to respond from the server, which files, JS files, images etc load up and when. You may find unnecessary scripts, plugins, images all being loaded, and it will tell you how long it took to load. If you had a plugin loading that was taking 1 second to load that you’re currently not using, you’d find it here, and could shave 1 second off your timings. 1 whole second!!!
It’s also called a waterfall for a reason. A lot of elements don’t load until the element before has loaded. Meaning, a 1-second useless plugin could potentially cause other elements to load up faster.
Putting that all together.
So as you might start to see, the main Load Time reading may not necessarily be a true indication of what your user is experiencing. They might see your website even seconds before it is “fully loaded”. However, if your contentful paint timing is high, then you should reconsider numerous tasks to execute in order to fix up you’re websites load times.
Actions to improve Page Speed
This is when you start to look at the recommendations of what GTmetrix provides to improve page speed. Some of these include:
- Optimize Images
- Minify Javascript
- Defer Javascript
- Enable GZip Compression
- Minimize redirects
- Avoid Bad requests
- so much more.
A full write up on how to optimise for each recommendation is coming soon.
Wrapping up
Your first step is to realize the importance of fixing your page speed. These facts prove it’s not difficult to find the source of your problem and get it right. So will you take the second step and take action?