Page Speed Optimisation: No More Fake CDNs!

SEO
Our Digital Marketing Director, Polly Pospelova, recently spoke on this topic at TechSEO Summat. If you missed this or you simply want to know more about this subject, here’s a summary of what Polly had to say.
#TechSEOSummat Polly

I was very proud to speak at TechSEO Summat, Yorkshire's Technical SEO conference, especially because I got the chance to talk about a subject I find so interesting.

This blog will also be a useful recap for any of you who happened to see my talk and may now be looking into speeding up your website.

My presentation slides can be found at the bottom of this page.

What I’ll cover

  • What is a CDN
  • How a CDN helps SEO
  • How SEOs use CDNs
  • How to stop relying on fake CDNs

As SEO specialists, we all want to achieve better ranking in the SERPs. Even with Google's recent design changes with paid listings, a lot of businesses still rely a lot on organic search as it is still proving to drive results on a daily basis.

Besides creating relevant useful and original content, trustworthiness, backlinks, and other authority signals, speeding up your website is a great way to help Google index your site faster and rank higher. Implementing a content delivery network (CDN) can be an easy way to see faster speeds and actually help improve your SEO.

What is a CDN?

CDN is a Content Delivery Network.

It's a collection of servers (also known as POPs) positioned strategically around the world. They store and cache a copy of your website's assets such as HTML, JavaScript, CSS, and images. When a visitor hits your website, the assets are then served from a server located closest to them.

With and without CDN

For example, say you host your website in London. When someone from Europe visits the site, they will have to request and download your entire website from London. This results in latency due to the distance the data has to travel. With a CDN, a request is made to London for the initial HTML page, and then the JS, CSS, images, and other resources are served from the closest POP.

A CDN can dramatically decrease latency and minimize packet loss, which in turn speeds up the delivery of your content.

How does a CDN help SEO?

There are a lot of advantages when it comes to using a CDN. Primarily to serve content to users around the world. But I'll demonstrate how SEOs often use CDNs for reasons other than global content delivery. But first, let's look at a few ways a CDN actually does help your SEO.

1. Speed is a ranking factor

Faster websites are rewarded with higher rankings. Speed has been a ranking factor since 2010 on desktop searches. In 2018 it extended to mobile searches.

2. Speed effects bounce rate and conversions

A faster page has less bounce and more conversions. I’d like to demonstrate it with a real and recent example.

We have been managing a PPC, Display and Paid Social advertising campaign for a client for several years. During that time the number of clicks increased from 2,475 to 167,403 and cost per click (CPC) reduced from £4.03 to £0.18. This is a very successful and well nurtured campaign.

However the average landing page load time increased from 9 seconds to 21 seconds causing a significant reduction in sessions. Even though the paid team drove a huge increase in traffic, the landing page simply took too long to load and as a result over 60% of users simply abandoned their click and never landed on the site.

If you don’t get a session, you definitely won’t get a conversion. This is why speed is a global parameter and every stakeholder needs to care about it.

3. Speed effects revenue

Based on the above example, it is clear that speed issues can cost businesses dearly.

How SEOs use CDNs (or fake CDNs)

The best way to demonstrate it is by looking at how a browser works with HTTP/1.

As a lot of you will probably already know, HTTP stands for Hyper Text Transfer Protocol, for communication between browsers and servers. Communication between browsers and servers is done by sending HTTP requests and receiving HTTP responses.

There is a limit on the number of concurrent http requests that browsers will make to the same domain. To increase the number of concurrent connections, one can host resources (e.g. images) in different domains and run connections to multiple hosts in parallel.

http1

Here is an example of a page with 140 requests.

140 requests

It would take quite a few connections to download all of the resources needed in order to paint this page.

HTTP/1 Connections Limit

Event if it is possible to increase the number of concurrent connections by host resources on different domains, each browser has a maximum limit for the number of connections it will open in total - across all domains. So even if you parallel requests you are still stuck with just 17 connections at one time if you use Chrome.

The table below shows the number of connections per hostname and maximum number of connections for a few popular browsers. A full list of browsers with their scope can be found here.

Max limit

Fake CDNs example

The screenshot below shows the old version of our agency website which we kept live specially for the purpose of training and demonstrations. Here, I’m using Chrome Dev Tools, Network tab and showing All resources.

https://old.deleteagency.com http1 fake CDNZooming into the Domain column shows how we’ve used 5 different additional hosts for assets. These are static01.deleteagency.com, static02.deleteagency.com etc.

Fake CDN

Another example, ASOS website, host images on contet.asos-media.com, scripts and stylesheets on assets.asosservices.com etc.

Fake CDN asos

Render-blocking resources

