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 very well, in fact. worked 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 of a web-based user interface designed for the purposes of pushing the limits of performance. reconception 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: the most active page on your website. IDENTIFY a new version of that page from scratch with a singular focus on optimization. BUILD all of the HTML, CSS, and JavaScript into a single "hyper-light" HMTL page. ASSEMBLE the hyper-light page behind a CDN with compression and HTTP/2 pipelining. SERVE both the original page, uncached, and the hyper-light page. MEASURE the results. ANALYZE 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 regularly. or similar tooling 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

Progressive

Super

Target

How to Make Regex Readable In JavaScript

8 Tips To Reinvent Your Project Meetings And Win

Linq Details

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Think like A Programmer?

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Using Kubernetes Network Policies

10 Best Practices for Every React Developer

12 Essential Coding Standards for Quality Web Development

How to Think like A Programmer?

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Using Kubernetes Network Policies

10 Best Practices for Every React Developer

12 Essential Coding Standards for Quality Web Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps