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

x

Xin chào! Hãy ủng hộ chúng tôi bằng cách nhấp vào quảng cáo trên trang web. Việc này giúp chúng tôi có kinh phí để duy trì và phát triển website ngày một tốt hơn. (Hello! Please support us by clicking on the ads on this site. Your clicks provide us with the funds needed to maintain and improve the website continuously.)

Ngoài ra, hãy đăng ký kênh YouTube của chúng tôi để không bỏ lỡ những nội dung hữu ích! (Also, subscribe to our YouTube channel to stay updated with valuable content!)

Đăng Ký