Phân tích đoạn code hiển thị hình ảnh của mạng VNPT trên blogspot


[blog]
Các bạn dùng blogspot thì đa số ai cũng biết đến đoạn code này trong template, lợi và hại ra sau thì cùng mình đi phân tích nó nhé.

<script type='text/javascript'>
    //<![CDATA[
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
        images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/, "lh4.googleusercontent.com");
    }
    //]]>
</script>

Mục đích của đoạn code trên là gì, là thay thế toàn bộ link có dạng

1.bp.blogspot.com
2.bp.blogspot.com
3.bp.blogspot.com
4.bp.blogspot.com
5.bp.blogspot.com
6.bp.blogspot.com
7.bp.blogspot.com
8.bp.blogspot.com
9.bp.blogspot.com

thành

lh4.googleusercontent.com

Để khi truy cập từ mạng VNPT hình ảnh sẽ hiển thị bình thường. Nhưng giờ đa số không thấy bị chặn hình ảnh nữa.

Bây giờ mình sẽ mổ bụng đoạn code trên xem bên trong nó có gì, và lợi hại ra sao cho blogspot.

Kết quả như sau:

Khi dùng đoạn code trên thì 1 hình ảnh trên blogspot của bạn bị load 2 lần với 2 link khác nhau, 1 link gốc là 1.bp.blogspot.com và 1 link thay thế là lh4.googleusercontent.com

Ví dụ: 1 file hinh.png mà load tới 2 lần
1.bp.blogspot.com/hinh.png
lh4.googleusercontent.com/hinh.png

Chỉ vậy thôi là blogspot của bạn đã bị chậm lại vì 1 hình ảnh mà Requests, Load tới 2 lần cho 2 link.

Sau đây là hình ảnh test speed cho 1 trang  để so sánh cho 1 blog dùng code và không dùng code.

1. Không dùng đoạn code trên: Kiểm tra tốc độ Speed

Phân tích đoạn code hiển thị hình ảnh của mạng VNPT trên blogspot

PageSpeed Score: 99%
- Total Page Size: 232KB
Requests: 23

Sau đó mình test tiếp trên PageSpeed Insights điểm 100

Phân tích đoạn code hiển thị hình ảnh của mạng VNPT trên blogspot
Với 24 lần cảnh báo hình ảnh về bộ nhớ đệm

Phân tích đoạn code hiển thị hình ảnh của mạng VNPT trên blogspot
Các chỉ số khá tốt khi không dùng đoạn code trên. Bây giờ mình thêm đoạn code bên trên vô blog và test xem nhé.

2. Khi dùng đoạn code trên: Kiểm tra tốc độ Speed

Phân tích đoạn code hiển thị hình ảnh của mạng VNPT trên blogspot
Như vậy các chỉ số đã thay đổi
- Tốc độ chậm lại: Từ 99% giảm còn 81%
- Total Page Size: Tăng từ 232Kb lên 376Kb , Page size càng nhỏ tốc độ load càng nhanh
Requests: Cũng tăng nhiều lần từ 23 lên 49, Requests càng ít thì tốc độ load càng nhanh

Sau đó mình test tiếp trên PageSpeed Insights điểm 99 giảm 1

Phân tích đoạn code hiển thị hình ảnh của mạng VNPT trên blogspot
Với số cảnh báo về bộ nhớ đệm của hình thì tăng gấp đôi từ 24 lên 43 

Đó là hình ảnh so sánh về kiểm tra speed khi dùng code và không dùng code bên trên.

Kết luận: Khi dùng đoạn code trên 1 hình ảnh bị load 2 lần, làm cho blogspot của bạn bị chậm lại. Không nên sử dụng đoạn code trên, các bạn vẫn muốn đổi link thì nên đổi thủ công bằng tay.

Các bạn có thể kiểm tra, test tại trang: https://gtmetrix.com

Nội dung viết bởi www.giaodienblog.net bài viết mang tính chất tham khảo.
[/blog]