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 dịch) thấy giữ nguyên từ gốc tiếng Anh hay hơn, hoặc nếu có dịch sẽ dùng từ “lazy-loading cấp trình duyệt” cho dễ hiểu.

Tại sao lại dùng native lazy-loading?

Theo HTTPArchive, ảnh là thành phần được yêu cầu nhiều nhất trên hầu hết website và thường chiếm nhiều băng thông hơn bất kỳ tài nguyên nào. Ở phân vị 90(*), các website gửi 4,7 MB ảnh trên máy bàn và di động.

(*): phân vị thứ 90 (90th percentile), theo cách hiểu thông thường là những trang web có dung lượng ảnh lớn hơn 90% các website khác, nói cách khác top 10% các website có nhiều ảnh nhất chứa ít nhất 4,7 MB ảnh.

Nhúng iframe cũng sử dụng rất nhiều dữ liệu và có thể ảnh hưởng tiêu cực đến hiệu suất của trang (page performance). Nếu chúng ta chỉ tải các ảnh, iframe không quan trọng (non-critical), nằm trong màn hình thứ hai trở đi (below-the-fold) khi người dùng cần xem chúng thì sẽ giúp cải thiện thời gian tải trang (page load times), tối thiểu hóa băng thông (bandwidth), và giảm sử dụng bộ nhớ.

Hiện tại có hai cách để trì hoãn tải ảnh và iframe không thuộc màn hình đầu tiên (off-screen):

• Sử dụng Intersection Observer API
• Sử dụng scroll, resize, hoặc orientationchange even hanler (trình xử lý sự kiện)

Cả hai tùy chọn này có thể cho phép lập trình viên bao gồm hàm lazy-loading vào website, và nhiều lập trình viên xây dựng thư viện của bên thứ ba để đưa ra các abstraction thậm chí còn dễ sử dụng hơn. Nhưng với lazy-loading được hỗ trợ trực tiếp bởi trình duyệt, bạn không cần đến các thư viện bên ngoài (external library) nữa. Native lazy loading cũng đảm bảo việc trì hoãn tải ảnh và iframes vẫn hoạt động bình thường ngay cả khi JavaScript bị vô hiệu hóa trên trình duyệt của người dùng (còn gọi là máy khách/client).

P/S: Rất hiếm khi trình duyệt bị vô hiệu hóa JavaScript, vì các website hiện đại, nhiều chức năng thì JavaScript là một thành phần cốt lõi, nhưng nếu nó bị vô hiệu hóa, mà trang của bạn không triển khai dự phòng bằng thẻ <noscript> thì lazy load sẽ bị gặp lỗi không hiển thị ảnh. Bạn có thể thử vô hiệu hóa JS trên Chrome bằng cách vào copy đường dẫn sau vào thanh địa chỉ:

chrome://settings/content/javascript

Rồi nhấn button vô hiệu hóa.

Thuộc tính loading

Ở thời điểm hiện tại, Chrome đã hỗ trợ tải ảnh ở các cấp độ ưu tiên khác nhau phụ thuộc vào vị trí của nó tương quan với viewport (khung nhìn) của thiết bị. Ảnh ở bên dưới viewport được tải với mức ưu tiên thấp hơn (lower priority), nhưng chúng sẽ vẫn được tìm nạp (fetched) để tải về nhanh nhất có thể (as soon as possible).

Trong Chrome 76, bạn có thể sử dụng thuộc tính loading để trì hoãn tải hoàn toàn các ảnh và iframes không thuộc màn hình đầu tiên (những khu vực mà phải cuộn chuột mới tiếp cận được), mã trông giống như thế này:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

Dưới đây là các giá trị hỗ trợ cho thuộc tính loading:

• auto (tự động): Hành vi lazy-loading mặc định của trình duyệt, nó có cùng kết quả như khi bạn không bao gồm thuộc tính này trong thẻ.
• lazy (lười): Trì hoãn tải tài nguyên cho đến khi nó đạt đến khoảng cách định trước từ viewport (khoảng cách này cụ thể như thế nào bạn sẽ được biết cụ thể ở phần sau).
• eager (hăng hái): Tải tài nguyên ngay lập tức, không quan trọng là nó nằm ở vị trí nào trên trang (nói cách khác, ảnh có thể nằm rất sâu bên dưới viewport nhưng nó sẽ được tải ngay như là nó nằm ở trên cùng vậy).

