Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time takes for the largest content element in the viewport to become visible.
Largest Contentful Paint (LCP) is a user-centric metric, and to provide a good user experience, the Largest Contentful Paint should occur within the first 2.5 seconds of the page load time.
Improving Largest Contentful Paint (LCP) is the first and foremost step to optimize your web pages for visitors next to First Input Delay and Cumulative Layout Shift.
Our web pages tested against new Core Web vitals and Largest Contentful Paint are the primary reason to achieve these feet.
Want live data? Check this URL on PageSpeed insights, and probably we will be scoring 100 on both mobile and desktop if you test from any part of the world. Our site also passed “Good” in the search console even though we are using Thrive Architect on most pages.
If you are launching a new site or optimizing an existing WordPress site, follow the guide along with us, and learn how to optimize sites from “Poor” to “Good” by following Google Guidelines.
Fix Largest Contentful in WordPress (Summary)
1. Use a hosting service that comes with a fast server response time. This post of Fastest WordPress Hosting tests 16 hosts to find which host is fastest. Go through it and see whether your host is fast or not.
2. Remove Unused CSS & JS using PerfMatters plugin.
BOUNS: Use NitroPack.io to automatically improve your scores. None of the above steps required. NitroPack will take care of everything. Use Code “BLOGGINGIO” to get a 5% discount on any plans. Below is a sample of how it works.
Note: This post is the first update of the LCP improvement guide for WordPress with simple to use solutions.
Fix Largest Contentful Paint in WordPress
According to Google, these are the four factors that result in low LCP value.
- Slow Server Response Time
- Slow resource load times
- Client-side rendering.
While our team has been working on various platforms optimizing LCP, nothing comes as easy as optimizing WordPress CMS.
Below are the best ways to improve the Largest Contentful Paint of your WordPress sites.
1. Reduce Server Response Times (TTFB)
TTFB measures how fast your server is sending the first byte of data to the end-user.
Lower the response time, faster is your webpages.
It would be best if you chose the Fastest WordPress Hosting to deliver fast loading pages. If your site is slow and your hosting provider still says “everything is fine,” they're probably overselling, and you need to pick a fast host.
I use and recommend the following hosts that work just out of the box.
- Templ – Affordable Cloud hosting powered by Google Cloud + CDN + DNS. The company offers Google CDN full page caching and the only host to offer this feature among the entire industry.
Why Templ? Let's make a practical comparison. The below TTFB results are from the site hosted on the SiteGround Startup plan that costs $19.99 per month. The TTFB starts from 245ms in the USA and more than 500ms in Europe while takes more than one second in Asian countries.
Let's take my site hosted on Templ $15 plan, and the site TTFB loads in less than 300 ms across the globe. In particular, Templ using Google CDN produces sub-100ms TTFB across all US locations.
Based on an independent test of 16 hosts, the Templ host becomes the Fastest WordPress hosting beating every single host in the industry.
You can also compare my above site result with any of your hosts, and I bet Templ always tops when it comes to performance.
While Server response time is the basis to fix LCP issues, you shouldn't compromise on cheap shared hosting, which will be renewed at more than $10 per month and requires yearly billing. On the other hand, Templ costs just $15 per month (with $30 free credits) forever and doesn't require any yearly billing.
If you can't move your sites out of SiteGround or other shared hosts due to the billing period, check this guide to improve TTFB in SiteGround.
In most cases, if your host's TTFB is less than 600 ms, this LCP WordPress will do wonders to improve TTFB. However, if your TTFB is over 600 ms, choose a good TTFB Hosting and follow our guide to make your URLs turn from “Poor” to “Good” in the search console.
2. Optimize WordPress Caching
For any type of WordPress sites, caching is the most essential thing. Most Managed WordPress Hosting runs server-side caching, which is faster than PHP based plugin caching. If your hosting company doesn't offer caching on the server, use W3 Total Cache or WP Rocket for caching.
For this tutorial, I'm considering WP Rocket since it does the job perfectly than any other caching plugin in the market.
Once activated the plugin, follow the below options for optimal settings.
Cache Tab: Enable Caching for mobile devices and enable “Separate Cache Files for Mobile devices.” Every other option can be left default.
File Optimization: Under Basic settings, enable all the options.
- Minify HTML
- Combing Google Font Files
- Remove Query Strings From Static Resources.
While most sites recommend you combine for fast loading pages, but it's not correct unless you don't know what HTTP type you servers are using. Head to HTTP/2 test and check once or ask your host for more info.
Also, you can enable Safe Mode For jquery (test manually)
Media: Enable Lazy Load for images as this got recommended by Google across all their contents. You can also enable LazyLoad for iframes and Videos. Replace YouTube iframe with preview images.
Enable “Disable Emoji” and also “Disable WordPress Embeds”
Preload: Most users ignore these settings but along with speed, preload settings should be optimized for better SEO rankings as the sitemap is the one that is going to tell Google about your site's new content.
Enable “Activate sitemap-based caching preloading,” and WP Rocket automatically finds your sitemap if you major SEO plugins like Yoast, Rank Math. If not, manually enter the sitemap URL in the text box.
You can also wait for WP Rocket Black Friday 2020 Deal to get at least a 30% discount on their plans.
Under the Prefetch DNS request, you can add your Google analytics, fonts, or other external requests. This option should be done as mandatory since Google recommends this for great Core Web Vital results.
WP Rocket team added a Github page with the most possible URLs that require DNS fetching. Even if you don't use WP Rocket, you can use the same on your caching plugins to improve load time.
To make things perfect, run your domain at Prefetch.xyz to get the list of domains that can be prefetched.
//maps.googleapis.com //maps.gstatic.com //fonts.googleapis.com //fonts.gstatic.com //ajax.googleapis.com //apis.google.com //google-analytics.com //www.google-analytics.com //ssl.google-analytics.com //youtube.com //api.pinterest.com //cdnjs.cloudflare.com //pixel.wp.com //connect.facebook.net //platform.twitter.com //syndication.twitter.com //platform.instagram.com //disqus.com //sitename.disqus.com //s7.addthis.com //platform.linkedin.com //w.sharethis.com //s0.wp.com //s1.wp.com //s2.wp.com //s.gravatar.com //0.gravatar.com //2.gravatar.com //1.gravatar.com //stats.wp.com
3. Use Fastest CDN
Here are the major CDNs I use to deploy and optimize hundreds of WordPress sites.
This is the list of fastest CDN in North America (USA & Canada) based on 300million tests per day.
Since CDN is pretty important, so I'm adding a few more info here. jsDelivr is an open-source for developers; Google CDN can't be used separately unless you host your sites on Google (Templ.io offers Google Cloud + CDN).
CDNetworks, CacheFly, Akamai, Verizon are priced at least more than $100/month and Fastly requires $50/month billing. Though Cloudflare is free, it's not the fastest; one needs to pay $20/month for a single site on the Cloudflare Pro plan.
Since Cloudflare is free, I'm writing this post with its configuration settings, and here is the official guide to WordPress StackPath settings.
You can either enable minify here or manage the same on settings of WP Rocket. However, Cloudflare settings are optimal for me.
Now, navigate to Caching tab and do the following settings.
- Caching Level – Standard
- Browser Cache TTL – Respect Existing Headers
- Always Online – ON.
Finally, to Page Rules. These are the important settings to improve your TTFB on a whole new level.
Through PageRules, we are going to deliver HTML pages from Cloudflare instead of your server.
By enabling this option, Cloudflare will store your content on its global data center locations. Even if your server is in the USA and while someone visits the Singapore site, the contents will be delivered from Cloudflare Singapore location instead of the USA. Thus the TTFB is highly reduced.
The concept is called Full Page Caching. Once the above steps are done properly, you will get the TTFB like this.
Now, you have solved five of Google suggestions like
- Slow Response Time
- Lazy Load images,
- DNS prefetching
- Edge HTML caching with Cloudflare.
4. Remove Unwanted & Slow Loading Plugins
If you are running a blog, most of the above settings are enough to improve LCP like how I did it for this blog.
If you can't achieve the desired results, follow reading the advanced LCP optimization. To perform any of these LCP processes, your site needs to be audited first.
Head to Gtmetrix.com and run the slow loading URL. Now check the waterfall tab and see which files take time to load. Now you need to think whether
- Any necessary plugins take time to load? Optimize or replace it.
- If an unwanted plugin takes time to load? Remove or replace it.
I'm concluding here like, various other factors can slow down your site. But after optimizing hundreds of sites, I believe the above things are the most common issues that we fix for any WordPress site.
Here comes some of the additional ideas to implement on your site.
A picture is worth a thousand words. Publishing blog posts without images aren't worth it in 2020 and largely affects leads and conversions.
With mandatory presence, Image optimization is one of the major factors to improve LCP.
5. Compress Images for Optimal Delivery.
Using a premium host like Rocket.net, it comes with inbuilt image optimization through Cloudflare Enterprise (Mirage and Polish), which does perform lossless image compression for unlimited images uploaded on the site.
Alternatively, you can use free image compression plugins like WP Smush, Imagify, etc., which does the job in limited numbers as they don't allow bulk processing of more than 50 images.
6. Use Image CDN to optimize images
The ideal option for image optimization is using an Image CDN. Your site images come with a fixed size and are delivered in the same format irrespective of end-user screen size. This hugely affects Core Web Vitals in common as the images are not optimized for user experience.
Latest Update: Lately, I'm getting better results with full-page caching instead of Image CDN. If your hosting uses full page caching, then you can skip this section.
This is where Image CDN comes us to recuse and here are the features
- Deliver images based on screen size
- Converts your image to WebP format for fast loading
- Loads images only in viewport
WP Compress is the all-in-one image optimization tool for WordPress. WP Compress not only cleans up your images but also serves images from its global network powered by Google Cloud. That's not the only thing; WP Compress also delivers optimized images based on screen size.
I found the device based image delivery to be most effective since mobile scores are the hardest part of LCP.
Compressing the image will not be effective as users browsing from different viewport devices may face loading issues. The only way to fix the issue is to deliver the right image size for the visitors' browser, either mobile or desktop.
7. Client-side Rendering
There are no common settings to fix with Client-Side Rendering. If your sites are shown “Good” in the search console, we can safely ignore these setups.
In a worst-case scenario like running a resource-hungry WooCommerce site, this client-side rendering can be instrumental and analyze the site to find the critical issues.
Since this involves custom works, we are skipping this Client-side rendering as only upon checking the site; anyone can give ideas.
- Choose themes or plugins that are lightweight.
- Avoid fancy widgets or embedding social media posts often
- Use WP Rocket iFrame settings while embedding Youtube videos.
You can easily use the GTMetrix waterfall tab to see which scripts can be delayed to reduce the initial load time, improving Largest Contentful Paint score.
WP Rocket includes a list of Scripts that can be delayed by default, which reduces 50% of our work.
Based on optimizing more sites in the coming days, I can expand the article with more ideas if time permits.
Use NitroPack to improve Largest Contentful Paint
NitroPack is our new favorite optimization service, suitable for non-technical folks and whoever needed a quick fix.
The below site is hosted on SiteGround GoGeek with caching performed by their “SG Optimizer” plugin. The LCP score is 7.7 seconds on mobile and 2.0 seconds on desktop.
Now, I used NitroPack free plan to test the site. The LCP score is 2.8 seconds on mobile and 0.7 seconds on desktop. That is more than 75% of improvements in the Largest Contentful Score.
For your better understanding, here is the table
|Compare||SiteGroung GoGeek (Mobile)||Nitropack Score (Mobile)|
|Time to Interactive||7.5s||2.4s|
|Total Blocking Time||1220ms||210ms|
|Cumulative Layout Shift||0.055||0.241|
|Compare||SiteGroung GoGeek (Desktop)||Nitropack Score (Desktop)|
|Time to Interactive||1.1s||0.3s|
|Total Blocking Time||0ms||0ms|
|Cumulative Layout Shift||0.003||0|
The major highlight is, NitroPack takes care of everything from caching, CDN, delay in script execution, HTML/CSS/JS minifying, and a complete image optimization module.
There is a free plan for you to test them out. If you are going for a premium plan, use code “BLOGGINGIO” to get a 5% discount on any plans.
Improve your WordPress Largest Contentful Paint
Google announced the Core Web Vitals will be a ranking factor in 2021 and it's just few months ahead of us.
Follow our guide to improve your LCP scores. If you have suggestions or improvements to the content, please input your thoughts in comments.!