Page Speed and Caching

Written by Tom Battcock

Page speed is an area of website delivery that is becoming more and more important, with 4G the upcoming 5G and faster broadband everywhere users are more and more aware of how fast a website loads and tend to have even less patience for websites that do not feel responsive.

This increased spotlight on page speeds is also now being made more important by google in their analytics and as such a lot of SEO tools are starting to rate it highly on their reports.

 

So how does pagespeed get calculated?

 

There are lots of different ways of calculating page speeds depending on where you look, however generally the most important stats come from google, so even though it’s worth looking at various SEO tools the most important place is google insights (https://developers.google.com/speed/docs/insights/v5/about)

They break page speeds down into the following areas:

  1. First Contentful Paint – First Contentful Paint (FCP) measures the time from navigation to the time when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading.
  2. First Meaningful Paint – This audit identifies the time at which the user feels that the primary content of the page is visible.
  3. Speed Index – Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. The lower the score, the better.
  4. First CPU Idle – The First CPU Idle metric measures when a page is minimally interactive:
    1. Most, but maybe not all, UI elements on the screen are interactive.
    2. The page responds, on average, to most user input in a reasonable amount of time.
  5. Time to Interactive – The Time to Interactive (TTI) metric measures how long it takes a page to become interactive. “Interactive” is defined as the point where:
    1. The page has displayed useful content, which is measured with First Contentful Paint.
    2. Event handlers are registered for most visible page elements.
    3. The page responds to user interactions within 50 milliseconds.
  6. Estimated Input Latency – Input responsiveness is a key factor in how users perceive the performance of your app. Apps have 100ms to respond to user input. Any longer than that, and the user perceives the app as laggy

 

What does that all mean?

 

To break all the above down, there are a few key items to consider when looking at page speed

  1. Every element on the page, the html, the images, the javascript and the CSS (style sheets) are all requested as separate requests so the more items there are, and the larger they are, the slower the page load will be.
  2. If you are using a CMS or any server side technology it is likely that the pages will not be flat HTML of static content but will be built dynamically, this means after the initial page request the server has to fetch various data from the database to create the page before serving it to the user.

The above two items are the main reasons why a page would be loading slow, so what can be done to solve them?

 

Speeding up your site

 

There are some items that can be done by the user, or made available through the CMS in use.

  1. Cloudflare: The best tool available currently for speeding up your site is by adding it into cloudflare, it allows you to do a good amount of the items that are listed below and having as much as possible managed through one place makes it a lot easier to maintain and control.
  2. Compress images: Having lots of large images will have a big effect on page load speed and a lot of the time the high quality image won’t be seen by most users on mobile devices, also alot of images can be compressed in size without losing image quality.
  3. Minimize CSS/JS: Depending on your CMS will depend on how you can compress these (also cloudflare has some tools for compressing these) Compressing these mostly means reducing the size again by reducing the amount of characters and white spaced used. Part of this is also taking multiple CSS or JS files and combining them into one file again to reduce the amount of requests that are made.
  4. Page caching: The final Item to discuss is caching, the idea behind this is taking a copy of the page, and saving all the html and assets in one place so that the next time the page is loaded it doesnt need to be created again it can serve those pre created files which will load a lot quicker. Whilst page caching is the item that will save you the most time it’s also one of the items that needs the most consideration and management. The thing to keep in mind with caching is that any dynamic content you have on the page will be stored in the state it is when cached. So if you post some new content or make changes it won’t reflect on the front end immediately. To mediate this you should consider any pages that will change often are ignored by caching, alternatively set the time on the cache files to be lower on those pages. Whilst you can have caching in the CMS level to make sure any cache files are rebuilt when you make changes, this is not the most efficient way to run the cache as you still need to have some server requests called to keep the cache up to date. Having caching at the highest level (either nginx/apache/iis or cloudflare) has the most impact on speed times.

To conclude, whilst page speed is important and there are lots of good ways to improve them that should always come second to keeping the design and the content up to date and as valuable and engaging as possible.

0 Comments

Submit a Comment

Your email address will not be published.

fourteen + 4 =