[Support request] Very slow mobile site

[Vijaykumar]

Hi
We have done the optimization and our desktop speed score is very good but mobile core web vitals are showing poor stats.
When everything is the same for the desktop and mobile site, not able to figure out why mobile site Google page speed score is poor.

FYI, we are using WP-rocket for caching. Please note, the ads, JS, CSS etc all same for desktop and mobile site and there is no difference in code.

[Leo]

Hi there,

I’m not really sure if there is anything we can do about this from the theme’s standpoint.

Does the score improve with all plugins deactivated?

[Vijaykumar]

Score does not improve with changes in the plugins.

If there is no separate code for desktop and mobile site and the caching plugins are same then why is this much difference in loading?

[Leo]

That’s tough for us to say – the speed of your site depends on factors other than the theme itself.

Any chance you can try activating a twenty-series WP theme to see if the same differential issue occurs?

I just run your site through GTMetrix and the scores are excellent.

Also tried loading your site on my phone and it loads pretty fast for me.

[Vijaykumar]

Hi Leo
My question remains the same. It has the same theme, same plugins, same optimizations then why the site is loading pretty fast with an excellent score on Desktop but a very poor score and speed on mobile.

You can check the Google page speed test score for any page and you will notice for most of the pages the desktop score is excellent but the mobile score is very bad.

We are clueless about further optimization as to why it’s giving a bad performance on mobile when everything is the same? If it has anything to do with the plugins or ads it should have shown issues on Desktop as well.

[David]

Hi there,

The Field Data provided by the Google PSI says that your site is not well optimized for the Mobile visitors to your site – if those Mobile phone users are on slower networks / slower devices than the time it take to load for them will be longer.

Look to reduce the load for your mobile visitors by:

1. Reduce the number of requests your site makes – examples:
a. remove unnceccesary plugins
b. reduce the number of fonts you’re loading or remove unused variants:
https://docs.generatepress.com/article/google-font-variants/
c, reduce the number of posts being loaded on each page in Settings > Reading.

2. Reduce the size of the requests – you have several featured images that are over 100kb, one image is over 200kb.

3. Improve LCP times… your LCP element is the first featured image. This being lazyloaded is creating a long LCP time. Most lazy loaders have the option to exclude images with a specific CSS Class.

First add this PHP Snippet to your site:

// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' first-featured-image';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

Then you can use the first-featured-image class to exclude it from your lazy loader.

[Vijaykumar]

Hi David
Thanks for the steps for mobile optimization.

But do you think this can be an issue for the mobile site and not for the desktop site when both Desktop and mobile sites are using the same theme and plugins? If you take example of any page/post from our site you will notice 1 to 2 seconds time for time to interactive on the desktop site at the same time mobile site showing 6+ seconds for time to interactive.

We have also tried with the first image skip from lazy load but that should be an issue for the desktop site not for the mobile site as the mobile site above the fold section does not show any image so lazy loading should not affect the LCP.

[David]

Lets cover the LCP.
The code i provided above only applies to the Themes Featured Images. You’re not using the themes featured image on single posts so that does not apply – your first image in content will still be lazy loaded.

If i check the Home page where it does apply i see a noticeable improvement in Lab Data LCP times.

But as i said before those images could be reduced in size. On first load the first 2 post images are requested and they are 159kb and 295kb respectively. Thats almost 0,5mb of data being loaded when the page is first visited…. reduce those image sizes.

Mobile vs Desktop are always going to be different. The two major differences are:

1. Network connection – mobile visits will generally be across a slower 3g or 4g network.
2. Device processing power – mobile devices have less processing power – the more code you throw at it especially Javascript the longer it will take for the page to become Interactive.

Recommendations to improve – reduce the amount of Javascript files you’re site is running

Now when you run a google page speed test the lab data is generated using a simulated mobile device on what ‘i believe’ is a US based server. Looks like your server is based in Asia hence you’re seeing much longer load and TTI times on Lab Data then you’re are on your Origin Summary or Field Data.

Give it some time for the improvements you have made to show up in the Origin Summary.

[Author]

Posts