Hyper-Lightweight Website Designs
Tags: webdev, pwa, hyperlightweight, javascript
Published: 2019-06-18 15:48:20

---
title: Hyper-Lightweight Website Designs
published: true
description: Progressive Web Apps (PWAs) are a pattern for creating app-like, instant loading, reliable and installable websites. What is the absolute minimum necessary to get a PWA up and running: These are my thoughts about creating a PWA with simple HTML, CSS, and vanilla JavaScript.
tags: WebDev, PWA, Hyperlightweight, JavaScript
series: JavaScript Management
---
## Not an Early Adopter
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.

## It All Starts Coming Together ...

I built two PWAs, implementing them with the simplest code-base I could manage (embedded CSS, JavaScript, Data, and Images). The designs and concepts were simple and **worked**; worked very well, in fact.

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 ...

### Hyper Lightweight Websites
[Hyper Lightweight Websites (Chris Zacharias)](https://www.youtube.com/watch?v=VUwyYhNO63I&t=788s)

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.

### Steps to build a hyper-light website:
1. **IDENTIFY** the most active page on your website.
2. **BUILD** a new version of that page from scratch with a singular focus on optimization.
3. **ASSEMBLE** all of the HTML, CSS, and JavaScript into a single "hyper-light" HMTL page.
4. **SERVE** the hyper-light page behind a CDN with compression and HTTP/2 pipelining.
5. **MEASURE** both the original page, uncached and the hyper-light page.
5. **ANALYZE** the results.

### Things you want to KEEP doing:
* Serve real content, preferably dynamically.
* Responsive layouts *at minimum, common breakpoints*.
* Responsive images.
* Sprites, in some cases.
* SVG graphics *optimized responsibly*.
* Accessibility.

### Things you want to STOP doing:
* Ads and social media trackers.
* CMS integrations.
* JavaScript libraries.
* CSS layouts via frameworks.
* Lazy loading content, *except images*.
* Data URIs, *unless absolutely certain*.
* JavaScript and CSS compilation.
* Custom web fonts.

### Recommendations (when possible)
* 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.

### Measuring Performance
* Use [sitespeed.io](http://sitespeed.io).
* Repeat the process with other pages.
* Build a Performance Budget.
* Run site speed *or similar tooling* regularly.

## PWAs (and Code)

Progressive Web Apps following hyper-lightweight design:
* [United States License Page Game](http://bit.ly/uslpg)
* [Interview Question & Answer Application](http://bit.ly/interviewqa)

Code for designs:
* [CODE: United States License Page Game](http://bit.ly/uslpg-code)
* [CODE: Interview Question & Answer Application](http://bit.ly/interview-qa-pwa-code)

## Conclusions

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).