Upload Files With A Unique Name To Leverage Browser Caching

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000027550-upload-files-with-a-unique-name-to-leverage-browser-caching

What is Browser Caching?

When a user visits a website, one of the most important aspects of their experience is the time it takes for the pages to load.  And one of the most powerful ways to speed up the load time of a webpage is to leverage the caching capabilities of the user's browser.

When a visitor loads a page on the site, the browser knows it needs to load all of the images, videos, HTML, CSS, and Javascript on the page before it will display the content of the page.  However, if the visitor has been to the website before, their browser will have stored many of the web page's larger files locally on their computer, in what's called the browser cache.  If the files are stored in the browser cache, they do not need to be downloaded again in order to load the web page, which speeds up the process significantly.

In order to leverage this powerful tool, Brilliant Directories automatically sets browser caching rules that are optimized for the software and the types of files that are used on a typical website.

However, there is one caveat with browser caching - if a file is replaced on the website with a new file of the exact same name (logo.jpg for example), and a user has the old file cached in their browser, they will not see the new version of the file until the old cached file has expired, or they manually clear their cache.

Best of Both Worlds: Cache Older Files, Download Updated Files

Luckily there is an easy way to fix this: upload the new version of the file with a different name.

For example, let's say there's a file on the website called logo.jpg.  If a visitor loads a page on the website, the file logo.jpg will be cached in their browser, which is great.  The next time they load a page on the website, they will not need to download logo.jpg again, as it will already be cached in their browser.  This will make the page load much faster.

However, if I upload a new version of the logo and give it the exact same name of logo.jpg, the next time the visitor comes to the website, they will not see the new version of the logo.  Why?  Because the old version of logo.jpg is still in their browser's cache and will be loaded automatically rather than downloading the file again.

The fix for this is simple - upload logo.jpg with a new name such as logo.1.jpg, logo1.jpg, my-logo.jpg, or anything that is different from the original filename.  When the visitor comes back to the site, the logo will now be named differently, which will force the browser to download the new file, and the new logo will display.

For a more detailed technical explanation, please see this article from Google: HTTP Caching