Blog

Page speed refers to the load time of a specific page on your website or blog. It is similar to site speed, but when looking at page speed you focus on specific on-page attributes and optimise their performance solely. Whereas site speed is the speed at which your site loads as users go through it — from the product page to the basket, checkout and confirmation page.

The measurement begins when a user clicks on a URL and stops when a web page is fully loaded.

How important is page speed optimization?

It’s really important that websites load as fast as possible and has increased to become one of the most important ranking factors after Google’s Core Web Vitals update in May 2021. According to Neil Patel, 47% of consumers expect websites to load in two seconds or less, and 40% of users will abandon a page that takes three or more seconds. That might sound like a surprising statistic, but page loading time is a really important part of any website’s user experience and with many websites competing with each other, it makes complete sense!

So, if you want users to view your website the bottom line is that it needs to load quickly.

What is the best tool to test the speed of a website?

To figure out how well your website is performing you can use Google’s PageSpeed Insights. It’ll accurately evaluate your site speed, providing you with a colour-coded score of between 0 (red) and 100 (Green) across both the desktop and mobile versions of your site. The score denotes how your website is performing as outlined below:

• 0 to 49 (slow): Red
• 50 to 89 (average): Orange
• 90 to 100 (fast): Green

Cloudflare also offers a free speed test tool — which is similar to Google’s PageSpeed Insights and is simple and easy to use. It highlights how your website is performing, in terms of speed, by breaking down the key metrics. Typically, the score will be rated using a series of metrics which can be seen below:

First paint: the first non-blank paint to be seen on a screen.

First contentful paint: First contentful paint is when the first piece of content appears. This might be part of the navigation, the search bar, some text or part of an image.

First meaningful paint: is when the primary content on a website becomes visible. This means that the users can determine if the website is offering what they are looking for, or not.

Time to interactive

Time to interactive is the amount of time it takes for the page to become fully interactive.

DOM content loaded

The DOM content is loaded, this is when the HTML is completely loaded and parsed. So some really good ones to keep an eye on and just to be aware of in general.

Is your website falling between 0–49? Or even < 89? Then we can help.

Ways to improve page speed that actually work…

Reduce Server Response Time

The amount of time your DNS lookup takes can negatively impact your page speed. A DNS, or domain name system, is a server that holds numerous IP addresses and their associated hostnames.

When a user types a URL into their browser, a DNS server translates that URL into the IP address that identifies its online location. A DNS lookup, then, is the process of finding a specific DNS record that is stored in the server’s database. So when a user types in a website URL such as codeminers.co.uk your ISP will perform a DNS lookup to find the IP address associated with that URL.

One of the biggest factors in how quickly your page loads is the amount of time your DNS lookup takes. You can check how long this process takes by visiting My Tool Box — simply enter your website URL and click go. You can also use this website to gain a comprehensive Domaine Health Report which outlines Errors and Warnings.

Reduce Widgets and Plugins

If your site is run on WordPress, it can be easily customised with widgets and plugins. Unfortunately, some of these add-ons, although can make your site user friendly, it can cause havoc on your sites page speed. That’s basically because the more widgets and plugins you use on your site, the longer it takes to load them. That’s why it’s crucial to ensure you only have the ones you really need. It’s also important to check the reviews and the owner of the widget/plugin before you add it to your website, ideally, you’d want to only use these add-ons from reputable sources that have been recently updated to remove any bugs.

Run a Compression Audit

Running a compression audit is something you should be continuously going forward. As mentioned above website data size can have an enormous impact on your websites speed, so an audit will help you identify the large file culprits and eliminate or condense them — if possible of course. If they are essential you’ll want to make sure the files are as small as they can be, without sacrificing quality. It’s simple: the smaller your files and image, the faster they’ll load — as your overall load time will be significantly lower. An overly bulky website is a no-no, you want your website to be as streamlined as possible so everything is fast to download.

To get you started you can use the website GIDNetwork to run a compression audit. All you need to do is enter your website URL and press “Check.”

You’ll then see the following:

Enable Compression

After your compression audit, it’s a good idea to enable compression for all files going forward. This means that files uploaded to your websites CMS will automatically be compressed to the smallest size possible — without the quality being altered. To do this you’ll need to use a software application — we suggest using Gzip. This is a file format and software application that locates code in files, then temporarily replaces them to make the files smaller.

If you’re unsure whether your site has Gzip enabled, you can head to https://smallseotools.com/check-gzip-compression/ to check. Just enter your site’s URL with https:// before the www. and hit check compression then you’ll see this:

Depending on the Content Management System (CMS) being used, it is possible to install plugins that compress new and old files. If you are working with a WordPress site there are plugins available for just this — check out WP Rocket and Perfmatters.

Cloudflare also offers the ability for users to apply gzip and brotli compression to some types of content to help speed up page loading time.

Enable Browser Caching

Browsers cache a lot of information (Images, JavaScript files, and much more). Why? So that when a visitor comes back to your site, the browser doesn’t have to reload the entire page — it reloads from ‘memory’ meaning the load time will be much faster. Google has more information about leveraging caching here.

Reduce Image Sizes