P/S: các từ mà người dịch thêm vào là tự động, lười, hăng hái để bạn dễ nhớ và dễ hiểu hơn thôi.

Tính năng này sẽ tiếp tục được cập nhật cho đến khi nó được phát hành trong phiên bản ổn định (Chrome 76 là phiên bản đầu tiên). Nhưng bạn có thể thử nó bằng cách bật flags dưới đây trong Chrome:

• chrome://flags/#enable-lazy-image-loading
• chrome://flags/#enable-lazy-frame-loading

Ngưỡng khoảng cách tải

Tất cả các ảnh và iframe nằm trong màn hình đầu tiên (above the fold) — tức là những thứ xuất hiện ngay trong khung nhìn trình duyệt mà không cần cuộn chuột — sẽ được tải bình thường. Nhưng các ảnh và iframes nằm xa bên dưới viewport của thiết bị chỉ được tìm nạp khi người dùng cuộn chuột gần đến chúng (when user scrolls near them).

Ngưỡng khoảng cách là không cố định (not fixed) và tùy thuộc vào một số yếu tố sau:

• Kiểu tài nguyên được tìm nạp (nó là ảnh hay iframe)
• Chế độ Lite có được bật trên Chrome cho Android hay không
• Tác động của kiểu kết nối (nhanh, chậm, cáp quang, 3G, 4G, wifi, vân vân)

Bạn có thể tìm thấy các giá trị mặc định cho các kiểu kết nối khác nhau trên nguồn dữ liệu Chromium. Các con số này, và thậm chí là cách tiếp cận chỉ tìm nạp khi đạt đến khoảng cách nhất định từ viewport có thể thay đổi trong tương lai gần khi nhóm phát triển trình duyệt Chrome cải thiện heuristics (*) để xác định được khi nào nên bắt đầu tải.

(*): Kiểu quy tắc/thuật giải được phát triển dựa trên kinh nghiệm, thường là tối ưu trong phần lớn trường hợp nhưng không phải trong mọi trường hợp và có thể không phải là biện pháp tốt nhất có thể tồn tại. Ưu điểm của nó là cho chất lượng sản phẩm đủ tốt nhưng không mất nhiều thời gian phát triển.

Tôi (người dịch) sẽ cung cấp luôn thông tin về ngưỡng khoảng cách tải ở thời điểm hiện tại (cuối năm 2019):

 //
    // Lazy image loading distance-from-viewport thresholds for different effective connection types.
    //
    {
      name: "lazyImageLoadingDistanceThresholdPxUnknown",
      initial: 5000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPxOffline",
      initial: 8000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPxSlow2G",
      initial: 8000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPx2G",
      initial: 6000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPx3G",
      initial: 4000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPx4G",
      initial: 3000,
      type: "int",
    },

Từ đoạn mã trên ta nhận thấy rằng trình duyệt Chrome sẽ:

• Trên mạng mà nó không nhận biết được (Unknown) nó sẽ tải ảnh khi ảnh cách viewport 5000 px
• Khi không có kết nối (Offline) nó sẽ tải khi cách viewport 8000 px
• Trên mạng 2G chậm là 8000 px
• Trên mạng 2G là 6000 px
• Trên mạng 3G là 4000 px
• Trên mạng 4G là 3000 px

Bạn có thể quan sát thấy quy luật là trên mạng càng nhanh, ngưỡng khoảng cách tải sẽ càng thấp.

Lưu ý: Trong Chrome 77, bạn có thể trải nghiệm các ngưỡng khác nhau bằng cách điều chỉnh mạng trong DevTools (công cụ cho nhà phát triển được tích hợp sẵn trong Chrome), bạn sẽ cần ghi đè ảnh hưởng của kiểu kết nối trong trình duyệt bằng cách sử dụng flag:

chrome://flags/#force-effective-connection-type

Tải hình ảnh

Để ngăn các nội dung xung quanh không reflowing(**) khi ảnh lazy-load tải, cần đảm bảo thêm thuộc tính height và width vào thành phần <img> hoặc chỉ định giá trị cụ thể, trực tiếp trong style nội tuyến (inline style):

<img src="..." loading="lazy" width="200" height="200">
<img src="..." loading="lazy" style="height:200px; width:200px;">

(**): reflowing là hiện tượng trình duyệt phải tính toán lại vị trí và bố cục của các thành phần trong tài liệu HTML, đây là hành vi sẽ khiến người dùng bị cản trở nên cần phải tránh. Bạn có thể tham khảo thêm thông tin về nó ở liên kết này.

