How does Caching and Page Web Load Time Work?
All modern Web browsers use caching to increase download speed and Web site performance. There are several things Web developers can do help browsers make the most of caching to reduce page load time and bandwidth usage.
When your browser downloads a Web site, it stores the files it retrieved for a period of time, so they can be used on other Web pages without reloading them. The browser occasionally checks for new versions of those files, to display the most recent version of the site.
Most Web developers are familiar with what happens when your browser doesn't know when a file has changed. After uploading a new site, your browser may continue to display the old version of the site until you do a page reload or clear your browser's cache to force the browser to download the site's files again.
Sometimes the browser makes a mistake in the other direction, and reloads a file even though it hasn't changed. This doesn't cause any visible problems, but it increases page load time.
Some Tips To Improve Load Time
Here are a few ways you can help the browser know when it needs to update its cache and when it doesn't.
If you use the same file or image in multiple places in your Web site, always use the same URL everywhere the file is used. Browsers don't know two files are the same unless they have the same name.
Move JS and CSS content into separate files instead of including the code in your .html files. Since browsers cache each file separately, they will know not to reload the CSS and JS on every page that uses them. Using a JS or CSS minimizer to reduce the size of your files can also help.
When uploading your Web site, try not to upload new versions of files that haven't changed. If a file's modification timestamp changes on your Web server, the server will think it was modified and will tell the browser to download a new version in some cases.
In the next installment of the Developer's Corner, I'll describe how to use mod_expires to tell Apache when you don't expect your files to change.
Do you have a technical question you'd like to have answered in the Developer's Corner? If so, send it to Insider@pair.com. Selected questions will be answered in future episodes of the Developer's Corner.
Posted in Developer's Corner