In the beginning, there was HTML and it was good. Websites were light weight, albeit a tad boring. Innovation on the world wide web was as slow as our dial-up connections as we wasted seconds our lives waiting for that adorable animated gif of a cat chasing its own tail to load. Then came interactivity […]
In the beginning, there was HTML and it was good. Websites were light weight, albeit a tad boring. Innovation on the world wide web was as slow as our dial-up connections as we wasted seconds our lives waiting for that adorable animated gif of a cat chasing its own tail to load.
So, how do we maintain the interactivity of today while still reaping the performance rewards of those simpler HTML, CSS, and JS sites of decades ago? Simple: time travel. In other words, make static content static again through caching and pre-rendering.
An emerging trend in web development is the big brother of responsive design; Progressive Web Apps (PWA). Where responsive design focused on making apps visually scale down to be viewed on mobile devices, PWAs are attempting to merge the best features of mobile apps and websites. Service workers are allowing for offline usage, content caching, live content updating, and push notifications all while not requiring the download and installation process of a mobile application. Combine this technology with server side pre-rendering of content and code and you end up with a powerful toolkit for improving the user experience.
Although there are many very cool features with Progressive Web Apps (PWA), in this post we will be focusing on how caching and pre-rendering your application can vastly improve the perceived performance for visitors. Obviously, before we proceed, it should go without saying that decoupling your front end code from any backend code should be your first priority. Distilling all interactions with the backend down into API calls allows for far more flexibility regarding front end delivery options.
Here are three common scenarios that most websites fall into and the technique that can be applied to improve a visitor’s overall perception of performance.
If sections of your website do not change, popular front end frameworks like React and Angular (Angular Universal) can pre-render your page on the server. This affects the user experience in two ways:
In situations, such as blogs, where the content isn’t static but the updates are infrequent, coupling this prerendered content with a service worker that caches the current version then checks for new, updated content, is an ideal solution.
If a majority of your application is static but there are a few elements that are interactive, such as recipes with a discussion area or products in a store where only the price and availability frequently change, then it is time to split up responsibilities. Much like in our first example, your static content can be loaded quickly using a combination of server-side rendering, CDN, and local caching. However, in this instance, you have two options for the dynamic areas of your web page:
Finally, for highly interactive webpages, there is App Shell. The concept of an App Shell is to only take the very outside of the app, things like navigation and general outer layout, and cache/pre-render it. Since menus, logos, headers, footers, and overall look and feel are far less likely to change over time, this gives your visitors reassurance that they have connected to your website, even while the service worker takes the time to load, bootstrap, and render the actual dynamic content. This would be ideal for sites dealing with frequent updates like news and social media.
But Wait There’s More:
Stay tuned for these blogs and more from ng-conf 2017 by the ExcellaJS team: