M

MLOG

Tiếng Việt

Hướng dẫn toàn diện về lazy loading hình ảnh và thành phần, giúp tăng cường hiệu suất trang web và trải nghiệm người dùng cho đối tượng toàn cầu.

Lazy Loading: Tối ưu hóa hiệu suất web với Hình ảnh và Thành phần

Trong bối cảnh kỹ thuật số ngày nay, hiệu suất trang web là tối quan trọng. Người dùng mong đợi những trải nghiệm nhanh chóng, phản hồi tức thì, và các công cụ tìm kiếm ưu tiên những trang web mang lại điều đó. Một kỹ thuật quan trọng để tăng cường hiệu suất là lazy loading (tải lười). Bài viết này cung cấp một hướng dẫn toàn diện về lazy loading hình ảnh và thành phần, giúp bạn tối ưu hóa trang web của mình cho đối tượng người dùng toàn cầu.

Lazy Loading là gì?

Lazy loading là một kỹ thuật trì hoãn việc tải các tài nguyên (hình ảnh, iframe, thành phần, v.v.) cho đến khi chúng thực sự cần thiết – thường là khi chúng sắp đi vào khung nhìn (viewport). Điều này có nghĩa là thay vì tải tất cả tài sản ngay từ đầu, trình duyệt chỉ tải những tài nguyên mà người dùng có thể thấy khi trang được tải lần đầu. Khi người dùng cuộn xuống trang, nhiều tài nguyên hơn sẽ được tải khi chúng trở nên hữu hình.

Hãy hình dung như thế này: bạn đang chuẩn bị đồ cho một chuyến đi. Thay vì mang theo cả tủ quần áo của bạn ngay từ đầu, bạn chỉ đóng gói những bộ quần áo bạn biết mình sẽ cần ngay lập tức. Khi bạn tiếp tục hành trình, bạn sẽ lấy thêm đồ ra khi cần. Đó về cơ bản là cách lazy loading hoạt động đối với các trang web.

Tại sao nên sử dụng Lazy Loading?

Lazy loading mang lại một số lợi ích đáng kể:

Lazy Loading cho Hình ảnh

Hình ảnh thường là những tài sản lớn nhất trên một trang web, khiến chúng trở thành ứng cử viên hàng đầu cho việc áp dụng lazy loading. Dưới đây là cách triển khai lazy loading cho hình ảnh:

Lazy Loading gốc (Native)

Các trình duyệt hiện đại (Chrome, Firefox, Safari, và Edge) hiện đã hỗ trợ lazy loading gốc bằng cách sử dụng thuộc tính loading. Đây là cách đơn giản và hiệu quả nhất để áp dụng lazy loading cho hình ảnh.

Để bật lazy loading gốc, chỉ cần thêm thuộc tính loading="lazy" vào thẻ <img> của bạn:

<img src="image.jpg" alt="Hình ảnh của tôi" loading="lazy">

Thuộc tính loading có thể có ba giá trị:

Ví dụ:

<img src="london_bridge.jpg" alt="Cầu Luân Đôn" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Đường chân trời Tokyo" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

Trong ví dụ này, hình ảnh của Cầu Luân Đôn, Đường chân trời Tokyo, và Rio de Janeiro sẽ chỉ được tải khi người dùng cuộn đến chúng. Điều này cực kỳ hữu ích, đặc biệt nếu người dùng không cuộn xuống đến cuối trang.

Lazy Loading bằng JavaScript

Đối với các trình duyệt cũ hơn không hỗ trợ lazy loading gốc, bạn có thể sử dụng các thư viện JavaScript hoặc viết kịch bản tùy chỉnh của riêng mình. Dưới đây là một ví dụ cơ bản sử dụng Intersection Observer API:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

Giải thích:

  1. Chúng ta chọn tất cả các phần tử <img> có thuộc tính data-src.
  2. Chúng ta tạo một thực thể IntersectionObserver mới. Hàm callback được thực thi khi một phần tử được quan sát đi vào hoặc rời khỏi khung nhìn.
  3. Bên trong hàm callback, chúng ta lặp qua các entries (các phần tử đã giao với khung nhìn).
  4. Nếu một phần tử đang giao nhau (entry.isIntersecting là true), chúng ta đặt thuộc tính src của hình ảnh thành giá trị của thuộc tính data-src.
  5. Sau đó, chúng ta xóa thuộc tính data-src và ngừng quan sát hình ảnh, vì nó không còn cần thiết nữa.
  6. Cuối cùng, chúng ta quan sát từng hình ảnh bằng cách sử dụng observer.observe(img).

