Làm thế nào để trì hoãn tải các hình ảnh ngoài màn hình. Cùng tìm hiểu ngay dưới đây nhé!
Các trình duyệt web, tuy đơn giản nhưng thực ra để vận hành chúng không đơn giản tý nào. Chúng “ngốn” rất nhiều tài tài nguyên trong máy. Trong bài viết này chúng ta sẽ đi tìm hiểu xem, làm cách nào để Trì hoãn tải các hình ảnh ngoài màn hình, giúp máy tính chạy trình duyệt mượt hơn.
Trì hoãn tải các hình ảnh ngoài màn hình
Thuộc tính loading=”lazy” được hỗ trợ rất tốt trong trình duyệt Google Chrome, nếu thuộc tính được thêm vào thẻ hình ảnh hoặc iframe sẽ làm trễ hình ảnh và iframe khi tải trang blogspot giúp tăng hiệu suất trang, trang tải nhanh hơn.
Trì hoãn tải các hình ảnh ngoài màn hình sẽ giúp chạy nhanh hơn
Một bài viết trên blog web.dev được tung ra vào ngày 6 tháng 8 năm 2019 có tiêu đề Native lazy-loading cho web với nội dung chính là thêm thuộc tính loading = “lazy” trong thẻ hình ảnh để trì hoãn tải hình ảnh màn hình và khung nội tuyến. Tính năng này đã được giới thiệu trong trình duyệt Chrome phiên bản 76 và ổn định cho phiên bản trình duyệt hiện tại.
Cụ thể, khi bạn đã bật hai tính năng lazy image và lazy iframe trong chrome flags, nếu bạn thêm thuộc tính loading = “lazy” trong thẻ img hoặc iframe của blog khi tải hình ảnh hoặc iframe sẽ bị hoãn tải sau phông chữ, văn bản mà không sử dụng bất kỳ thư viện JavaScript hoãn lại nào.
Để kiểm tra và kích hoạt tính năng, trên địa chỉ trình duyệt, bạn sao chép liên kết bên dưới vào địa chỉ nhấn enter.
chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading
Yêu cầu bắt buộc là khi bạn thêm thuộc tính loading = “lazy” vào thẻ img và iframe, các thẻ này phải có hai thuộc tính chiều rộng / chiều cao có kích thước cụ thể.
<img al =”…” loading = “lazy” src = “…” width = “400” height = “200”>
<iframe loading = “lazy” src = “…” width = “400” height = “200” title = “…”> </iframe>
Cách thêm thuộc tính loading = “lazy” trong thẻ img và iframe trong blogspot
Trong chỉnh sửa chủ đề XML của chủ đề, hãy nhập tìm kiếm thẻ <img> và <iframe> và thêm thuộc tính loading=”lazy” bên trong thẻ. Hãy nhớ thêm cả hai thuộc tính chiều rộng/chiều cao để chỉ định kích thước hình ảnh và iframe, nếu không bảng điều khiển trình duyệt sẽ cảnh báo nếu chiều rộng / chiều cao thuộc tính không được thêm vào.
Trường hợp ảnh trong bài, khi soạn hoặc chỉnh sửa tab HTML của bài, bạn tìm thẻ img và iframe, thêm thuộc tính loading=”lazy” vào bên trong, với kích thước bạn cứ lấy theo kích thước. Kích thước hình ảnh gốc khi tải lên theo các thuộc tính data-original-width và data-original-height.
Trên đây là những thông tin về trì hoãn tải các hình ảnh ngoài màn hình.
Vì sao trình duyệt chạy chậm dần?
Trước hết, web ngày càng trở nên phức tạp hơn. Chúng có nhiều tính năng tương tác hơn, đồ họa phức tạp hơn, thông báo và không thể thiếu để quảng cáo, theo dõi hoạt động và phân tích dữ liệu người dùng.
Tất cả những điều này sẽ đè nặng lên sức mạnh xử lý của trình duyệt và tài nguyên thiết bị. Do đó, không chỉ trình duyệt chậm đi mà máy tính của bạn cũng có thể bị chậm lại.
Tiếp theo là thói quen duyệt web của người dùng. Chúng tôi thường mở nhiều tab trong trình duyệt của mình khi lướt web. Hầu hết mọi người muốn giữ lại các tab được sử dụng thường xuyên để họ có thể quay lại nó chỉ bằng một cú nhấp chuột. Một số tab thường được giữ lại là email, trang web phát nhạc, mạng xã hội … và tất cả các tab trên đều hoạt động cùng một lúc.
Về phần cứng
Mỗi tab sẽ yêu cầu một lượng lớn dữ liệu được xử lý, nhiều tab sẽ tích tụ lại, chẳng mấy chốc trình duyệt của bạn sẽ ngốn hết bộ nhớ RAM hiện có. Chỉ cần mở Task Manager trên Windows hoặc Activity Monitor trên macOS và bạn có thể xem trình duyệt đang chiếm bao nhiêu bộ nhớ trên máy tính của mình.
Nhưng trong một số trình duyệt, đây không phải là vấn đề. RAM có dung lượng nhiều giúp lướt web nhanh hơn. Các ứng dụng duyệt web ngày nay sử dụng bộ nhớ riêng biệt giữa các tab đang hoạt động, để nếu một tab bị lỗi, các tab khác sẽ không bị ảnh hưởng.
Ngoài ra, các trình duyệt cũng áp dụng một số thủ thuật giúp trải nghiệm người dùng mượt mà hơn, chẳng hạn như tải lại trang web sau một khoảng thời gian nhất định. Tuy nhiên, mọi tiện ích đều cần sử dụng RAM.
Về trình duyệt chậm, việc sử dụng nhiều RAM chỉ ảnh hưởng khi trình duyệt sử dụng nhiều hơn bộ nhớ RAM khả dụng, khiến hệ thống sử dụng ổ cứng trong máy có tốc độ chậm hơn rất nhiều.
Tất cả những nguyên nhân trên đều có thể kết hợp với nhau dẫn đến tốc độ trình duyệt của bạn bị chậm lại, chưa kể đến trường hợp máy tính của bạn bị nhiễm phần mềm độc hại. Nếu có phần mềm độc hại nào đó dính vào hệ thống của bạn, có thể là từ ứng dụng hoặc tiện ích mở rộng của trình duyệt, thì bạn sẽ cảm thấy tốc độ làm việc của máy tính giảm xuống.
Một số cách tăng tốc trình duyệt
Đó là những vấn đề được đặt ra, vậy còn cách giải quyết? Đầu tiên, bạn cần đặt giới hạn cho trình duyệt của mình, ở góc độ năng suất và phân bổ tài nguyên, đây là một cách khá hiệu quả.
Thỉnh thoảng chỉ giữ lại các tab thực sự cần thiết, bạn có thể sử dụng dấu trang để lưu các trang bạn cần thay vì để chúng hoạt động trong trình duyệt.
Một số tiện ích mở rộng có thể hữu ích bao gồm: Cluster trong Chrome giúp nhóm các tab trình duyệt lại với nhau để bạn có thể đóng hoặc mở chúng cùng một lúc (vì vậy bạn không cần phải tiếp tục hoạt động các tab); Great Suspender trên Chrome tự động vô hiệu hóa các tab bạn không sử dụng; OneTab trên Chrome với một tính năng như Great Suspender và một vài tính năng khác.
OneTab cũng có sẵn trên Mozilla Firefox. Ngoài ra, có một số tiện ích mở rộng có tính năng tương tự trong Firefox, chẳng hạn như Total Suspender hoặc Tab Manager Plus giúp bạn giữ cho trình duyệt của mình không bị quá tải khi bạn mở quá nhiều tab hoặc cửa sổ trình duyệt.
Mặt khác, các trình duyệt đang trở nên tốt hơn. Các kỹ sư thiết kế của Chrome đang thử nghiệm tính năng Tab Freeze sẽ có trong các phiên bản sắp tới. Với tính năng này, các tab sẽ bị vô hiệu hóa sau khi bạn không sử dụng chúng trong hơn năm phút, làm giảm lượng tài nguyên tiêu thụ trên máy tính và cả lượng pin tiêu thụ.
Mặc dù có một số tiện ích mở rộng được giới thiệu ở trên, chúng tôi cũng phải nhắc rằng trình duyệt sẽ chạy càng ít tiện ích mở rộng. Một cách khác đơn giản hơn nhiều là nâng cấp RAM để cung cấp nhiều tài nguyên hơn cho trình duyệt của bạn. Tùy thuộc vào thiết bị của bạn là PC hay laptop, bạn có thể tham khảo trên mạng và lựa chọn phương pháp nâng cấp phù hợp mà không tốn quá nhiều chi phí.
Xử lý phần mềm độc hại rất đơn giản, bạn chỉ cần một chương trình bảo mật hoạt động tốt trên máy tính và cập nhật nó thường xuyên. Chương trình bảo vệ tích hợp trên Windows 10 và macOS cũng có thể bảo vệ máy tính của bạn ở mức cơ bản.
Lưu ý khi sử dụng trình duyệt
Và tốt nhất, hãy cập nhật trình duyệt web của bạn thường xuyên để cập nhật các bản vá lỗi dành cho nhà phát triển ứng dụng và tối ưu hóa trình duyệt.
Cuối cùng, hiệu suất có thể được cải thiện đáng kể bằng cách xóa bộ nhớ đệm và bộ nhớ gây tranh cãi. Việc xóa này giúp các trình duyệt và trang web hoạt động trên tập dữ liệu mới, loại bỏ dữ liệu cũ có thể bị hỏng hoặc bị hỏng.
Kết luận
Vậy là chúng ta đã tìm hiểu trì hoãn tải các hình ảnh ngoài màn hình có tác dụng như thế nào lên máy tính khi sử dụng tình duyệt. Chúc các bạn thành công và có một trải nghiệm tốt hơn trên chiếc máy tính của mình.