The main issue seems to be that the slider is not a separate module but is built into the template, and there is a setting for transition time that applies equally to all slides.
In other sliders I have used (think DJ Image Slider for example) you can set the transition time independently for each slide, so I think in that case I could set the time for the first slide to zero which would make it load right away.
I did discover that I had uploaded full resolution images (4928px) for some of the images including the first one, so I resized them all down to 1900px wide.
I also use JCH Optimize on this site and enabled loading of WEBP images and also the sprite generator which seem to have helped. There are lazyload settings in that component but I don't have it enabled.
One other thing I tried was adding the first slide as the background for the header area in the css:
#header_bg {
background: url(../../../images/backgrounds/beats-and-bites-20250215-df0_1339.jpg);
}
However this created a weird shift when the first slide loads, so I gave up.
Anyhow I think it's better now and I've spent enough time on it!