Bootstrap hình ảnh biểu ngữ

Hình ảnh rất quan trọng. Cho dù đó là biểu ngữ tiếp thị, hình ảnh sản phẩm hay logo, không thể tưởng tượng được một trang web không có hình ảnh. Tuy nhiên, đáng buồn thay, hình ảnh thường là các tệp nặng khiến chúng trở thành yếu tố đóng góp lớn nhất cho trang bị phình to. Theo báo cáo Trạng thái hình ảnh của Lưu trữ HTTP, kích thước trang trung bình trên máy tính để bàn là 1511 KB và hình ảnh chiếm gần 45% (650 KB) trong tổng số đó

Điều đó nói rằng, nó không giống như chúng ta có thể đơn giản loại bỏ hình ảnh. Chúng quá quan trọng đối với trải nghiệm người dùng tổng thể. Thay vào đó, chúng ta cần làm cho các trang web của mình tải thật nhanh với chúng. Trong hướng dẫn này, chúng tôi sẽ đề cập đến tất cả thông tin chi tiết về hình ảnh tải chậm, một kỹ thuật giúp cải thiện thời gian tải trang web bằng cách trì hoãn tải hình ảnh cho đến khi cần thiết

Bài đăng này thực hiện rất tốt việc trình bày chi tiết về chủ đề lười tải và tất cả các cân nhắc, công cụ, công nghệ, v.v. Nhưng nó đã được viết ngay trước khi tải chậm tự nhiên bắt đầu trở thành một thứ, vì vậy khi tìm ra giải pháp để triển khai, có lẽ bạn nên thông minh khi kết hợp tải chậm tự nhiên vào đó

  • Tải lười biếng gốc cho web
  • Mẹo để cuộn lazy loading của riêng bạn

Trước khi chúng tôi đi sâu vào, đây là một video mẫu thể hiện khái niệm này. Nói tóm lại, một hộp giữ chỗ màu xám được hiển thị trên trang cho đến khi nó cuộn vào chế độ xem—tại thời điểm đó, hình ảnh thực sẽ tải ở vị trí của hộp

Chương 1. Lazy Loading là gì?

Chúng ta thường liên tưởng từ “lười biếng” với việc tránh làm việc càng lâu càng tốt hoặc hành động hoàn toàn không muốn làm gì cả.

Tương tự, lazy loading trì hoãn việc tải tài nguyên trên trang miễn là chúng không cần thiết. Thay vì tải chúng ngay lập tức, đó là điều thường xảy ra, chúng tôi cho phép chúng tải sau

Lazy Loading là một tập hợp các kỹ thuật trong phát triển ứng dụng và web giúp trì hoãn việc tải tài nguyên trên một trang đến một thời điểm sau đó—khi những tài nguyên đó thực sự cần thiết thay vì tải chúng lên trước. Những kỹ thuật này giúp cải thiện hiệu suất, sử dụng tốt hơn tài nguyên của thiết bị và giảm chi phí liên quan

Kỹ thuật tải chậm có thể được áp dụng cho bất kỳ tài nguyên nào trên một trang. Ví dụ: ngay cả một tệp JavaScript cũng có thể bị giữ lại nếu tốt nhất là không tải nó lúc đầu. Thỏa thuận tương tự cho một hình ảnh — tải nó khi chúng tôi cần

Chúng tôi sẽ sử dụng hình ảnh tải chậm trong hướng dẫn này, nhưng thật tốt khi biết rằng nó có thể được áp dụng cho các nội dung khác

chương 2. Tại sao lại lười tải?

Nếu người dùng không bao giờ cuộn đến điểm của trang chứa hình ảnh, thì người dùng sẽ không bao giờ nhìn thấy hình ảnh đó. Nó cũng không bao giờ tải ngay từ đầu bởi vì, này, nó không bao giờ cần thiết

Bạn có thể đã bắt đầu thấy điều này mang lại lợi ích như thế nào cho cả bạn và người dùng. Dưới đây là hai trong số những lợi thế chúng tôi nhận được khi tải chậm

Tăng hiệu suất

