Senthil Padmanabhan is a Distinguished Engineer & Web Platform Lead at eBay, building the multiscreen shopping experience. He is specialized in web technologies such as JavaScript, HTML, CSS, along with web performance & optimization.
He is an active blogger. He can be found on Twitter via @senthil_hi.
Recent years have seen a drastic increase in websites migrating to HTTPS. 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.
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:
1. HTTP/2
This was our top priority. As soon as we migrated a page to HTTPS, we also enabled HTTP/2 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 domain sharding 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.
An important thing to consider when switching to HTTP/2 is connection coalescing. 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.
2. cache-control: immutable
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 validation request on refresh, and servers responding with a 304 is totally unnecessary. To avoid this performance overhead, we added a cache-control: immutable header extension 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 increasing. For now, browsers support it only for HTTPS requests.
3. Brotli compression
We have also started experimenting with Brotli compression in some of our pages. The benefits of Brotli was very evident, and we were excited to look into it. Even the recent comparison metrics 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.
4. Service Workers
Now that HTTPS is enabled, it was about time to a put a Service Worker to our site. We now have our own implementation in place. To begin with, we are trying out an offline experience for product pages, with the eventual goal of building a fully featured PWA. Our offline experience was featured at the recent Chrome Dev Summit.
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 nuances associated with Service Worker lifecycle, especially when dealing with production deployments.
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.
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.