Search code examples
htmlcsstwitter-bootstrap-3responsivegtmetrix

Performance report for myweb site

I am developing a web site and it is almost hosted. Due to low page loading speed I have tested my web site page speed performance via gtmetrix.com. So its report generate two issues as the reasons for low page speed.

Issues that affect to page loading speed

  • Combine images using CSS sprites

    The following images served from abc.com should be combined into as few images as possible using CSS sprites.

    Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

  • Specify image dimensions

    The following image(s) are missing width and/or height attributes.

    Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

    ...abc.com/banner.jpg (Dimensions: 512 x 33)

This is the waterfall

waterfall image 02

I'am OK with CSS sprites

.

System specifications

  • Laravel 5.5
  • Bootstrap 3.3.7

To images to be responsive I have added bootstrap class

<img src="../abc.com/banner.jpg" class="img-responsive" alt="Responsive image" id="banner"> .

So I added custom CSS to image via using id="banner"

#banner{
  min-width : 512px ;
  min-height: 33px ;
}

My problem is when I add that custom css web site lost its Responsiveness.

So could anyone please help on this. I want to specify dimensions for images and also it should be responsive. Because this affect to my web site speed.

Solution

  • Let me try to answer this question.

    Try to change your following code:

    <img src="../abc.com/banner.jpg" class="img-responsive" alt="Responsive image" id="banner">

    Into:

    <img src="../abc.com/banner.jpg" width="512" height="33" class="img-responsive" alt="Responsive image">

    You need to remove the id "id="banner"" to re-enable your banner responsiveness.

    You can check up my blog http://qibug.com to see the real world example to resolve issue "Specify image dimensions"; I was specified my images dimensions without sacrificing their responsiveness. Try opening the post page to check the same thing on the feature image.

    I hope you'll be okay with my answer.