Các ảnh sẽ vẫn được lazy-load nếu kích cỡ (dài, rộng) không được chỉ định, nhưng việc thông báo kích cỡ cho chúng sẽ giúp làm giảm khả năng trình duyệt bị reflow.

Hỗ trợ cho thuộc tính intrinsicsize vẫn đang được tiếp tục thực hiện, vì thế các ảnh sẽ vẫn được lazy-load chính xác nếu intrinsicsize được chỉ định kèm với một trong hai kích cỡ (width hoặc height).

<img src="…" alt="…" loading="lazy" intrinsicsize="250x200" width="450">
<!-- lazy-loaded -->

P/S: Bạn có thể xem ví dụ demo về cách thuộc tính loading làm việc với 100 bức ảnh sau (toàn mèo dễ thương).

Tải iframe

Thuộc tính loading ảnh hưởng đến iframe khác so với ảnh, phụ thuộc vào việc liệu iframe có ẩn hay không. (Các iframe ẩn thường được sử dụng cho mục đích phân tích hoặc giao tiếp). Chrome sử dụng các đặc điểm sau để xác định liệu một iframe có đang ẩn hay không:

• Chiều rộng và chiều cao của iframe là 4 px hoặc nhỏ hơn.
• Các thuộc tính display: none hoặc visibility: hidden đang được áp dụng.
• Iframe đang được đặt ở vị trí ngoài màn hình đầu tiên sử dụng positioning X hoặc Y có giá trị âm.

Nếu một iframe thỏa mãn bất kỳ điều kiện nào kể trên, Chrome xem nó là ẩn và không lazy-load nó trong phần lớn trường hợp. Iframe không ẩn sẽ chỉ được tải khi nó nằm trong ngưỡng khoảng cách cho phép tải (đã nói ở trên). Placeholder hiển thị cho iframes lazy-load sẽ vẫn được tìm nạp.

Các câu hỏi thường gặp (FAQ)

Hiện có bất kỳ kế hoạch nào để mở rộng tính năng này không?

Có một số kế hoạch trong việc thay đổi hành vi lazy-loading mặc định của trình duyệt để tự động tải lười bất cứ ảnh hoặc iframe nào mà phù hợp để trì hoãn nếu chế độ Lite được bật trên Chrome cho Android.

Các ảnh nền (background) viết trong CSS có tận dụng được lợi thế của thuộc tính loading không?

Không, hiện tại nó chỉ được sử dụng với các thẻ <img> mà thôi. Nói cách khác các ảnh background vẫn tải bình thường.

Thuộc tính loading hoạt động như thế nào với các ảnh nằm trong viewport nhưng không hiện ra ngay (ví dụ như nó ẩn trong các slide, mà người dùng phải click tiếp mới thấy)?

Chỉ các ảnh từ màn hình thứ hai trở đi mới được tải lười (kết hợp với việc nó thỏa mãn tiêu chí về ngưỡng khoảng cách). Tất cả các ảnh nằm trong màn hình đầu tiên, bất kể là nó không quan sát thấy ngay lúc đầu sẽ được tải như bình thường.

Chuyện gì xảy ra nếu tôi sử dụng thư viện của bên thứ ba (third-party) hoặc script để lazy-load ảnh và iframe?

Thuộc tính loading không ảnh hưởng gì đến mã lazy-load bạn đang sử dụng trên các tài nguyên, nhưng có vài điểm quan trọng sau cần để ý:

1. Nếu đoạn mã lazy-load của bạn cố gắng tải ảnh hoặc iframe sớm hơn so với Chrome tải chúng theo cách thông thường — điều đó có nghĩa là ngưỡng khoảng cách tải lớn hơn so với ngưỡng của Chrome — chúng sẽ vẫn được trì hoãn và tải dựa trên hành vi thông thường của trình duyệt (có nghĩa là trình duyệt sẽ ghi đè thiết lập của bạn).
2. Nếu đoạn mã lazy-load của bạn sử dụng ngưỡng khoảng cách tải thấp hơn so với trình duyệt, thế thì tùy chỉnh của bạn sẽ được áp dụng (chứ không phải các ngưỡng mặc định của Chrome được áp dụng, nói cách khác tùy chỉnh của bạn sẽ ghi đè thiết lập của Chrome).

