larlet-fr-david-cache/cache/409a6c299f7b4995c69f018c4c905792/index.md

title: Beyond HTTPS
url: https://www.ebayinc.com/stories/blogs/tech/beyond-https/
hash_url: 409a6c299f7b4995c69f018c4c905792

<p class="graf graf--p">Recent years have seen a drastic <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://transparencyreport.google.com/https/overview?hl=en" target="_blank" data-href="https://transparencyreport.google.com/https/overview?hl=en">increase</a> in websites migrating to HTTPS. <span>There are many benefits that come along with this migration. One such benefit is access to modern technologies that improve the performance and experience of end users.</span></p><p class="graf graf--p">At eBay, when we started migrating pages to HTTPS, we also started looking into how we can leverage some of these new technologies that HTTPS opens up. Our focus was performance. With that in mind, we added a bunch of features to our infrastructure that can have a positive impact on customer latency and experience, including the following:</p><h4 class="graf graf--h4"><strong class="markup--strong markup--h4-strong">1. HTTP/2 </strong></h4><p class="graf graf--p">This was our top priority. As soon as we migrated a page to HTTPS, we also enabled <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://http2.github.io/" target="_blank" data-href="https://http2.github.io/">HTTP/2</a> on them. The groundwork for this was already done on our CDN, which made the switch pretty easy. To get the full benefit of HTTP/2, we had to remove <a class="markup--anchor markup--p-anchor" rel="noopener" href="http://www.stevesouders.com/blog/2009/05/12/sharding-dominant-domains/" target="_blank" data-href="http://www.stevesouders.com/blog/2009/05/12/sharding-dominant-domains/">domain sharding</a> for static resources (CSS/JS/images) and consolidate them under one or two domains. Domain sharding, once considered an HTTP/1.1 best practice, can adversely impact HTTP/2. HTTP/2, as expected, helped us to offset the performance overhead that comes from HTTPS. </p><p class="graf graf--p">An important thing to consider when switching to HTTP/2 is <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/" target="_blank" data-href="https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/">connection coalescing</a>. Most websites use a CDN provider to host static assets and that domain would be different from the main page domain. This means you may not be able to share the same HTTP/TCP connection (a major advantage of HTTP/2) between the main page and static assets. This is where connection coalescing comes into play and to use it, even the main page should be frontended by the same CDN provider. We are still working on this. But for now, we implemented connection coalescing for static assets, even if they are split between few domains.</p><h4 class="graf graf--h4"><strong class="markup--strong markup--h4-strong">2. cache-control: immutable</strong></h4><p class="graf graf--p">At eBay we use content-aware URLs for all static assets, meaning a URL is a hash representation of its content. Even a small change in the content of a static resource (CSS, JS, images, etc.) results in a new URL. In our case, browsers making a conditional <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://www.telerik.com/blogs/understanding-http-304-responses" target="_blank" data-href="https://www.telerik.com/blogs/understanding-http-304-responses">validation request</a> on refresh, and servers responding with a <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://httpstatuses.com/304" target="_blank" data-href="https://httpstatuses.com/304">304</a> is totally unnecessary. To avoid this performance overhead, we added a <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/" target="_blank" data-href="https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/">cache-control: immutable</a> header <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://tools.ietf.org/html/draft-mcmanus-immutable-00" target="_blank" data-href="https://tools.ietf.org/html/draft-mcmanus-immutable-00">extension</a> to all our static assets. Critical assets such as CSS are now rendered without any network requests for repeat visits. The browser support for immutable is also <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#compat-desktop" target="_blank" data-href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#compat-desktop">increasing</a>. For now, browsers <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading" target="_blank" data-href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading">support</a> it only for HTTPS requests. </p><h4 class="graf graf--h4"><strong class="markup--strong markup--h4-strong">3. Brotli compression</strong></h4><p class="graf graf--p">We have also started experimenting with <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://en.wikipedia.org/wiki/Brotli" target="_blank" data-href="https://en.wikipedia.org/wiki/Brotli">Brotli compression</a> in some of our pages. The <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://community.akamai.com/community/web-performance/blog/2017/08/18/brotli-support-enablement-on-akamai" target="_blank" data-href="https://community.akamai.com/community/web-performance/blog/2017/08/18/brotli-support-enablement-on-akamai">benefits</a> of Brotli was very evident, and we were excited to look into it. Even the recent <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://twitter.com/addyosmani/status/924348105553620994" target="_blank" data-href="https://twitter.com/addyosmani/status/924348105553620994">comparison metrics</a> look impressive. Brotli will be used for our text-based static resources. We have not enabled it 100% in production yet, as we are changing our asset pipeline to get the max out of Brotli (doing a pre-compression at level 11). Our current experiments are with lower Brotli compression levels. Once we do a full-fledged launch, we will publish a detailed blog post with comparison numbers.</p><h4 class="graf graf--h4"><strong class="markup--strong markup--h4-strong">4. Service Workers</strong></h4><p class="graf graf--p">Now that HTTPS is enabled, it was about time to a put a <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank" data-href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Worker</a> to our site. We now have our own <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://www.ebay.com/sw.js" target="_blank" data-href="https://www.ebay.com/sw.js">implementation</a> in place. To begin with, we are trying out an offline experience for product pages, with the eventual goal of building a fully featured <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://en.wikipedia.org/wiki/Progressive_web_app" target="_blank" data-href="https://en.wikipedia.org/wiki/Progressive_web_app">PWA</a>. Our offline experience was <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://youtu.be/PsgW-0M67TQ?t=28m39s" target="_blank" data-href="https://youtu.be/PsgW-0M67TQ?t=28m39s">featured</a> at the recent Chrome Dev Summit. </p><p class="graf graf--p">There is a common notion that in order to use Service Workers, you need to rebuild the site from scratch as a PWA. That is not necessarily true. Service Workers can as well be used in your existing websites to quickly enhance your current caching, prefetching and navigational behaviors. Above all, this exercise will be a great learning experience to understand all the <a class="markup--anchor markup--p-anchor" rel="noopener" href="https://redfin.engineering/service-workers-break-the-browsers-refresh-button-by-default-here-s-why-56f9417694" target="_blank" data-href="https://redfin.engineering/service-workers-break-the-browsers-refresh-button-by-default-here-s-why-56f9417694">nuances</a> associated with Service Worker lifecyle, especially when dealing with production deployments.</p><p class="graf graf--p">If a website is served over HTTPS, this should be a good list of features to try out and improve end-user performance. Many major websites have already leveraged these technologies and have seen great results. Based on your existing infrastructure, the level of complexity for implementing each of these features may vary. But the general awareness is more important and will help us plan accordingly for the future. </p><p class="graf graf--p">At eBay, we are very excited about the possibilities that HTTPS has opened up. With the adoption of modern technologies that come with HTTPS, our web platform is now ready to build the next wave of compelling user experiences. Cheers to a secure and innovative future.</p>