Reduce image sizes to improve performance
blahosyl opened this issue · 6 comments
Adding a higher resolution hero image lead to a drastic reduction of performance. Find a balance between a not too large file size and a good resolution.
The biggest culprit might not be the hero image, but rather, the grayscale pictures in the Problems & Solutions section.
Try to make images grayscale (possibly also tinted?) with an external tool rather than with CSS.
Commit nr. d54d599671c34b8090b805ba893018c3779985da solved the performance issue caused by using CSS filter to create grayscale pictures (score back to 98%).
Testing with a larger resolution hero image (commit) brought the score back down.
Created a 3rd, optimised sized image with TinyPNG. This works well on desktop, but not on mobile (score: 82).
I solved this by using the small image for mobiles and tablets, and the optimized one for desktops (commit).
This solved the issue, with a 96 Lighthouse score on mobile and 98 on desktop.
Further improvements suggested by Lighthouse involve eliminating the following from the page:
- FontAwsome
- Google Fonts
- YouTube
However, these are integral parts of the content and design, so they will not be eliminated.
Mentor suggestion: use image set instead of media query – media query might load both images.
Mentor: performance is not an issue for this project