Speed Up Your Website with Caching of Static Content

What is static content?

Static content is the part of a page that rarely changes. Examples are images, CSS files (which style the page), JavaScript files (which add actions) and fonts. Dynamic content, on the other hand, is built fresh for each visitor.

What is remote caching?

A cache is a place that keeps a copy of something so you do not fetch it again. Think of a snack in your school bag instead of walking to the shop each time. When your server tells a browser "keep this image for 30 days", the browser stores it. On the next visit it loads the image from the visitor's own computer. Pages open faster and your server does less work.

This is called client-side or remote caching, because the copy lives on the visitor's side.

Steps with web.config

On Windows hosting, IIS reads rules from a file named web.config. It sits in your site's main folder.

1. Take a backup of your site files first.
2. Connect with FTP, or open the file manager in your hosting panel. FTP is a way to send files to your server.
3. Download web.config. If there is none, create a new text file with that name.
4. Open it in a text editor.
5. Find the <system.webServer> section. If it is missing, add it inside <configuration>.
6. Add this inside <system.webServer>:

   <staticContent>
     <clientCache cacheControlMode="UseMaxAge"
       cacheControlMaxAge="30.00:00:00" />
   </staticContent>

   This tells browsers to keep static files for 30 days. The format is days.hours:minutes:seconds.
7. Save the file and upload it again.
8. Reload your site.

Check that it works

1. Open your site in Chrome.
2. Press F12 to open the developer tools.
3. Click the Network tab and reload the page.
4. Click an image in the list.
5. Look in the response headers for Cache-Control: max-age.

Quick recap

• Static files rarely change, so browsers can keep them.
• Add a clientCache rule to web.config on IIS.
• Back up first and avoid duplicate blocks.
• Check the Cache-Control header in the Network tab.