Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

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:
• Web Design Troubleshooting Guide
• RSS Basics
• How to Redirect a Web Page Using a 301 Redirect
• Web Designer's Reference
• Don't Let doors.txt Take Control of Your Email Server
• Creating a Secure Website Using Secure Socket Layer (SSL)
• How to Hide From Robots
• Create a Favicon for Your Web Site
• Video - HTTP caching
• What is AJAX?

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268