Search code examples
serverpagespeed

PageSpeed says my image loading delay is slow, is it my server?

I have an issue with a website I have only at mobile. Home page and portfolio do not load some times. Google pageSpeed says my images loading time is slow: https://pagespeed.web.dev/analysis/https-dfa-gr/hpx8f9ttp4?form_factor=mobile

subpart % time
TTFB 13% 600 ms
Loading delay 79% 3.800 ms
Loading time 7% 320 ms
Performance delay 1% 70 ms

Is this a server problem? Is the server slow or my configuration?

Solution

  • Is this a server problem? Is the server slow or my configuration?

    If this was a server issue, this would show as a slow TTFB (with the exception of when cached content hide server slowness - but then it would not show as slow LCP).

    This says the main problem is on "Load Delay" phase. That means you have the HTML but the browser is choosing not to load the LCP image for a long time after that.

    That's usually due to one of two reasons:

    1. Client-side JavaScript being required to display the page contents.
    2. The page explicitly telling the browser not to load the image until later (using loading=lazy).

    In this case it's both.

    If you turn off JavaScript the page does not load at all, except to show a spinner. Ideally the browser will be able to show most of the page (and especially the LCP image) without needing to wait for JavaScript to run, and only then will it add JavaScript to add interactivity to the already rendered webpage.

    This can also be seen if you run a WebPageTest test on this:

    [Waterfall

    The LCP image is at the bottom of that waterfall and is the 40th resource requested on the page. It is also not started to be requested until 4.5 seconds. This was because, despite the image being in the initial HTML returned by the server:

    <img decoding="async"
     src="//www.dfa.gr/wp-content/uploads/slider/cache/2c905f90e3381b1cab8edda2fca2634b/kertus-2025-scaled.jpg"
      alt=""
      title=""
      loading="lazy"
      class="skip-lazy"
      data-skip-lazy="1">

    Note the loading="lazy" (despite the skip-lazy instructions!).

    It looks like the main LCP image is implemented as a slider, which is initially rendered hidden until the JavaScript for the slider kicks in. And that takes a while, after which it then has to load the image.

    I suggest you look at the slider plugin settings to see if you can avoid this and get it to load earlier (even before the slider code is loaded).

    Or, perhaps better, have the main image be a normal image so it loads quickly, and have a slider beneath this, that it's perhaps more acceptable to have it load slower.