Preload the LCP image

<?php
/**
 * Preload the LCP Image
 *
 * Tells the browser to start downloading the largest contentful paint image
 * immediately, before it discovers the <img> tag in the HTML. This can
 * improve LCP by 200-500ms, especially when the image is below a CSS
 * background or inside a lazy-loaded container. Use fetchpriority="high"
 * on the <img> tag as well for maximum effect.
 *
 * Usage: Add to functions.php. Replace the URL and type with your actual
 *        LCP image. Use only for the single most important above-the-fold image.
 *
 * @category performance
 * @language php

 *
 * @author Adame Dahmani https://adame.io
 * @support Support my family project: https://adame.io/fundraiser
 */
add_action( 'wp_head', function () {
    if ( ! is_front_page() ) {
        return;
    }
    ?>
    <link rel="preload" as="image" href="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/hero.webp" type="image/webp" fetchpriority="high" />
    <?php
}, 1 );