Đã đăng vào thg 9 16, 10:29 SA 9 phút đọc

148

Bí quyết tăng tốc website của bạn với rel="preload"

Khi nói đến việc cải thiện hiệu suất website, mỗi mili giây đều có giá trị. Một trong những cách hiệu quả nhất để giảm thời gian tải cho các tài nguyên quan trọng là sử dụng thuộc tính HTML link rel="preload". Trong bài viết này, chúng ta sẽ tìm hiểu sâu về cách thức hoạt động của preload, khi nào nên sử dụng nó và cách thức nó có thể cải thiện đáng kể trải nghiệm người dùng trên website của bạn.

Rel="preload" là gì?

Thuộc tính rel="preload" cho phép bạn “nhắc nhở” trình duyệt bắt đầu tải xuống một số tài nguyên nhất định trước khi chúng được yêu cầu trong quá trình hiển thị trang. Bằng cách này, bạn có thể đảm bảo rằng các tài nguyên chính như phông chữ, bảng định kiểu hoặc tập lệnh được tìm nạp sớm hơn, từ đó giảm thời gian để trang được hiển thị đầy đủ. Nói một cách đơn giản, bạn đang “mách” cho trình duyệt biết những tệp nào là quan trọng để có được trải nghiệm mượt mà.

Tại sao bạn nên sử dụng Preload?

Hầu hết các tối ưu hóa hiệu suất web đều tập trung vào việc giảm thời gian tải tài nguyên. Preload đặc biệt hữu ích khi có các tài nguyên quan trọng như phông chữ, CSS hoặc tệp JavaScript ảnh hưởng trực tiếp đến tốc độ hiển thị và hoạt động của trang.

Dưới đây là cách thức preload có thể giúp ích:

Giảm thiểu tình trạng Render Blocking: Bằng cách tải trước CSS hoặc phông chữ quan trọng, bạn tránh được các vấn đề chặn hiển thị, trong đó trang phải đợi tải xuống các tài nguyên này trước khi hiển thị nội dung.
Cải thiện First Contentful Paint (FCP): Preload đảm bảo rằng các tài nguyên quan trọng được tải xuống nhanh hơn, cải thiện tốc độ hiển thị nội dung trực quan đầu tiên cho người dùng.
Trải nghiệm người dùng tốt hơn: Trang tải nhanh hơn sẽ mang lại cảm giác phản hồi nhanh hơn và nâng cao trải nghiệm người dùng tổng thể, đặc biệt là đối với các tài nguyên nặng như phông chữ hoặc hình ảnh anh hùng (hero images).

Cú pháp và cách sử dụng rel="preload"

Hãy bắt đầu với một ví dụ cơ bản về cách sử dụng rel="preload". Dưới đây là một đoạn mã HTML đơn giản minh họa việc tải trước một phông chữ tùy chỉnh:

<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Trong ví dụ trên:

href chỉ định URL của tài nguyên.
as cho biết loại tài nguyên (ví dụ: font, image, script).
type giúp trình duyệt hiểu chính xác định dạng của tệp (hữu ích cho phông chữ).
crossorigin được yêu cầu khi tải tài nguyên từ một tên miền khác.

Trình duyệt sẽ thấy thẻ này và biết tải xuống phông chữ sớm, ngay cả khi CSS sử dụng phông chữ đó chưa được áp dụng.

Tải trước các loại tài nguyên khác nhau

Bạn có thể tải trước nhiều loại tài nguyên quan trọng để hiển thị trang của mình. Hãy cùng xem một số ví dụ phổ biến:

1. Tải trước phông chữ

Phông chữ thường là nguyên nhân chính khiến trang tải chậm lúc ban đầu. Việc tải trước chúng đảm bảo rằng văn bản được hiển thị kiểu chữ chính xác ngay khi nội dung được hiển thị, ngăn chặn hiện tượng Flash of Unstyled Text (FOUT) hoặc Flash of Invisible Text (FOIT).

<link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">

2. Tải trước bảng định dạng (Stylesheets)

Các bảng định dạng vô cùng quan trọng trong việc kiểm soát bố cục trang của bạn nên được tải trước để đảm bảo trình duyệt hiển thị trang nhanh nhất có thể.

<link rel="preload" href="/css/main.css" as="style">

3. Tải trước tập lệnh (Scripts)

