Skip to content

Latest commit

 

History

History
43 lines (28 loc) · 2.79 KB

BP_4007_en.md

File metadata and controls

43 lines (28 loc) · 2.79 KB
Raw

Save bandwidth with a ServiceWorker

Identifiers

GreenIT V2 V3 V4

Categories

Life cycle Tiers Responsible
3. Implementation Network Software Architect/Developer

Indications

Priority Implementation difficulty Ecological impact
4 3 4
Saved resources
Network

Description

Most pages share a common structure framing the "useful content". Except for the <title> and some header metadata, it would be quite easy to reconstruct them by concatenating three resources: common header and footer for all pages, and content specific to each one of them. This concatenation can be performed into browsers directly via a Service Worker, with the header and footer benefiting from HTTP caching, each page then being only "useful content". The server will have to be able to serve both the complete page, for the initial website access and for browsers that do not support Service Workers, and the page fragment without its header and footer, to be able to concatenate it in the Service Worker. Some and specific to referencing or sharing on social networks (and therefore useless in the browser) can be completely omitted from this fragment to further reduce its size. Others, as well as the <title>, can generally be positioned in the without impacting page's usability. Alternatively, they can be recreated by JavaScript, or injected directly into the by the Service Worker by concatenating not 3 parts, but 4 or 5 (these elements could be synthesized from the HTTP response headers of the page content, to maintain the same number of requests).

Here, we accept a bit of device processing time, an additional initial request for the Service Worker, and then two additional requests for headers and footers, in exchange for significant amounts of saved data on each page. These costs will be canceled by the savings while browsing the site (as for a SPA), but also during future visits, as long as the browser has not evicted the Service Worker.

Example

In early 2020, Philip Walton was able to measure a network exchange reduction of nearly 48% and performance improvements (First Contentful Paint) of more than 52% on his blog with this technique.

Source: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/

Validation rule

The number of ... is equal to or less than
pages loaded in their complete version 1