I am facing a problem with Google saying the mobile version of the site has a very slow Largest Contentful paint. Regardless of page it is always the top element in the page header, and it is generally in the 4 second range.
On the home page it is identifying the H1 as the problem, which is crazy. This is not an issue on the desktop test.
I am running WP rocket, and have followed all your performance tweaks that you have on your site for Salient and nothing helps.
I have turned off the animation on that H1 in the element settings but this appears to be a separate issue since it happens on all pages, on some that element is a p tag, but in all cases it is that first element in the heading causing the issue.
Help?
I included the URL on the form but it isn't showing here, so: https://officemovepro.com
I guess I wasn't clear enough, I have already followed that guide to no avail. There is something clearly going on with the way the theme is handling those elements and their animations.
This is also a 2 year old problem you clearly have not fixed. What am I supposed to tell my client? "Oh well" is not a suitable answer when Google ranking relies so heavily on mobile performance. https://themenectar.ticksy.com/ticket/2969185/
For the record I have the EXACT same problem on another client site, a completely different setup and web host.
And just for the record, your own template websites fail in the same metric. This image is from your Saient Mag prebuilt site here https://themenectar.com/salient/mag/
Also regarding the LCP, try adding the Background Image as a Row Background Instead of Column Background and enable the "Background Image Mobile Hidden" feature. See attached screenshot for location.
Okay, I am trying really hard not to get angry here, but it is getting harder with each response. I have followed that guide throughout and said so both in my original ticket and my last response. The setting you suggest I set has been turned on since the beginning.
The image is not the issue, Google is very clearly identifying the H1 as the issue on that page, and other text elements in the top of the site on other pages.
I have also clearly pointed out that this LCP problem dates back 2 years by your own ticketing system and that it appears on your OWN example sites.
If you run any further tests please refer to the fact that this is mostly a mobile issue.
The two main factors I'm observing on your site that are dragging down the LCP are the image settings and the lack of font optimization.
1. Your landing page, https://www.officemovepro.com/, has the top-level background image set to lazy load, which negatively impacts your LCP. Top-level images should not be lazy loaded to ensure they load as quickly as possible.
I know Tahir linked you to that section in the performance guide, and you mentioned that you've followed it. However, it appears that the images in the top section of your pages have not yet been set to skip lazy loading. Additionally, a mobile version of the image on your landing page is missing, so the desktop size (1500 x 985) is being loaded, further affecting the LCP metric. You can provide a smaller resolution/file size for mobile by using the responsive selector next to the background image.
In general, to achieve a high Lighthouse score on mobile, it's important to be very careful with images, media, and animations in the top section. If you compare your landing page to another page on your website that doesn't use images in the top section, such as your contact page, you'll already see a significant improvement in LCP (around 3 seconds) even before font optimization: https://pagespeed.web.dev/analysis/https-www-officemovepro-com-contact/cafq8zvzj6?form_factor=mobile
2. Once image loading is properly addressed, you can further improve the LCP for text elements by using the OMGF plugin to cache and host your Google Fonts locally: https://wordpress.org/plugins/host-webfonts-local/ Setting up that plugin should noticeably improve the LCP related to Google Typography.
That issue is likely due to the second point in my response—the lack of font optimization. If you use OMGF or a similar plugin, you can move the Google Fonts locally and cache/preload them. This will reduce the time it takes to render them on a throttled connection, such as in the Lighthouse mobile test.
I am facing a problem with Google saying the mobile version of the site has a very slow Largest Contentful paint. Regardless of page it is always the top element in the page header, and it is generally in the 4 second range.
On the home page it is identifying the H1 as the problem, which is crazy. This is not an issue on the desktop test.
I am running WP rocket, and have followed all your performance tweaks that you have on your site for Salient and nothing helps.
I have turned off the animation on that H1 in the element settings but this appears to be a separate issue since it happens on all pages, on some that element is a p tag, but in all cases it is that first element in the heading causing the issue.
Help?
I included the URL on the form but it isn't showing here, so: https://officemovepro.com
Hi there,
Thanks for contacting us.
There are several factors that may contribute to a website's performance issue. You can however begin by optimizing your site using this guide: https://themenectar.com/docs/salient/performance-optimization-guide/
I really hope this proves helpful for you. If you have any more questions or run into any problems, please feel free to reach out.
Best regards,
I guess I wasn't clear enough, I have already followed that guide to no avail. There is something clearly going on with the way the theme is handling those elements and their animations.
This is also a 2 year old problem you clearly have not fixed. What am I supposed to tell my client? "Oh well" is not a suitable answer when Google ranking relies so heavily on mobile performance. https://themenectar.ticksy.com/ticket/2969185/
For the record I have the EXACT same problem on another client site, a completely different setup and web host.
Attached files: google.PNG
And just for the record, your own template websites fail in the same metric. This image is from your Saient Mag prebuilt site here https://themenectar.com/salient/mag/
Attached files: salient-mag.PNG
Hey Again,
Please view: https://pagespeed.web.dev/analysis/https-officemovepro-com/97i93tf30v?form_factor=desktop .
There seems to be Image optimization missing which is reducing the page speed: https://themenectar.com/docs/salient/performance-optimization-guide/#:~:text=headers%20are%20used.-,Image%20Optimization,-Ensure%20that%20you .
Also regarding the LCP, try adding the Background Image as a Row Background Instead of Column Background and enable the "Background Image Mobile Hidden" feature. See attached screenshot for location.
Thanks.
Attached files: background-image-hidden-mobile.jpg
ThemeNectar Support Team
Okay, I am trying really hard not to get angry here, but it is getting harder with each response. I have followed that guide throughout and said so both in my original ticket and my last response. The setting you suggest I set has been turned on since the beginning.
The image is not the issue, Google is very clearly identifying the H1 as the issue on that page, and other text elements in the top of the site on other pages.
I have also clearly pointed out that this LCP problem dates back 2 years by your own ticketing system and that it appears on your OWN example sites.
If you run any further tests please refer to the fact that this is mostly a mobile issue.
Attached files: omp1.PNG
omp2.PNG
Hey Again,
This is what i am seeing right now as the LCP on Mobile. See attached screenshot.
Escalating this to the Salient Developer for further response on this issue.
Thanks.
Attached files: LCP-image.jpg
ThemeNectar Support Team
It's been 3 days since the last response here, has the developer taken a look yet?
Adding more priority to it .
Thanks for your patience on this.
Best
ThemeNectar Support Team
Hey Calder,
Thanks for your patience with this ticket.
The two main factors I'm observing on your site that are dragging down the LCP are the image settings and the lack of font optimization.
1. Your landing page, https://www.officemovepro.com/, has the top-level background image set to lazy load, which negatively impacts your LCP. Top-level images should not be lazy loaded to ensure they load as quickly as possible.
I know Tahir linked you to that section in the performance guide, and you mentioned that you've followed it. However, it appears that the images in the top section of your pages have not yet been set to skip lazy loading. Additionally, a mobile version of the image on your landing page is missing, so the desktop size (1500 x 985) is being loaded, further affecting the LCP metric. You can provide a smaller resolution/file size for mobile by using the responsive selector next to the background image.
In general, to achieve a high Lighthouse score on mobile, it's important to be very careful with images, media, and animations in the top section. If you compare your landing page to another page on your website that doesn't use images in the top section, such as your contact page, you'll already see a significant improvement in LCP (around 3 seconds) even before font optimization: https://pagespeed.web.dev/analysis/https-www-officemovepro-com-contact/cafq8zvzj6?form_factor=mobile
2. Once image loading is properly addressed, you can further improve the LCP for text elements by using the OMGF plugin to cache and host your Google Fonts locally: https://wordpress.org/plugins/host-webfonts-local/ Setting up that plugin should noticeably improve the LCP related to Google Typography.
Here's a post from our MAG demo that you referenced in one of your previous comments, which has an optimized LCP: https://pagespeed.web.dev/analysis/https-themenectar-com-salient-mag-2023-06-19-essential-skills-for-career-success/d6qy1c1xes?form_factor=mobile
Kind regards
Thank you for the detailed response, but your main page on the MAG demo still fails https://pagespeed.web.dev/analysis/https-themenectar-com-salient-mag/4n3w3wvkoj?form_factor=mobile
I will definitely look into the fixes you have mentioned, but the fact is every page I test with this theme has the same results. Please explain to me how this very basic page with literally no images has an LCP of 3.1 seconds? https://pagespeed.web.dev/analysis/https-www-officemovepro-com-moving-blog/ak7tj90ipv?form_factor=mobile It is literally still identifying the H1 as the problem.
Hey Calder,
That issue is likely due to the second point in my response—the lack of font optimization. If you use OMGF or a similar plugin, you can move the Google Fonts locally and cache/preload them. This will reduce the time it takes to render them on a throttled connection, such as in the Lighthouse mobile test.