Archived topic
GTmetrix performance issue
5 replies · Started by George on March 29, 2018
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).
- https://i.ytimg.com/vi/7gDKEhTs1u0/sddefault.jpg is resized in HTML or CSS from 640x480 to 100x75. Serving a scaled image could save 52.6KiB (97% reduction).
- https://i.ytimg.com/vi/csuUD2Dh_Y8/sddefault.jpg is resized in HTML or CSS from 640x480 to 100x75. Serving a scaled image could save 49.3KiB (97% reduction).
- https://i.ytimg.com/vi/32hyo83Ay9c/sddefault.jpg is resized in HTML or CSS from 640x480 to 100x75. Serving a scaled image could save 47.0KiB (97% reduction).
Is there a way to solve that issue? Website URL is:
https://www.audiotutorialvideos.com
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.
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.
I don't believe so. The image would need to be resized and server from the server it's hosted on.
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!
Nice solution! :)
