As a web developer, you’re probably familiar with tools like Google Analytics, search ranking factors and conversion rate.
They all give you a good idea of how well your site is doing but they don’t really tell the whole story.
One of the most important SEO ranking factors that’s often overlooked is page speed.
Once you know how to measure your page speed, it becomes an easy way to improve the user experience on your site and make sure search engines are giving you their full attention as well.
This guide will show you exactly what page speed is and why it matters so much for web developers.
It’ll also show some handy ways to test yours using free online tools including Google Page Speed Insights which comes directly from Google itself!
What Is Page Speed?
“Page speed is the total time required to load a web page, which includes network latency and the time it takes for HTML code to start loading. Your first visitors are extremely critical—they expect pages to load in two seconds or less. If your site doesn’t appear immediately, visitors may leave without ever looking at your content.” – Google Developers
This can be measured by tracking events that occur when downloading these files.
For example, “onload” represents the moment where all three have been loaded 100% completed .
It’s worth noting that YouTube will actually stop video playback if it takes longer than 5 seconds to start.
How Google Measures Page Speed
Google uses two main metrics to measure page speed for their search engine:
First Contentful Paint (FCP) and DOM Content Loaded (DCL).
First Contentful Paint (FCP)
First Contentful Paint means the moment where users can see visible changes on screen for the first time, basically when your content appears .
This typically occurs after HTML has loaded but just before anything else has finished loading.
This metric represents how quickly an initial screen of information will show up in the browser – that’s key because Google measures this using Chrome using what’s called a “Talos” test .
The good news is you don’t need to do anything yourself but your web developer should know about this.
DOM Content Loaded (DCL)
DOM Content Loaded (DCL) means the moment when all of your content has finished loading .
At this point, users can click around and see every part of your website. Google measures this using Chrome with a “Speed Index” test which you can read more about here .
You’ll also need to know the total load time for your website from start-to-finish because it’s what Google uses to compare against other sites in search results.
This is commonly known as “Waterfall” but you may have seen some different variations already.
With that said, having a high page speed isn’t always good – sometimes it needs to be fast not instantaneous .
It’s important that your web developer knows how to find a balance between these two.
Google Page Speed Insights (GPSI) is a free tool which suggests ways to improve your website’s performance .
This will be an important tool for you because it can tell you if your page speed is too slow and what issues need addressing.
You’ll want to check no matter how fast or slow your website currently is.
Google has a few other tools to help with SEO and we’ll also use the Mobile version of your website as a tool, so keep reading.
Your site’s mobile speed will affect search rankings because Google looks at this as an overall picture of what users experience when they visit your site.
Since most people access websites on their phones these days, you’ll want to make sure your website is performing as best as it can.
If you don’t have a mobile version of your site, this is where Google will fallback to when users visit your website on their phones.
If Google doesn’t find what it’s looking for (your website in its original form), then it may stop crawling and indexing your site, which means you’ll lose out on some search rankings .
How can I find my page speed?
The best way to check this is with a tool like GTmetrix and the waterfall view which you should be able to see your loading time from start-to-finish.
Just put in your URL and wait for it to load. If you look through this menu, you’ll see that it will also show you your speed index as well as your load time.
You can also check this with Google’s own PageSpeed insights tool which is built into its Chrome browser.
You should run this on a regular basis because it can alert you if any major issues arise and help make suggestions about how to improve your site’s performance.
For example, if you’re website redirects too many times, it may affect your page speed.
The web is ever changing. Technology keeps growing, and with it the way we access webpages.
Above all else optimizing your webpage speed affects how Google ranks your page for its search engine results pages (SERPs).
Page speed is an important factor that Google mentioned in its SEO Starter Guide.
It’s also listed on their official blog as one of many factors which make up a good ranking.
Google knows users are impatient; more than half say they will leave a site if it takes longer than 3 seconds to load!
According to Google, their algorithm ‘Speed’ accounts for around 1% of search rankings.
So don’t underestimate this tiny piece of code but let us take you through some simple to check yours and do some easy speed improvement suggestions.
How To Check Your Page Load Time?
The easiest way to check your page load time is by using Google’s PageSpeed Insights .
All you have to do is insert your website URL and within a few seconds, it will show how fast your page loads on average across desktop and mobile devices.
The tool also gives you an overall score along with ‘Suggestions’ for better optimization. Using this tool can help you figure out which elements are slowing down the speed of your site, whether it is images or scripts etc.
Page Speed Overview For Our Blog
When we checked the PageSpeed Insights for our site, it showed an overall score of 79/100.
A note on the bottom of the page said ‘Your page is performing well , but optimization can be improved’ .
Some simple optimizations are suggested which are easy to fix.
Suggestion 1 – The first suggestion was ‘Enable Compression’ .
This means that Gzip compression needs to be turned on so that clients’ browsers can send compressed requests to your server instead of uncompressed requests.
The image below shows how this can work even if your browser does not support gzip by simply with a plugin.
Suggestion 2 – The second suggestion was ‘Serve scaled images to users, based on their viewport size’ .
This is important for webmasters so that they could embed responsive images in the markup of their page instead of linking to it externally.
You can find out more about responsive images here .
Since our website has a fluid layout, we know which device width will probably be used by most of our visitors and therefore chose the maximum width (960px) while adding the img tag.
The site then automatically scales down the image for smaller devices.
This way, you get high-quality photos without slowing down your page load time! Using this method also allows Google bots to easily crawl all your images.
You get the best of both worlds because you can have large, high-quality photos for devices with a larger screen and smaller images for mobile users.
Suggestion 3 – Another good practice is to use compressed images so that they load faster on visitors’ devices while keeping the quality at a decent level.
The downside of compressing your images too much is that it can reduce their visual quality which means it may not be ideal when working with logos or other important graphics.
What this means is that scripts in your head section (which are usually used to load things like Google Analytics) should be placed at the end of tag instead of inside the header.
Google recommends you use asynchronous scripts instead so that they are not blocking other resources on the page.
The reason for this is that when you have multiple external scripts being loaded, it can block DOM construction and therefore delay the time to first render of your page.
So load scripts asynchronously by using either async or defer attribute in script tags.
<script src=”tutorials/jquery-3.1.0.min” async></script>
Making sure your website loads quickly is now an important part of SEO.
The Google algorithm factors in page speed when ranking websites.
To achieve high rankings, you need to make sure pages load as fast as possible, and reduce the number of requests made by a browser.
To make matters worse, there are many elements that slow it down, like images (a lot of them), videos (again – a lot of them) and third party widgets that increase page size without adding much value.
And don’t even get me started on mobile sites!
The easiest way to speed up your site is to optimize images for web use. Most people tend to leave their images at maximum resolution which makes file sizes unnecessarily huge.
An image should have at least 1,000 pixels of width and height to be used on a website without losing its quality.
I usually try to keep files sizes below 100K, but in some case it about 300x300px so I didn’t bother reducing it further once you start playing with numbers your picture can quickly become fuzzy or pixelated.
The thing is, if you upload images from your digital camera they will most likely be way too large for web use.
mine are usually 3-5 MP which makes an image 4500 – 8000px wide – that’s not going to work on the web.
I’ve been using a program called TinyPNG recently to compress my images without compromising their quality.
The program allows you to upload multiple images at once, so I just compressed all of them and went back to work.
If your website is WordPress based, there are plenty of plugins that help speed up page load times .
Most of them focus on reducing the number of requests made by a browser.
If you have a really big site that gets a lot of traffic – you could consider purchasing an API CDN service like MaxCDN which will host your images at a speedier location.
I hope this article helped you learn something new about page speed in SEO – if there are any questions or comments please let me know in the comment section below!
Bottom Line :
Page Speed is still an important factor in SEO and following even some basic suggestions would help your website perform better in SERP.
You can use Google’s PageSpeed Insights Tool to check the performance of your website across different devices.
If you need any help with optimizing your website for search engines, please reach out to us through our contact page or simply send us an email.