Fix Optimize Cumulative Layout Shift(CLS), PageSpeed Insights

Chia sẻ với mọi người cách fix lỗi như dưới đây, 

Lỗi này do ta không được witdth, height cho tấm hình. Nếu tấm hình không được thuộc tính width, height, thì nội dung nó bị đẩy lên , đấy xuống, làm ảnh hưởng đến bố cục website, dẫn đến điểm số thấp

Cách fix nó bằng jquery, mình đã thử thấy ok đấy, các bạn thử nó xem nhé

<script type="text/javascript">
    function getRenderedSize(element) {
        var width = $(element).width();
        var height = $(element).height();

        return { width: width, height: height };
      }
      function getResponsiveImageSize(element) {
        var tempImage = new Image();
        tempImage.src = $(element).attr("data-src");// if using lazy load

        var width = tempImage.naturalWidth;
        var height = tempImage.naturalHeight;

        return { width: width, height: height };
      }
    $(document).on('ready', function () {

        setTimeout(function(){
				$("img").each(function(index){
					$(this).attr("alt","Hoanguyenit.com");
					let url_img = $(this).attr("src");
					let {width,height} = getRenderedSize($(this));
					
					 $(this).attr("width",width);
					 $(this).attr("height",height);
				});
			},500);
      });
</script>

 

Bài Viết Liên Quan

Messsage

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)