PRPL là từ viết tắt mô tả một mẫu dùng để giúp trang web tải và tương tác nhanh hơn:
- Tải trước các tài nguyên phát hiện sau.
- Hiển thị tuyến ban đầu sớm nhất có thể.
- Lưu trước vào bộ nhớ đệm các thành phần còn lại.
- Tải lười các tuyến đường khác và các thành phần không quan trọng.
Trong hướng dẫn này, hãy tìm hiểu cách mỗi kỹ thuật này phù hợp với nhau nhưng vẫn có thể được sử dụng độc lập để đạt được kết quả về hiệu suất.
Kiểm tra trang của bạn bằng Lighthouse
Chạy Lighthouse để xác định các cơ hội cải thiện phù hợp với các kỹ thuật PRPL:
- Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
- Nhấp vào thẻ Lighthouse (Tháp hải đăng).
- Đánh dấu vào hộp đánh dấu Hiệu suất và Ứng dụng web tiến bộ.
- Nhấp vào Chạy quy trình kiểm tra để tạo báo cáo.
Để biết thêm thông tin, hãy xem bài viết Khám phá các cơ hội cải thiện hiệu suất bằng Lighthouse.
Tải trước các tài nguyên quan trọng
Lighthouse sẽ cho thấy quy trình kiểm tra không thành công sau đây nếu một tài nguyên nhất định được phân tích cú pháp và tìm nạp trễ:
Tải trước là một yêu cầu tìm nạp khai báo yêu cầu trình duyệt yêu cầu một tài nguyên mà trình quét tải trước của trình duyệt không thể phát hiện được, chẳng hạn như hình ảnh được tham chiếu bằng thuộc tính background-image. Tải trước các tài nguyên được phát hiện muộn bằng cách thêm thẻ <link> có rel="preload" vào đầu tài liệu HTML:
<link rel="preload" as="image" href="hero-image.jpg">
Khi bạn thêm lệnh <link rel="preload">, hệ thống sẽ khởi tạo một yêu cầu cho tài nguyên đó và lưu trữ tài nguyên đó trong bộ nhớ đệm. Sau đó, trình duyệt có thể truy xuất cookie đó khi cần.
Để biết thêm thông tin về cách tải trước các tài nguyên quan trọng, hãy tham khảo hướng dẫn Tải trước các thành phần quan trọng.
Kết xuất tuyến đường ban đầu càng sớm càng tốt
Lighthouse đưa ra cảnh báo nếu có tài nguyên làm chậm Lần hiển thị đầu tiên, tức là thời điểm trang web của bạn hiển thị các pixel trên màn hình:
Để cải thiện lần vẽ đầu tiên, Lighthouse đề xuất bạn nên chèn JavaScript quan trọng vào cùng dòng và
trì hoãn phần còn lại bằng cách sử dụng
async,
cũng như chèn CSS quan trọng được sử dụng ở đầu trang vào cùng dòng. Điều này giúp cải thiện hiệu suất bằng cách loại bỏ các lượt truy cập đến máy chủ để tìm nạp các thành phần chặn kết xuất.
Tuy nhiên, mã nội tuyến khó duy trì hơn từ góc độ phát triển và trình duyệt không thể lưu vào bộ nhớ đệm riêng biệt.
Một phương pháp khác để cải thiện Lần hiển thị đầu tiên là hiển thị phía máy chủ HTML ban đầu của trang. Thao tác này sẽ hiển thị nội dung ngay lập tức cho người dùng trong khi tập lệnh vẫn đang được tìm nạp, phân tích cú pháp và thực thi. Tuy nhiên, điều này có thể làm tăng đáng kể tải trọng của tệp HTML, từ đó có thể gây hại cho Thời gian tương tác hoặc thời gian ứng dụng cần để có tính tương tác và có thể phản hồi với hoạt động đầu vào của người dùng.
Không có giải pháp chính xác duy nhất nào để giảm First Paint trong ứng dụng của bạn và bạn chỉ nên xem xét các kiểu cùng dòng và hiển thị phía máy chủ nếu lợi ích lớn hơn sự đánh đổi đối với ứng dụng của bạn. Bạn có thể tìm hiểu thêm về cả hai khái niệm này thông qua các tài nguyên sau.
Lưu trước thành phần vào bộ nhớ đệm
Bằng cách đóng vai trò là proxy, trình làm việc của dịch vụ có thể tìm nạp các thành phần trực tiếp từ bộ nhớ đệm thay vì máy chủ trong các lượt truy cập lặp lại. Điều này không chỉ cho phép người dùng sử dụng ứng dụng của bạn khi không có mạng mà còn giúp thời gian tải trang nhanh hơn khi người dùng truy cập lại.
Sử dụng thư viện bên thứ ba để đơn giản hoá quá trình tạo trình chạy dịch vụ, trừ phi bạn có các yêu cầu lưu vào bộ nhớ đệm phức tạp hơn những gì thư viện có thể cung cấp. Ví dụ: Hộp công việc cung cấp một bộ sưu tập công cụ cho phép bạn tạo và duy trì một trình chạy dịch vụ để lưu tài sản vào bộ nhớ đệm. Để biết thêm thông tin về trình chạy dịch vụ và độ tin cậy khi không có mạng, hãy tham khảo hướng dẫn về trình chạy dịch vụ trong lộ trình học tập về độ tin cậy.
Tải từng phần
Lighthouse sẽ cho thấy kết quả kiểm tra không thành công nếu bạn gửi quá nhiều dữ liệu qua mạng.
Điều này bao gồm tất cả các loại thành phần, nhưng tải trọng JavaScript lớn đặc biệt tốn kém do thời gian cần thiết để trình duyệt phân tích cú pháp và biên dịch các thành phần đó. Lighthouse cũng đưa ra cảnh báo về vấn đề này khi thích hợp.
Để gửi tải trọng JavaScript nhỏ hơn chỉ chứa mã cần thiết khi người dùng tải ứng dụng lần đầu, hãy chia toàn bộ gói và các phần tải từng phần theo yêu cầu.
Sau khi bạn đã chia gói, hãy tải trước các phần quan trọng hơn (xem hướng dẫn Tải trước các thành phần quan trọng). Tính năng tải trước đảm bảo trình duyệt tìm nạp và tải xuống các tài nguyên quan trọng hơn sớm hơn.
Ngoài việc phân tách và tải các đoạn JavaScript khác nhau theo yêu cầu, Lighthouse cũng cung cấp quy trình kiểm tra để tải từng phần hình ảnh không quan trọng.
Nếu bạn tải nhiều hình ảnh trên trang web, hãy trì hoãn tất cả hình ảnh nằm dưới màn hình đầu tiên hoặc bên ngoài khung nhìn của thiết bị khi một trang được tải (xem phần Sử dụng tính năng tải từng phần để tải từng phần hình ảnh).
Các bước tiếp theo
Giờ đây, bạn đã hiểu một số khái niệm cơ bản đằng sau mẫu PRPL, hãy tiếp tục với hướng dẫn tiếp theo trong phần này để tìm hiểu thêm. Điều quan trọng cần nhớ là không phải tất cả các kỹ thuật đều cần được áp dụng cùng nhau. Mọi nỗ lực thực hiện với bất kỳ nội dung nào sau đây đều sẽ giúp cải thiện đáng kể hiệu suất.
- Tải trước các tài nguyên quan trọng.
- Hiển thị tuyến đường ban đầu càng sớm càng tốt.
- Lưu trước vào bộ nhớ đệm các thành phần còn lại.
- Tải lười các tuyến đường khác và các thành phần không quan trọng.
Bạn có thể đọc thêm về các mẫu PRPL.