Lợi ích rõ ràng là chúng tôi nhận được các trang web nhỏ hơn tải nhanh hơn. Tải chậm làm giảm số lượng hình ảnh cần tải trước trên một trang. Ít yêu cầu hình ảnh hơn có nghĩa là ít byte hơn để tải xuống. Và ít byte hơn để tải xuống có nghĩa là trang hiển thị nhanh hơn nếu các byte và yêu cầu đó được thực hiện

Điều này đảm bảo rằng mọi thiết bị trên mọi mạng đều có thể tải xuống và xử lý các tài nguyên còn lại nhanh hơn nhiều. Do đó, thời gian từ yêu cầu đến hiển thị trở nên nhỏ hơn và trang có thể sử dụng được sớm hơn nhiều. Đôi bên cùng có lợi

Giảm chi phí

Lợi ích thứ hai dành cho bạn với tư cách là người quản trị website. Các dịch vụ lưu trữ đám mây, như Mạng phân phối nội dung (CDN) hoặc máy chủ web hoặc kho lưu trữ, phân phối hình ảnh (hoặc bất kỳ nội dung nào cho vấn đề đó) với chi phí dựa trên số byte được truyền. Một hình ảnh được tải chậm có thể không bao giờ được tải nếu người dùng không bao giờ tiếp cận nó. Do đó, bạn có thể giảm tổng số byte được phân phối trên trang và cuối cùng tiết kiệm cho mình một vài xu trong quá trình này. Điều này đặc biệt đúng đối với những người dùng thoát ra khỏi trang ngay lập tức hoặc chỉ tương tác với phần trên cùng của nội dung

Việc giảm số byte được truyền từ mạng phân phối hoặc máy chủ của bạn giúp giảm chi phí phân phối. Điều này sẽ trở nên rõ ràng hơn khi chúng ta khám phá quá trình tải lười biếng trong các phần tiếp theo

Bạn sẽ tiết kiệm được bao nhiêu? . Điều này có một phần dành riêng cho hình ảnh ngoài màn hình. Bạn cũng có thể sử dụng trình phân tích trang web của ImageKit để xác định xem trang web của bạn có sử dụng tải chậm hay không ngoài các tối ưu hóa quan trọng khác liên quan đến hình ảnh trên trang của bạn

Tải chậm không chỉ quan trọng đối với hiệu suất tốt mà còn mang lại trải nghiệm người dùng tốt. Vì việc kết hợp hiệu suất và trải nghiệm người dùng với tải chậm là rất quan trọng và đầy thách thức, chúng tôi sẽ tiếp tục giải quyết chủ đề này chi tiết hơn trong suốt hướng dẫn này sau khi chúng tôi đã xem xét các cách khác nhau để tải chậm hình ảnh

Chương 3. Kỹ thuật tải chậm cho hình ảnh

Có hai cách phổ biến mà chúng tôi tải hình ảnh lên một trang. thẻ

0 và thuộc tính CSS
1. Đầu tiên chúng ta sẽ xem xét cái phổ biến hơn của cả hai, thẻ
0 và sau đó chuyển sang ảnh nền CSS

Lười tải hình ảnh trong thẻ hình ảnh

Hãy bắt đầu với đánh dấu HTML điển hình cho một hình ảnh

Đánh dấu cho hình ảnh tải chậm là khá giống nhau

Bước một là ngăn hình ảnh tải trước. Trình duyệt sử dụng thuộc tính

3 của thẻ để kích hoạt tải hình ảnh. Không quan trọng đó là hình ảnh đầu tiên hay thứ 1.000 trong HTML của bạn. Nếu trình duyệt nhận được thuộc tính
3, nó sẽ kích hoạt hình ảnh được tải xuống, bất kể nó ở trong hay ngoài chế độ xem hiện tại

Để hoãn tải, hãy đặt URL hình ảnh vào một thuộc tính khác với

3. Giả sử chúng ta chỉ định URL hình ảnh trong thuộc tính
1 của thẻ hình ảnh. Bây giờ
3 trống và trình duyệt sẽ không kích hoạt tải hình ảnh

Bây giờ chúng tôi đang ngăn hình ảnh tải, chúng tôi cần thông báo cho trình duyệt khi tải hình ảnh. Nếu không, nó sẽ không bao giờ xảy ra. Đối với điều này, chúng tôi kiểm tra xem ngay khi hình ảnh (i. e. trình giữ chỗ của nó) vào chế độ xem, chúng tôi kích hoạt tải

Có hai cách để kiểm tra khi một hình ảnh đi vào khung nhìn. Hãy xem xét cả hai với các mẫu mã đang hoạt động

Phương pháp 1. Kích hoạt tải hình ảnh bằng các sự kiện Javascript

Kỹ thuật này sử dụng trình lắng nghe sự kiện trên các sự kiện

3,
4 và
5 trong trình duyệt. Sự kiện cuộn khá rõ ràng vì nó theo dõi vị trí của người dùng trên trang khi cuộn xảy ra. Các sự kiện
4 và
5 đều quan trọng như nhau. Sự kiện
4 xảy ra khi kích thước cửa sổ trình duyệt thay đổi, trong khi sự kiện
5 được kích hoạt khi thiết bị được xoay từ ngang sang dọc hoặc ngược lại

Chúng ta có thể sử dụng ba sự kiện này để nhận ra sự thay đổi trên màn hình và xác định số lượng hình ảnh hiển thị trên màn hình và kích hoạt chúng tải tương ứng

Khi bất kỳ sự kiện nào trong số này xảy ra, chúng tôi sẽ tìm thấy tất cả hình ảnh trên trang bị hoãn lại và từ những hình ảnh này, chúng tôi kiểm tra xem hình ảnh nào hiện có trong chế độ xem. Điều này được thực hiện bằng cách sử dụng phần bù trên cùng của hình ảnh, vị trí trên cùng của tài liệu hiện tại và chiều cao cửa sổ. Nếu một hình ảnh đã vào chế độ xem, chúng tôi chọn URL từ thuộc tính

1 và di chuyển nó đến thuộc tính
3 và kết quả là hình ảnh sẽ tải

Lưu ý rằng chúng tôi sẽ yêu cầu JavaScript chọn hình ảnh có chứa lớp

12. Khi hình ảnh đã được tải, chúng tôi sẽ xóa lớp vì nó không còn cần kích hoạt sự kiện nữa. Và, khi tất cả các hình ảnh được tải, chúng tôi cũng xóa trình xử lý sự kiện

Khi chúng tôi cuộn, sự kiện cuộn sẽ kích hoạt nhanh nhiều lần. Vì vậy, đối với hiệu suất, chúng tôi đang thêm một khoảng thời gian chờ nhỏ vào tập lệnh của mình để điều chỉnh quá trình thực thi chức năng lazy loading để nó không chặn các tác vụ khác đang chạy trong cùng một chuỗi trong trình duyệt

Đây là một ví dụ làm việc của phương pháp này

Dự phòng nhúng CodePen

Lưu ý rằng ba hình ảnh đầu tiên trong ví dụ này được tải lên phía trước. URL hiện diện trực tiếp trong thuộc tính

3 thay vì thuộc tính
1. Đây là điều cần thiết cho trải nghiệm người dùng tốt. Vì những hình ảnh này nằm ở đầu trang nên chúng phải được hiển thị càng sớm càng tốt. Không cần đợi JavaScript tải chúng

Phương pháp 2. Kích hoạt tải hình ảnh bằng API Trình quan sát Giao lộ

API Trình quan sát Giao lộ tương đối mới. Nó giúp dễ dàng phát hiện khi một phần tử đi vào khung nhìn và thực hiện hành động khi nó xuất hiện. Trong phương pháp trước đó, chúng tôi phải liên kết các sự kiện, lưu ý đến hiệu suất và triển khai cách tính toán xem phần tử có trong chế độ xem hay không. API Trình quan sát giao lộ loại bỏ tất cả các chi phí đó bằng cách tránh tính toán và mang lại hiệu suất tuyệt vời ngay lập tức

Dưới đây là một ví dụ sử dụng API để lazy load hình ảnh. Chúng tôi đính kèm trình quan sát trên tất cả các hình ảnh được tải chậm. Sau khi API phát hiện phần tử đã vào chế độ xem, sử dụng thuộc tính

15, chúng tôi chọn URL từ thuộc tính
1 và chuyển nó sang thuộc tính
3 để trình duyệt kích hoạt tải hình ảnh. Khi điều này được thực hiện, chúng tôi xóa lớp
12 khỏi hình ảnh và cũng xóa người quan sát khỏi hình ảnh đó

Dự phòng nhúng CodePen

Nếu bạn so sánh thời gian tải hình ảnh cho hai phương thức (trình xử lý sự kiện so với. Intersection Observer), bạn sẽ thấy rằng hình ảnh tải nhanh hơn nhiều khi sử dụng API Intersection Observer và hành động cũng được kích hoạt nhanh hơn—và trang web không có vẻ chậm chạp chút nào, ngay cả trong quá trình cuộn. Trong phương pháp liên quan đến trình lắng nghe sự kiện, chúng tôi phải thêm thời gian chờ để làm cho nó hoạt động hiệu quả, điều này có tác động hơi tiêu cực đến trải nghiệm người dùng khi tải hình ảnh được kích hoạt với độ trễ nhẹ

Tuy nhiên, giống như bất kỳ tính năng mới nào, hỗ trợ API Trình quan sát Giao lộ không khả dụng trên tất cả các trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari5855No1612.1

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari108< . 2-12. 510710812.2-12.5

Vì vậy, chúng ta cần quay lại phương thức xử lý sự kiện trong các trình duyệt không hỗ trợ API Trình quan sát giao lộ. Chúng tôi đã tính đến điều này trong ví dụ trên

Chương 4. Lười tải hình nền CSS

Một hình nền phổ biến trong CSS

1

Hình nền CSS không đơn giản như thẻ hình ảnh. Để tải chúng, trình duyệt cần xây dựng cây DOM cũng như cây CSSOM để quyết định xem kiểu CSS có áp dụng cho nút DOM trong tài liệu hiện tại không. Nếu quy tắc CSS chỉ định hình nền không áp dụng cho một phần tử trong tài liệu thì trình duyệt sẽ không tải hình nền. Nếu quy tắc CSS được áp dụng cho một phần tử trong tài liệu hiện tại thì trình duyệt sẽ tải hình ảnh

Huh? . Nói một cách đơn giản, chúng tôi lừa trình duyệt không áp dụng thuộc tính CSS

1 cho một phần tử, cho đến khi phần tử đó xuất hiện trong chế độ xem

Đây là một ví dụ hoạt động lười tải hình nền CSS

Dự phòng nhúng CodePen

Một điều cần lưu ý ở đây là mã JavaScript cho lazy loading vẫn như cũ. Chúng tôi vẫn đang sử dụng phương pháp API Trình quan sát Giao lộ với dự phòng cho trình xử lý sự kiện. “Bí quyết” nằm ở CSS

Chúng tôi có một phần tử với ID

70 có một
1. Tuy nhiên, khi chúng ta thêm lớp
12 vào phần tử, chúng ta có thể ghi đè thuộc tính
1 bằng cách đặt giá trị của nó thành
74 trong CSS

Vì một phần tử có ID và một lớp có tính đặc hiệu cao hơn trong CSS so với chỉ một ID, trình duyệt sẽ áp dụng thuộc tính

75 cho phần tử ban đầu. Khi chúng tôi cuộn xuống, API Trình quan sát giao lộ (hoặc trình xử lý sự kiện, tùy thuộc vào phương pháp bạn chọn) sẽ phát hiện ra rằng hình ảnh nằm trong chế độ xem, nó sẽ xóa lớp
12 khỏi phần tử. Điều này thay đổi CSS hiện hành và áp dụng thuộc tính thực tế
1 cho phần tử, kích hoạt tải hình nền

Chương 5. Tạo trải nghiệm người dùng tốt hơn với Lazy Loading

