4. Speedy Page Loading

If your site takes a long time to load, you are going to have a lot of frustrated users, and your rankings will drop.

There are several free tools that can help you check your page speed, including Google’s very own PageSpeed Insights ;  you can learn how to improve your Google PageSpeed Insights score here on Green Goat Design.

The tool we recommend for this task is GTMetrix. This free tool provides insights on your page speed and gives recommendations on the steps you can take to improve your load time.

But before you have a look at that here are some facts about page loading speed. If your site is slow, you are losing business. It is as simple as that.

In Google’s own words, “speed equals revenue.”

The speed of your website has a direct impact on SEO and conversion rates. Not taking the time to make improvements can be a costly mistake.

Why? Users are far more likely to bounce from a slow website, and the probability of this happening increases by over 100% if a page load time goes from just 1s to 6s, for example :

Page speed is 1 sec to 3 seconds probability of bounce increases approximately 32%

Page speed is 1 sec to 5 seconds probability of bounce increases approximately 90%

Page speed is 1 sec to 6 seconds probability of bounce increases approximately 106%

Page speed is 1 sec to 10 seconds probability of bounce increases approximately 123%

There is a real need for speed, and Google’s free PageSpeed Insights tool is a fantastic resource to help you find and fix issues that could be slowing your site down.

Understand how to use the PageSpeed test, how it works, and how to speed up your site using the recommendations. Plus, learn the truth behind a couple of common myths before your competitors do.

Why Speed Matters

There is an expectation for the web to be fast. As far back as 2010, Google confirmed page speed as a ranking factor. Then, it “was focused on desktop searches,” until a specific mobile PageSpeed update rolled out in July 2018. While speed is one of more than 200 ranking factors, none of us want to unnecessarily lose business. Especially for something usually within our control. In fact, SEO blog Backlinko analyzed 1 million Google search results and found “a strong correlation between site speed and Google rankings.”

But SEO aside, we have already seen how page bounces increase as the speed of a site slows down. Indeed, a 2019 study by US digital marketing agency Portent showed “conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0-5).” It also found the first 5 seconds of page load time had the largest effect on conversion rates.

If you’re not already paying attention to speed as a performance metric, now’s the time.

Say Hello to Google’s PageSpeed Insights Tool

PageSpeed Insights is a free tool offered by Google to help you analyze your website’s performance and see suggestions on how to make it better.

In fact, it’s arguably the most popular page speed analysis tool out there, so it’s worth your time.

You’re probably wondering, ‘how can I get a 100/100 score with PageSpeed Insights?’ Slow down. First, you need to know how to use the tool properly and how to implement the suggestions it makes. Otherwise, you might not see those performance gains that can make such a difference to your site. It’s also important to understand what PageSpeed is and what it isn’t.

PageSpeed vs. Load Time

Here’s an interesting one. The Google PageSpeed tool doesn’t even measure the loading time of your site. Despite what people assume. To understand why, let’s first address the difference between PageSpeed and page load time.

PageSpeed

PageSpeed is a score given by Google, out of 100, by its PageSpeed Insights tool. PageSpeed Insights, and web page performance tool Lighthouse that powers it, takes raw performance metrics and converts these into a score of between 1 and 100. And although it’ll offer opportunities and diagnostics reports as part of its report, those do not directly contribute towards the performance score. This means that PageSpeed, on its own, is not actually a true indicator of the loading time of a site.

Load Time

So, what is load time, in comparison to PageSpeed?It’s the average time it takes for a page to load for a user. It’s not a calculated score. It’s the actual time a page takes to load, in seconds or milliseconds, between starting and finishing the page load. Of course, load time alone doesn’t give an insight into what’s causing speed issues or how to fix them.

What does this mean for you?

Google PageSpeed Insights can be helpful, but you can’t use it in isolation to assess your site’s performance. You need to use several indicators to identify and resolve issues.

How Does PageSpeed Insights Work?

The Google PagesSpeed Insights tool is powered by Lighthouse and provides both ‘lab data’ and ‘field data’ for a page.‘Lab data’ is collected in a controlled environment when scanning a page and is a great way to identify performance issues and find solutions for fixing these. ‘Field data’, on the other hand, is collected from real-world performance data when users load your page. Some of the problems and apparent bottlenecks that make it harder for your real visitors to convert can show up here.

