Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web performance and best practices #324

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

Arthurin
Copy link

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

Old result for mobile

New result for mobile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants