- This topic has 35 replies, 4 voices, and was last updated 2 years, 7 months ago by David.
-
AuthorPosts
-
June 8, 2021 at 8:10 am #1815082Charbel
Hello Team,
Hope all is well.
How to fix the Largest Contentful Paint in Google PageSpeed Insights to improve LCP for Desktop/Mobile which is related to the background image.
Here is the test: Largest Contentful Paint element 1 element found.
As we all know, Largest Contentful Paint (LCP) is a Google user experience metric. It is set to become a ranking factor starting June 2021.
Example: https://charbelnemnom.com/azure-defender-for-app-service-in-azure-security-center/
P.S. I am using Cloudflare caching and WebP is enabled but is not working. Lazyloading is also disabled in JetPack.
Your help is highly appreciated.
Thank You!
-CharbelJune 9, 2021 at 1:33 am #1815774ElvinStaffCustomer SupportHi there,
I believe you’re using the post’s featured image as a background for the Header Element?
You can try David’s suggested PHP here – https://generatepress.com/forums/topic/cls-problem-with-slideout-overlay-and-page-hero/#post-1774501
And further advice here – https://generatepress.com/forums/topic/cls-problem-with-slideout-overlay-and-page-hero/#post-1775314
The code basically preloads the background image and assigns it as the background image using CSS.
Make sure you clear Cloudflare’s cache after applying this so it serves the latest change of the site.
June 9, 2021 at 2:24 am #1815813CharbelHello @Elvin,
Thank you for your kind support!
Yes, I am using the post’s featured image as a background for the Header Element, as well as, on the home page for the latest post.
I applied @David’s suggested PHP as described here: https://generatepress.com/forums/topic/cls-problem-with-slideout-overlay-and-page-hero/#post-1774501
I modified the @media max-width to 700px instead of 500px since all my feature images are 700px width.
add_action( 'wp_head', function() { if( is_single() ) { $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium'); echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>'; echo '<style> @media(max-width: 700px) { .page-hero { background-image: url('.$featured_img_url .');} } </style>'; } });
It doesn’t seem to work either. It does seem to improve the Largest Contentful Paint Element.
This is the largest contentful element painted within the viewport.I cleared the Cloudflare cache multiple times:
Any suggestion, please?
Thank You!
-CharbelJune 9, 2021 at 6:49 am #1816101DavidStaffCustomer SupportHi there,
if i check the PSI reports you linked to i see the FCP time is 2.8s – that needs to be improved first, as LCP will never be less then LCP, and any improvements made to FCP will generally improve the LCP time.
So looking at the PSI report there are several opportunities to improve:
1. Reduce initial server response time – this is something you should check with your host.
2. Defer offscreen images – use a Lazy Loading plugin to defer their loading
3. Reduce unused JavaScript & (under Diagnostics ) Reduce the impact of third-party code – these are 3rd party advert codes which don’t need to be loaded in the critical path. You can use a Plugin like Flying Scripts to reduce defer the loading of those scripts.You need to make those improvements before you can looking at optimizing the LCP.
June 9, 2021 at 1:07 pm #1816689CharbelThank you @David for your help and feedback as always!
Please note that the PSI report that you saw from the link I shared above is showing both, the Original summary which is dated to the last 28 days where the FCP/LCP are between 2.2 to 2.7.
However, if you look at the Lab Data (current performance) below, we see much better results, FCP/LCP are below < 1.2.I need to improve the Largest Contentful Paint element for the background image which is indicated under Diagnostics section – 1 element found.
It’s the same for the home page, as well as, for the post.Could you please advise?
Thank You David!
June 10, 2021 at 3:08 am #1817191DavidStaffCustomer SupportAs note the Origin Summary is for ALL pages that data has been collected – not the specific page you see under the Lab Results.
The code provided by Elvin isn’t going to work as you have webP image conversion. So currently with that code being added your just loading a JPEG file that isn’t used as the server is converting a later request to webP.When i re-run the PSI test you linked to above – i get really huge fluctuations in LAB timings – these are the Mobile test:
FCP: 2.8 LCP: 2.8
FCF: 2.8 LCP: 3.6
FCP: 2.8 LCP: 4.1
FCP: 2.8 LCP: 8.4 (!!!)The one static part is the FCP – which is above where you want it to be. The LCP sometimes matches that timing which is good – but the fluctuations show that other code is being loaded ‘sporadically’ and interfering with the render of that image.
I ran a few chrome Dev performance tests and each time the load order for various scripts changes. You may want to speak to the host about this.
One thing i see is a lot of advert scripts being loaded sometimes before the LCP request. Ideally you should defer ALL advert scripts so they don’t bog down the browser from completing the render.
June 11, 2021 at 3:29 am #1818386CharbelThank You @David for the details, much appreciated!
Please note that I have removed the code-shared by @Elvin since I use Cloudflare and it’s converting the images to webP. As you confirmed, I won’t get the benefit of that.
Please note that I spoke to my host and I upgraded the size of the server and added the Accelerated Networking feature.
Accelerated networking enables single root I/O virtualization (SR-IOV) to a VM, greatly improving its networking performance. This high-performance path bypasses the host from the datapath, reducing latency, jitter, and CPU utilization, for use with the most demanding network workloads.Additionally, I have also enabled Cloudflare Argo smart routing feature.
So I made the maximum performance possible to the server/network, however, I can’t take out the advert scripts.
Could you please recheck and advise if we can do something to the Largest Contentful Paint element – 1 element found under diagnostics?
Any suggestion, please?
Many thanks, David!
June 11, 2021 at 6:20 am #1818548DavidStaffCustomer SupportThe issue remains the same.
I am still seeing huge variations in Lab Data timing when i run multiple tests
Below the Lab Data in the PSI report you can can check > Show audits relevant to: LCP.You will see only the opportunities and diagnostics relevant to the LCP.
None of the tests report any issues with image sizes.
The 3 issues that always show ( some tests show more are):Reduce initial server response time
Reduce unused JavaScript
Eliminate render-blocking resourcesThose are the issues to be resolved to improve LCP.
In regards to advert scripts – i didn’t mean remove them, but to defer their loading so the criticial path is loaded, FCP and LCP are rendered and then those scripts are loaded.
However, as a general rule Background images are always going to be slower loading as they rely on CSS. May be worth exploring NOT using a Header Element and just display the Featured image.
June 11, 2021 at 6:37 am #1818565CharbelThank you @David, much appreciated!
Could you please advise how to test and remove the Header Element and just display the Featured Image?
I would like to explore that option and see if I get some improvement.Thank You!
June 11, 2021 at 7:51 am #1818811DavidStaffCustomer SupportIn Appearance > Elements – Quick Edit the Header Element you have set to display on Posts and set the Status to Draft. This will temporarily remove it and the default them settings should apply.
June 11, 2021 at 8:01 am #1818829CharbelThank you @David,
It looks nice, however, I did not clear the cache publicly yet, so I can see it from my side only.
Now the picture is clearer without text on it.However, what I have noticed is the Title and details are above the featured post image.
I would like to have the Featured Image image first and then the rest (Title, etc).
Could you please advise if this is possible?Thanks!
-CharbelJune 11, 2021 at 8:12 am #1818851DavidStaffCustomer SupportGo to Customizer > Layout > Blog –> Featured Images, select the Posts tab, and change the Image location to Above Title.
June 11, 2021 at 8:29 am #1818877CharbelThank you @David, much appreciated!
I cleared the cache from my side. You should be able to see it now from your side.
Could you please advise if I still can I improve something?
Is the layout correct now? It’s a big change from the Background image to display the Featured Image.
Does any suggestions please?Thank You!
June 11, 2021 at 8:35 am #1818882DavidStaffCustomer SupportNot seeing the change yet, and neither is Google – may take a while for the CDN to propagate or some other server page caching needs clearing.
June 11, 2021 at 8:48 am #1818896CharbelHello @David,
Maybe you can check another article here which is not cached on CDN yet.
https://charbelnemnom.com/audit-subnets-that-do-not-have-network-security-group-associated/
Could you please verify the design layout and performance?
Many Thanks!!!
-
AuthorPosts
- You must be logged in to reply to this topic.