Một trong các lý do quan trọng để tiếp tục sử dụng thư viện của bên thứ ba song song với loading=”lazy” đó là để hỗ trợ (polyfill) cho các trình duyệt hiện chưa có thuộc tính này.

Các trình duyệt khác có hỗ trợ native lazy-loading hay không?

Thuộc tính loading có thể được coi là một cải tiến, cho phép các trình duyệt hỗ trợ nó có thể lazy-load ảnh và iframe. Những trình duyệt chưa hỗ trợ sẽ vẫn tải theo cách cũ như hiện nay. Về mặt hỗ trợ chéo trình duyệt, loading được hỗ trợ trên Chrome 76 và bất kỳ trình duyệt nào dựa trên Chromium 76 (ví dụ như Cốc Cốc). FireFox cũng đang mở thảo luận việc tích hợp thuộc tính này vào.

Một API tương tự đã được đề xuất và sử dụng trong IE và Edge nhưng nó tập trung vào việc hạ thấp mức độ ưu tiên tải xuống của các tài nguyên thay vì trì hoãn tải chúng hoàn toàn. Nó không còn ủng hộ resource hints (gợi ý tài nguyên) nữa.

Tôi phải làm như thế nào với các trình duyệt hiện chưa hỗ trợ native lazy-loading?

Bạn có thể sử dụng thư viện của bên thứ ba hoặc các đoạn mã hỗ trợ khác để tải lười các ảnh trên website. Thuộc tính loading có thể được detect (phát hiện) nếu tính năng này được hỗ trợ trong trình duyệt nhờ đoạn mã sau:

if ('loading' in HTMLImageElement.prototype) {
  // có hỗ trợ trên trình duyệt này
} else {
  // sử dụng thư viện hoặc mã dự phòng
}

Ví dụ, lazysize là thư viện lazy-loading JavaScript phổ biến. Bạn có thể sử dụng đoạn mã dùng ở trên để phát hiện thuộc tính loading có được hỗ trợ trên trình duyệt không, nếu nó không, hãy dự phòng bằng lazysize. Điều đó được thực hiện như sau:

• Thay thế <img src> bằng <img data-src> để tránh trình duyệt (không hỗ trợ thuộc tính loading) tải ảnh ngay lập tức. Nếu thuộc tính loading được hỗ trợ, bạn chỉ việc chuyển lại data-src thành src.
• Nếu loading không được hỗ trợ, tải mã dự phòng (lazysizes). Theo tài liệu của lazysizes, bạn sử dụng class (lớp — một khái niệm trong CSS) lazyload như cách để chỉ cho lazysizes biết ảnh nào cần lazy-load.

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Dưới đây là trang demo cho kiểu tải này. Bạn hãy thử nó trên trình duyệt FireFox hoặc Safari để xem mã dự phòng hoạt động ra sao.

Lưu ý: Thư viện lazysizes cũng cung cấp plugin native loading được sử dụng để native lazy-loading khi có cơ hội nhưng vẫn có dự phỏng bằng chức năng tùy chỉnh của thư viện khi cần thiết.

Native lazy-loading ảnh hưởng như thế nào đến các quảng cáo trên trang web?

Tất cả các quảng cáo hiển thị cho người dùng dưới dạng ảnh hoặc iframe sẽ được lazy-load giống như bất kỳ ảnh hoặc iframe nào khác.

Ảnh sẽ được xử lý như thế nào khi trang web được in?

Mặc dù chức năng này không có trong Chrome 76, có một open issue để đảm bảo rằng tất cả ảnh và iframe được tải ngay lập tức nếu trang trong chế độ in ấn.

Kết luận

Triển khai lazy-loading ảnh và iframe dưới dạng native của trình duyệt có thể làm nhiệm vụ này trở nên dễ dàng hơn đáng kể cho mục tiêu cải thiện hiệu suất của trang web.

Nếu bạn để ý thấy bất kỳ hành vi bất thường nào với tính năng này trên Chrome hãy báo cho chúng tôi biết.

(Dịch từ bài viết: Native lazy-loading for the web, các tác giả: Houssein Djirdeh, Addy Osmani và Mathias Bynens, trang web: web[.]dev)

Thông tin bổ sung. Hiện tôi biết có 2 plugin cho WordPress hỗ trợ tính năng native lazy-loading là:

• Native Lazyload: do chính Google phát triển
• Flying Images: của tác giả Gijo Varghese.

