Intermediate tutorials may include code modifications, or use of tools like FTP. If you’re not a full-on developer, but you’re also not scared of getting your hands dirty, these tutorials are good for you :)
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.
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.
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.
The Google PageSpeed recommendation to serve static assets with an efficient cache policy is all about browser caching. It’s usually pretty straightforward to fix on WordPress sites.
“Static assets” means the files on your site: CSS, JavaScript, images, fonts, videos (and other media files).
“Efficient cache policy” means that they have a long enough browser caching value so that they do not have to be downloaded by your site visitors frequently. Usually 4 months or longer is enough to satisfy Google and other tools.
Addressing PageSpeed’s recommendation to Reduce Unused CSS improves your site’s overall score, along with the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics.
Removing unused CSS is closely tied with removing render-blocking resources, and the plugins available will often let you achieve both things at once:
Whenever a user creates a password for their account in WordPress, by default you see a meter telling you how strong your password is:
You may see this both on the backend, for example in the Edit User screen, and on the front end, for example when WooCommerce customers create an account in your shop.
This password strength meter feature is handled automatically by a few files, one of them being: zxcvbn.min.js