Service workers are an important player in the PWA game. Not only are they handy for keeping applications functional while offline, they are also instrumental when it comes to improving overall page load time. Working with a service worker however can be a little tricky. Because they are run in the background of a page (outside of a page’s render cycle) and are registered only once, service workers don’t always work as expected. Contrary to how we normally build and debug for the web, service workers don’t update when the file is updated and the page is refreshed. Depending on your use case, reflecting changes made to a service worker may require either closing the browser tab, refreshing the page or navigating to another page. The reason for this behavior is that the service workers are bound to a specific lifecycle that predetermines whether and how they gain control of the document. The lifecycle of a service worker can be one of the most confusing if not frustrating aspects of working with a service worker. Even so, understanding this lifecycle is the key to unlocking the possibilities that service workers provide. ...

Offline storage is the linchpin of progressive enhancement. Under a low or unreliable network connection, the app is not dependent on a successful response from the server to be operational. Instead, it reads and writes data from a local in browser database while in offline mode. There are several ways to serve data offline. Picking the right option for your PWA ultimately depends on the type of data you’re intending to store and how big it is. ...

Network connectivity is a single point of failure when it comes to user experience on the web. By nature of the web’s reliance on the network, the web fails when the network b0rks. Inadvertently as developers, this means that we’re always at the mercy of network connectivity. When faced with a slow or failed network connection, there is no way for us to help websites gracefully fail. While connectivity is an issue for most mobile web applications because of the reliance on the network, native mobile apps are able to deliver an offline user experience that is on par with an online one. This is largely because native mobile apps are built on the premise of “offline first”, where users are sent cached resources even before the app makes a connection to the server. ...

Last week, we identified the trend that a large and growing number of users are accessing the web via mobile devices. With this trend in mind, we covered various strategies to building websites that load fast and seamlessly without discriminating based on a user’s bandwidth and/or connectivity. From a performance standpoint, lightning fast websites translate to lower bounce rates and an overall more satisfactory user experience. In spite of this, however, the performance of a webpage, no matter how amazing, plays only a partial role when it comes to user engagement. According to a study done by Google comparing the top 1000 native mobile apps vs. top 1000 mobile web apps, it was discovered that while the mobile web saw close to 4 times the number of unique visitors than native apps, the time users spent on the mobile web was only 5% of the time spent on native apps (yikes!). ...

Content compression is one of the simplest and most effective means to improving webpage performance. A smaller file size means lighter page load and faster download speeds, which translates to lightning fast page renders. For some, if not most of us developers, content compression is a black box that we don’t have to give much though to. Compression mechanisms automagically work by default in browsers and servers. And if you’re loading pages via a CDN like Netlify, chances are you will never have to think about compression since they compress your files for you ✨ . Regardless, having a basic understanding of compression strategies can be a handy tool to add to your toolbox, especially in the event when you have to configure your own origin servers. ...

This week, we focused on web performance and discussed the many strategies to improving our websites to optimize for a fast user experience. Some of these strategies involved “forcing the browsers hand” or coercing it into downloading resources in a specified order and time—hello preload and async/defer. Historically, the browser exercised full control over how and when resources were downloaded in order to paint pixels to the screen. It would make requests as they came, one at a time and block rendering while it waited on resources it needed from the server. This was the norm under the HTTP/1.x protocol. With HTTP/2 however, the developer now has the capacity to influence the order and priority in which the browser loads content. In addition, we can now request multiple resources in parallel without the unnecessary overhead and complexity of establishing multiple connections (more in this later!). ...

In previous posts, we talked about optimizing our websites to reduce page weight and inadvertently decrease overall page load time. This page load metric, though incredibly important, doesn’t fully take into account the user’s perception of a websites’ performance. At the very least, a user’s goal when visiting a website is to view the page content. As a result, they are more likely attuned to the time it takes for a page to be viewable (first meaningful paint) or usable (time to interactive) rather than on the time it takes for the entire page to load (page load time). Optimizing for render performance requires a sound understanding of the steps the browser takes when going from initial page request to rendering pixels to the screen. ...

Typography plays a central role in the design, branding, and overall readability of content. On the web, typography is achieved chiefly via webfonts. While the default system/”web-safe” fonts (hello Arial, Helvetica, sans-serif) are a reasonable and incredibly performant strategy for presenting content online, webfonts allow you to customize your typography to create a memorable, and delightful experience for your users. Even so, custom webfonts (as most nice things do) come at a performance cost. The text (and many other styles defined in your style sheet) is blocked from rendering until your requested webfont loads. This means a terrible overall experience for users who may experience jank via layout repaints or worse, be presented with no text at all. Considering that webfonts are responsible for the design and general readability of your web content, optimizing your web fonts should be of high priority in your overall performance strategy. ...

Video is one of the most sought out mediums on the web and is used widely in web page designs today. According to a Cisco report, video constitutes the majority of the world’s internet traffic. In 2017, video was reported to have constituted 75% of all internet traffic and this number is slated to surpass 80% by 2022. This should come as no surprise to most of use, considering the fact that video content is a powerful medium for visual communication and offers a great way to keep users engaged. Adding video to websites however, can oftentimes be a double-edged sword; We may make some gains via a richer, more delightful user experience but risk performance issues if our websites are not optimized appropriately. This, alongside the rapid growth of traffic originating from mobile and wireless connections means we as developers are increasingly responsible for optimizing our sites for performance. In this post, we’ll dive into video optimization strategies so we can reap the benefits video provides without driving users away. ...

Images make up a large portion of a webpage’s payload. According to the HTTP Archive, the average image size has grown almost twofold and now constitute a whopping 63% of total bytes of a webpage. This growth in images on the web has coincided with faster network speeds and growing bandwidth; meaning that loading webpages today has never been faster— for some of us. High network latencies and low bandwidth (mostly over mobile connections) is unfortunately commonplace for a large percentage of the world. This means incredibly slow webpage load times and an increasingly frustrating experience browsing webpages. While doing away with images altogether would theoretically solve the problem of slow page load—removing all images from the top 1,000 websites, these sites would load 30% faster on average over 3G (high performance images)—a text only webpage would significantly hamper user engagement. Thankfully, there are many tricks to optimizing images for the web so we don’t have to skimp on the overall design and user experience of a webpage. ...