Improve performance for mobile

Hello,

Could you give me advise how to improve my rank in google for mobile device?

I have taken step due to your tutorial: https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/

I have also Wp Rocket Premium plugin installed. Could you check my website setting and check what else can I change? Still have not really good result for mobile. For desktop it is perfect. In private content my website data

Hello,

I apologize for the delay.

–Defer offscreen images – try to enable the default Lazy loading functionality in Theme Settings -> Performance. https://take.ms/Jh5fk

– Remove those https://take.ms/ehEUr global fonts in the settings of the Elementor: https://take.ms/XI8lV

-Serve static assets with an efficient cache policy – https://take.ms/47gRA, check this article on how to fix that: https://accelerawp.com/the-correct-way-to-serve-static-assets-with-an-efficient-cache-policy-in-wordpress/

-Image elements do not have explicit width and height – https://take.ms/FeQ6a, enable this https://take.ms/rFNFQ option in the settings of WP Rocket.

– Properly size images – https://take.ms/GsnQS , https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/?utm_source=lighthouse&utm_medium=lr

-Serve images in next-gen formats – https://take.ms/33XhY, it looks like not all images are optimized.

-Reduce initial server response time – https://take.ms/TBcgq, I do not see the cache option in your WP Rocker, are you sure that your page is cached?

Kind Regards

Hello,

thank you for your analysis. I have tried every point that you mentioned but I still have 70 score on mobile 🙁 I think the main problem in PageSpeed Insight is the carousel loading -> https://ibb.co/RyYQVbC

Can you try enabling some optimized options by your own and check the result in PageSpeed Insight ? I am not an expert in this field

Regarding the points:

–Defer offscreen images

I have enabled it

– Remove those https://take.ms/ehEUr global fonts in the settings of the Elementor: https://take.ms/XI8lV

Here it was not possible to remove but I have removed it globally in Elementor settings -> https://elementor.com/help/disable-google-fonts/#:~:text=To%20disable%20Google%20Fonts%3A,Fonts%20dropdown%20menu%2C%20select%20Disable. But problem still exists – maybe Your theme needs them?

-Serve static assets with an efficient cache policy – https://take.ms/47gRA, check this article on how to fix that: https://accelerawp.com/the-correct-way-to-serve-static-assets-with-an-efficient-cache-policy-in-wordpress/

I have ngix server and in my hosting, there was an option to switch on the cache

-Image elements do not have explicit width and height – https://take.ms/FeQ6a, enable this https://take.ms/rFNFQ option in the settings of WP Rocket.

Done

– Properly size images – https://take.ms/GsnQS, https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/?utm_source=lighthouse&utm_medium=lr

I will take a look at this image that are not optimized

-Serve images in next-gen formats – https://take.ms/33XhY, it looks like not all images are optimized.

I will also take a look at this.

-Reduce initial server response time – https://take.ms/TBcgq, I do not see the cache option in your WP Rocker, are you sure that your page is cached?

I have enabled this option in WP Rocket -> https://ibb.co/2ZZJZdX

Best regards

Hello,

1. This approximates when the main content of the page is visible to users, thus the site needs to be optimized in general so that the largest content element is displayed more quickly.
https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/?utm_source=lighthouse&utm_medium=lr

If we check your site via Insights, we can see other issues: which together can cause this problem. So I suggest you sort out other diagnostic issues and then re-check whether the “Largest contentful…” issue persists or not.

2. Could you please disable the server cache? Because I see that you made some changes but the same error shows, e.g. – https://take.ms/46Z0q, https://take.ms/o7qrMM

Kind Regards

Hello,

1. Ok but how should I fix these issues shown on InSight?
2. The cache on the server site has been disabled – I have this option on my hosting. I see that the score on InSight has decreased.

Hello,

May I disable 3rd party plugins for testing?

Looking forward to collaborating with you!

Kind Regards

Hello,

yes, but after testing, please switch them on.

Best regards

Hello,

At the moment I see the 80 score – https://take.ms/laHXl, but without fixing these issues:

Reduce unused CSS : https://take.ms/2F2y7, https://take.ms/riu7c. Turn off the Font Awesome in Elementor -> Settings -> Advances – https://take.ms/N0eIt

Properly size images: the solution is described here – https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/?utm_source=lighthouse&utm_medium=lr

Defer offscreen images: In the footer define the image just via the “Image” element – https://take.ms/xZC6R, https://take.ms/NaSoh

In the copyright area, you need to define that image via HTML Block -> Image element and then assign it as content – https://take.ms/4luN1

Images from the main menu, make them smaller e.g. 24×24 because now they are 500×500 – https://take.ms/ctypd, https://take.ms/ti9j7 and etc.

Reduce initial server response time – contact your hosting provider, because it is server-side. Note that you might see this warning from time to time when you clear the cache in the plugin.

Avoid an excessive DOM size – The number of DOM elements are generated in the process of content building. All page builder elements are DOM elements. If you want to reduce DOM elements you will have to reduce the content: widgets, products, menu items, and others.

You can try to use the Mobile version HTML Block to reduce the DOM size for mobile – https://take.ms/6PyUO

Additionally, some of these plugins affected the score, I cannot tell you exactly which one but after disabling it improved the score by around 10 https://take.ms/40fZ5

Kind Regards

Hello,

I appreciate your help. I disable Elementor fonts, change footer images as you write (Defer offscreen images) and change icon size to 50px.

Due to the plugin causing a 10-point lower result, I found out that the Google Analytics tag added by one plugin caused this bad result. I deleted this plugin and added the GA tag manually to the footer’s code but it seems that it doesn’t help. I think collecting data to GA reduces the overall Insight rate :/

Should I leave the switched cache option on my server side?

I also made a test on Insights after changes and my result is 68 on mobile 🙁

Attachments:

You must be logged in to view attached files.

Hello,

Looks like you have checked the site via HTTP, you need to set the https when checking the site – https://take.ms/lHxmX

Serve static assets with an efficient cache policy – You should cache immutable static assets for a long time, such as a year or longer, so you need to configure your server to return the Cache-Control HTTP response header:

https://take.ms/vXMSl

For now, it’s adjusted for 7 days on your server. It should be 1year+ as in the example: https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr#how_to_cache_static_resources_using_http_caching

Kind Regards

[Author]

Posts