Hi Shane
I have tested only the 1st site, the Teide one.
1.- You have some js inlined at the top, some of it depend on jquery, but jquery is loaded after the snipet, so maybe these snipets don´t run until jquery is loaded.
Maybe you must load jquery at the top of the head section and/or put the snipet at the botoom of the page or allmost at the bottom of the head section when all the css and js files in the head are loaded.
2.- The image for LCP is a css background, so don´t display until the css are loaded and procesed. Need you the parallax efect?
3.- Maybe the cloudfront make some strange header manipulation: webp images have a content-type for jpg, cache-control is set to private, don´t have etag header, images are gziped....
4.- The page weigth is 2,6Mb (compresed) and the images are 2,1Mb, make it more ligth. The l and r side images are near to 1mb.
Try this image and see how it look. Is 50% less kb.