The post NATIVE LAZY-LOADING LÀ GÌ, NÓ CẢI THIỆN TỐC ĐỘ WEBSITE NHƯ THẾ NÀO appeared first on Unest.

• Ả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 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 web bị tải chậm là do trang có nhiều ảnh. Người dùng ở khắp nơi trên thế giới đều thấy một hiện tượng phổ biến là các ảnh được tải xuống chậm chạp từ trên xuống dưới.

Thậm chí ngay cả khi người dùng thấy các ảnh được tải chậm từ từ, thường vẫn có nhiều ảnh phía sâu bên dưới trang không cần hiển thị cho người dùng ngay lúc đó, trong khi chúng cũng vẫn đang được tải.

Tất cả những ảnh này cạnh tranh với nhau cho lượng băng thông giới hạn cũng như cạnh tranh với các nguồn tài nguyên khác chẳng hạn như CSS và JavaScript. Điều đó nghĩa là các ảnh đang cản trở việc hiển thị phần nội dung thuộc màn hình đầu tiên của trang web cho người dùng trong khả năng nhanh nhất có thể của nó.

Đây là vấn đề đã được biết đến nhiều rồi

Cách chính mà nhà phát triển và người quản trị web giải quyết vấn đề này là thông qua một phương thức gọi là lazy loading (tải lười biếng).

Các ảnh tải lười là một giải pháp trong đó khi người dùng cuộn chuột xuống bên dưới, các ảnh trong khung nhìn mới được tải, các ảnh bên dưới thì không (tải ảnh theo nhu cầu của người dùng). Có rất nhiều điều thú vị về phương thức tải lười và tôi sử dụng nó thường xuyên, nhưng nó có một số vấn đề…

• Lazy loading có thể là nguyên nhân gây ra vấn đề về hiệu suất, tốc độ.
• Lazy loading không phải là một giải pháp khả thi cho một số trang web.
• Lazy loading không phải là ý tưởng hay để giải quyết vấn đề về hiệu suất, tốc độ trên di động.

Trì hoãn tải ảnh mà không cần lazy loading hoặc jQuery

Sự thật thì lazy loading ảnh là cách thức phức tạp hơn của trì hoãn tải ảnh mà thôi.

Để quay lại vấn đề cơ bản, chúng ta sẽ thảo luận về trì hoãn tải ảnh mà không có lazy loading. Nhưng trước hết hãy xem những việc mà lazy loading thực sự làm là gì đã.

1. Quan sát (Observing) vị trí cuộn chuột
2. Giám sát (Monitoring) vị trí cuộn chuột
3. Phản ứng (Reacting) với vị trí cuộn
4. Trì hoãn (Deferring) tải ảnh

Trong bốn bước kể trên, chỉ có một cái trong số chúng là trì hoãn tải ảnh.

Chúng ta hãy thảo luận về phần trì hoãn ảnh

Khi một trang web được render (hiển thị) trên trình duyệt, trình duyệt sẽ cố gắng tải tất cả ảnh nó có thể tìm thấy trên trang. Nếu có hai ảnh trên trang, nó sẽ tải cả hai ảnh. Nếu có một trăm ảnh trên trang, nó sẽ tải cả một trăm ảnh.

Đấy là hành vi mặc định của trình duyệt. Nó phải yêu cầu và tải về tất cả các ảnh.

Cách đáng tin cậy nhất quanh vấn đề này (với tất cả các trình duyệt) là đánh lừa trình duyệt để nó nghĩ rằng những ảnh này không có ở đó.

Cách thức này được thực hiện trong lazy loading, cũng như bất cứ vị trí nào khác nhằm cung cấp một ảnh nhỏ mặc định trong mã HTML của chúng ta, và sau đó chuyển ảnh mặc định sang ảnh chúng ta thực sự muốn hiển thị thông qua JavaScript.

Điều này có nghĩa là các ảnh sẽ được đánh dấu trong mã giống như dưới đây…

<img src="anh-gia.png" data-src="anh-that.png"

Khi trang đã thực hiện tải nội dung thuộc màn hình đầu tiên rồi, trình duyệt sẽ nhận được “ảnh giả” và điều đó chỉ có trình duyệt nhận thấy mà thôi, vì thế cho dù bạn có một ảnh hay một trăm ảnh cũng chẳng thành vấn đề, bởi vì trình duyệt đã tải các ảnh giả rồi.

