The culprit here is cache. Quick fix: Press CTRL + H (On windows desktop) or CMD + H (On Mac), proceed to clear browsing data, select cache and click on clear. If you are on mobile, go to history, clear browsing data and select cache. Once done, reload the site’s page.

What is cache?

Probably, you’ve heard the word cache before, but don’t know exactly what it means in context of the web. In common parlance, caching means placing something in storage (usually in secret) on the chance that it may come in useful later (e.g. a weapons cache). A browser or Web cache does exactly that, except with program and website assets. When you visit a website, your browser takes pieces of the page and stores them on your computer’s hard drive. Some of the assets your browser will store are:

• Images – logos, pictures, backgrounds, etc.
• HTML
• CSS
• JavaScript

In short, browsers typically cache what are known as “static assets” – parts of a website that do not change from visit to visit.

The benefits of caching

When you visit a website for the first time, your browser has a conversation with the remote server that hosts the site. Your browser sends a request, and the server sends back one of the website’s assets. The page HTML is the first to download and it becomes the blueprint by which the site is constructed. As your browser reads the HTML code, it sends out more requests to the server to send more pieces of the page, mostly the static assets mentioned above.

This process takes up bandwidth. Some Web pages will take a great deal of time to fully download and become functional because they have a lot of pieces or their assets are large.

For instance, you may notice that when you first open a Web page, the text appears before the images. That’s because text is small and takes little time to download, whereas a high-quality image may take several seconds (an eternity in computing time) to populate.

Caching improves and speeds up browsing. Once you’ve downloaded an asset, it lives (for a time) on your machine. Retrieving files from your hard drive will always be faster than retrieving them from a remote server, no matter how fast your Internet connection.

Take a typical ecommerce site. Certain assets, such as the logo, will appear on every page in the exact same location no matter where you are on the site. Without caching, your machine would have to download that logo every time you clicked on a new product page.

Along with large images, websites use  JavaScript files – necessary for applications such as shopping carts, interactive images and wish lists. Imagine how conversion rates would be negatively impacted if a user had to wait five to ten seconds for a “Buy Now” button to appear beneath a product. A fast, fluid browsing experience is essential to making customers feel comfortable and encourage conversions. In addition, the next time you visit the cached ecommerce site, those assets will still be available on your device for faster loading.

Mobile devices are frequently limited by bandwidth. Some mobile data plans also have bandwidth caps or charges. The less a user has to download of a website, the better for them.

Some pitfalls

Your browser has stored some of your website’s assets. The next day, you decide to change the color of your logo. You swap out the old logo for the new one, make some layout changes and check your live website to see how it looks. But the old logo is still there or the whole layout of your website looks weird.

Assuming you completed the image swap or edited the page correctly, the problem is usually caching.

Your machine has a cached version of your logo or layout on the hard drive. It never bothers to request a new download of the image. Therefore, your machine will not obtain the new logo or layout until the cache file it has on hand expires.

Old versions of cached files cause all sorts of issues for users if their devices don’t have the latest version of the file – mismatched formatting, broken JavaScript and incorrect images are just a few.

What of my website visitors?

Your website visitors’ browsers will be sent the request from the server to delete any existing cache so that they are not affected by the above.

How do you resolve this?

The easiest way is to make the browser do hard refresh, where it will delete the cached content and download the assets again. This can be done by pressing CTRL + F5 if you are using a laptop to edit your website. If you are using a mobile browser, go to the browser Settings > Privacy > Clear Browsing Data > Select Cache and clear.