Tải chậm mang lại lợi ích hiệu suất tuyệt vời. Đối với một công ty thương mại điện tử tải hàng trăm hình ảnh sản phẩm trên một trang, lazy loading có thể cải thiện đáng kể số lần tải trang ban đầu trong khi giảm mức tiêu thụ băng thông

Tuy nhiên, rất nhiều công ty không chọn lazy loading vì họ tin rằng điều đó đi ngược lại việc mang lại trải nghiệm tuyệt vời cho người dùng (i. e. trình giữ chỗ ban đầu xấu, thời gian tải chậm, v.v. )

Trong phần này, chúng tôi sẽ cố gắng giải quyết một số lo ngại xung quanh trải nghiệm người dùng với việc tải hình ảnh chậm

Mẹo 1. Sử dụng trình giữ chỗ phù hợp

Trình giữ chỗ là thứ xuất hiện trong vùng chứa cho đến khi hình ảnh thực tế được tải. Thông thường, chúng tôi thấy các nhà phát triển sử dụng trình giữ chỗ màu đồng nhất cho hình ảnh hoặc một hình ảnh duy nhất làm trình giữ chỗ cho tất cả các hình ảnh

Các ví dụ chúng tôi đã xem xét cho đến nay đã sử dụng một cách tiếp cận tương tự. một hộp có nền màu xám nhạt. Tuy nhiên, chúng tôi có thể làm tốt hơn để cung cấp trải nghiệm người dùng dễ chịu hơn. Dưới đây là hai ví dụ về việc sử dụng trình giữ chỗ tốt hơn cho hình ảnh của chúng tôi

Trình giữ chỗ màu chiếm ưu thế

Thay vì sử dụng một màu cố định cho trình giữ chỗ hình ảnh, chúng tôi tìm màu chủ đạo từ ảnh gốc và sử dụng màu đó làm trình giữ chỗ. Kỹ thuật này đã được Google sử dụng khá lâu trong kết quả tìm kiếm hình ảnh cũng như Pinterest trong thiết kế lưới của nó.

Pinterest sử dụng màu chủ đạo của hình ảnh làm màu nền cho trình giữ chỗ hình ảnh. (Nguồn)

Điều này có vẻ phức tạp để đạt được, nhưng Manuel Wieser có một giải pháp tao nhã để thực hiện điều này bằng cách thu nhỏ hình ảnh xuống 1×1 pixel và sau đó phóng to nó lên theo kích thước của trình giữ chỗ—một xấp xỉ rất thô nhưng đơn giản, . Sử dụng ImageKit, có thể thu được trình giữ chỗ màu chủ đạo bằng cách sử dụng biến đổi chuỗi trong ImageKit như được hiển thị bên dưới

7

Hình ảnh giữ chỗ chỉ có kích thước 661 byte so với hình ảnh gốc là 12700 byte—nhỏ hơn 19 lần. Và nó cung cấp trải nghiệm chuyển đổi đẹp hơn từ trình giữ chỗ sang hình ảnh thực tế

Đây là video chứng minh hiệu ứng này hoạt động như thế nào đối với người dùng

Dự phòng nhúng CodePen

Trình giữ chỗ hình ảnh chất lượng thấp (LQIP)

Chúng ta có thể mở rộng ý tưởng trên về việc sử dụng trình giữ chỗ có màu chủ đạo hơn nữa. Thay vì sử dụng một màu duy nhất, chúng tôi sử dụng phiên bản mờ, chất lượng rất thấp của hình ảnh gốc làm trình giữ chỗ. Nó không chỉ trông đẹp mà còn cung cấp cho người dùng một số ý tưởng về hình ảnh thực tế trông như thế nào và nhận thức rằng quá trình tải hình ảnh đang diễn ra. Điều này rất tốt để cải thiện trải nghiệm tải được cảm nhận. Kỹ thuật này đã được sử dụng bởi Facebook và Medium

Ví dụ URL hình ảnh LQIP sử dụng ImageKit

3

