Web performance and best practices

[Arthurin]

Thank you for this boostrap theme it's a really great work !
To make it even better I used few tools like Google Lighthouse to analyse this theme. I want a simple website yet with a fast loading time.

Results were far from perfect so before using it for myself I had to fix things and I wanted to share it so it can help others.
My results :

• total page size went from 1.66MB to 672KB
• total page request went from 32 to 22
• Lighthouse audit on mobile device : performance score went from 49 to 93

Here is the list of changes :

• Use of Lazy-loading
• Eliminate render-blocking resource : using defer (there is more to do for fontawesome, see bellow)
• Fontawesome : host locally and remove unused icons
  I followed this excellent article : https://blog.assistancy.be/blog/fontawesome-performance-host-locally
  Original size of all.js : 1 774 kB
  Stripped size :
  brand.js : 8 Ko
  solid.js : 9 Ko
  fontawesome.min.js : 54 Ko
  The main drawback for this 'ready-to-use' project : beginners trying to add new icons need to know how to do it properly because it requires one more step. An explanation in the README file could do the job imho. Loading time is much faster without this 1,7Mo file and we use only 9 different icons in it.
• Ensure text remains visible during webfont load (https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools)
• Improve perf with webp format
• Serve static assets with an efficient cache policy : I made a .htaccess but I didn't change the build to include it in the dist/ folder.

My commits could be more clean so I hope this post will help you go through my work ;)

Have a nice day