Speeding up some websites

 Lately my pet project is learning to speed up the loading time of my many websites.

Here is a site as a first example and the tool i'm using to analyze the speed is from Google called LightHouse.

Laundronauts.com

The reason I chose to optimize this first is that it's probably the first website I had made on Carrd, and it is also one with the highest load times.  I'm trying to get it down from a 29% performance & 19.3 second load time and I'm wondering if I were to transfer the site to a CDN like cloudflare if that would help.

Okay, so after realizing that carrd already has some optimization and lazy loading features built into its template, I was still able to improve the score by 1% by changing all the images. Or this might be a time related 1% as now it's superlate and I imagine the internet isn't slow.

I am super frustrated though as I am not sure why this one is so much lower ranked than the other pages. I am listening to this video: https://youtu.be/nhJbA8jA-is?si=g35TNEcB0vQjZEcB where the issues are truly complex issues with LCP including the problem that  when you try to minimize the LCP, you end up with yet another LCP. 

And then he recommends using lightspeed cache plugin if his instructions aren't helping, but that's for wordpress only.

I'm reading that a CDN is only helpful with a high traffic site because if there aren't enough visitors to keep the caches "hot" then it will waste time saving caches for each lag of no visitor days.

Okay so I'm not feeling as frustrated now, because it's day two and the performance has improved by 3x or so.  Or maybe it hasn't I'm not sure. I'm using the chrome developer tools as suggested by this youtube. (ctrl shift i) and it looks like this now:

(this one is for desktop and the other was for mobile)

Did it improve or is it the same?

https://www.youtube.com/watch?v=0fONene3OIA < another helpful video 

I'm also using a new app for measuring images so that I can use src set code for responsive images and be able to accurately display dimensions for different sized images responsively dep on the console that the user is using for the page.  Metric Spy

Okay so now the issue I'm coming up against is that Carrd isn't developer friendly with putting in dimensions for each image. I'm wondering if it's worth asking about how I might be able to put in the code or if the code because it's embedded would slow down something.  Let's focus on the one image, the large one that seems to load slowest. I'm wondering if it's possible to add in the dimensions of it responsively with srcset code.  I've already optimized it. now I'm trying to define its parameters for faster loading, but the way carrd is set up, it looks like I have to learn how to code in an image or possibly how to add a style to set its sizes.

Another advantage to using code for images is the possibility of trying other formats like webp.

https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

I'm putting the new webp image online for now on the gmail account we set up for CMM.

Okay but, I'm seeing that it's not going to be easy to get a webpimage to just show up.  First of all there's some kind of security issues preventing the page from using google drive to see the image. Maybe I'll try the same code but with pinterest or similar

Okay, well that's a fail. But here's another tutorial that I found that was easy to use to make google analytics also start to record the page load time like lighthouse does, but per user per day.

https://www.lovesdata.com/blog/page-load-google-analytics

 

I just connected WFM site and I'm now hoping to add it to all the others.  But first a quick back break.