Following These 6 Steps Will Help You Build A Super Lightweight Website

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)

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

Also published at https://dev.to/rfornal/hyper-lightweight-website-designs-1h3d