WP Manifestindependent plugin directory
manifest / performance / wordpress-lcp-preload-plugin

LCP Preload by SapyensDev

Plugin de WordPress que precarga la imagen principal de cada página para mejorar el LCP. Elige la imagen desde el editor o desde una tabla en Ajustes. Por SapyensDev.

by SapyensDev · github.com/sapyensdev/wordpress-lcp-preload-plugin · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/sapyensdev/wordpress-lcp-preload-plugin/archive/refs/heads/main.zip
Readme github.com/sapyensdev/wordpress-lcp-preload-plugin ↗

Leer en español

WordPress plugin that preloads the main image of each page (the one that is usually the LCP, Largest Contentful Paint) so the browser downloads it as early as possible.

What it does

In the <head> of every page or post of the enabled content types it adds:

<link rel="preload" as="image" href="..." imagesrcset="..." imagesizes="..." fetchpriority="high">

The image is chosen in this order: the one you set by hand on that page, otherwise the featured image, and if there is none, nothing is added. If a code filter changes the image, the source is shown as "Filter (code)".

Size warning

The chosen size must match the size your theme really displays for that image. If it does not, the browser may download the image twice. To check it, compare the preloaded image with the one in the <img> in the Network tab of the browser tools.

Why preload the LCP image

If the largest image on screen is discovered late (for example, because it comes from CSS or from a page builder), LCP gets worse. With the preload and fetchpriority="high" the browser requests it from the start.

Requirements

  • WordPress 6.0 or higher
  • PHP 7.2 or higher

Installation

  1. Clone this repository or download the ZIP.
  2. Copy the folder into wp-content/plugins/.
  3. Activate "LCP Preload by SapyensDev" in Plugins.
  4. Go to Settings > LCP Preload and choose the content types.

How to choose the image

You have two ways and both save the same thing.

"LCP image" box in the editor. It appears when editing pages and posts. There you choose the image, the size and, if you want, the immediate load checkbox. It also shows the effective source (Manual, Featured image or No image) and the warnings.

Table in Settings > LCP Preload > Pages tab. It lists your pages with the columns Title, Chosen image, Source and Warnings. It is useful to review and change many at once and save with "Save changes".

Immediate load

If you enable "Load immediately, without lazy loading", the plugin removes loading="lazy" from the resolved LCP image. An image that is preloaded should not wait for lazy loading.

Warnings

  • The image weighs more than the limit (Maximum weight in KB, 200 by default) or is not WebP or AVIF.
  • If a plugin stores your images outside the server (S3 or similar), the local weight cannot be checked and the weight warning does not appear.
  • More than one image preload is detected. This warning appears when you visit the page with a logged-in session that can edit it, because preloading too many images can hurt LCP. Check your theme and other plugins.

Font preload

In Settings > LCP Preload, "Fonts" field, write one URL per line. Supported formats: woff2, woff, ttf and otf. Each one is output as <link rel="preload" as="font" ... crossorigin>.

Translations

The plugin source strings are in English. A Spanish (es_ES) translation is included in languages/. To regenerate the files after changing strings, run php bin/make-pot.php and, after editing the .po, php bin/make-mo.php.

For developers

Filter to change the resolved image:

add_filter( 'sapyensdev_lcp_image_id', function ( $image_id, $post_id ) {
    if ( is_singular( 'product' ) ) {
        return (int) get_post_meta( $post_id, 'my_hero_image_id', true ) ?: $image_id;
    }
    return $image_id;
}, 10, 2 );

To know if a page has a manual image: SapyensDev_LCP_Resolver::has_manual( $post_id ).

Data on uninstall

Deactivating the plugin keeps the data. Deleting it removes the sapyensdev_lcp_settings option and the page metadata.

Development

curl -sSL -o composer.phar https://getcomposer.org/download/latest-2.2.x/composer.phar
php composer.phar install
vendor/bin/phpunit

The release ZIP is generated with git archive --format=zip --prefix=sapyensdev-lcp-preload/ -o sapyensdev-lcp-preload.zip HEAD.

License

MIT.

Maintained by SapyensDev.