A Pagespeed Optimization Guide

Morten Frølich December 15, 2020 performance

1. Pagespeed Optimization – what’s the fuzz about?

The SEO industry is changing all the time, and so are the SEO ranking factors that determine how search engines rate your website. But the most important and basic SEO factors that dictate your website ranking, will remain the same. In this guide, we will explain one of those primary factors; the website pagespeed factor, why it’s important to optimize the speed, and how you do it.

Website pagespeed – what is it exactly?

What exactly does it mean to have a fast website? What indicates the loading time of a fast website?

Most people talk of website pagespeed in terms of seconds, but pagespeed is not a moment in time – it’s a user experience. Multiple components determine whether a website is perceived as fast or slow, and many times, a fast website can seem slow because of a slow working device (mobile phone, etc.), and vice versa. But there are some steps that you can use to decide whether you think a website is loading fast:

 

  • Is it happening? Did the navigation start successfully? Is the server responding?

 

  • Is it useful? Has the content or enough of it been displayed?

 

  • Is it usable? Can the user interact and engage with the page, or is it still loading?

 

  • Is it good? Are the interactions with the page smooth and without delay?

 

Try loading your website and check how many seconds or milliseconds it takes to go through each of the abovementioned steps. This should give you an idea of what to optimize regarding your website pagespeed, and the eye10 Free SEO Pagespeed Tool will help you find out exactly what on your website that needs to be optimized.

The tool combines reports from Google PageSpeed Insights and GT Metrix in one click, and provides you with precise data about your website load speed and how to optimize it.

Pagespeed matters – but why?

More and more consumers tend to use their mobile when engaging in digital content. If your website is slow on desktop, it will be even slower on mobile, and it’s no secret, that the faster a website performs, the more it engages and retains users.

An example from Google’s own blog shows the importance of website speed:

In 2015, Pinterest reduced perceived wait times by 40% and this increased their search engine traffic and sign-ups by 15%, which directly impacted the company’s bottom line.

Another important point is that poor website pagespeed can have a damaging effect on your business goals. For example, in 2017, the BBC found they lost an additional 10% of users for every additional second their site took to load, and it goes without saying that a 10 % user loss should be avoided at all costs.

Pagespeed improves conversions

When you are able to engage and retain users, your conversion rate will automatically increase no matter the type of conversion.

In 2018, retailer Furniture Village audited their website pagespeed.

The result: a reduced website load time by 20% and a 10% increase in conversion rate.

In essence: Your bottom line can, and most likely will be affected by your website pagespeed, one way or the other.

 

2. How to optimize images

A very effective and easy optimization strategy is to look into each image on your website. An image almost always requires a large number of bytes (HTML, CCS, Javascript, etc.), so if you can find another format that still express the message you want to convey to your user, then that would be your best strategy.

How to choose the right image format

Each image format is different from one another, but there are two main image formats that you should know about: Vector graphics and Raster graphics.

Vector formats are extremely appropriate for images that consist of geometric shapes like logos, text, or icons. You get great results at every resolution and zoom setting, and this makes them an ideal format for high-resolution screens and assets that need to be displayed at varying sizes.

But when the scene in the image is complicated (like in a photo), the amount of SVG markup to describe all the shapes can be exceedingly high and the output may still not look that photorealistic, and that’s when you should use a raster image format such as PNG, JPEG, or WebP.

Raster images do not have the same favorable qualities of being resolution or zoom independent — when you scale up a raster image the graphics will get blurry. Therefore, you may need to save multiple versions of a raster image at various resolutions to give your users the optimal experience.

In short:

Vector graphics use lines, points, and polygons to represent an image.

Raster graphics represent an image by encoding the individual values of each pixel within a rectangular grid.

High resolution screens and their implications

There are two different kinds of pixels that you should know about: CSS pixels and device pixels. A single CSS pixel can correspond directly to a single device pixel, or it can be backed by multiple device pixels. The reason is that the more device pixels there are, the finer the detail of the displayed screen content.

 

Source: https://web.dev/choose-the-right-image-format/

High DPI (HiDPI) screens give you great results, but there is one disadvantage: image assets need more detail for them to take advantage of the higher device pixel counts.

Luckily, vector images are perfect for this task, as they can be rendered at any resolution with sharp results— you might have a higher processing cost to render the finer detail, but the underlying asset is the same and is resolution independent.

Raster images on the other hand pose a greater challenge because they encode image data on a per-pixel basis. This means, that the larger the number of pixels, the larger the filesize of a raster image. Here is a diagram that shows the difference between a photo asset displayed at 100×100 (CSS) pixels:

Screen resolution Total pixels Uncompressed filesize (4 bytes per pixel)
1x 100 x 100 = 10,000 40,000 bytes
2x 100 x 100 x 4 = 40,000 160,000 bytes
3x 100 x 100 x 9 = 90,000 360,000 bytes
Source: https://web.dev/choose-the-right-image-format/

When the screen resolution is doubled, the total number of pixels increases by a factor of four: double the number of horizontal pixels, times double the number of vertical pixels. Hence, a “2x” screen not just doubles, it quadruples the number of required pixels!

So, what does this mean in practice? High-resolution screens enable you to deliver beautiful images, which can be a great product feature. However, high-resolution screens also require high-resolution images, therefore:

– Prefer vector images whenever possible as they are resolution-independent and always deliver sharp results.

– If a raster image is required, use responsive images.

Different Raster image formats and their features

Different image formats support different features such as animation and transparency (alpha) channels. As a result, the choice of the correct format for an image is a combination of which visual results you want and the functional requirements.

Here is an overview of raster image formats and their features:

