Mobile devices are frequently limited by bandwidth. Some mobile data plans also have bandwidth caps or charges. The less a user has to download of a website, the better for them. You've enabled asset caching for your website. The next day, you decide to change the color of your logo. You swap out the old logo for the new one and check your live website to see how it looks. But the old logo is still there. Your machine has a cached version of your logo on the hard drive.
It never bothers to request a new download of the image. Therefore, your machine will not obtain the new logo until the cache file it has on hand expires. Old versions of cached files cause all sorts of issues for users if their devices don't have the latest version of the file - mismatched formatting, broken JavaScript and incorrect images are just a few.
For the most part, this doesn't happen because the server knows which assets have been updated and need to be replaced on the user's machine. However, if one of your customers complains that the site is broken for them and no one else, then you should advise them to clear their browser cache. All the major browsers have a "clear cache" button. Some are easier to find than others. Hitting that button erases all of your cached files. Try it. Visit a page you frequent and note how long it takes to load.
Clear your cache. An ETag is basically a random string that a server assigns to a resource, and reassigns it whenever that resource changes.
When a request to the server comes in, the server checks the ETag of the request with the ETag that the server has for that resource. This ends up being much quicker than if the server had to resend the whole resource again. How do we get the updated version? This happens more often than you might think. What can you do to make sure everyone has the most recent stylesheet?
Simple my friend. By doing this, your browser will treat it as a completely new resource with no cache settings and will therefore complete a full request and response cycle for that resource.
You could change the link tag from this:. For starters, there are several build automation tools to help with this, such as usemin with Grunt or Gulp.
You can just append a query string to the end of your URL instead, and change it whenever you update the file:. That gets the job done just as well — no file-renaming necessary. Mutually exclusive with no-store. This is a good option for resources that may contain sensitive data, or for resources that will almost certainly change from visit to visit. Mutually exclusive with no-cache. Overrides the default private setting for requests that use HTTP authentication.
Mutually exclusive with private. Often used for user-specific, but not particularly sensitive, data. Mutually exclusive with public. This option generally replaces the expires header see below and takes a value in seconds, with a maximum valid age of one year seconds. You can also enable caching by specifying expiration, or expiry, times for certain types of files, which tell browsers how long to use a cached resource before requesting a fresh copy from the server.
The expires header just sets a time in the future when the content should expire. After that point, requests for the content must go back to the original server. With the newer and more flexible cache-control header, the expires header is often used as a fallback. Here's an example of how you might set up caching in the. The retention periods are up to you, and should be chosen based on the file types and their update frequency. For example, if you regularly change your CSS, you might want to use a shorter expiry, or even none at all, and let it default to the two-day minimum.
Conversely, if you link to some static PDF forms that almost never change, you might want to use a longer expiry for them. Tip: Don't use an expiry greater than one year; that's effectively forever on the internet and, as noted above, is the maximum value for max-age under cache-control. Caching is a reliable and low-hassle way to improve your pages' load speed and thus your users' experience. It is powerful enough to allow sophisticated nuances for specific content types, but flexible enough to allow easy updates when your site's content changes.
Be assertive with caching, but also be aware that if you later change a resource that has a long retention period, you may inadvertently deprive some repeat visitors of newer content. You can find a great discussion of caching patterns, options, and potential pitfalls in Caching Best Practices and Max-age Gotchas. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.
For details, see the Google Developers Site Policies. Fundamentals Tools Chrome DevTools. Web Fundamentals. Guides Code Labs Samples. Overview Architectural Patterns. Designing Great User Experiences. Semantics Built-in. Semantics and ARIA. Responsive Web Design.
Install Prompts.
0コメント