simple UI

Building progressive web online store

Stoyan Delev
Published in
3 min readJan 31, 2018


Building online store is challenging, especially nowadays when everyone uses a mobile device; and because I like challenges I tried to build super fast and easy to use online shop. Here is how I did:

Minimal dependencies

I want the users to load the page as quick as possible, sending less code, in that case, is important, that is why I use Preact instead React and Unistore instead Redux. Meanwhile, Braintree client library is super expensive ~200kb. I am still considering using WebPayments API instead Braintree, but for now, just lazyload it in the background.
My library code is: Preact + Preact-i18n + Preact-Router + Unistore less than 10kb

Code splitting

For creating the project, I use preact-cli ( its similar to create-react-app but for Preact ) and code splitting is included in it, so splitting the code based on routes or components is straightforward.

Critical CSS

I use Critical Webpack Plugin for critical CSS. The plugin can be integrated quite easy to webpack. It automatically inlines critical CSS and lazy load the rest.

Puppeteer — prerender home page

Preact CLI comes with prerender functionality; however, it doesn’t work with dynamic content. Recently, Chrome Team introduced headless Chrome which is like a browser without shell. On top of it, there is a project named Puppeteer ( nodejs API to handle chrome ). I run a script which opens the headless chrome, crawls the content and prepopulates the homepage ( only ) with products.

H2 + gzip

Firebase hosting supports a lot of cool stuff like H2 and gzip, so no additional work is required, just upload the static file. Bonus: all content is delivered by Google’s CDN

ServiceWorker and Caching

SW also comes with preact-cli, no need any additional configurations. For caching data I save all products in localStorage, so returned users don’t need to wait for HTTP response.


WebP has slightly better compression and respectively size than JPG, so I serve webp images when the browser supports them. Also, using picture tag with multiple sources for the different dimension.

Form autofill

Form autofill is a must for any online store, plus removing registration process should make checkout process faster. As I mentioned above, I am looking into WebPayments API as well.

Lighthouse score 84 is not so bad but still some work needs to be done.
I am quite happy with the fact that the website is working even on IE11 ( also tested on mobile Firefox, Samsung, Edge and Safari ) so I managed to execute the first and most essential element of PWA: Progressive
The code of the project can be found here, is far away from beautiful, but it is at least working.



Stoyan Delev
Frontend Weekly

web developer obsessed by making web better ( focused on web perf and a11y )