Sau đó thông qua JavaScript, chúng ta tráo đổi ảnh giả tương ứng bằng ảnh thật.

Khi trình duyệt thấy rằng có một ảnh mới (ảnh thật) trong HTML, nó sẽ tải ảnh đó ngay lúc ấy.

Bước tương đối đơn giản này có thể tạo ra được kết quả rất tuyệt vời. Vừa mới đây thôi, tôi đã biến một trang phải mất tám giây để tải thành chưa đến một giây chỉ nhờ phương pháp đó (chúng ta sẽ mô tả phương pháp này đầy đủ ngay bên dưới với các code mẫu để các bạn tham khảo).

Hiểu cách trang web tải xuống

Để hiểu được cách thức, thời điểm và phương thức trì hoãn được dùng, chúng ta cần phải hiểu cách tải trang diễn ra như thế nào. Đây là kiến thức quan trọng cần biết và nó chỉ khiến bạn tốn một hoặc hai phút để hiểu mà thôi.

Ảnh trên cho thấy một trang web nhỏ tải ra sao. Trang có một ảnh chính, một vài ảnh khác, một file CSS và một file JavaScript.

Trong trang khá điển hình này, mỗi nguồn tài nguyên phải cạnh tranh với nhau để được tải về.

Sự thật là chỉ một số thứ cần tải ngay xuống lúc ban đầu, đó là các phần ở bên trên đường chấm chấm (- – – – – -)

Đây là phần được gọi là “trong màn hình đầu tiên” hoặc phần nội dung đầu tiên được nhìn thấy của trang web.

Điều này nghĩa là với người dùng muốn thấy nội dung màn hình đầu tiên nhanh nhất có thể, chúng ta chỉ cần tải HTML, CSS, JavaScript và ảnh chính là đủ.

Hãy xem cách chúng ta có thể làm trang này tải nhanh hơn gấp đôi (thậm chí còn hơn) như thế nào nhé. Chúng ta cần…

• Chỉ tải ảnh chính thôi
• Trì hoãn tải các ảnh còn lại

Khi chúng ta làm điều đó, chúng ta sẽ thấy rằng trang sẽ tải nhanh hơn nhiều, người dùng sẽ thấy nội dung sớm hơn.

Giờ chúng ta đã cắt giảm từ một trang phải yêu cầu tải đến 12 tài nguyên mới được phép hiển thị xuống trang chỉ cần tải 4 tài nguyên thôi cũng đã đủ cho người dùng thấy nội dung rồi.

Tôi thích điều này.

Nó có nghĩa là quảng cáo Adsense có thể hiển thị nhanh hơn, người dùng của tôi có thể mua hàng sớm hơn, và Google đánh giá cao website của tôi.

Trung thực hơn thì bạn và tôi đều biết rằng các trang của chúng ta có hàng tá ảnh, không chỉ có vài bức như trong minh họa trên. Đừng mắc sai lầm. Phương thức này có thể làm trang của bạn tải nhanh hơn rất nhiều. Bạn càng có nhiều ảnh trên trang, bạn càng tiết kiệm được nhiều thời gian với phương thức này.

Liệu lazy loading có làm điều này cho tôi không?

Nó có chứ, nhưng có nhiều tình huống mà lazy loading không phải là biện pháp lý tưởng.

Lý do phổ biến nhất là mọi người có thể chọn không trì hoãn tải hình ảnh thông qua tải lười biếng, và đây có thể là xu hướng phổ biến mới trong việc tạo các giao diện một trang.

Giao diện một trang / One page templates

Nếu bạn có giao diện một trang (điều này có nghĩa là thanh điều hướng chính của bạn không đưa bạn tới các trang khác mà là đưa bạn đến các phần khác nhau của cùng một trang) và nếu bạn chọn tải lười biếng (lazy loading), một rắc rối không hề nhỏ sẽ nổi lên.

Khi trang bạn tải, người dùng thấy thanh điều hướng chính của bạn, và nếu họ click, họ được đưa đến phần khác của trang mà hiện không có ảnh nào được tải sẵn lúc ấy.

Chẹp, tôi chẳng thích điều này đâu.

Trong trường hợp này cho dù người dùng chỉ sử dụng điều hướng của bạn, họ vẫn bị đưa đến các vị trí mà họ phải chờ đợi để ảnh tải xong.

Đây là lúc chúng ta thực hiện việc trì hoãn tải ảnh thay vì tải lười biếng

