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