LQIP có kích thước 1300 byte, vẫn nhỏ hơn gần 10 lần so với hình ảnh gốc và cải thiện đáng kể về trải nghiệm hình ảnh so với bất kỳ kỹ thuật giữ chỗ nào khác

Đây là video chứng minh hiệu ứng này hoạt động như thế nào đối với người dùng

Dự phòng nhúng CodePen


Rõ ràng là việc sử dụng màu chủ đạo hoặc trình giữ chỗ LQIP sẽ cung cấp quá trình chuyển đổi mượt mà hơn từ trình giữ chỗ sang hình ảnh thực tế, cung cấp cho người dùng ý tưởng về những gì sẽ xảy ra ở vị trí của trình giữ chỗ đó và cải thiện nhận thức về tải

Mẹo 2. Thêm thời gian đệm cho hình ảnh để tải

Khi chúng tôi thảo luận về các phương pháp khác nhau để kích hoạt tải hình ảnh, chúng tôi đã kiểm tra thời điểm mà hình ảnh đi vào chế độ xem, tôi. e. tải hình ảnh được kích hoạt khi cạnh trên của trình giữ chỗ hình ảnh trùng với cạnh dưới của chế độ xem

Vấn đề với điều này là người dùng có thể cuộn trang rất nhanh và hình ảnh sẽ cần một chút thời gian để tải và xuất hiện trên màn hình. Kết hợp với việc điều chỉnh có thể làm trì hoãn tải hơn nữa, người dùng có thể sẽ phải chờ thêm vài mili giây nữa để hình ảnh hiển thị. Không tuyệt vời cho trải nghiệm người dùng

Mặc dù chúng ta có thể có được trải nghiệm người dùng khá tốt bằng cách sử dụng Intersection Observer API để có hiệu suất và LQIP để chuyển đổi mượt mà hơn, nhưng có một mẹo đơn giản khác mà bạn có thể sử dụng để đảm bảo rằng hình ảnh luôn được tải hoàn toàn khi chúng vào chế độ xem. giới thiệu một lề cho điểm kích hoạt cho hình ảnh

Thay vì tải hình ảnh chính xác khi nó đi vào chế độ xem, hãy tải nó khi nó, giả sử, 500px trước khi nó vào chế độ xem. Điều này cung cấp thêm thời gian, giữa trình kích hoạt tải và mục nhập thực tế trong chế độ xem, để tải hình ảnh

Với API Trình quan sát giao lộ, bạn có thể sử dụng tham số

78 cùng với tham số
79 (hoạt động như quy tắc lề CSS tiêu chuẩn), để tăng hộp giới hạn hiệu quả được coi là tìm giao lộ. Với phương thức lắng nghe sự kiện, thay vì kiểm tra sự khác biệt giữa cạnh hình ảnh và cạnh khung nhìn bằng 0, chúng ta có thể sử dụng một số dương để thêm một số ngưỡng

Dự phòng nhúng CodePen

Nếu bạn xem kỹ đoạn ghi hình sau đây, bạn sẽ nhận thấy rằng hình ảnh thứ năm trong chuỗi được tải khi hình ảnh thứ ba được xem. Tương tự, hình ảnh thứ sáu được tải khi hình ảnh thứ tư được xem, v.v. Bằng cách này, chúng tôi sẽ cung cấp đủ thời gian để hình ảnh tải hoàn toàn và trong hầu hết các trường hợp, người dùng sẽ không nhìn thấy trình giữ chỗ nào cả

Nếu bạn không để ý sớm hơn, thì trong tất cả các ví dụ của chúng tôi, hình ảnh thứ ba (

30) luôn được tải trước, mặc dù nó nằm ngoài khung nhìn. Điều này cũng được thực hiện theo nguyên tắc tương tự. tải trước một chút thay vì tải chính xác ở ngưỡng để có trải nghiệm người dùng tốt hơn

Mẹo 3. Tránh chỉnh lại nội dung

Đây là một điểm nhỏ khác, nếu được giải quyết, có thể giúp duy trì trải nghiệm người dùng tốt

