How to Increase Website Speed with Browser Caching

How to Increase Website Speed

This blog post is part of “The Ultimate Guide to SEO” blog series.

Website performance is critical for most businesses. Poor performance has been linked to decreases in revenue for e-commerce sites and to degraded SEO for all sites. If you rely on your website for traffic, leads or sales, you’ll want to make sure you’ve optimized your site for a fast, smooth user experience.

Google PageSpeed Insights is an easy-to-use tool to provide a quick analysis of your site’s speed, a critical factor in website performance. Slow pages tend to get abandoned quickly, often before they fully load, hence the decrease in revenue and SEO juice. One of the factors measured in the test of site speed is browser caching.

PageSpeed Insights Report

Accessing resources over the internet can be slow and expensive. Depending on the size and complexity of the assets involved, loading a web page can require dozens of trips back-and-forth between the user and the website being accessed. This can result in abandoned pages and/or higher data transfer costs.

The browser cache is a tool designed to facilitate page loading speed. It works by downloading fixed website elements like HTML, CSS, JavaScript and images into a user’s local browser cache. This way it doesn’t have to retrieve them on every page load. Web servers aren’t always configured correctly to enable browser caching, however, which in webspeak means the server has the incorrect headers or the server is set to let caching expire too soon.

The image below shows the fixes that Google recommends for a website that has caching issues that are slowing it down. It states by setting headers to the maximum “expiry date” possible. This means that the browser will save and store static assets as long as the browser allows. When the cache expires quickly, the next request for the page will load all assets, including static assets, over the network, slowing page speed.

Leverage Browser Caching Results

It is also important to configure the cache-control header correctly. The cache-control header is used to effectively enable caching in the browser. With this header in place, and set to enable caching, the browser will cache the file for as long as specified. Without this header the browser will re-request the file over the network with every request, leading to slower page loading times.

In most cases, the best practice for website performance is to use browser caching as aggressively as possible–i.e., cache as much as you can for as long as you can. There are some important exceptions to this, however. You may not want to cache data that needs to be kept private for compliance or security reasons, which will make defining caching headers more complicated. Pages that have dynamic content that changes frequently may also require more nuanced caching configurations.

Because many browsers cache assets automatically based on the browser’s internal algorithms, it may be necessary to turn off caching for sites processing data like credit card information or other identity data. As Google notes, “Each resource should specify an explicit caching policy that answers the following questions: whether the resource can be cached and by whom, for how long, and if applicable, how it can be efficiently revalidated when the caching policy expires.”

alaniz-seo-2017

Download the White Paper: Alaniz Guide to SEO for 2017

Bill Peatman

About Bill Peatman

Bill is the Senior Writer and Content Developer here at Alaniz. He has more than 20 years of marketing experience and has worked for successful startups and well-known brands such as Cisco and Brown and Caldwell. Bill is a graduate of Stanford University, and has an MA from Santa Clara University.

Leave a Reply