Home Forums ART WordPress Theme Very slow mobile vs desktop FCP/LCP/Speed Index

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30650
    sim3000
    Participant
    Purchased
    Expired

    Hi, Google Pagespeed Insights consistently ranks mobile performance much lower than desktop performance which is a problem.

    Mobile FCP is ~4 s compared to ~1.5 s on desktop
    Mobile LCP is ~6 s compared to ~2.3 s on desktop
    Mobile Speed Index is ~7.5 s compared to ~2.5 s on desktop

    Here is a link to the results: https://pagespeed.web.dev/analysis/https-timothy-simmons-com/c5go7xjluu?form_factor=mobile

    Looking at the Mobile LCP in this report, this is 5860 ms broken down as:
    TTFB 23% 1,360 ms
    Load Delay 0% 0 ms
    Load Time 33% 1,940 ms
    Render Delay 44% 2,570 ms

    For comparison, the Desktop LCP is 2260 ms,
    TTFB 48% 1,080 ms
    Load Delay 0% 0 ms
    Load Time 2% 40 ms
    Render Delay 51% 1,150 ms

    The Load Time and Render Delay are significantly higher on Mobile compared to Desktop. What is causing this and how can it be corrected?

    For additional context, the site is hosted on a Lightspeed server and is using Lightspeed cache. It also uses Cloudflare CDN but it is still very slow. We can possibly further optimise the CSS and JS core code using plugins but there may be simple fixes and advice from the theme author.

    Thanks

    #30659
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi there,

    Welcome to SeaTheme forum.

    Please try to enable “Image Lazyload” both on the Grid module of BM content builder and Theme options panel.


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30663
    sim3000
    Participant
    Purchased
    Expired

    Thank you for your reply.

    Before receiving advice and therefore before making the recommended LazyLoad adjustments, the following changes were made and resulted in a significant google pagespeed improvement:
    1. Loading the two Font awesome fonts/icons (fa-solid-900 & fa-brands-400) was having a significantly negative impact on load speed. Removing the instagram icon from the menu and replacing with a simple manual text link via WP menus has made a significant speed improvement.
    2. Disabling the woo commerce cart from always showing in the menu has also improved load times.
    Unfortunately however, it is desired to show the instagram logo and the woo commerce mini cart so need to find workarounds to ensure showing them does not negatively impact of pagespeed times.
    Perhaps you have some advice here?

    Now acting on advice above:
    1. Image Lazyload in LiteSpeed Cache has been disabled (so not to clash with lazyload in the theme) and it has been enabled on both the Grid module of BM content builder and Theme options panel. (originally for the first post, it was enabled in LiteSpeed Cache, enabled in Theme options panel and disabled in the Grid module of the BM content builder)
    2. All caches have been flushed (LiteSpeed and Cloudflare).

    Issue 1:
    There is a good improvement in Google PageSpeed on Desktop (although other optimisation was also made which has improved the results before changing the lazyoad settings, see below), but Mobile is still a problem and similar to the opening post results. See report here: https://pagespeed.web.dev/analysis/https-timothy-simmons-com/985qb78zu1?form_factor=mobile

    Mobile FCP is 4.0 s vs 0.8 s on desktop
    Mobile LCP is 5.2 s vs 1.2 s on desktop

    Looking at the Largest Contentful Paint element:
    TTFB 12% 620 ms
    Load Delay 59% 3,090 ms
    Load Time 2% 90 ms
    Render Delay 27% 1,440 ms

    So it seems there is still an issue in how the mobile LCP element is being delayed from loading (3s) and rendering (1.4s).

    Can you please advise how this can be fixed?

    Issue 2:
    The issue “Largest Contentful Paint image was lazily loaded” now appears on both Mobile and Desktop reports. This is an issue that should be fixed somehow.

    Can you also advise how we would fix this please?

    Thank you!

    #30668
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi, welcome

    1.
    You can use PNG images to display the instagram icon via the custom CSS(“Appearance > Customize: Additional CSS”):

    .head-meta .socialmeida-a .fa.fa-instagram  { 
        width: 24px;
        height: 24px; 
        display: block;
        background-image: url(the-instagram-icon-url);
    }

    Please use child theme, add the codes into functions.php to remove the font-awesome assets:
    wp_dequeue_style( 'fontawesome-brand-min' );
    It looks like:

    function art_child_frontend_styles() {
    ...
    	wp_dequeue_style( 'fontawesome-brand-min' ); 
    ...
    

    I have no idea about the woo-cart-icon issue, it should be caused via the cache of CND

    2.
    Please try to optimize the capacity of the first image, currently it is 190k, please try to optimize it to within 100k or less.


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30671
    sim3000
    Participant
    Purchased
    Expired

    Thank you for the css for instagram logo and php for removing font-awesome assets. Will try later.

    Regarding poor google pagespeed mobile results vs desktop results, the first 3 featured images which show in the module (note only 2 appear above the fold) have now all been sized to 1920w and saved as webp at under 100k. Therefore pagespeed results are now including the smaller images.

    It is still recording a poor page speed though (averaging between 60 and 70). Note the desktop result is very good (typically around or over 90).

    Q1. Any idea why the mobile result significantly worse than the desktop result?

    Results as follows from this test: https://pagespeed.web.dev/analysis/https-timothy-simmons-com/58drcbs99k?form_factor=mobile

    FCP 3.1 s (very slow!)
    LCP 5.3 s (very slow!)
    Speed Index 3.9 s

    The LCP element is breaking down as:
    TTFB 12% 650 ms
    Load Delay 60% 3,170 ms
    Load Time 3% 160 ms
    Render Delay 24% 1,270 ms

    For comparison the desktop LCP results are:
    LCP 1.5 s (still a bit slow)
    TTFB 14% 220 ms
    Load Delay 24% 370 ms
    Load Time 49% 740 ms
    Render Delay 13% 200 ms

    Of course pagespeed applies throttling to the mobile result, but the LCP mobile result has much higher Load delay and render delay than on desktop. I wonder why this is

    I have checked in dev tools and the correct small images are being served for mobile with the suffix -arttheme-standard-thumb-650×433.webp. There are 3 images being served which are are 21k, 26k and 32k

    Q2. Do you know what is causing the LCP delays on mobile?
    Q3. Any ideas how to fix this!?

    It is also lazy loading the above the fold (view port) images which pagespeed is highlighting as a problem. I don;t think this is the issue as desktop also has this issue but still LCP still loads fast.

    Q4. How to prevent lazyload for the above the fold images?

    There is a significant amount of unused CSS (potential saving 87k) and unused JS (potential saving 132k). Maybe these are both slowing down load times and causing load/render delays?

    Q5. Do you think it requires removing the unused CSS and unused JS to reduce the TTFB and Load delay?
    Q6. If yes, can the unused JS libraries be prevented from loading using some code in functions.php (eg using dequeue like with the font awesome example you posted above)? I know there are plugins that can do this (eg Asset CleanUp) but seems simpler and cleaner just to add some lines of code?

    Thank you, really appreciate your quick support responses!

    #30673
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi, welcome
    1.

    I have checked in dev tools and the correct small images are being served for mobile with the suffix -arttheme-standard-thumb-650×433.webp. There are 3 images being served which are are 21k, 26k and 32k

    Please try to also optimaize these files: https://www.dropbox.com/scl/fi/lslxvebdbct94skz10l6s/qq_20240406110151.png?rlkey=0ahnknrocq32btxcstlhgmusm&dl=0

    2/3/4
    Based on this post, please try to create a Grid specifically for the first image, and set it to disable lazy load(In other words, create a new Grid to display the first image. you maybe need to reorganize the categories), and then test it again.

    5/6
    I’m not sure, TTFB is affected by many factors. However, removing unused CSS and JavaScript can be beneficial for website acceleration, but it comes at a high cost, as it is equivalent to rewriting CSS and JavaScript for your webpage.


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

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

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!