One of the most common reasons of a website’s speed degrading, is image size. In more general terms, it’s how your browser receives these assets from the server and how often.
When you load a web page on your browser, along with the html code, css context and other external assets, come the images and static assets embedded on that web page.
What’s static assets?
By static assets we mean all the items or files what don’t dynamically change with each server page load. For instance, a php page’s output might change each time you load that php page, some times even changes without reloading it. Some of these static assets are images for sure, css files, javascript files et cetera.
What’s Browser Caching?
So a question arises, why load these assets again and again when you could tell the user’s browser to keep a local copy for ie one day, so that when the page loads, the browser gets that file from the computer’s hard drive, thus avoiding to fetch it from the server?
This, thus loading stuff from the hard drive has multiple benefits. One is avoiding network data transfer lag. Another is relieving the server from the workload of sending the image. Speed is also increased, as fetching something from the hard drive is generally faster than loading it from the network.
That above, storing assets locally, is called Browser Caching. Its generally implemented via htaccess or web.config, with a plugin on WordPress or with custom coding on other web applications.
What’s Server Caching?
On dynamic websites or web apps, the same idea can be implemented server-side. It tries to answer the question “why recalculate the page if no change has been made?” and its called Server Caching. If no change has been made to the page requested by a browser, the server can just send off a pre-calculated version of the page instead of doing all the work again. So the server stores a copy of the output of the page locally in its hard drive, until the page changes. It then serves that output directly instead of re-running the code. That of course, boosts the performance and speed of that page and also lowers the server resources needed significantly.
If you combine Browser Cache and Server Cache, you can get enormous gains in speed and a very high decrease in server resources required.
The problem is that caching has to be implemented in a very cautious way. Imagine you have an online shop jn which you apply both caching methods. Server caching, if not done right, can cause the cart to be shown the same in various users, since the cart page will be cached and served as the same to all.
So caching can help a lot and even hide coding problems under the rag, save the day during traffic peaks and so on, but if not done correctly, it can cause all sorts of problems.
Still, caching should be in your todo list of optimizations to your website.
