[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
- PageSpeed Score: 99%
- Total Page Size: 232KB
- Requests: 23
Sau đó mình test tiếp trên PageSpeed Insights điểm 100
Với 24 lần cảnh báo hình ảnh về bộ nhớ đệm
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
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
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.
Đó 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
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]