Format Transparency Animation Browser
PNG Yes No All
JPEG No No All
WebP Yes Yes All modern browsers.
Source: https://web.dev/choose-the-right-image-format/

There are two universally supported raster image formats that you most probably know: PNG and JPEG. In addition to these formats, modern browsers also support the newer format WebP. This format is not yet widely used, but it offers better overall compression and more features.

So, which format should you use?

For us, the answer is pretty simple: The WebP format will give you better compression than older formats and should be used where possible. You can use WebP along with another image format as a fallback. See Use WebP images for more details.

 

3. Optimize the network quality

Another optimizing strategy that’s very useful, is to look into the networks your users operate, and how they work, because the network connection is crucial to the pagespeed experience.

You might think that this a new feature, and you’re right, it is fairly new. It is called the Network Information API, and as the Google developers explain, this solution enables web applications to access information about the user’s network.

Many other applications like YouTube, Netflix and most other streaming services provide something similar, when they automatically adjust the resolution during streaming, but Network Information API is for you to use, and the information you get from this application can be used in many different ways.

You can:

– Switch between serving high-definition and low-definition content based on the user’s network.

– Decide whether to preload resources.

– Defer uploads and downloads when users are on a slow connection.

– Enable offline mode if the network quality is not good enough to load the app and use the features.

– Warn users that doing something (for example, watching video) over cellular could cost them money.

– Use it in your analytics to gather data on your users’ network quality.

The benefits of the Network Information API can be huge, especially if you have users on slow networks and applications that require a lot of bandwidth. Think of users in third world countries, who might not have the best equipment or network connections, but are as important, if not more important, than users in first world countries, because they represent new potential customers in brand new markets.

This is one of the reasons why the Network Information API has gained a lot of buzz the latest couple of years, and justifiably so.

 

4. Other pagespeed optimization strategies

There are of course many other optimization strategies besides optimizing your image formats and network quality. We are not going to dive into all of them in this guide, but we recommend these links if you are interested in info and guides about other optimization strategies:

Optimize your Javascript

Optimize your resource delivery

Optimize your CSS

Optimize your third-party resources

Optimize your web fonts

 

5. The value of speed and the best user experience

Congrat’s! You’ve optimized your website and your users applaud the work you’ve done, so what’s next? The next and final step would be to find ways to measure the effects of your website pagespeed optimization through conversions, and preferably through revenue. Conversions can vary a lot depending on what sort of website you have.

The number one conversion for webshop owners would be new orders, whereas the number one conversion for a website for the Road Directorate could be to retain a user for a minimum of two minutes and use this conversion as an indicator that the he or she have read and understood certain traffic news.

The most common way to measure your conversion is through Google Analytics. If you don’t have a Google Analytics account integrated with your website, you can use their guide to get started.

A walk in the shoes of your user

Now let’s walk in the shoes of your most common user. How did he or she find your website? Most probably via organic search, or maybe through SoMe champaigns, website links or paid campaigns. When the user is directed to your website the first time, always have in mind, that he or she will get an uncached first load, which is the worst possible user experience you can have.

A cache is a hardware or software component that stores data about a user, so that future requests for the same data can be served faster. An uncached load therefore means that you have no data regarding the primary requests for the specific user. That’s how it is, and there’s nothing you can do about it, but it makes it all the more important, that your website is up to speed. Especially if you paid a bunch of money to get the user to your website.

You should therefore focus a lot of your time and energy on the first load when it is uncached, because you risk that users never get to the step displaying your products or services. The first impression is always the most important.

The optimization of engagement

When the first load is optimized, the next issue is optimizing for engagement, which means optimizing for fast navigation and fast repeat loads. To do that, you need to analyze exactly where in the customer journey flow that the user drops out, and then relate back to speed metrics to improve the navigation and repeat loads. There’s a lot of tools that can help you with that, but we recommend WebPageTestPuppeteer or the Chrome DevTools Record feature.

All hail user experience

As a website owner, you can focus a lot about all the technical know-how (scores, metrics, etc.), and you should. But in the end, it’s your users who determine how well your website is performing on google. Here’s an obvious example, which you probably already know: if your pagespeed is too slow, your bounce rate will most likely increase.

This means in practice, that not only will you have a slow website, you also have a poor user performance, because it’s difficult for you to attract and retain users, and search engines detect that. Fast pagespeed correlates pretty well to a low bounce rate, which in turn will have a positive effect on the conversions, and that’s the basic logic you should have in mind.

To sum it all up, the user experience is ten-folded when you engage in fast loading websites. The increase in pagespeed score that you get on search engines, when optimizing your pagespeed, is invaluable. But remember that the user experience will always, as in always, be key.

In the end, you depend on your users – business-wise and because how they interact on your website must meet certain SEO ranking factors. It’s your users that determine how well your website is performing on search engine rankings, and they get more and more experienced and demanding each day.

 

 

FAQ BOKS

What is pagespeed optimization?

Pagespeed optimization is the art of optimizing your website so it loads faster.

How do you optimize your website pagespeed?

You can optimize your website pagespeed in many ways. The most common way to optimize your website pagespeed is by optimizing your image formats, but you can also do it by optimizing your network quality, your javascript, etc.

Why is pagespeed optimization important?

The slower a website your have, the more users and customers you lose. A fast website has a low bounce rate and increases your conversions, and that’s why pagespeed optimization is important.

How often should you optimize your website pagespeed?

You should test and optimize your website pagespeed on a regular basis, so you don’t lose users or customers.
Morten Frølich Morten Frølich

Do you want to get your website to the top of Google search results?

The Compare Top10 Tool will help you get there!

Start Your Free Trial Now
Compare Top10 Tool - content analysis mobile Compare Top10 Tool - links analysis mobile