Fix performance issues in Lighthouse audit

[ddrosario]

Lighthouse will show a lot of opportunities that may make your front end more efficient.

[ddrosario]

One issue we came across was converting images to a newer format such as webp. We found out that in our application webp actually decreased performance. Below is a snippet of the conversation.

[ddrosario]

we can use Webp with the new html5 element so that there is a fallback for older/incompatible browsers that either don't support Webp, or the picture element (only one image is loaded). However when we are using images with the CSS Background Image, we would need to use JS to check for browser compatibility. If we specify multiple background images they will all be loaded. I know we are trying steer away from from using JS, so we could possibly replace the background images with picture elements, but I am not sure if that is best practice.

<picture class="project-tmb-img" > 
           <source srcset={{item.webp_image|absolute_url}}   type="image/webp">
           <source srcset={{item.image|absolute_url}}  type="image/jpeg">
           <img src={{item.image|absolute_url}} class="project-tmb-img" alt={{item.alt}}/>
</picture> 

[ddrosario]

So I ran audits on the site with next-gen(webp) formatted images and without,
using the webp results in a slightly lower performance score (by one to two points), with an increase of about .1s for most performance metrics.

Seeing that using the element/webp results in a slightly worse score, I would not recommend going forward the element/webp image format. Yes, it does get rid of an optimization "opportunity" suggestion, but there is no improvement in the performance scoring.

Here are the performance details of both the audits ran. I audited both version while being hosted on my personal gh-pages deployment in hopes of getting a consistent evaluation.

With next Gen Images:
Performance score: 71
First Contentful Paint: 4.0s
speed to index 4.0 s
Time to Interactive: 5.2 s
First Meaningful paint: 4.0 s
First CPU Idle: 4.2
Estimated Input Latency: 20ms

Opportunities

Eliminate render-blocking resources: 3.1s
minify JS: 1.35
pre connect to required origins .36s
defer offscreen images: .3
properly size images: .15

WITHOUT next Gen Images:

Performance score: 72
First Contentful Paint: 3.9 s
speed index 3.9 s
Time to Interactive: 5.2 s
First Meaningful paint: 3.9 s
First CPU Idle: 4.5
Estimated Input Latency: 10ms

Opportunities

Serve images in next-gen formats: 4.2s
Eliminate render-blocking resources: 2.95s
minify JS: 1.2
efficiently encode images: .75s
properly resize images: .15s