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ố đó Show
Đ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 đó
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
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ấtLợ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 ảnhCó hai cách phổ biến mà chúng tôi tải hình ảnh lên một trang. thẻ Lười tải hình ảnh trong thẻ hình ảnhHã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 Để hoãn tải, hãy đặt URL hình ảnh vào một thuộc tính khác với 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 JavascriptKỹ thuật này sử dụng trình lắng nghe sự kiện trên các sự kiện 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 Lưu ý rằng chúng tôi sẽ yêu cầu JavaScript chọn hình ảnh có chứa lớp 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 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 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ànChromeFirefoxIEEdgeSafari5855No1612.1Di động / Máy tính bảngAndroid ChromeAndroid FirefoxAndroidiOS Safari108< . 2-12. 510710812.2-12.5Vì 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 CSSMột hình nền phổ biến trong CSS 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 Đâ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 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 Chương 5. Tạo trải nghiệm người dùng tốt hơn với Lazy LoadingTả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ợpTrì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ó. Đ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 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 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ảiKhi 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ố 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 ( 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 JavaScriptToà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ẻ Chương 6. Thư viện JavaScript phổ biến để tải chậmVì 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
Chương 7. Kiểm tra tải lười biếngKhi 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ậnChú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 |