Cấu trúc HTML:

<img data-src="image.jpg" alt="Hình ảnh của tôi">

Lưu ý rằng URL hình ảnh thực tế được đặt trong thuộc tính data-src thay vì thuộc tính src. Điều này ngăn trình duyệt tải hình ảnh ngay lập tức.

Sử dụng các thư viện Lazy Loading

Một số thư viện JavaScript có thể đơn giản hóa quá trình lazy loading hình ảnh. Một số lựa chọn phổ biến bao gồm:

Các thư viện này thường cung cấp một API đơn giản để khởi tạo lazy loading và cung cấp các tính năng bổ sung như hình ảnh giữ chỗ và hiệu ứng chuyển tiếp.

Lazy Loading cho Thành phần (Components)

Lazy loading không chỉ dành cho hình ảnh; nó cũng có thể được áp dụng cho các thành phần, đặc biệt là trong các framework JavaScript hiện đại như React, Angular và Vue. Điều này đặc biệt hữu ích cho các ứng dụng trang đơn (SPA) lớn có nhiều thành phần.

Lazy Loading trong React

React cung cấp hàm React.lazy() tích hợp sẵn để lazy loading các thành phần. Hàm này cho phép bạn nhập động các thành phần, sau đó chúng chỉ được tải khi được kết xuất.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Đang tải...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

Giải thích:

  1. Chúng ta sử dụng React.lazy() để nhập động MyComponent. Hàm import() trả về một promise sẽ phân giải thành mô-đun thành phần.
  2. Chúng ta bọc MyComponent trong một thành phần <Suspense>. Thành phần Suspense cho phép bạn hiển thị một giao diện người dùng dự phòng (trong trường hợp này là "Đang tải...") trong khi thành phần đang được tải.

Lazy Loading trong Angular

Angular hỗ trợ lazy loading các mô-đun bằng cách sử dụng thuộc tính loadChildren trong cấu hình định tuyến.

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

Giải thích:

  1. Chúng ta định nghĩa một route cho đường dẫn my-module.
  2. Chúng ta sử dụng thuộc tính loadChildren để chỉ định rằng MyModuleModule nên được lazy load. Hàm import() nhập động mô-đun.
  3. Phương thức then() được sử dụng để truy cập mô-đun và trả về lớp MyModuleModule.

Lazy Loading trong Vue.js

Vue.js hỗ trợ lazy loading các thành phần bằng cách sử dụng nhập động và thẻ component.

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

Giải thích:

  1. Chúng ta sử dụng thẻ <component> với thuộc tính :is để kết xuất động một thành phần.
  2. Trong hook vòng đời mounted, chúng ta sử dụng hàm import() để nhập động MyComponent.vue.
  3. Sau đó, chúng ta đặt thuộc tính dữ liệu dynamicComponent thành giá trị export mặc định của mô-đun.

Các phương pháp tốt nhất cho Lazy Loading

Để đảm bảo rằng lazy loading được triển khai hiệu quả, hãy xem xét các phương pháp tốt nhất sau:

Những lưu ý về quốc tế hóa

Khi triển khai lazy loading cho đối tượng người dùng toàn cầu, hãy xem xét các yếu tố quốc tế hóa sau:

Kết luận

Lazy loading là một kỹ thuật mạnh mẽ để tối ưu hóa hiệu suất trang web và cải thiện trải nghiệm người dùng. Bằng cách trì hoãn việc tải các tài nguyên ngoài màn hình, bạn có thể giảm thời gian tải trang ban đầu, giảm tiêu thụ băng thông và giảm tải cho máy chủ. Cho dù bạn đang xây dựng một trang web cá nhân nhỏ hay một ứng dụng doanh nghiệp lớn, lazy loading nên là một phần quan trọng trong chiến lược tối ưu hóa hiệu suất của bạn. Bằng cách tuân theo các phương pháp tốt nhất được nêu trong bài viết này và xem xét các yếu tố quốc tế hóa, bạn có thể đảm bảo rằng việc triển khai lazy loading của mình hiệu quả và mang lại trải nghiệm người dùng tích cực cho đối tượng toàn cầu.

Hãy áp dụng lazy loading và mở ra một trải nghiệm web nhanh hơn, hiệu quả hơn và thân thiện hơn với mọi người.