Video - HTTP caching
In this video, Stephen Lamm, who works at Google in Web Performance teaches you
about browser caching and what you can do to configure your web pages so that
they're cached properly in browsers. You'll find that once you learn, it's
easy to implement and you get a double win because not only do your web pages
load more quickly, but there's less of a load on your web server as well.
Browsers have caches to store copies of web pages and resources locally
because those resources often do not change for a long time and by storing
a local copy, the browser can avoid having to make another connection to the
web server to download that resource again.
I show you a web page that has resources with all the caching turned off so
that each time the page is loaded, the browser has to request each image
in the page. Then I show you the same page loaded again, but with caching
headers turned on. You can see the difference inn performance that it has
on the web page.
Here, we're monitoring with HttpWatch while loading the page with the Expires
headers turned off for all the different resources, and as you can see, when
the resources are coming in, they're all coming from the web server.
looking at one image in particular we see that the cache control header is
set so that there is no cache, so that this image has to be requested from
the server each time. The ETag is not set, (ETag causes server to send the
resource only if it has changed since the last time the client requested it.)
and we have an Expires header that is set in the past.
Now we're going to load the same page, but this time all the images have
the Expires header on. Monitoring with HttpWatch while loading the page
we can see that the max-age is set, it's set in seconds and in this case
it works out to ten years in the future. There's still no Etag set.
If you set both max-age and the Expires header, the max-age header will
override the Expires header. Finally, Last-Modified is set, and it's the
same value as before.
Now when we re-load the page with the Expires on, we see that the page
loads much more quickly this time because it's bringing everything from
cache. As you can see, caching can have a big impact on the performance
of your web pages, and it's one of the easier things to set up.
More Web Design Coding Issues:
• Six Ways to Center an Element on a Webpage
• Web Design Blunders That Can Cost You Lost Profits
• Seven WordPress Security Tips
• Don't Let doors.txt Take Control of Your Email Server
• Video - HTTP caching
• Video - Optimizing the Order of Scripts and Styles
• How to Set Up a Google Search Box on Your Website
• How to Strengthen Website Authentication
• Why a CSS Website Layout Will Make You Money
• Web Design Troubleshooting Guide