search

itsValyria / choices-choices-the-tech-stack

Kies een andere tech-stack voor het ontwerpen en bouwen van een website voor een opdrachtgever
https://choices-choices-the-tech-stack-nu.vercel.app
MIT License
0 stars 0 forks source link

Test performance of the website #24

Closed itsValyria closed 17 hours ago

itsValyria commented 1 day ago

Lighthouse audit

What was the initial score?

The initial score was 85 with my biggest issue being largest contentful paint.

Image

How am I going to improve this?

First, I tried to add a srcset to improve the issue. This did not solve the problem. I looked up the directus docs to try something new. I changed every possible width of the image to also have a webp format, these files are usually exceptionally smaller.

            <img 
              src={`https://fdnd-agency.directus.app/assets/${contouring.image_scan.id}?format=webp`} 
              srcset={`https://fdnd-agency.directus.app/assets/${contouring.image_scan.id}?w=300&format=webp 300w,
                      https://fdnd-agency.directus.app/assets/${contouring.image_scan.id}?w=600&format=webp 600w,
                      https://fdnd-agency.directus.app/assets/${contouring.image_scan.id}?w=1200&format=webp 1200w`} 
              sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px" 
              alt="CT-Scans" 
              loading="lazy" 
              width="384" 
              height="384" 
            />

Results

Thanks to the adjustment, the web page now scores 99 instead of 85, I'd say thats quite the improvement.

Image