PRPL là từ viết tắt mô tả một mẫu dùng để khiến trang web tải và trở nên 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 nội dung còn lại.
- Tải từng phần các tuyến khác và 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ể được sử dụng độc lập để đạt được kết quả 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 PRPL kỹ thuật:
- 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.
- Đánh dấu vào hộp Performance (Hiệu suất) và Progressive Web App (Ứng dụng web tiến bộ).
- Nhấp vào Chạy 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 về hiệu suất với Lighthouse.
Tải trước các tài nguyên quan trọng
Lighthouse cho biết lượt 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 cho trình duyệt biết cần 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 tìm thấy, chẳng hạn như hình ảnh được tham chiếu bởi thuộc tính background-image. Tải trước các tài nguyên phát hiện sau 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">
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 tệp đó 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.
Hiển thị tuyến đường ban đầu 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 First Paint (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 đặt nội tuyến JavaScript và
trì hoãn phần còn lại bằng cách sử dụng
async!
cũng như nội tuyế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ỏ các lượt truyền nhận đến máy chủ để tìm nạp các tài sả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ể lưu riêng vào bộ nhớ đệm của trình duyệt.
Một phương pháp khác để cải thiện First Paint là kết xuất phía máy chủ HTML 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 tải đáng kể của tệp HTML, điều này có thể gây hại cho 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 cho hoạt động đầu vào của người dùng.
Không có giải pháp chính xác nào để giảm hiệu ứng Hiển thị đầu tiên 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à phía máy chủ nếu lợi ích mang lại nhiều hơn lợi ích đánh đổi đối với ứng dụng. Bạn có thể hãy tìm hiểu thêm về cả hai khái niệm này qua các tài nguyên sau đây.
Lưu trước tài sản trong bộ nhớ đệm
Bằng cách đóng vai trò là một proxy, service worker có thể tìm nạp các thành phần ngay 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 khi chúng không kết nối mạng, mà còn giúp thời gian tải trang nhanh hơn số lượt truy cập lặp lại.
Sử dụng một thư viện của bên thứ ba để đơn giản hoá quy trình tạo trình chạy dịch vụ trừ phi bạn có những 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 yêu cầu mà thư viện có thể làm cung cấp. Ví dụ: Hộp công việc cung cấp tập hợp các công cụ cho phép bạn tạo và duy trì một trình chạy dịch vụ nội dung trong bộ nhớ đệm. Để biết thêm thông tin về trình chạy dịch vụ và độ tin cậy 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 học tập về độ tin cậy.
Tải từng phần
Lighthouse sẽ hiển thị 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 các tải trọng JavaScript lớn đặc biệt do trình duyệt cần nhiều thời gian để phân tích cú pháp và biên dịch chúng. 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 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, 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 phân tách được gói của mình, hãy tải trước các phân đoạn nhiều hơn quan trọng (xem hướng dẫn Tải trước thành phần quan trọng). Tính năng tải trước đảm bảo tìm nạp và tải xuống nhiều tài nguyên quan trọng hơn sớm hơn theo trình duyệt.
Ngoài việc chia tách và tải các phần JavaScript khác nhau theo yêu cầu, Lighthouse cũng kiểm tra khả năng 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 trì hoãn tất cả 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 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ờ bạn đã hiểu một số khái niệm cơ bản đằng sau mô hình PRPL, hãy tiếp tục xem hướng dẫn tiếp theo trong phần này để tìm hiểu thêm. Lưu ý rằng 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 theo bất kỳ cách nào sau đây sẽ mang lại hiệu suất đáng kể.
- Tải trước các tài nguyên quan trọng.
- Hiển thị tuyến ban đầu sớm nhất có thể.
- Lưu trước vào bộ nhớ đệm các nội dung còn lại.
- Tải từng phần các tuyến khác và thành phần không quan trọng.
Bạn có thể đọc thêm về các mẫu PRPL.