PWA Directory: Loading content faster in the Application Shell.
This article was co-authored by Julian Toledo.
When a user visits PWA Directory for the first time, a Service Worker is installed and the Application Shell is cached. On the following visits, the first render is accelerated by serving the cached shell from the Service Worker. Once loaded, the shell will issue a request for the page content and render it when the response arrives.
The upside of this approach is that the first render for the page happens much faster: on an Emerging Market 3G connection, the first render could take up to 3 seconds. With this approach, it takes about 750ms. Check the WebPageTest timeline here.
One possible optimisation to this flow is that, although the request for the page is replaced by the shell on the Service Worker, we still have the URL for the content. In PWA Directory, we can use this original URL to derive the URL for the content, for example, we are adding the contentOnly=true parameter to request the server to return html content without headers/footers already included in our shell.
Since we now know the URL for the content, we can start the request for it earlier, from the Service Worker, so when it’s requested again from the Application Shell, the browser is smart enough to understand that a request for the same resource has already been made and uses the same response for both docs.
Check the timeline for this approach here.
A small caveat for this solution is to make sure that the content has max-age, of at least a few seconds, to assure that the browser reuses the original page.html?contentOnly=true request and does not make the request again because it has expired.
The code that implements this is straightforward. Check how it works on this pull request at PWA Directory’s Github repository.