Having a website filled with many large images, although it can look visually appealing, it can be a disaster to your sites overall performance. If images accumulate up to tens of thousands of megabytes, even a high performing server would struggle to render them within a reasonable time frame. You should always aim to avoid large images where possible, if they are essential to demonstrating one of your products or services, look to compress images into their smallest possible size. It’s crucial to test your websites speed whenever you add or change the content to ensure no major issues have arisen.

Images can also play a major role in your site’s speed. When images are very large they can often result in high page load times — but removing them altogether is not an option. Images can be valuable to storytelling and to showcase your company’s products and/or offerings. Especially when 66% of consumers said they wanted to see at least three product photos before buying — demonstrating that images are necessary to overall performance and success.

To compress images you can use many websites such as Compress Jpeg or Image Compressor. These are brilliant tools that can reduce your images to the smallest size possible while keeping the required level of quality.

Optimize CSS Delivery

The CCS holds the entire style requirements for your page. In most cases, your website will have access to this information in two ways, through an external file, which is loaded before the page renders, or inline, which is in the HTML document.

As a general rule, it’s a good idea to avoid including CSS in the HTML code. This will allow you to get a cleaner code, especially if you put all of your CSS in your external stylesheet. This will reduce the likelihood of any duplications occurring, along with reducing the size of your code overall making it quicker to load!

It’s also wise when setting up your styles, to only use one external CSS stylesheet, that’s because additional stylesheets can significantly increase HTTP requests, which will again impact page speed. To check how your CSS is currently set up, you can use a CSS delivery tool to find out — simply enter your URL, and you’ll find a tailored report with all of your external CSS files.

This delivery tool is great and will also allow you to see where that external file is located, as well as any inline CSS on the page and the total size of your CSS files.

Having more than one external CSS file adds to your page load time, this might be unavoidable, but in many cases, it’s best to combine them. Then your visitors’ browsers only need to download one CSS file instead of multiple, which reduces the overall number of requests and decreases page load time — significantly.

If you still have render-blocking issues, you can follow Google’s recommendations for optimising CSS delivery.

Minifying and compressing CSS

Your HTML, CSS, and JavaScript files are extremely important, they determine your site’s appearance, and add to the number of requests your site makes every time a user visits it.

You can reduce this number by minifying and combining your files. This reduces the size of each file, as well as the total number of files.

If you used a templated website builder, then getting your files reduced could be essential to overall performance. There are many templates which, although are easy to use and implement can cause the code of the website to become messy, which can slow your site considerably. That’s where minifying comes in, minifying a file involves removing unnecessary formatting, whitespace, and code. It makes the code as small as possible without impacting on the essential aspects which are required for a website to render. To do this you can use a CSS minifier.

But don’t let that put you off templated websites, for a full rundown check out our blog post Custom built Websites vs Template Websites.

Reduce Redirects

Redirects are often necessary when you move/delete pages, and are the best way to eliminate issues with broken links. Although they have their purpose, they can also be detrimental, having too many can create additional HTTP requests, which can negatively impact page speed, especially on mobile devices. It’s best to keep them to a minimum, or if possible remove them entirely.

Reviewing redirects is something that should be done along with your other Important Website Maintenance.

If you are unsure whether your website has redirects or not, the best place to start is by using Screaming Frog which will analyse your website to identify all of the redirects currently on your site.

The scan will run and come back with a report, you will want to sort the feedback by ‘status code’ to view all the 301 redirects on your site. Once you have this information, you will want to go through them, one by one to determine their purpose. Are they accomplishing anything? If not remove them. They will be creating unnecessary requests, which can slow down your load times.

Get a Content Delivery Network (CDN)

A CDN works to accelerate your website by caching its files in servers around the world. It doesn’t matter where users are from — EU, Asia, North America. They will automatically be served from the nearest location with the fastest speed possible via proxy servers.

This is a great option if your website is being accessed globally, and can really help speed your site up. CDN’s are not just for large global corporations, they can be used for any business which operates online.

Cloudflare offers a free plan which is great to see what the service offers, and how it affects you, without making any long term commitments. This software can also be used for many of the points mentioned above, including compressing resources, minimising redirects which also offers security features. Alternatively, MaxCDN is another option that offers full CDN services only with its main focus being on improving load times — this is a paid-for service that offers a freehttps://www.stackpath.com/maxcdn/ month trial.

And Finally…

Monitor speed over time!

It’s really important that you monitor your page speed continuously and make note of how well it is performing. This will allow you to benchmark performance and determine if things are improving or deteriorating. You’ll want to monitor speed across multiple devices (Desktop, Mobile and Tablet!).

Getting your page speed to be where you want them is a challenging and long process. It can take many attempts and lots of trial and error, But it’ll be worth it. As mentioned previously it can have a significantly positive impact on your overall site performance. Along with being a great experience for the customer journey. Don’t forget — although the tips highlighted above will improve your website speed, they don’t need to be implemented simultaneously. This can be an ongoing project. Just make sure you’re monitoring the website speed using appropriate tools.

Are you on the search for someone to help with your web development project? Get in touch with one of our experts to see how Codeminers can advise and help you with your upcoming project. We have a range of highly skilled and specialised web developers to help bring your designs and concepts to life!

Find out more about how we can help you with your upcoming project by talking to a member of our team or follow us on Facebook, Twitter, LinkedIn or Instagram.