[Resolved] GTmetrix performance issue

Home Forums Support [Resolved] GTmetrix performance issue

Home Forums Support GTmetrix performance issue

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #535065
    George

    I am using a video script on my website that imports video from a YouTube playlist and creates custom post types. Instead of importing the image in the post I am just using the YouTube image URL to display thumbnails in various places. One of those places is the footer when I am displaying the latest 3 imported videos using the WP Show posts addon along with some custom code to show the YouTube thumbnail straight from the YouTube server instead of importing it into the Media library.

    The issue I am having is related to how GTmetrix flags these thumbnails. Basically I am using CSS to scale those image down 100x75px size from their original 640x480px size. GTmetrix gives me a 0 grade on the Serve scaled images section:

    The following images are resized in HTML or CSS. Serving scaled images could save 148.9KiB (97% reduction).

    Is there a way to solve that issue? Website URL is:
    https://www.audiotutorialvideos.com

    #535362
    Tom
    Lead Developer
    Lead Developer

    I believe the only way to do that would be to serve the images closer to the size they’re being displayed at. Those tools don’t like it when a larger image is scaled down using CSS.

    #536466
    George

    Thanks Tom, I got a question: Is it possible to apply a thumbnail size (from the one in the media library) to an image that has not been imported in the media library and the only thing I have is the external image URL?

    If it helps, I am using this code to query an external image from a custom meta:

    add_action( 'wpsp_before_title','wpsp_add_videoimage_meta' );
    function wpsp_add_videoimage_meta($settings)
    {
      if ( 1169 == $settings[ 'list_id' ]  ) {
        $meta = get_post_meta( get_the_ID(), 'VideoImage', true );
        if ( isset( $meta ) && '' !== $meta ) echo '<a href="' . get_permalink( $id ) . '"> <img class="recent-videos-thumb" src="' . $meta . '" alt="' . get_the_title( $id ) . '"></a>';
      }
    }

    Then, I am scaling down with CSS.

    #536767
    Tom
    Lead Developer
    Lead Developer

    I don’t believe so. The image would need to be resized and server from the server it’s hosted on.

    #537062
    George

    No worries Tom, I have sorted that out. I used the str_replace function to query a smaller sized image for the thumbnails:

    add_action( 'wpsp_before_title','wpsp_add_videoimage_meta' );
    function wpsp_add_videoimage_meta($settings)
    {
      if ( 1169 == $settings[ 'list_id' ]  ) {
        $meta = get_post_meta( get_the_ID(), 'VideoImage', true );
        $lowres_thumb = str_replace('sddefault.jpg', 'default.jpg', $meta);
        if ( isset( $meta ) && '' !== $meta ) echo '<a href="' . get_permalink( $id ) . '"> <img class="recent-videos-thumb" src="' . $lowres_thumb . '" alt="' . get_the_title( $id ) . '"></a>';
      }
    }
    

    Thanks again!

    #537200
    Tom
    Lead Developer
    Lead Developer

    Nice solution! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.