Trong kịch bản giao diện một trang (one page template), không có lý do nào để bạn phải thiết lập tất cả mọi thứ tải lười biếng (quan sát, theo dõi và phản ứng thích hợp với vị trí cuộn chuột).

Tại sao chúng ta không trì hoãn tải ảnh và giúp ảnh được tải ngay lập tức sau khi trang tải xong.

Làm nó thế nào đây?

Để làm điều đó chúng ta cần đánh dấu ảnh của mình và thêm một đoạn JavaScript rất nhỏ và cực kỳ đơn giản. Tôi sẽ cho bạn thấy phương thức mà tôi sử dụng trong thực tế cho trang này và các trang khác. Nó sử dụng ảnh base 64, nhưng đừng để khái niệm mới này làm bạn lo lắng.

Mã HTML:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="anh-that-cua-ban-o-day">

Và JavaScript:

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

Sử dụng

Với hầu hết các trang bạn có thể đơn giản thêm mã này ngay trước thẻ đóng </body> trong mã HTML và thay thế “anh-that-cua-ban-o-day” bằng đường dẫn hình ảnh thực tế của bạn.

(Dịch từ bài viết: How to defer images – Tác giả: Patrick Sexton – Website: Varvy)

The post Cách trì hoãn tải ảnh giúp tăng tốc độ website appeared first on Unest.

Một số biện pháp đó bao gồm:

• Nén ảnh: gồm nén ảnh mất chất lượng và không mất chất lượng để giảm dung lượng ảnh. Có rất nhiều plugin WordPress có thể làm được công việc này
• Sử dụng định dạng ảnh mới WebP: cho ảnh có chất lượng tương đương nhưng dung lượng giảm khá tốt. Bản thân WebP cũng là một dạng ảnh nén (tuy nhiên WebP gặp một cản trở rất lớn là hiện vẫn chưa được tất cả các trình duyệt phổ biến hỗ trợ, trong khi các đoạn mã hỗ trợ dự phòng cả 2 định dạng ảnh lại là vấn đề rất kỹ thuật, gây cản trở cho người quản trị không chuyên sâu về code)
• Sử dụng CDN để giảm độ trễ của mạng internet do quãng đường truyền tải dữ liệu xa đến máy chủ gốc, nó được áp dụng cho tất cả các file tĩnh khác, chứ không riêng gì ảnh
• Lazy load: là kỹ thuật xài đến đâu tải đến đó, chỉ khi ảnh trong (hoặc ở gần) khung nhìn trình duyệt (viewport) của người dùng thì trình duyệt mới tải ảnh từ máy chủ về

Nếu bạn muốn tìm hiểu kỹ hơn về việc tối ưu hóa tốc độ tải ảnh thì đọc bài này. Còn đường dẫn tiếp theo dành cho những ai muốn tìm hiểu sâu kỹ thuật lazy load ảnh và video.

Lazy load bộc lộ nhiều ưu thế trên máy bàn

Vì máy bàn có tốc độ kết nối internet cao, ổn định, và phần cứng xử lý dữ liệu của máy bàn cũng tốt hơn nên lazy load ảnh trên máy bàn hầu như không gặp vấn đề gì, thường thì chỉ có một chút giật cục, và nó có thể được khắc phục bằng một số biện pháp can thiệp tinh tế như làm blur để ảnh hiện dần trong tầm mắt người dùng. Trang web làm điều này rất xuất sắc là medium.com, với hiệu ứng ảnh xuất hiện rất mềm mại. Một cách khác nữa là tải trước ảnh khi nó cách khung nhìn một ngưỡng nào đó, chẳng hạn 1000px hoặc 2000px, plugin giúp bạn làm điều này là Flying Images (plugin này còn cung cấp CDN miễn phí có chất lượng khá tốt, rất hợp khi triển khai trên các sản phẩm, dịch vụ cần tiết kiệm chi phí).

Lazy load không chỉ làm trang tải nhanh hơn, nó còn giúp tiết kiệm băng thông đáng kể, khi mà nó không phải mất dung lượng cho nội dung mà người dùng không xem. Vấn đề giảm dung lượng khá quan trọng khi kết hợp với CDN, vì các dịch vụ CDN phần lớn tính chi phí theo dung lượng, với kiểu tính tiền dùng đến đâu trả đến đấy.

Tại sao thiết bị di động lại là vấn đề