Khi không có hình ảnh, trình duyệt không biết kích thước nó sẽ chiếm. Và nếu chúng tôi không chỉ định nó bằng CSS, thì vùng chứa kèm theo sẽ không có kích thước, tôi. e. nó sẽ được đọc là 0x0 pixel

Khi hình ảnh tải, trình duyệt sẽ thả nó vào màn hình và điều chỉnh lại nội dung cho vừa với hình ảnh đó. Sự thay đổi bố cục đột ngột này làm cho các phần tử khác di chuyển xung quanh và nó được gọi là chỉnh lại nội dung hoặc dịch chuyển. Michael Scharnagl đi sâu giải thích cách điều này tạo ra trải nghiệm người dùng khó chịu

Điều này có thể tránh được bằng cách chỉ định chiều cao và/hoặc chiều rộng cho vùng chứa kèm theo để trình duyệt có thể vẽ vùng chứa hình ảnh với chiều cao và chiều rộng đã biết. Sau này, khi hình ảnh tải, vì kích thước vùng chứa đã được chỉ định và hình ảnh vừa vặn với kích thước đó, nên phần còn lại của nội dung xung quanh vùng chứa đó sẽ không di chuyển

Mẹo 4. Tránh lười tải mọi hình ảnh

Đây là một sai lầm mà các nhà phát triển thường mắc phải vì thật hấp dẫn khi nghĩ rằng trì hoãn tải hình ảnh là tốt mọi lúc. Nhưng, giống như cuộc sống, có thể có quá nhiều điều tốt. Tải chậm có thể làm giảm tải trang ban đầu, nhưng nó cũng có thể dẫn đến trải nghiệm người dùng không tốt nếu một số hình ảnh bị trì hoãn khi không nên

Chúng ta có thể làm theo một số nguyên tắc chung để xác định hình ảnh nào nên được tải chậm. Ví dụ: bất kỳ hình ảnh nào có trong chế độ xem hoặc ở đầu trang web đều có thể không được tải chậm. Điều này áp dụng cho mọi hình ảnh tiêu đề, biểu ngữ tiếp thị, biểu trưng hoặc bất kỳ thứ gì thực sự mà người dùng sẽ thấy khi lần đầu tiên truy cập trang. Ngoài ra, hãy nhớ rằng thiết bị di động và máy tính để bàn sẽ có kích thước màn hình khác nhau và do đó ban đầu sẽ có số lượng hình ảnh khác nhau sẽ hiển thị trên màn hình. Bạn sẽ muốn tính đến thiết bị đang được sử dụng và quyết định tài nguyên nào sẽ tải trước và tài nguyên nào sẽ tải chậm

Một ví dụ khác là bất kỳ hình ảnh nào hơi lệch khỏi chế độ xem trong lần tải đầu tiên có thể không phải là tải chậm. Điều này diễn ra theo nguyên tắc đã thảo luận ở trên—tải trước một chút. Vì vậy, giả sử bất kỳ hình ảnh nào có kích thước 500px hoặc một cuộn từ dưới cùng của chế độ xem cũng có thể được tải trước

Một ví dụ nữa là nếu trang ngắn. Nó có thể chỉ là một cuộn hoặc một vài cuộn hoặc có thể có ít hơn năm hình ảnh bên ngoài khung nhìn. Trong những trường hợp này, bạn có thể bỏ hoàn toàn lazy loading. Nó sẽ không mang lại bất kỳ lợi ích đáng kể nào cho người dùng cuối về mặt hiệu suất và JavaScript bổ sung mà bạn tải trên trang để kích hoạt tải chậm sẽ bù đắp bất kỳ lợi ích tiềm năng nào bạn nhận được từ nó

Chương 5. Sự phụ thuộc của Lazy Loading vào JavaScript

Toàn bộ ý tưởng tải chậm phụ thuộc vào việc JavaScript được bật và có sẵn trong trình duyệt của người dùng. Mặc dù hầu hết người dùng của bạn có thể đã bật JavaScript, nhưng điều cần thiết là lập kế hoạch cho các trường hợp không bật

Bạn có thể hiển thị thông báo cho người dùng biết lý do hình ảnh không tải và khuyến khích họ sử dụng trình duyệt hiện đại hoặc bật JavaScript