In short, the tool shows you a performance score out of 100. However, the performance metric results used to calculate this are not weighted equally. Instead, things like ‘first contentful paint’ (the first time something a user can see shows up) have a larger effect.

• 3x – first contentful paint.
• 1x – first meaningful paint.
• 2x – first CPU idle.
• 5x – time to interactive.
• 4x – speed index.
• 0x – estimated input latency.

But you won’t see any of that. You will see a reported performance score and a color that depends on which score bucket it falls into. It is reported as:

• Red (poor score): 0-49
• Orange (average): 50-89
• Green (good): 90-100

So, knowing a little more about PageSpeed Insights, what it is, and how its scores are calculated, where do you start?

Try the recommended actions (or best practices) and starting points below; they are the most commonly seen issues and have the biggest impact upon improvements.

Optimize Images

Image optimization is perhaps one of the most common reasons why a web page has a slow load time and often the best place to start making improvements, as the increases on both load time and PageSpeed can be significant. Especially when there is a number of people responsible for uploading content or adding products, it is hard to maintain strict standards for images, and problems can quickly mount up.

Images take a lot of resources to download, and they are often not properly optimized. The two main areas where you can make improvements by optimizing images are:

• The disk size of an image.
• Displayed size vs. the actual image size in pixels.
• Deferring offscreen image loading.
• Use a content delivery network (CDN).
• Using next-gen images.

Optimizing Image Size

A 1MB image will take longer to download than a 100KB image. To tackle this, work to compress images without losing quality. You can use tools such as TinyPNG to achieve this, or take a look at Google’s recommendation, ImageMagick.

Size Images at Their Display Size

Another common issue is images unnecessarily much larger than they need to be. Imagine your page displays an image of 250 by 250 px. If the original image is actually 1000 by 1000 px, yet it is styled to display smaller with CSS, you can make your load time quicker. As it stands, the browser would need to download the original (larger) image to display at the smaller size.

Use a Content Delivery Network (CDN)

Be sure to upload images that are sized correctly; otherwise, you will, without a doubt, run into speed issues. WordPress handles this automatically by creating multiple versions of an image when uploaded, but if you are using another CMS, you may need to manually resize images.

Using a CDN essentially spreads the server load across a number of different locations and uses that closest to the user to serve the assets. The closer the data, the quicker the load time. Sound good? Check the must-know SEO practices for CDNs before you try it.

Defer Offscreen Images

You could also look at deferring offscreen images, meaning that they’re downloaded only as a user scrolls. It does risk not all images will be visible when required. However, it is often a compromise worth making to improve load times. You can find a number of WordPress plugins that can help, or Google has its own advice about offscreen images.

Use Next-gen Image Formats

Lastly, consider using next-gen image formats such as WebP. It has been demonstrated that WebP images can result in an 85.87% decrease in average image size compared to JPG and a 42.8% decrease against PNG.

They are not supported by all major browsers, but some applications can handle WebP.

Improving Server Response Time

The reality is that making improvements to your server’s response time isn’t something which most have the ability to do, given that the two real areas of impact are either reducing the load or improving the hardware. Improving server response time really comes down to making sure your site is hosted on a great server. Publisher TechRepublic has a cheat sheet for choosing the best web host.

If you see recommendations that relate to either the server response time or TTFB (time to first byte), have a chat with your hosting provider or consider hosting solutions better suited to your site.

Minification

When writing code, it is common for this to be done so in a way that uses spaces to keep it easy to read. Simply, minification removes whitespace and comments to optimize CSS and JS files and can be done using a simple copy-paste tool such as Minify.

Browser Caching

If you are using WordPress as your CMS (which an estimated 35% of the web does), it couldn’t be easier to use browser caching, with popular free plugins including W3 Total Cache and WP Super Cache.

Caching works by creating and quickly serving a static version of your site to users, as opposed to a page being dynamically generated every time it is accessed.

If you are not using WordPress, it is still possible to set up browser caching manually.

Clear Up Redirects

Over time, multiple redirects can build up and result in a slowed page load speed, as browsers are forced to make additional HTTP requests, adding to the load time. PageSpeed Insights will highlight these issues.

At Green Goat design we try to utilise as much as this as possible for all of our site builds.

We can give you a site audit and fix all the performance issues with your site which would include :

• Image compression.
• Enable browser caching.
• Delete unnecessary plugins.
• Reduce server response time.
• Reduce the number of redirects.
• Minify CSS and JavaScript files.