My 10 tips on browser cache and web development

I’m the kind of designer who likes to provide clients with an early access to a website in progress. I see more benefits to work in full transparency, for example there is a big chance your client will feel good about not being left in the dark!

With this in mind, I also know clients can easily get confused when they don’t always see changes reflected live on their machine. Let’s see how to fix that.

• Use a good browser like Safari, Firefox and Chrome.
• Remember your tablet is not quite like your computer.
• Always use Private or Incognito browser window when checking the site.
• Clear your browser cache before checking the site.
• Clear the server cache after big content or design change.
• Clear the site JS/CSS optimisation cache if you have one.
• Clear your CDN cache if you have one.
• Avoid overly long expiry rules on your server cache.
• Use a Media Replace tool rather than re-uploading a file with the same name.
• Regenerate Media Thumbnails sometimes.

Use a solid web browser

I recommend using the same browser between client and designer, at least at the early stage of development. That will help focus on the content first rather than being distracted by discrepancies coming from different browser’s interpretation of the page. I am thinking of contact forms, dropdown selection menu, etc…

Use a solid browser like Safari, Firefox, Chrome or even Edge.
Not that other browsers are not good, it is just easier to work with the most popular ones at this stage of development. There is always time to test the site on other ones later when focusing on debugging.

Remember your tablet is not a computer

Tablets have become almost so perfect that we tend to think of them as computers. Although we are not far from this reality, it is not quite the case yet. A common mistake I see with clients, is that they preview the site using their tablet thinking they are looking at a desktop version when in reality it is giving them a responsive version of the site.

That is great when it comes to reviewing the responsiveness, but for anything else, it is important to compare using the same environment. So a desktop machine to check the desktop version, and a tablet and smartphone to check the responsive version of the site.

Incognito or Private window

I recommend my clients to always enable a private window when checking the site. Doing this will force the browser to fetch a fresh copy of the site, rather than relying on previous versions stored in memory part of the browser history from previous sessions.

All browsers have this function. It is either called Incognito or Private, depending on which software you use. Doing this can solve many small issues, but it is not necessarily enough to prevent some discrepancies.

Clear your browser cache

While incognito or private mode is good, you will still need to clear your browser cache in order to fetch the latest version of your site. All browsers store sessions and previously visited pages in memory. They do this to speed up your browsing experience when you navigate pages you have already visited. But it becomes an issue when you want to see your site in development as it changes often.

Clients don’t always understand this caching issue, and sometimes worry it is something users will not want to do when visiting a site. I like to reassure clients that once the site is launched, changes are most likely not going to happen as regularly as when the site is under development. In most cases, people will never have to worry about this and their browser will always fetch the correct page each time.

Clear the server cache

Caching also happens on the server depending whether you are using a caching program or not. It is best to install one only when the site is almost ready for launch. This is because while building the site, many changes occur and the cache will likely keep a snapshot of pages in transition. In another article on plugins I recommend WP Super Cache or W3 Total Cache for WordPress.

With that said, most caching software allow for quick cache clearing, so you can always have it installed and remember to clear each time you add significant changes. It is worth noting that in some cases hosts also have caching in place. So if you still get problems after performing those steps, it is likely that you need to check the cache status on the host control panel itself.

Clear the JS/CSS optimisation cache (if any)

If you use any code optimisation tools such as Autoptimize or Hummingbird, you must also remember it comes with page caching. For this reason you’ll need to clear that cache in order to see changes applied live. The same way regular caching softwares do, those optimisation tools offer a handy cache clearing option for quick actions.

Clear your CDN cache (if any)

If you use a Content Distribution Network such as Cloudflare, it is very likely your site it being cached too. So that’s another type of cache you must remember. Most of the time you will only connect the site to a CDN once it is ready to launch, but it is possible you connect it earlier. Most of them have a development mode, which temporarily bypasses the caching of pages, something very useful to enable while working on the site.

Avoid overly long expiry rules on your server

Setting good expiry rules for CSS, images and fonts is something highly recommended. Of course, if the expiry rule is too long, you run the risk that users will not fetch the latest page or content. On the other hand, too short expiry rules will slow down your site as browsers always perform a complete download of the page and composing elements.

Google recommends to set expiry rules to 1 month for most elements, such as images and CSS rules. In any case, if you clear your browser and server cache, these rules will be bypassed and your browser will fetch the latest version of the site each request.

Replace media, don’t delete and re-upload

Changing images and other media on you site might also create issues. That is especially true if you upload files again using the same filename. To avoid issues, I recommend using a tool to replace media instead, which will guaranty correct replacement of files and the relinking of all URLs. For WordPress, I like to use Enable Media Replace plugin, as it is simple to use and lightweight.

Regenerate media thumbnails

Since WordPress generates thumbnails of all images uploaded, you can sometimes run into discrepancies when looking at thumbnails in the backend. Thumbnails not showing the right image for example. This can also be quite confusing, at least to you if not your client.

To remedy this, you would need to regenerate thumbnails to synchronise again everything. Install and activate Regenerate Thumbnails plugin to perform this action on WordPress. No need to do this often, but it can help from time to time.