Google has rolled out the Web Vitals Score. If you are a Webmaster who happens to care about the user experience offered to the visitors, then understanding Web Vitals Score is important. Those who are using Google Webmaster Tools have recently started receiving their LCP scores. Many among them have received an error LCP issue: Longer than 4s. This score is related to the user experience which the website offers. Page Speed is one important thing which needs to be optimised for users. We’ve covered a tutorial about using W3 Total Cache for optimisation of WordPress page speed. Soon, we’ll publish a complete article on how to speed up your website and reduce page loading time.
Troubleshooting LCP Issue: Longer than 4s
Google has done a good job in creating an algorithm which checks the heavy elements in the page which might reduce the user experience. Many webmasters have a bad habit of using thick elements and heavy images in their articles which increase the loading time and compromise the user experience with the webpage. LCP actually checks the time taken by the largest element to load on a webpage. It can be an iframe, or an image or any element which added to the page load time. Here are five things which you can do to reduce LCP time on your WordPress website.
1. Diagnose page for slow elements (CSS, Javascript or Images)
The very firsts step for solving the longer LCP time is to diagnose the source of the problem. You should use Google Page Speed Insights tool to check for your LCP scores on the individual pages which are problematic in Google Webmaster tools. Visit the above mentioned URL, insert your website URLs and click Analyse. The result would be given for mobiles and computers. You should notice Largest Content Paint in the results. It should be somewhere around 1.1s; as I inferred from this LCP detail on Google Developers information website.
In the above image, you can see that LCP score is 3.8 seconds which is not good. The above score is for mobile, the computer scores are a little better.
Scroll down a little on the same page and right below the Opportunities headline you’ll see possible solutions of your troubles. Google Page Speed insight tool would show you suggestions meant for improving the load time on your website.
2. Identify extra scripts and remove unused scripts
On the same Opportunities tab, you’ll find a list of the scripts which your website uses to enhance the experience. Honestly, many themes which are used by WordPress website owners contain different types of scripts which are not used on the front-end. Normally that is not the fault of the developers, instead the webmaster is unaware of those unused scripts. Just find out those scripts which are of no use in the frontend and remove them from the core of the website.
For example, if you are not using JetPack, or Contact Form or any other plugin, then scripts of those plugins should not appear on the frontend of the website. Further, any css files of the admin panel must not appear on the front end.
In certain WordPress websites, talking from my experience, I found that certain plugins were queuing scripts on the front end which were not needed. For example, jetpack.css was one file which was being loaded on the front-end while it was not needed because the website owner was not using any front-end feature of the jetpack.
3. Async or defer your scripts to offer better user experience
The use of Async often produces better results for websites which are dependant on some foreign javascript library. For example, one might need jQuery library before any child script depending upon jQuery is needed on the website. Async makes sure that the script is downloaded to the user browser as soon as the code is available.
Defer on the other hand first parses the HTML and then in the end executes the script. Async blocks the rendering of the page for the script download; whereas defer doesn’t block the page render.
<script async src="talkofweb.js"></script><script defer src="talkofweb.js"></script>If you are unable to edit the script tag of the theme on WordPress then you can use a famously used plugin Async Javascript by Frank Goossens. Through this plugin, you can choose to defer certain scripts as well as async certain ones. Make sure, as you use defer or async, your website should not loose its usability regarding sliders, animations or other script rich features. Further, after choosing between the two, don’t forget to test your website through Google Speed Tool.
4. Reduce Image Size and prefer using a CDN
Jetpack for WordPress has a built in CDN service for images. It will load your images from the WordPress servers. This would reduce the load time of the image. However, in some cases, loading images from an external CDN doesn’t bring in any good. Therefore, it’s always wise to re-check the page speed after using a CDN.
Further, one of the smartest and often ignored solution is to reduce and compress the image sizes. There might be some plugins available to do this job; however, I recommend that you crunch your images through photoshop before uploading it on your WordPress website. Make sure that the size of the image is not larger than required.
Most of the times, LCP score is reduced after using reduction and compression of images.
5. Lazy load anything which causes an increase in the page load time
If your webpage has so many images, then it is going to put some load on the internet connection of the visitor. Therefore, slow loading is expected. As a result, you should lazy load some images which would defer image load until a person brings that image in focus of his viewing screen. Lazy loading images is a good tactic to reduce the page load time; however, this should be kept in mind that lazy loading should not cause troubles to the user experience; such as it should not transform the page completely on scrolling.
W3 Total Cache provides an option of lazy loading images in the General Settings.
6. Make sure you don’t use too many ad-spaces
A lot of ad-spaces would also ruin the user experience. LCP number is all about enhancing user-experience; therefore, if you are using Adsense or other networks for serving ads, then make sure that you don’t use too many ad units. Further, number of ad units in the website depends upon the page design structure. It’s a good practice to check the page speed through Google Speed Tools after inserting ad code. Make sure that you use minimum number of ad spaces on your website which might not compromise much on the page speed.
For example, one thing I recently noted on different client websites was that auto show ads feature of Google Adsense was slowing down page speed. It’s preferable to switch it to manual code insertion.
7. Lazy load YouTube embeds and external content
If your website uses YouTube embeds for videos; then chances are that Google Speed Tool might mention that you should remove YouTube embeds. One solution for this is to lazy load your embedded videos on WordPress. The benefit of lazy loading YouTube embed is that it will load iframe of the video once someone clicks on it. As far as WordPress is concerned, Kevin Weber has developed a good plugin for this purpose, as he named it Lazy Load for Videos.
8. Call jQuery’s compressed version from Google Servers
Google has added jQuery in the hosted libraries. As it’s hosted on the reliable and fast content delivery networks of Google; therefore, it reduces the load time. In order to replace jQuery in your WordPress theme with the one hosted on Google, make sure to add the following snippet in your Appearance through Theme Editor.
function replace_talkofweb_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3');
wp_enqueue_script('jquery');
}
}
add_action('init', 'replace_talkofweb_jquery');9. Compress your scripts before serving them to the visitors
Often webmasters don’t use proper compression to serve text resources to their visitors. One of the best used technique is to use Gzip compression before serving pages on your website. In order to enable Gzip compress on your website, make sure your server has gzip available for php. Further, you need to enable compression using W3 Total Cache by visiting the Browser Cache section in setting.
In case you want to use modern compression technique, then you can follow this guide to use Brotli instead of Gzip. Brotli is a latest compression algorithm which can often serve better results than gzip. The problem of “LCP issue longer than 4s” is greatly resolved with using proper type of page compression algorithm.