CDN can drastically increase the speed of your website, but it doesn’t solve render-blocking resources issues.  If you have a lot of render-blocking resources, you might still experience delays.

Render-blocking resources refer to assets such as JavaScript and CSS that are blocking the DOM and/or keeping the webpage from loading until they are downloaded and processed by the browser. A CDN will not fix this for you. This must be resolved on your origin server.

Many websites, when tested in Google Lighthouse, show a message saying "Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles."

Lighthouse opportunities

The best way to explain how to do it is by taking a step back and remember how browsers work.

Delivering critical JS/CSS inline

A browser loads HTML, parses it, finds external resources (JS, CSS), queues them, downloads them, parses them again and only then renders the page. The entire process can take a long time, leaving your users frustrated.

Without critical

You need to take only the necessary resources (JS, CSS) for a page and then inline them into HTML markup, in a <head> within the <style> tag.

inline critical

With inlined critical, when a browser receives HTML it gets all the necessary resources and parses them in a single process. It enables a browser to show page content to users almost instantly.

After the inline markup loads, we then load all the necessary resources in the background and cache them.

Resources loading in the background

Afterwards, you need to check if the browser already has the resources cached and skip inlining.

Skip inlining

The result is that your content loads instantly on the first and all subsequent loads.

critical inlined

Introducing HTTP/2

HTTP2 is the latest version of the protocol. It was designed specifically to decrease latency.

The difference with the older version is that a browser establishes a connection with a server once and sends all requests within the same connection.

There are huge savings in time, that were previously wasted on connections.

http1 vs http2

No more fake CDNs!

If you have experienced HTTP/2 for yourself, you are probably aware of the visible performance gains possible with HTTP/2 due to features like:

  • Stream multiplexing
  • Explicit stream dependencies
  • Server Push
  • HPACK (the silent killer feature)

For those of you who want to know more about these features I recommend to search, there are a lot of great sources of information on the web. In this blog I will cover them very briefly.

Stream multiplexing

Multiplexing is a method by which multiple HTTP requests can be sent and responses can be received asynchronously via a single connection. Multiplexing is the heart of HTTP/2 protocol.

http2 multiplexing

Explicit stream dependencies

A browser can assign a priority for a new stream by including prioritisation information in the headers.

Server Push

Server Push enables websites speculatively deliver content to the web browser before the browser sends a request for it.

http2 server push

This behaviour is opportunistic, since in some cases, the content might already be in the browser’s cache or not required at all.

HPACK

HTTP/2 supports a new dedicated header compression algorithm, called HPACK. It is extremely efficient.

No more fake CDNs example

The screenshot below shows the new version of our agency website after migration to HTTP/2. As before, I’m using Chrome Dev Tools, Network tab and showing All resources.

no more fake CDN full page

Zooming into the Domain column shows that we don’t use additional hosts for assets anymore. All assets such as JavaScript, CSS and images are loaded from our primary domain www.deleteagency.com.

no more fake CDN

Final results

What I’m pleased to say is these approaches helped us reach our goal and the Delete site Speed Index reduced from 5.9 seconds to 1.6 seconds. What is even more impressive, the time it takes for our homepage to become interactive i.e. when users can actually use navigation, case study galleries and carousels reduced from 10.9 seconds to 1.6 seconds.

A key thing to note with all this though is that we focused purely on specific technical aspects, which we developed in order to make the new Delete website better, faster, more adaptive.

What’s more, the new site looks exactly the same - in other words, we didn’t need to focus on UX or Design.

The results

Test it yourself!

If you’d like to see more about the difference between the two versions of the website for yourself, then feel free to run use Chrome Dev Tools or Lighthouse on both versions of the Delete website using these urls.

Old website: https://old.deleteagency.com
New website: https://www.deleteagency.com

Additional useful advice

On top of creating a useful optimisation strategy, with this work I solidified my belief in something I’ve been feeling confident about for a while, which is that we can’t achieve amazing results alone.

Get to know your network administrators, developers and other stakeholders.

I can honestly say that without their support and help I wouldn’t have been able to achieve such drastic improvements on the new Delete site. Their help and support was invaluable and fed in smoothly with our agency SEO consultation work.

Find out more

Hopefully you’ve found this review of my presentation to be useful and you can see the steps we took to get our website to where it is today. If you’d like to download the slides from my actual TechSEO Summat presentation, you can find them on SlideShare here:

Page speed optimisation: No more fake CDNs!

Also, if you’d like to know more about performance optimisation or need some further advice or support then you can get in touch with our team via email: hello@deleteagency.com

GET IN TOUCH
Make enquiry

Delete Limited.

Registered in England.

03933385

Registered Address.

3370 Century Way, Thorpe Park, Leeds, LS15 8ZB

VAT Registration.

GB 927 1409 27