Trì hoãn tải các hình ảnh ngoài màn hình tăng tốc độ website

Ảnh trì hoãn hay còn có tên gọi khác là deferred image đây là những ảnh chỉ có thể được tải xuống ngay sau khi nội dung thuộc màn hình đầu tiên đã tải xong. Việc trì hoãn tải các hình ảnh ngoài màn hình giúp tốc độ website chạy mượt và nhanh hơn. Vậy cách làm cụ thể như thế nào? Tất cả sẽ được bật mí ngay trong bài viết dưới đây.

Trì hoãn tải các hình ảnh ngoài màn hình là gì?

Trì hoãn tải hình ảnh với công cụ Lazy Loading

trì hoãn tải các hình ảnh ngoài màn hình

Trong khi lướt web, hình ảnh đầu tiên bạn nhìn thấy khi đang tải trang web được gọi là giao diện trong màn hình. Những phần còn lại, bạn cần lăn chuột để xem được gọi là phần nằm ngoài màn hình. Đây là những hình ảnh không cần thiết và không phải mục đích chính người tạo web muốn hướng bạn tới. Vì vậy nó sẽ không được hiển thị trực tiếp, nhanh chóng mà sẽ được trì hoãn. Đảm bảo việc tải giao diện trong màn hình người dùng sẽ tăng lên một cách đáng kể. Thu hút lượt người lớn tiếp cận website.

Tuy nhiên trong một số trường hợp trì hoãn tải các hình ảnh ngoài màn hình không phải do chủ ý của người xây dựng web sẽ tạo nên quy trình lướt web không mong muốn. Có thể nói hình ảnh quá nhiều chính là một trong những nguyên nhân dẫn tới các ảnh được hiển thị và tải xuống một cách chậm chạp.

Ngay cả khi bạn đã truy cập trang web lên tới vài phút nhưng vẫn có nhiều ảnh ở sâu bên dưới không được hiển thị.

Cách khắc phục tình trạng

Tất cả những hình ảnh trong website đều cạnh tranh với nhau nhau trong một lượng băng thông giới hạn. Đồng thời cạnh tranh giữa các nguồn tài nguyên khác như: CSS hoặc JavaScipt. Điều này sẽ gây cản trở việc hiển thị phần nội dung trong màn hình đầu tiên của trang web.

Nếu muốn khắc phục tình trạng này, giúp trang web hiển thị một cách nhanh chóng và đồng đều hơn ngay cả đối với những hình ảnh ngoài màn hình. Bạn có thể thực hiện theo hai cách thức sau:

– Sử dụng kỹ thuật Lazy Loading để tải hình ảnh trang web. Phương thức hoạt động chính của kỹ thuật này chính là bất động bộ. Nghĩa là website của bạn load tới đâu thì tải nội dung và hình ảnh tới đó chứ không tải cùng một lúc. Hứa hẹn đem đến những trải nghiệm người dùng tốt hơn hẳn.

– Intersection Observer API cũng là một phương thức bạn nên sử dụng. Với modern interface này bạn có thể tải hình ảnh và các nội dung khác trong website mượt mà hơn hẳn mà không ảnh hưởng đến tốc độ load của trang web.

Một số cách tối ưu Google Pagespeed Insight lên 100 điểm

trì hoãn tải các hình ảnh ngoài màn hình

Google Pagespeed Insight là công cụ quen thuộc khi xây dựng website

Bên cạnh cách trì hoãn tải các hình ảnh ngoài màn hình thì bạn cũng có thể áp dụng một số cách thức sau để tối ưu Google Pagespeed:

Cách 1: loại bỏ các tài nguyên bị chặn hiển thị

Đối với những tập tin được điều hành bởi JavaScript và CSS thì khối lượng tập tin khá nặng. Nếu không sử dụng phương pháp tối ưu đúng cách nó sẽ dẫn tới tốc độ hiển thị web bị trì hoãn khá lớn.

Vì vậy để khắc phục tình trạng này bạn có thể loại bỏ hết những tập tin JavaScript vào phần cuối trang. Đối với tập tin CSS chỉ cần nén trong một file duy nhất, sau đó copy toàn bộ code ra ngoài thẻ <Head>, cuối cùng đặt chúng trong thẻ <STYLE>.

Cách 2: Thay đổi kích thước hình ảnh sao cho phù hợp nhất với trang web.

Một trong những nguyên nhân gây nên việc load chậm của website chính là kích cỡ hình ảnh quá lớn. Cần sử dụng lưu lượng lớn để có thể truy cập và hiển thị. Vì vậy lựa chọn kích thước hình ảnh phù hợp nhất website sẽ đem đến tốc độ tải trang như mong muốn.

Theo đó kích thước thích hợp nhất đối với hình ảnh hiển thị trên máy tính để bản chính là 1313px, thiết bị di động là 425px. Khi chỉnh sửa hình ảnh bạn nên kiểm tra kỹ càng ở hai loại màn hình phổ biến này. Đồng thời có thể sử dụng thẻ <PICTURE> trong HMTL5 để taỉ hình ảnh chuẩn kích thước nhất có thể.

Ngoài ra bạn có thể tham khảo sử dụng hai phương pháp là SVG hoặc CDN. Giúp chia tỷ lệ px một cách phù hợp nhất có thể hiển thị chính xác trên mọi loại màn hình.

Kết luận

Trên đây là tổng hợp những thông tin cần biết về cách khắc phục trì hoãn tải các hình ảnh ngoài màn hình giúp tăng tốc độ hoạt động của website một cách nhanh chóng. Đồng thời bạn có thể tham khảo một số giải pháp khác để có thể tăng điểm tuyệt đối Google pagespeed đối với trang web của mình.

Xem thêm: