{"id":204407,"date":"2015-06-30T06:25:50","date_gmt":"2015-06-30T13:25:50","guid":{"rendered":"http:\/\/css-tricks.com\/?p=204407"},"modified":"2015-06-30T06:25:50","modified_gmt":"2015-06-30T13:25:50","slug":"web-performance-cache-efficiency-exercise","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/web-performance-cache-efficiency-exercise\/","title":{"rendered":"Web performance: Cache efficiency exercise"},"content":{"rendered":"

Ryan Albrecht digs into how efficient browser caching is on Facebook.com. They release code twice a day, breaking cache as they do, so they were curious if that was too often for browser cache to be efficient. <\/p>\n

After collecting data, they are seeing 44.6% users getting an empty cache, which they determine effective:<\/p>\n

The best practices tell us to use external styles and scripts, include Cache-Control and ETag headers, compress data on the wire, use URLs to expire cached resources, and separate frequently updated resources from long-lived ones. All of these techniques work together on any website, not just one at Facebook scale.\n<\/p><\/blockquote>\n

I’m not sure at what level they would be determined not useful though. Seems browser caching is an easy enough thing to implement that if 90% of users got an empty cache it would still be worth it, if just for the speed of that session alone.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ryan Albrecht digs into how efficient browser caching is on Facebook.com. They release code twice a day, breaking cache as they do, so they were curious if that was too often for browser cache to be efficient. After collecting data, they are seeing 44.6% users getting an empty cache, which they determine effective: The best […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":337113,"url":"https:\/\/css-tricks.com\/wordpress-caching-all-you-need-to-know\/","url_meta":{"origin":204407,"position":0},"title":"WordPress Caching: All You Need To Know","date":"April 1, 2021","format":false,"excerpt":"Here's Ashley Rich at Delicious Brains writing about all the layers of caching that are relevant to a WordPress site. I think we all know that caching is complicated, but jeez, it's a journey to understand all the caches at work here. The point of cache being speed and reducing\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/4C07BF8E-841B-4FBD-A8CF-BF65C0E23B4D.jpeg?fit=1200%2C686&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352381,"url":"https:\/\/css-tricks.com\/working-with-graphql-caching\/","url_meta":{"origin":204407,"position":1},"title":"Working With GraphQL Caching","date":"September 23, 2021","format":false,"excerpt":"If you\u2019ve recently started working with GraphQL, or reviewed its pros and cons, you\u2019ve no doubt heard things like \u201cGraphQL doesn\u2019t support caching\u201d or \u201cGraphQL doesn\u2019t care about caching.\u201d And for most, that is a big deal. The official GraphQL documentation refers to caching techniques so, clearly, the folks behind\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/graphql-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":206274,"url":"https:\/\/css-tricks.com\/strategies-for-cache-busting-css\/","url_meta":{"origin":204407,"position":2},"title":"Strategies for Cache-Busting CSS","date":"August 14, 2015","format":false,"excerpt":"Major performance gains are to be had from browser caching CSS. You ensure your server is set up to send headers that tell the browser to hang onto the CSS file for a given amount of time. It's a best-practice that many if not most sites are doing already. Hand-in-hand\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":285846,"url":"https:\/\/css-tricks.com\/inline-svg-cached\/","url_meta":{"origin":204407,"position":3},"title":"Inline SVG… Cached","date":"April 12, 2019","format":false,"excerpt":"I wrote that using inline icons make for the best icon system. I still think that's true. It's the easiest possible way to drop an icon onto a page. No network request, perfectly styleable. But inlining code has some drawbacks, one of which is that it doesn't take advantage\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/svg-xlink.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":361001,"url":"https:\/\/css-tricks.com\/vitepwa-plugin-offline-service-worker\/","url_meta":{"origin":204407,"position":4},"title":"Making a Site Work Offline Using the VitePWA Plugin","date":"January 18, 2022","format":false,"excerpt":"The VitePWA plugin from Anthony Fu is a fantastic tool for your Vite-powered sites. It helps you add a service worker that handles: offline supportcaching assets and contentprompting the user when new content is available\u2026and other goodies! We\u2019ll walk through the concept of service workers together, then jump right into\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/website-offline-pwa.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":364166,"url":"https:\/\/css-tricks.com\/adding-cdn-caching-to-a-vite-build\/","url_meta":{"origin":204407,"position":5},"title":"Adding CDN Caching to a Vite Build","date":"April 4, 2022","format":false,"excerpt":"Content delivery networks, or CDNs, allow you to improve the delivery of your website\u2019s static resources, most notably, with CDN caching. They do this by serving your content from edge locations, which are located all over the world. When a user browses to your site, and your site requests resources\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/vite-cloudfront.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/204407"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=204407"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/204407\/revisions"}],"predecessor-version":[{"id":204408,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/204407\/revisions\/204408"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=204407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=204407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=204407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}