Lazy Load, Adaptive Image, Gzip, DNS Prefetch - Kỹ thuật tăng tốc cho website
Để cải thiện tốc độ tải trang web, có nhiều kỹ thuật khác nhau có thể được áp dụng. Trong bài viết này, Bizfly Cloud sẽ giới thiệu bốn kỹ thuật phổ biến và hiệu quả nhất bao gồm: Lazy Load, Adaptive Image, Gzip và DNS Prefetch.
- Tại sao website tải chậm?
- Làm cách nào để cải thiện tốc độ chậm chạp đó của website?
- Tăng tốc độ tải trang bằng cách nào?
Cụ thể những kỹ thuật này sẽ giúp website của doanh nghiệp được tối ưu hóa một cách tốt nhất.
1. Kỹ thuật Lazy Load
Lazy Load là một khái niệm mà ứng dụng trì hoãn việc tải các đối tượng cho đến thời điểm mà người dùng cần nó. Nói một cách đơn giản là tải theo yêu cầu của người dùng chứ không phải tải đối tượng không cần thiết.
Lợi ích của việc này là giảm thiểu số lượng yêu cầu, giảm thiểu số lượng tài nguyên thừa cần tải cho tới khi người dùng cần đến chúng thực sự.
Hơn nữa kỹ thuật này còn để áp dụng cho việc tải các mã JavaScript từ bên ngoài để tránh dừng tải (blocking download). Về bản chất khi tải mã JavaScript trình duyệt sẽ dừng tất cả các hoạt động tải tài nguyên khác và chờ cho tới khi mã này được tải hoàn thành thì các tiến trình khác mới bắt đầu được tải. Chính vì thế khi phát triển sản phẩm có liên quan đến các hệ thống thứ ba cần cân nhắc sử dụng kỹ thuật tải bất đồng bộ và Lazy Load.
Một ứng dụng phổ biến sử dụng kỹ thuật Lazy Load rất hiệu quả là Facebook. Chúng ta biết khi người dùng cuộn trang đến đâu thì dòng thời gian và ảnh mới tiếp tục tải về cho người dùng.
Có thể xem demo tại đây: https://davidwalsh.name/demo/lazyload-2.0.php
2. Kỹ thuật Adaptive Image
Kỹ thuật điều chỉnh thích ứng hình ảnh (adaptive image) này mục đích nhận diện kích cỡ màn hình của người dùng và tự động tạo cache và chọn đúng nguồn ảnh phù hợp với kích cỡ màn hình và khung hiển thị.
Lợi ích kỹ thuật này đặc biệt hiệu quả cho thiết kế đáp ứng (Responsive Designs). Trang web ngày càng được xem trên thiết bị nhỏ hơn, chậm hơn về năng lực xử lý, các thiết bị băng thông thấp. Chính vì thế kỹ thuật này sẽ nhận diện kích thước màn hình, vùng hiển thị để tải những file ảnh phù hợp với kích cỡ vì thế lợi ích ở đây là file ảnh sẽ nhỏ hơn về kích thước sẽ tránh ùn tắc băng thông và không bị co dãn làm hỏng điểm ảnh.
3. Kỹ thuật Gzip
Gzip được dựa trên các thuật toán Deflate, mà là một sự kết hợp mã hóa của LZ77 và Huffman. Nhiều máy chủ web có thể nén các tập tin ở định dạng gzip trước khi gửi chúng để tải về, hoặc bằng cách gọi một module của bên thứ ba.
Lợi ích của kỹ thuật này có thể làm giảm lượng thời gian cần để tải về các tài nguyên cần thiết làm cho ứng dụng web chạy nhanh hơn.
Giả sử rằng một ứng dụng web các nội dung HTML, JavaScript, CSS nếu không được nén là 3MB và sau khi nén còn 300KB. Nếu như có 1000 yêu cầu từ máy trạm đồng nghĩa với việc server phải gửi ~ 3GB dữ liệu nếu website sử dụng kỹ thuật nén thì server chỉ phải gửi 300MB. Đó là một con số gây ảnh hưởng rất lớn đến chi phí cho thời gian tải trang và băng thông của đường truyền. Hơn nữa khi sử dụng kỹ thuật nén hầu hết các máy khách được cài đặt phần mềm chống virus hoặc được thiết lập proxy sẽ bỏ qua các tập tin này khi tải về. Điều này làm tăng đáng kể về thời gian hiển thị nội dung của trang trên trình duyệt.
So sánh sử dụng nén gzip và không sử dụng nén (Nguồn ConIT)
Tham khảo thêm tại: https://blogcongdong.com/huong-dan-bat-nen-gzip-va-luu-cache-trong-trinh-duyet.html
4. Kỹ thuật DNS Prefetch
Prefetch là gì? Prefetch là cơ chế cho phép trình duyệt browser tìm nạp ngầm trước các tài nguyên resources (các tài nguyên này được đánh giá ở mức độ ưu tiên thấp khi trình duyệt thực hiện tìm nạp) mà có thể cần tới ở tương lai, và lưu trữ chúng trong cache của browser. Khi 1 page được thực nạp xong, thì browser bắt đầu tìm nạp trước các nguồn tài nguyên resources có thể sẽ được người dùng truy cập tới trong tương lai. Nếu người dùng ấn vào 1 link đã được nạp trước, thì ngay lập tức nội dung page tương ứng với link đó sẽ nạp sẵn.
DNS Prefetch là một cách để giải quyết các DNS của một tên miền cụ thể. Đôi khi chúng ta sử dụng bên ngoài hình ảnh/JS/CSS... liên kết trong trang web và nó ảnh hưởng đến thời gian tải trang web. Bằng cách sử dụng DNS Prefetching, chúng ta có thể làm giảm thời gian liên kết tải bên ngoài. Ví dụ sử dụng như sau:
<link rel="dns-prefetch" href="http://www.spreadfirefox.com/"> 
Thời gian DNS Lookup (Nguồn Googles mod pages peed optimizes)
Có 3 loại prefetching: link, DNS và prerendering.
Kết luận
Có thể nói, tốc độ tải trang là một trong những yếu tố hàng đầu để giữ chân khách hàng. Nếu bạn có một website bán hàng nhưng tốc độ load quá chậm, đó sẽ trở thành nhược điểm lớn khiến bạn không thể kinh doanh hiệu quả trên chính website của mình.
Sẽ còn nhiều hơn nữa những phương pháp để tối ưu website, tăng tốc độ tải trang. Vì mục tiêu webstie có tốc độ tải trang trong vòng 3 nốt nhạc nên nếu các bạn có phương pháp hay khác nữa thì hãy chia sẻ với nhau để chúng ta cùng học hỏi và thảo luận nhé.
Cảm ơn các bạn đã theo dõi!
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: Hướng dẫn cài đặt Lazy Loading Image - tăng tốc độ tải trang
