I remember the first time I heard about Progressive Web Applications. I remember being completely underwhelmed ... I was certainly not an early adopter of this technology. In fact, it was several years before I caught the PWA bug after beginning a deep-dive into Web Workers for another project. I heard about Service Workers and immediately saw the implications for several side projects I had been contemplating.
While my thought had been to design these sites with the minimal amount of viable code (without any frameworks), I quickly realized that I had developed a strong baseline that I could use for comparison: if these sites were re-designed using modern frameworks, I could then see very quickly where the benefits were.
Then I hit a game changer ...
In this presentation, we get ...
A hyper-light website is a reconception of a web-based user interface designed for the purposes of pushing the limits of performance.
The goal is to provide an experience, roughly consistent with the real thing, that can be delivered to an end user as fast as possible.
High latency environments are everywhere, even to this today.
- IDENTIFY the most active page on your website.
- BUILD a new version of that page from scratch with a singular focus on optimization.
- SERVE the hyper-light page behind a CDN with compression and HTTP/2 pipelining.
- MEASURE both the original page, uncached, and the hyper-light page.
- ANALYZE the results.
- Serve real content, preferably dynamically.
- Responsive layouts at minimum, common breakpoints.
- Responsive images.
- Sprites, in some cases.
- SVG graphics optimized responsibly.
- Ads and social media trackers.
- CMS integrations.
- CSS layouts via frameworks.
- Lazy loading content, except images.
- Data URIs, unless absolutely certain.
- Custom web fonts.
- Inline as much as possible on the server side.
- Use HTML5 semantic elements.
- Relative layout using root em sizing.
- Use HTML templates.
- State transitions using the CSS :target selector.
- Replace SVG with HTML and CSS.
- Use SVG sprite with fragment identifiers.
- Image based sprites.
- Responsive images using srcset.
- Use sitespeed.io.
- Repeat the process with other pages.
- Build a Performance Budget.
- Run sitespeed or similar tooling regularly.
Progressive Web Apps following hyper-lightweight design:
Code for designs:
First, PWAs are both fun and cool. The Service Workers are providing features for much more than mobile development.
Second, the tight pattern that I used, while going old-school in my development of a few PWAs was actually the use of newer patterns ... allowing me to step away from frameworks and SPAs while focusing on speed and performance.
Also, I'm now truly glad that I took the time to play with Progressive Web Applications and the associated technologies; it's been an eye-opening experience.
Finally, I'm not sure if old-school has become new again, but there were definitely some useful implementations we had to overcome limited bandwidth (which we still have ... mobile devices or location specific).