Lazy load

Native lazy-loading là gì, nó cải thiện tốc độ website như thế nào

Bởi

Trình duyệt Chrome chính thức hỗ trợ lazy load cho ảnh và iframe ở cấp độ trình duyệt! Dưới đây là video demo tính năng này: Bắt đầu từ Chrome 76, bạn có thể sử dụng thuộc tính loading để lazy load các tài nguyên mà không cần viết riêng mã lazy-loading hoặc sử dụng riêng thư viện JavaScript (chẳng hạn như lazysizes). Chúng ta sẽ đi vào chi tiết ngay sau đây. P/S: native trong cụm từ “native lazy-loading” có thể được dịch sát nghĩa là “tải lười kiểu bản địa” hoặc “lazy-loading bản địa”, tuy nhiên tôi (người …

Đọc thêm

Vì sao trong hầu hết trường hợp bạn KHÔNG nên sử dụng Lazy load

Bởi

Tôi rất ghét lazy load. Tại sao? Bởi vì nó làm ảnh hưởng xấu đến UX (user experience / trải nghiệm người dùng) trong khi lợi ích của nó có thể chỉ là để qua mặt (tricking) các bài kiểm tra về tốc độ trang (page speed tests) mà thôi. Nó về cơ bản là cách rẻ tiền để làm tăng điểm số tốc độ trang thông qua việc tải chỉ vài thành phần (ảnh, script) lúc ban đầu. Vấn đề là với mắt người, nó làm mọi thứ tải chậm hơn! Chắc chắn…có logic hợp lý nằm ở chỗ …

Đọc thêm

Thiết lập nhanh cho plugin lazy load ảnh Flying Images

Bởi

Trong bài viết trước tôi có giới thiệu về plugin lazy load ảnh rất thú vị có tên Flying Images. Tuy nhiên không nói gì về các cài đặt cả. Bài viết ngắn này sẽ bổ sung thiếu sót đó. Nhắc lại một chút, điểm mới của plugin Flying Images là nó: Sử dụng tính năng tải lười mặc định của trình duyệt Chrome (native lazy loading), một tính năng mới, hiệu quả hơn cách dùng JS truyền thống; Với các trình duyệt khác Chrome, plugin vẫn phải sử dụng JS để tải lười. Tuy nhiên nó rất nhẹ, chỉ …

Đọc thêm

Giới thiệu Flying Images: plugin lazy load ảnh hiệu suất cao

Bởi

Lazy loading hoạt động như thế nào? Một ảnh thông thường trong HTML trông giống như thế này: <img src=”speed-family.jpg” width=”100%”/> Các plugin lazy loading sẽ ghi lại đoạn mã trên thành: <img data-src=”speed-family.jpg” width=”100%”/> Bạn có thể để ý thấy là thuộc tính src được thay thành data-src. Khi không có src, trình duyệt sẽ không tải ảnh ngay lập tức. Sau đó một đoạn mã JavaScript nhỏ sẽ kiểm tra xem liệu rằng ảnh có nằm trong khung nhìn trình duyệt hay không (viewport – khu vực nằm trong phần quan sát của người xem trên trình duyệt) …

Đọc thêm

Làm thế nào để trì hoãn tải nhiều file JavaScript cùng một lúc

Bởi

Cách để trì hoãn tải nhiều file JavaScript cùng một lúc: Bài viết này sẽ mô tả cách trì hoãn tải ảnh, video, các nút mạng xã hội Twitter / Facebook / G+, và Mã phân tích (Analytics). Sử dụng cùng một phương thức bạn cũng có thể trì hoãn mọi thứ khác. Trì hoãn tải JavaScript có thể là bước quan trọng để tăng tốc độ website. Tôi đã viết nhiều về trì hoãn tải ảnh, trì hoãn tải video, và cách trì hoãn JavaScript nhưng câu hỏi tôi hay nhận được nhất là: Làm thế nào tôi có thể …

Đọc thêm

Trì hoãn tải Video để tăng tốc Website

Bởi

Tại sao phải trì hoãn tải video? Khi bạn lấy video từ Youtube, Wistia, Vimeo, vân vân để nhúng vào trong trang web của bạn, nó có thể là nguyên nhân gây tải chậm trang (bạn có thể tham khảo thêm bài viết YouTube tải nặng như thế nào?). Khi video được trì hoãn tải cho đến khi nội dung thuộc màn hình đầu tiên tải xong, điều đó sẽ giúp trang web của bạn tải nhanh hơn mà không cần thu thập tất cả file và các tài nguyên mà video yêu cầu. Bằng cách trì hoãn video bạn …

Đọc thêm

Cách trì hoãn tải ảnh giúp tăng tốc độ website

Bởi

Ảnh trì hoãn (deferred image) là ảnh chỉ được tải xuống sau khi nội dung thuộc màn hình đầu tiên (initial page) tải xong. Các hình ảnh không nằm trong màn hình đầu tiên (below the fold) có thể được trì hoãn, điều đó cho phép nội dung website của bạn tải nhanh hơn. Trì hoãn tải hình ảnh giúp trang tải nhanh hơn Bài viết này sẽ hướng dẫn bạn cách đơn giản để áp dụng trì hoãn tải ảnh mà không cần đến jQuery hoặc lazy loading (tải lười biếng). Một trong những lý do chính khiến trang …

Đọc thêm

Kiểm tra tính năng Lazy Load

Bởi

Trong bài này có 50 bức ảnh JPG, tổng dung lượng khoảng 3,7MB. Được tải từ kho ảnh miễn phí Pixabay. Bài này được dùng để test tốc độ trang khi sử dụng plugin a3 lazy load có chức năng tải chậm ảnh, nhằm tăng tốc độ website. Cơ chế của Lazy load là cuộn chuột đến đâu tải ảnh đến đó, nhờ đó giảm được rất nhiều dung lượng ban đầu tải về, qua đó tốc độ cải thiện đáng kể.