Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Pull request Compare This branch is 20 commits ahead of cmda-minor-web-1718:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Timeline of Artists

Performance matters

Serverside application


This is a progressive web app that displays a timeline of artists in Amsterdam during the Golden Age.

It portrays the name, birthyear and deathyear of the artists.

When navigating to an artist you can see his work in a chronological timeline.

This website can be installed as an application.

Timeline of artists


For this build I used:

  • ES6 modules
  • Express & Node.js
  • Express request
  • GSAP Libraries

Progressive web app

This website contains:

  • Service worker
  • Webmanifest
  • Install prompt

npm scripts

Run all

This will start a Node server with bundled and compiled JS and SCSS to compressed CSS.

"dev": "parallelshell \"npm run start\" \"npm run build-js\" \"npm run build-css\""




  • Clientside rendering
  • No Critical CSS
  • Google Web Fonts
  • Minimal paint/layout triggering
  • Huge images

Before, Performance audit


To increase performance I've added:

  • Critical CSS
  • System fonts
  • Gzip
  • CSS compression
  • Minimal paint/layout triggering
  • [Failed] Image compression/resizing

Performance audit

  • ~90/100
  • Slow images are caused by API

To increase performance further

By using fs.writeFile I tried to download all the images, then compress and resize them with sharp and then write those to a folder for the client. I tried to get the images and resize/compress them before sending them to the client but I failed. To increase performance most I need to find a way to resize/compress the images.

Progressive web app

Progressive web app audit

  • ~73/100
  • App is installable
  • Install prompt will fire on further navigating
  • Has working Service Worker / manifest

Accessibility and Best Practices

Accessibility and best practice audit

  • 100/100 on both
  • Good color contrast
  • Keyboard accessible
  • Aria labeled when needed
  • Works without JavaScript


In the future I want to:

  • Compress the images
  • Add lazy loading


By changing clientside rendering to serverside rendering, adding system fonts, gzip, css compression and critical CSS... You can influence performance by minimaly half a second.

You can’t perform that action at this time.