Performance: improve image loading

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Base image node to install Vue dependencies
-FROM node:14.2 AS build-stage
+FROM node:14.13.1 AS build-stage
 
 WORKDIR /app
 
@@ -10,6 +10,6 @@ RUN yarn install
 # Build dependencies into dist folder, copy line may change as we restructure
 COPY . .
 RUN yarn build
-RUN npm install -g serve
+RUN npm ci -g serve
 ENTRYPOINT serve -s dist
 

frontend/Dockerfile-dev

@@ -1,11 +1,11 @@
 # Base image node to install Vue dependencies
-FROM node:14.2 AS build-stage
+FROM node:14.13.1 AS build-stage
 
 WORKDIR /app
 
 # Install dependencies in separate step to cache
 COPY package.json ./
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 # Build dependencies into dist folder, copy line may change as we restructure
 COPY . .

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "imagemin-webp-webpack-plugin": "^3.3.6",
     "validator": "^13.1.1",
     "vue": "^2.6.10",
     "vue-router": "^3.3.4",

frontend/src/views/Home/Slideshow.vue

@@ -6,6 +6,7 @@
         v-for="banner in banners"
         :key="banner.src"
         :src="banner.src"
+        loading="lazy"
         style="padding-left: 20px; padding-right: 20px;"
       />
     </InfiniteSlideshow>
@@ -21,15 +22,15 @@ export default {
   },
   data: () => ({
     banners: [
-      { src: require('../../assets/slideshow/b1.png') },
-      { src: require('../../assets/slideshow/b2.png') },
-      { src: require('../../assets/slideshow/b3.png') },
-      { src: require('../../assets/slideshow/b4.png') },
-      { src: require('../../assets/slideshow/b5.png') },
-      { src: require('../../assets/slideshow/b6.png') },
-      { src: require('../../assets/slideshow/b7.png') },
-      { src: require('../../assets/slideshow/b8.png') },
-      { src: require('../../assets/slideshow/b9.jpg') }
+      { src: require('../../assets/slideshow/b1.webp') },
+      { src: require('../../assets/slideshow/b2.webp') },
+      { src: require('../../assets/slideshow/b3.webp') },
+      { src: require('../../assets/slideshow/b4.webp') },
+      { src: require('../../assets/slideshow/b5.webp') },
+      { src: require('../../assets/slideshow/b6.webp') },
+      { src: require('../../assets/slideshow/b7.webp') },
+      { src: require('../../assets/slideshow/b8.webp') },
+      { src: require('../../assets/slideshow/b9.webp') }
     ]
   })
 };

frontend/vue.config.js

@@ -1,4 +1,22 @@
+const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
+
 module.exports = {
+  configureWebpack: {
+    plugins: [
+      // Make sure that the plugin is after any plugins that add images
+      new ImageminWebpWebpackPlugin(['src/assets/*'], {
+        overrideExtension: true,
+        config: [
+          {
+            test: /\.(jpe?g|png|gif)/,
+            options: {
+              quality: 75
+            }
+          }
+        ]
+      })
+    ]
+  },
   css: {
     loaderOptions: {
       scss: {
@@ -18,5 +36,5 @@ module.exports = {
       }
     },
     historyApiFallback: false
-  },
+  }
 };