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:
• Website Updates are a SNAP With Server Side Includes
• Four Must-Have Webpages That Add Website Security
• Seven WordPress Security Tips
• What is a Web Service?
• How to Strengthen Website Authentication
• Seven Effective Ways to Build Your Own Web Site
• What is that Double Forward Slash in the URL?
• Video - HTTP caching
• Set Up a Freefind Search Box on Your Website
• Six Ways to Center an Element on a Webpage
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
