Site logo

Archived topic

Scrset issue

23 replies · Started by Evenit on June 12, 2021

Viewing posts 16–24 of 24

Yeah it looks like it - although it should work as the srcset and sizes code is correct in the link. Reasons for it to not work are many, but one thing i just noticed is that the preload link is before the viewport meta which could be the issue.

How is the preload being added ?

Interesting.
I added the img preloading code using the Snippets plugin, but I don't have controlo on the viewport meta tag.
Do you have any suggestions on how I can insert it later?

Whats the code you added ? if its an add_action hook then we can increase its priority to - a fake example:

add_action('wp_head', 'my_made_up_function', 10 );

The 10 is the default priority - if you increase that to say 1000 it will get added in much later in the HTML which will be after the viewport meta.

This is the code:

/**
 * Preload attachment image, defaults to post thumbnail
 */
function preload_post_thumbnail() {
    global $post;
    /** Prevent preloading for specific content types or post types */
    if ( ! is_singular() ) {
        return;
    }
    /** Adjust image size based on post type or other factor. */
    $image_size = 'full';

    if ( is_singular( 'product' ) ) {
        $image_size = 'woocommerce_single';

    } else if ( is_singular( 'post' ) ) {
        $image_size = 'full';

    }
    $image_size = apply_filters( 'preload_post_thumbnail_image_size', $image_size, $post );
    /** Get post thumbnail if an attachment ID isn't specified. */
    $thumbnail_id = apply_filters( 'preload_post_thumbnail_id', get_post_thumbnail_id( $post->ID ), $post );

    /** Get the image */
    $image = wp_get_attachment_image_src( $thumbnail_id, $image_size );
    $src = '';
    $additional_attr_array = array();
    $additional_attr = '';

    if ( $image ) {
        list( $src, $width, $height ) = $image;

        /**
         * The following code which generates the srcset is plucked straight
         * out of wp_get_attachment_image() for consistency as it's important
         * that the output matches otherwise the preloading could become ineffective.
         */
        $image_meta = wp_get_attachment_metadata( $thumbnail_id );

        if ( is_array( $image_meta ) ) {
            $size_array = array( absint( $width ), absint( $height ) );
            $srcset     = wp_calculate_image_srcset( $size_array, $src, $image_meta, $thumbnail_id );
            $sizes      = wp_calculate_image_sizes( $size_array, $src, $image_meta, $thumbnail_id );

            if ( $srcset && ( $sizes || ! empty( $attr['sizes'] ) ) ) {
                $additional_attr_array['imagesrcset'] = $srcset;

                if ( empty( $attr['sizes'] ) ) {
                    $additional_attr_array['imagesizes'] = $sizes;
                }
            }
        }

        foreach ( $additional_attr_array as $name => $value ) {
            $additional_attr .= "$name=" . '"' . $value . '" ';
        }

    } else {
        /** Early exit if no image is found. */
        return;
    }

    /** Output the link HTML tag */
    printf( '<link rel="preload" as="image" href="%s" %s/>', esc_url( $src ), $additional_attr );
}
add_action( 'wp_head', 'preload_post_thumbnail' );

This line:

add_action( 'wp_head', 'preload_post_thumbnail' );

Change to:

add_action( 'wp_head', 'preload_post_thumbnail', 20 );

That will add it after the viewport meta.

Fingers crossed !

That worked - the preload is happening after the viewport meta and chrome is only making a single request of the right size!!!
I notice the PSI report does raise the Properly size images opportunity as the image request is 66.4kb and it reckons it could be 6kb smaller ... aside of optimizing the images not much more we can do there.

Yes! Thank you very much for all your help!

Glad to be of help !

This archived topic is closed to new replies.