How to Overcome Serve Scaled Images on GTmetrix PageSpeed - hyderabadrichest

How to Overcome Serve Scaled Images on GTmetrix PageSpeed

Serve Scaled Images problem on GTMetrix has a big enough effect on the loading process of a website/blog and reduces the page speed score, I also experienced this when editing blog templates. Then, how to deal with Serve Scaled Image on GTmetrix?.

In this post, I will share tips on speeding up a blog, especially for those who have problems serving scaled images on GTmetrix on blogger or blogspot.

Serve Scaled Images on GTmetrix

On the blogger/blogspot platform, the problem of serving scaled images on GTmetrix usually occurs because the blog thumbnails are too large.

From the results of the speed test in GTmetrix, it shows the results of the blog loading speed performance are quite heavy, in the Serve Scaled Images section it is informed that the cause of slow loading is due to the image (image) with a value of F (42).

How to Overcome Serve Scaled Images on GTmetrix PageSpeed

We can see what image URLs affect the speed of the blog, it also includes tips for fixing the serve scaled images.

For example, on this blog, pictures with URL https://1.bp.blogspot.com/-vhkRN8Yi89A/XVDdYnKAgzI/AAAAAAAAMiU/khaWloy6ZOAsgsSJW_o2iBJuUTlPX52OwCLcBGAs/w420-h280-pk-no-nu/fitur%2Bwhatsapp%2Bboomerang.webp derived from the image thumbnail on the homepage, it has a size large enough (420x280) so that it reduces the GTmetrix speed score, and we are advised to change the size to 160x160.

And sure enough, the image comes from a thumbnail. How do you know? Judging from the size of the image, it's small. If you find an image that is more than that, it's also possible from the thumbnail image of the popular post widget or the latest article (pictured).

Then, how do you resize the thumbnail on blogger?

  • f you page speed on the homepage, chances are that the images that need to be improved are from the latest article thumbnails or the popular posts widget.
  • However, if the pagespeed on the posting page, the image that needs to be improved is the post image.
  • How to Resize Image Size

    After knowing where the image is in the thumbnail, then we resize the blog thumbnail image size by looking for the thumbnail image code via Edit HTML, how:

    Open your blog's dashboard, then go to Themes and select Edit HTML.

    Look for the thumbnail code <div class='img-thumbnail'>, usually followed by code like the following:

     <div class='img-thumbnail'>  
    ...
    <img class='...' expr:data-src='resizeImage(data:post.firstImageUrl, 420, "300:200")'/>
    ...
    </div>

    Maybe in some templates the structure is different, but more or less like that.

    If you use the VioMagz template, you will find the complete code as below:

      <div class='img-thumbnail'>  
    <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, "300:200")' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
    <b:elseif cond='data:post.thumbnailUrl'/>
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, "300:200")' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
    <b:else/>

    Next, edit the code by adjusting the size requested by GTmetrix (160x160). After editing, the code above changes like this:

     <b:if cond='data:post.firstImageUrl'>  
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 160)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
    <b:elseif cond='data:post.thumbnailUrl'/>
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 160)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
    <b:else/>

    Save Theme.

    Please check back on GTmetrix. I have proven this method and can solve the problem of serving scaled images in GTmetrix.

    This is the post for this time, hopefully this way of dealing with Serve Scaled Images on GTmetrix PageSpeed is useful and can increase your blog's page speed. Good luck.

    Show Comments
    Hide Comments

    0 Response to "How to Overcome Serve Scaled Images on GTmetrix PageSpeed"

    Post a comment

    Top Ad Articles

    Top Ad Articles

    Top Ad Articles 2

    Advertise Articles