Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 23, 2024 at 3:00 pm #1474184
    0_o

    Hi, my LCP time is thru the roof and PageSpeed is indicating the issue is with the color section background I use at the top of my page (link in private content), any idea how to pre-load this background image, or any other tips how to improve this score? Thanks!

    Edit: now after tweaking a few settings, PageSpeed doesn’t suggest pre-loading anymore, but the LCP time is still very high and it’s mostly Load Delay and Render Delay. Not sure what it is and why it’s so high on that color section.

    • This topic was modified 1 month ago by 0_o.
    December 24, 2024 at 1:55 pm #1474233
    Mike

    Hey 0_o,
    Your TTFB is 1.7s, then your LCP is 2.8s
    TTFB is due to your server responding slowly, causing all other results to lag behind.
    Typically, TTFB should be about 200ms – 500ms, a theme can not change the TTFB.

    Best regards,
    Mike

    December 25, 2024 at 12:27 pm #1474252
    0_o

    Hi, I contacted my hosting company, they said they can’t find any issue on their end, and a test php they used loads very fast with a minimal TTFB.
    They suggested to add “fetchpriority=”high” to the photo I have at the top of the page (the background of the color section). Any idea if that should help, and if so, how to implement it?

    Also if you have any other suggestions regarding this issue that would be great. The LCP in PageSpeed jumps to a very high score (very low time) once I remove the color section image and only uses a plain color. I tried to install Optimole to compress and scale this image but it didn’t change the LCP score much.

    December 26, 2024 at 11:11 am #1474265
    Ismael

    Hi,

    Thank you for the update.

    You can try this plugin to preload images that cause high LCP: https://wordpress.org/plugins/preload-lcp-image/

    Best regards,
    Ismael

    December 26, 2024 at 10:20 pm #1474277
    0_o

    Thanks. That only worked fine for me when I wasn’t using CDN so I had to switch to another image optimization plugin that doesn’t serve images thru CDN.
    Now there’s another issue, dynamic image scaling doesn’t seem to work on image files that are set in CSS code, only in HTML/PHP, so background images for color sections doesn’t get dynamic image scaling (serving different sizes for users with different screen sizes).

    Any suggestions about that?

    Thanks again for all your help!

    • This reply was modified 3 weeks, 5 days ago by 0_o.
    December 27, 2024 at 8:07 am #1474286
    Ismael

    Hi,

    Thank you for the update.

    background images for color sections doesn’t get dynamic image scaling (serving different sizes for users with different screen sizes).

    You may need to manually apply a different background for different screen sizes using css media queries.

    Example:

    /* For small screens (up to 768px wide) */
@media (max-width: 768px) {
  .avia-custom-section {
    background: url('small-screen-background.jpg') no-repeat center center;
    background-size: cover;
  }
}

/* For medium screens (769px to 1024px wide) */
@media (min-width: 769px) and (max-width: 1024px) {
  .avia-custom-section {
    background: url('medium-screen-background.jpg') no-repeat center center;
    background-size: cover;
  }
}

/* For large screens (1025px and wider) */
@media (min-width: 1025px) {
  .avia-custom-section {
    background: url('large-screen-background.jpg') no-repeat center center;
    background-size: cover;
  }
}

    Best regards,
    Ismael

    December 31, 2024 at 12:45 am #1474418
    0_o

    Thanks for the suggestion. Instead of doing all of that for every color section on the website, can I somehow change the color section code to have the image file mentioned in HTML/PHP instead of in CSS? That would make things way easier and allow most image optimization plugins to just operate as intended.

    December 31, 2024 at 5:30 am #1474419
    Ismael

    Hi,

    Thank you for the update.

    Instead of doing all of that for every color section on the website, can I somehow change the color section code to have the image file mentioned

    This is possible but it would require modifications that are beyond the scope of support. You may need to hire a freelance developer or contact our partner, Codeble. Please check this link: https://kriesi.at/contact/customization

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.