HTTP caching

By | January 28, 2020


Lamm:
Hi, I’m Stephen Lamm, and I work at Google
in Web Performance. And today I want to tell you
a little bit about browser caching
and what you can do to configure your web pages so that they’re cached properly
in browsers. And you’ll find that,
once you learn it, it’s really easy
to implement it, and you get a double win, because not only do your
web pages load more quickly, but then there’s less of a load
on your web servers as well. Browsers have caches to store
local copies of resources and web pages 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 and
downloading that resource again. So now I’d like to show you
a demo where I’m gonna show you a web
page that has the resources with all the caching turned off so that each time
this page is loaded, the browser has to request
each image in this page. And then I’m gonna show you
the same page loaded again, but with the caching headers
turned on. And you can see the difference
in performance that it has on the web page. So here we’re 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. Now I’m gonna maximize
the HttpWatch window so we can look at one image
in particular and see what
cache control headers it’s set. If you look,
the cache control header is set so that there is no cache, so that this item has to be
requested from the server each time. The ETag is not set. And we have an Expires header
that is set in the past. Now moving on,
we’re gonna load the same page, but this time all the images are gonna have
the Expires header on. And so here I type in
the different URL. I hit Enter. Now I’m gonna maximize
the HTTP window once again. I’m gonna click
on an image to show what the HTTP headers
look like. So now when we look
at the headers, we can say 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. There’s also an Expires header. Now if you set both max-age
and the Expires header, the max-age header will override
the Expires header. And finally the Last-Modified
is set, and it’s the same value
before back in 2006. So now let’s load the page with the Expires on
one more time, click on the URL bar,
and hit Enter. And we see that the page loads
much more quickly this time because it’s bringing everything
from cache, and that’s shown here
with HttpWatch by having everything
in blue. 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. So thank you for watching, and for more information,
you can visit code.google.com/speed.

18 thoughts on “HTTP caching

  1. Tim Wright Post author

    " it's one of the more easy things to set up" -> then why not show everyone how to SET IT UP!

    Reply
  2. HellMind ZMaster Post author

    @bassieracer Don't know if he's gay, looks like he is whether too dumb or too smart

    Reply
  3. James McCauley Post author

    This video is about as useful as someone putting a broom handle up my ass and calling it a pony.

    Reply
  4. CPG Post author

    Yes caching is useful. So how do I set it up?

    Reply
  5. Hossam Post author

    but what is the difference between headers cache-control, expires, Etag, last-modifies, I mean should I set them all or anyone of them to get the desired behaviour ?

    Reply
  6. Sujit Das Post author

    this source [code.google.com/speed] is showing 404 error

    Reply
  7. CMG Post author

    Whats up with all the dumbass comments about someone thats helping them ?

    Reply
  8. Faizan Izhar Post author

    Thanks for the video, how we can see POST request in browser and parameters

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *