While working at WP Rocket I saw so many Elementor customers struggling with a slow LCP metric, especially on mobile, due to their full-width “hero” images.
These full-width images at the top of the page often have text or other elements positioned over them, so most of the time this effect is accomplished in Elementor by using a background image on the container element.
While this looks great on the frontend of the site, it can often be damaging for the LCP score.
PageSpeed is a useful tool for certain metrics but it lacks some specific details.
Using a tool that shows you a waterfall chart can give you a different angle on performance. GTMetrix, Webpagetest.org and DebugBear are examples of tools that provide a waterfall chart.
What’s a waterfall chart?
The waterfall chart shows a list of every file that your website loads, in the order that those requests are made.
So it pulls back the curtain and gives you a peek at what’s going on behind the scenes when someone visits your site in their browser. It helps you find bottlenecks, errors and other performance issues.
The LCP Request Discovery recommendation in PageSpeed helps you to improve the Largest Contentful Paint (LCP) metric on your page.
The LCP element is the biggest piece of content above the fold on your page. It could be an image, a piece of text or a video. In PageSpeed, the request discovery audit is related to images.
In the Site Health section of your WordPress site you might see the warning:
Autoloaded options could affect performance
This is related to the options that themes and plugins request on every page load of your site. If there are too many, it will slow down the load time of the page. The Site Health warning triggers when the options are above 800kb.
Preconnect to required origins is a PageSpeed recommendation that you may see if your site loads files from external domains. It can be satisfied by adding either preconnect or dns-prefetch directives to your page.
preconnect and dns-prefetch are types of “resource hints” which are used to try and speed up the loading of files hosted on 3rd party domains.
Resource hints are small pieces of HTML that are added to the page, to communicate to the browser to start specific tasks as soon as possible.
This is what resource hints look like in the HTML of a page:
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />Code language: HTML, XML (xml)Don’t get this confused with preload, another type of resource hint, which is used for specific files.
In this article I’ll explain the difference between preconnect and prefetch, which you should use, and how to add these to your site.
Implementing browser caching on your WordPress website improves performance for visitors who visit multiple pages or visit your website multiple times.
It allows their computer to store commonly used files in their browser which means pages can be displayed faster on those repeat visits.