{"id":250987,"date":"2017-02-06T05:51:28","date_gmt":"2017-02-06T12:51:28","guid":{"rendered":"http:\/\/css-tricks.com\/?p=250987"},"modified":"2017-02-06T05:51:28","modified_gmt":"2017-02-06T12:51:28","slug":"browser-tweak-saved-60-requests-facebook","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/browser-tweak-saved-60-requests-facebook\/","title":{"rendered":"This browser tweak saved 60% of requests to Facebook"},"content":{"rendered":"

Ben Maurer & Nate Schloss:<\/p>\n

The browser’s reload button exists to allow the user to get an updated version of the current page. In order to meet this goal, when you reload, browsers revalidate the page that you are currently on, even if that page hasn’t expired yet. However, they also go a step further and revalidate all sub-resources on the page \u2014 things like images and JavaScript files.<\/p><\/blockquote>\n

So even if you’ve set proper expires headers for resources, hitting that reload button (which people must do a ton at Facebook) still requires server round trips to revalidate assets (sometimes).<\/p>\n

They worked with Chrome:<\/p>\n

After fixing this, Chrome went from having 63% of its requests being conditional to 24% of them being conditional.<\/p><\/blockquote>\n

And Firefox:<\/p>\n

Firefox implemented a proposal from one of our engineers to add a new cache-control header for some resources in order to tell the browser that this resource should never be revalidated.<\/p><\/blockquote>\n

So if you’re using URLs for assets that never<\/em> change (if they change, they’ll be at a new URL) in Chrome you’ll benefit automatically, and in Firefox you should use their new header<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ben Maurer & Nate Schloss: The browser’s reload button exists to allow the user to get an updated version of the current page. In order to meet this goal, when you reload, browsers revalidate the page that you are currently on, even if that page hasn’t expired yet. However, they also go a step further […]<\/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":[911,1119,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":7924,"url":"https:\/\/css-tricks.com\/google-cdn-naming\/","url_meta":{"origin":250987,"position":0},"title":"Google CDN Naming Conventions (and You)","date":"November 26, 2010","format":false,"excerpt":"You've seen this before: This is a way you can load a JavaScript library like jQuery directly from Google's CDN (Content Delivery Network). You can get quick copy\/paste access to these from ScriptSrc.net. See in that above URL how it is pointing to 1.4.4 specifically? That little part of the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376634,"url":"https:\/\/css-tricks.com\/caching-data-in-sveltekit\/","url_meta":{"origin":250987,"position":1},"title":"Caching Data in SvelteKit","date":"February 1, 2023","format":false,"excerpt":"My previous post was a broad overview of SvelteKit where we saw what a great tool it is for web development. This post will fork off what we did there and dive into every developer's favorite topic: caching. So, be sure to give my last post a read if you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/svelte-cache.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":250987,"position":2},"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":293636,"url":"https:\/\/css-tricks.com\/weekly-platform-news-preventing-image-loads-with-the-picture-element-the-web-we-want-svg-styles-are-not-scoped\/","url_meta":{"origin":250987,"position":3},"title":"Weekly Platform News: Preventing Image Loads with the Picture Element, the Web We Want, Svg Styles Are Not Scoped","date":"August 1, 2019","format":false,"excerpt":"In this week's week roundup of browser news, a trick for loading images conditionally using the picture element, your chance to tell bowser vendors about the web you want, and the styles applied to inline SVG elements are, well, not scoped only to that SVG. Let's turn to the headlines...\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/web-platform-news-190801.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":256931,"url":"https:\/\/css-tricks.com\/evil-please-dont-modals-overlays-edition\/","url_meta":{"origin":250987,"position":4},"title":"How to be evil (but please don’t!) – the modals & overlays edition","date":"July 26, 2017","format":false,"excerpt":"We've all been there. Landed on a website only to be slapped with a modal that looked something like the one below: Hello darkness, my old friend. For me that triggers a knee-jerk reaction: curse for giving them a pageview, close the tab, and never return. But there's also that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330924,"url":"https:\/\/css-tricks.com\/whats-old-is-new\/","url_meta":{"origin":250987,"position":5},"title":"What’s Old is New","date":"December 17, 2020","format":false,"excerpt":"This year, I learned a lot about how \"old\" tricks can solve a lot of modern problems if you use the right tools. Following the growth of Jamstack-style development has been both a learning experience, while also a nostalgic one. It's been amazing to see how you can power plain\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-16-at-2.35.00-PM.png?fit=1200%2C555&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250987"}],"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=250987"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250987\/revisions"}],"predecessor-version":[{"id":250990,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250987\/revisions\/250990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=250987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=250987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=250987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}