Upload Files With A Unique Name To Leverage Browser Caching

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000027550

What is Browser Caching?


When someone visits a website, one of the biggest factors in how smooth the experience feels is how quickly the pages load. One of the most effective ways to improve load speed is by taking advantage of the browser’s built-in caching system.


When a visitor loads a page, the browser pulls in all of the images, videos, HTML, CSS, and JavaScript needed to display it. If the visitor has been to the site before, the browser may already have the larger files stored locally in its cache. When those files are already saved on the device, the browser does not download them again, which makes the page load much faster.


To support this, Brilliant Directories automatically applies optimized browser-caching rules based on the software and the file types typically used on a website.


IMPORTANT EXCEPTION: If a file is replaced with a new version using the same filename (for example, logo.jpg), a visitor who already has the old version cached will not see the update right away. The updated file appears only once the cached version expires or the visitor manually clears the browser cache. 



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


The exception above is avoided by uploading each updated file under a new filename.


For example, a site has a file named logo.jpg. On the first visit, the browser saves logo.jpg to its cache, so later visits load faster without re-downloading it. If a new version of the logo is uploaded under the same logo.jpg name, the browser keeps serving the cached copy, because it assumes it already has that file.


The fix is to rename the updated file before uploading it:

  1. Prepare the updated file.
  2. Give it a filename distinct from the original — for example, logo.1.jpg, logo1.jpg, or my-logo.jpg.
  3. Upload the renamed file.

Because the filename is different, the browser treats it as a new file, downloads it immediately, and displays the updated image.


For a deeper technical breakdown, Google's HTTP Caching documentation provides a detailed explanation.