Nếu bạn có JavaScript cần sử dụng ngay để tương tác với người dùng, việc tải trước nó có thể giúp giảm độ trễ trong quá trình thực thi tập lệnh.

<link rel="preload" href="/scripts/main.js" as="script">

4. Tải trước hình ảnh

Các hình ảnh lớn, đặc biệt là những hình ảnh được sử dụng phía trên cùng của website (banner - ảnh bìa), nên được tải trước để đảm bảo rằng người dùng không nhìn thấy khoảng trống hoặc trình giữ chỗ hình ảnh trong khi hình ảnh đang được tìm nạp.

<link rel="preload" href="/images/hero.jpg" as="image">

Các phương pháp tốt nhất khi sử dụng rel="preload"

Mặc dù preload là một công cụ mạnh mẽ, nhưng bạn nên sử dụng nó một cách có suy nghĩ. Dưới đây là một số phương pháp tốt nhất:

Chỉ tải trước các tài nguyên quan trọng: Việc tải trước mọi thứ thực sự có thể làm chậm trang web của bạn. Hãy chỉ tập trung vào các tài nguyên cần thiết cho quá trình hiển thị trang ban đầu.
Sử dụng crossorigin cho tài nguyên bên ngoài: Khi tải trước tài nguyên từ một tên miền khác, hãy đảm bảo bao gồm thuộc tính crossorigin. Điều này đảm bảo rằng tài nguyên của bạn có thể được tìm nạp chính xác mà không gặp sự cố CORS.
Đảm bảo xử lý bộ nhớ cache thích hợp: Các tài nguyên được tải trước nên có thể lưu vào bộ nhớ cache để ngăn chặn các yêu cầu mạng dư thừa. Điều này làm giảm tải cho cả máy chủ của bạn và trình duyệt của người dùng.
Đừng tải trước mọi thứ: Việc tải trước quá mức có thể gây căng thẳng không cần thiết cho trình duyệt, dẫn đến hiệu suất bị giảm sút. Chỉ tải trước các tài nguyên cần thiết cho đường dẫn hiển thị quan trọng.

Ví dụ về việc sử dụng rel="preload" trên website của bạn:

Dưới đây là ví dụ đầy đủ về cách bạn có thể tích hợp rel="preload" trong một trang web thông thường:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preload Example</title>

    <!-- Preload important resources -->
    <link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="/css/main.css" as="style">
    <link rel="preload" href="/scripts/main.js" as="script">
    <link rel="preload" href="/images/hero.jpg" as="image">

    <!-- Link stylesheet -->
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <header>
        <h1>Preload Example</h1>
        <img src="/images/hero.jpg" alt="Hero Image">
    </header>

    <script src="/scripts/main.js"></script>
</body>
</html>

Trong ví dụ này, chúng ta đã tải trước các tài nguyên thiết yếu sẽ tác động ngay lập tức đến tốc độ hiển thị trang, chẳng hạn như phông chữ, bảng định kiểu và hình ảnh.

Khi nào không nên sử dụng rel="preload"?

Mặc dù preload rất mạnh mẽ, nhưng nó không phải là giải pháp thần kỳ cho tất cả các tài nguyên. Dưới đây là một số trường hợp bạn có thể muốn tránh sử dụng nó:

Tài nguyên không quan trọng: Đừng tải trước các tài nguyên không cần thiết cho quá trình hiển thị ban đầu của trang.
Tài nguyên không thể đoán trước: Nếu một số tài nguyên có điều kiện hoặc phụ thuộc vào tương tác của người dùng (như hình ảnh bên dưới cùng của website hoặc JavaScript bị trì hoãn), tốt nhất bạn nên để trình duyệt tự động tìm nạp chúng khi cần.

Kết luận

Sử dụng rel="preload" là một cách đơn giản nhưng hiệu quả để tăng tốc trang web của bạn bằng cách yêu cầu trình duyệt tìm nạp các tài nguyên quan trọng càng sớm càng tốt. Bằng cách tập trung vào việc tải trước các tài sản thiết yếu như phông chữ, bảng định kiểu và hình ảnh, bạn có thể giảm thời gian tải và nâng cao trải nghiệm của người dùng.

Điểm mấu chốt mà bạn cần ghi nhớ: Chỉ tải trước những gì quan trọng và hiệu suất trang web của bạn sẽ được cải thiện đáng kể. Hãy thử áp dụng cho dự án tiếp theo của bạn và xem sự khác biệt mà nó tạo ra!

development