Một cách khác là sử dụng thẻ

31. Tuy nhiên, cách tiếp cận này đi kèm với một số vấn đề. Chủ đề câu hỏi này trên Stack Overflow thực hiện rất tốt việc giải quyết những mối quan tâm này và là chủ đề được khuyến nghị đọc cho bất kỳ ai đang tìm cách giải quyết nhóm người dùng này

Chương 6. Thư viện JavaScript phổ biến để tải chậm

Vì các môi trường và chi tiết triển khai có thể khác nhau giữa các trình duyệt và thiết bị, nên bạn có thể muốn xem xét một thư viện đã được thử và kiểm tra để tải chậm thay vì tạo một thứ gì đó từ đầu

Dưới đây là danh sách các thư viện phổ biến và plugin dành riêng cho nền tảng sẽ cho phép bạn triển khai lazy loading với nỗ lực tối thiểu

  • Một trình tải lười biếng khác. Thư viện này sử dụng API Trình quan sát Giao lộ và quay trở lại chế độ tải từng phần dựa trên sự kiện đối với các trình duyệt chưa hỗ trợ nó. Điều này rất tốt cho bất kỳ phần tử HTML nào nhưng tiếc là không hoạt động trên hình nền trong CSS. Tin tốt là nó hỗ trợ IE trở lại phiên bản 11
  • lười biếng. Đây là một thư viện rất phổ biến với nhiều chức năng. Nó bao gồm hỗ trợ cho các thuộc tính hình ảnh phản hồi
    32 và
    33 và cung cấp hiệu suất tuyệt vời ngay cả khi nó không sử dụng API Trình quan sát Giao lộ
  • WordPress A3 lười tải. Có rất nhiều plugin lười tải WordPress ngoài kia, nhưng cái này đi kèm với một bộ tính năng mạnh mẽ, bao gồm cả dự phòng khi không có JavaScript
  • jQuery lười biếng. Một thư viện đơn giản sử dụng triển khai jQuery
  • WeltPixel Lazy Loading được cải tiến. Một tiện ích mở rộng Magento 2
  • Trình tải hình ảnh lười biếng Magento. Một phần mở rộng Magento khác, cho 1. x
  • Shopify Lazy Image Plugin (trả phí). Bật tính năng lazy loading trên trang Shopify

Chương 7. Kiểm tra tải lười biếng

Khi bạn đã triển khai lazy loading, có thể bạn sẽ muốn kiểm tra xem nó có hoạt động như dự định không. Cách đơn giản nhất là mở các công cụ dành cho nhà phát triển trong trình duyệt của bạn

Từ đó, đi đến Mạng> Hình ảnh. Khi bạn làm mới trang lần đầu tiên, bạn sẽ chỉ thấy những hình ảnh đã tải trong danh sách

Sau đó, khi bạn bắt đầu cuộn trang xuống, các yêu cầu tải hình ảnh khác sẽ được kích hoạt và tải. Bạn cũng có thể nhận thấy thời gian tải hình ảnh trong cột thác nước ở chế độ xem này. Nó sẽ giúp bạn xác định các sự cố tải hình ảnh nếu có hoặc các sự cố khi kích hoạt tải hình ảnh

Một cách khác là chạy báo cáo kiểm tra Google Chrome Lighthouse trên trang của bạn sau khi bạn đã triển khai các thay đổi và tìm kiếm các đề xuất trong phần “Hình ảnh ngoài màn hình”

Phần kết luận

Chúng tôi đã đề cập rất nhiều về hình ảnh tải chậm. Tải từng phần—nếu được triển khai tốt—có thể mang lại những lợi ích đáng kể đối với hiệu suất trang web của bạn đồng thời giảm kích thước trang tổng thể và chi phí phân phối, nhờ trả trước các tài nguyên không cần thiết

Bạn đang chờ đợi điều gì? . Và, nếu bạn cần một chút nhắc nhở về cách thức hoạt động của nó, hãy lưu một bản sao của đồ họa thông tin sau