Ngược lại máy bàn, kết nối của thiết bị di động thường không cao bằng, không ổn định bằng, cũng như nó có phần cứng yếu hơn trong việc xử lý dữ liệu (nếu bạn để ý điểm kiểm tra tốc độ trên di động lúc nào cũng thấp hơn trên máy bàn, công cụ có lẽ bạn quen thuộc là Google PageSpeed Insights). Chính vì những điều này, lazy load ảnh trên di động có thể gây ra một số phiền toái rất khó chịu như:

• Ảnh tải về rất chậm, người dùng lướt qua phần có ảnh mà đợi một hồi lâu mới thấy ảnh tải về được
• Trong trường hợp xấu nhất, ảnh thậm chí không tải về, tạo ra một khoảng trống rất vô duyên

Vì những lý do đó, nói chung bạn không nên sử dụng lazy load trên thiết bị di động.

Một số plugin tạo cache cho WordPress có khả năng bật/tắt lazy load trên thiết bị di động, chẳng hạn như WP-Rocket.

Giải pháp thay thế

Trì hoãn tải ảnh được xem là biện pháp tốt hơn lazy load.

Trong khi lazy load kiểu truyền thống là nước đến chân mới nhảy (ảnh trong tầm nhìn thì mới tải xuống), cơ chế trì hoãn tải ảnh lại khác, nó là cơ chế làm các việc quan trọng trước, còn các việc kém quan trọng để sau (nhưng sẽ làm ngay khi việc quan trọng làm xong chứ không “lười” như kiểu lazy load truyền thống).

Trì hoãn tải ảnh trước hết tải bất cứ ảnh nào trong màn hình đầu tiên nhưng trì hoãn các ảnh từ màn hình thứ hai trở đi, cho đến khi trang tải xong mới thôi. Khi bắt gặp thẻ đóng <body> trong <html> nó mới tải các ảnh còn lại.

Trì hoãn tải ảnh sẽ làm tốc độ tải trang về mặt nhận thức cao hơn, nhưng nó thường không tiết kiệm băng thông bằng lazy load, tuy nhiên băng thông lại không phải là vấn đề lớn trong đa số website (nhất là khi họ không sử dụng CDN), do vậy tôi khuyến khích các bạn dùng trì hoãn tải ảnh thay thế lazy load.

Vấn đề kỹ thuật

Dù rằng trì hoãn tải ảnh rất dễ thực hiện, nhưng như tôi biết, hiện vẫn chưa có plugin nào hỗ trợ cho nó, trong khi các plugin dành cho lazy load ảnh thì có rất nhiều (thí dụ a3 lazy load). Giờ những người muốn trì hoãn tải ảnh vẫn phải làm việc này một cách thủ công, điều chắc chắn sẽ thành vấn đề nếu họ có số lượng bài viết lớn trên website.

Bonus: Vẫn có khả năng lazy load ảnh trên di động nếu được thực hiện khéo léo

Lazy load ảnh trên di động có nhiều rủi ro như vậy, nhưng nó vẫn có khả năng triển khai được nếu bạn thiết lập các giới hạn hợp lý:

• Chỉ lazy load ảnh trên di động nếu trang của bạn cũng tích hợp CDN có máy chủ tại vị trí truy cập của người dùng, điều này tránh rủi ro độ trễ cao. Ở Việt Nam bạn có thể tham khảo dịch vụ của CDNSun. Ngoài ra CDN còn có ưu thể bổ sung rất đáng giá là một số dịch vụ còn đính kèm theo đó nhiều tối ưu hóa khác như định dạng, kích cỡ, vân vân
• Chỉ lazy load các ảnh không quan trọng hoặc/và các ảnh ở sâu bên dưới nội dung. Các ví dụ cho các ảnh như vậy có thể là các ảnh đại diện ở mục bài liên quan, ảnh nặng nằm từ giữa bài viết đến cuối bài, các banner ảnh ở bên cột phải dùng để quảng cáo dịch vụ của bạn (trên di động, nó sẽ trôi về cuối)

Lý tưởng nhất, triển khai lazy load ảnh nên kết hợp với khả năng nhận biết được tốc độ kết nối của người dùng để đưa ra phiên bản tối ưu nhất. Nhưng vấn đề là triển khai chuyện này không dễ dàng gì. Bạn có thể tham khảo bài viết tải thích ứng (adaptive loading) để biết thêm chi tiết.

The post Không nên sử dụng Lazy load ảnh trên thiết bị di động appeared first on Unest.