This repo is a server side version of this Rijksmuseum project. Using expressroutes.js I tried to make a minimal version of that app. It gets 10 art pieces from the Rijksmuseum API And the user can search the Rijksmuseum collection.
The app works offline after the page loads once. With the help of a Service Worker we make it possible to serve cached pages (previosly visited) to the user without an internet connection. When the user is offline and a visits a page not in the cache, He will get an offline page with a message and a list of pages from the cache.
- search for artworks via Rijksmuseum API
- See description of art piece.
- check previosly seen art pieces offline via a Service Worker.
Get the repo on your computer:
git clone https://github.com/olli208/minor-bt-eind.git
When you have NODE & NPM on your computer run the following command:
npm start
Then go to
To build run the following command:
npm run build
Browserfy makes a build.js file with all the dependencies needed.
{
"body-parser": "1.15.2",
"ejs": "^2.5.6",
"express": "4.14.0",
"handlebars": "^4.0.6",
"nunjucks": "3.0.0",
"request": "^2.81.0",
"routie": "0.0.1"
}
I used the slowest internet possible in the Chrome Dev Tools settings to see how this simple app works (and IF it works). Normally I would use ngrok to host the app when developing so I can test the app with Googles PageSpeed Insights and webpagetest. But I ran into two issues:
- For the Serice Worker to work I need HTTPS
- When using HTTPS i get erros because the API gets images via HTTP.
So for now I optimized a couple of things and I used Chrome Dev Tools to monitor the performance.
Finish: 17.58s || DOMContentLoaded: 17.63s
An easy optimization is enabling gzip in the sever.js file using a module compression.
Finish: 17.09s || DOMContentLoaded: 7.72s
The improvement is noticeable, and it's worth it to enable gzip on your server. It's easy to do and doesn't take a long time to set up.
Generated via criticalpathcssgenerator. Which makes te head look like:
<head>
...
<title>Single Page Web App</title>
<!--Critical CSS: -->
<style>
*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}body{width:100%;display:flex;flex-direction:column;background:#5f9ea0}
</style>
...
</head>
Finish: 15.95s || DOMContentLoaded: 6.82s
The critical path is the path to render a web page - what's needed before that can happen. CSS Stylesheets block rendering. Until the browser has requested, received, downloaded and parsed your stylesheets, the page will remain blank. By reducing the amount of CSS the browser has to go through, and by inlining it on the page (removing the HTTP request), we can get the page to render much, much faster.
- Jonasse Bastian Ohlsson
When usign a slow connection we get a faster page load and we see the important CSS first, before anything else. Like gzip it's easy to do and it just adds style element in the head.