Một trang web có thể đạt kết quả xuất sắc trong một bài kiểm tra đơn lẻ nhưng vẫn chậm đối với người dùng của nó. Ngược lại, một trang phong phú có thể hữu ích và ổn định mặc dù nặng hơn một trang rỗng. Do đó, hiệu suất web phải được quản lý như một chất lượng dịch vụ: trên các hành trình được xác định, với dữ liệu thực tế, ngân sách và trách nhiệm bền vững.
Core Web Vitals cung cấp một ngôn ngữ chung về việc tải trang, tính tương tác và độ ổn định. Chúng không thay thế phân tích kinh doanh cũng như các chỉ số khác. Giá trị của chúng đến từ khả năng liên kết sự suy giảm với một nguyên nhân và ngăn chặn sự tái xuất hiện của nó.
Ngưỡng và khuyến nghị phải được kiểm tra trong tài liệu chính thức vào thời điểm triển khai.
Hiểu ba chỉ số chính
Sơn Nội Dung Lớn Nhất
LCP đo lường thời điểm khi phần tử nội dung lớn nhất có thể nhìn thấy được được hiển thị. Nó phụ thuộc vào thời gian máy chủ, việc phát hiện tài nguyên, tải xuống tài nguyên và công việc kết xuất. Chỉ tối ưu hình ảnh chính là không đủ nếu HTML đến muộn hoặc nếu trình duyệt đang chờ một tập lệnh.
Tương tác đến lần vẽ tiếp theo
INP quan sát khả năng phản ứng đối với các tương tác trong suốt chuyến thăm. Một JavaScript nặng, các nhiệm vụ dài, việc kết xuất phức tạp hoặc các trình xử lý không hiệu quả có thể làm chậm phản hồi. Việc đo lường phải tập trung vào các tương tác thực sự, không chỉ nhấp chuột tự động đầu tiên.
Dịch Chuyển Bố Cục Tích Lũy
CLS đo lường các chuyển động bất ngờ. Hình ảnh không có kích thước, phông chữ, biểu ngữ, nội dung được chèn và các thành phần quảng cáo có thể làm trang di chuyển. Giao diện ổn định bảo vệ việc đọc và tránh nhấp nhầm.
Phòng thí nghiệm và thực địa trả lời những câu hỏi khác nhau
Dữ liệu phòng thí nghiệm tái hiện một kịch bản được kiểm soát. Chúng hữu ích để chẩn đoán, so sánh một phiên bản và tích hợp các ngưỡng vào việc phân phối. Dữ liệu hiện trường phản ánh các thiết bị, mạng lưới, bộ nhớ đệm, địa lý và hành vi thực tế.
Một sự chênh lệch giữa hai cái không phải là một bất thường. Nó mời gọi kiểm tra sự kết hợp của người dùng, các trang liên quan và các phân vị. Dữ liệu tổng hợp ở mức nguồn có thể che giấu một trang quan trọng; các phép đo nội bộ có thể bổ sung phân tích một cách thận trọng và tôn trọng quyền riêng tư.
Bắt đầu từ các hành trình thiết yếu
Hiệu suất phải được đánh giá trên các trang tạo ra giá trị: đến SEO, tìm kiếm, trang thông tin, biểu mẫu, đặt hàng, bảng điều khiển hoặc tải xuống. Mỗi trang đều có một yếu tố chính và một tương tác quan trọng.
Đối với mỗi lộ trình, hãy xác định:
- dân số và thiết bị tham chiếu;
- vùng và mạng lưới;
- phần tử LCP dự kiến;
- tương tác chính ;
- dịch vụ bên thứ ba ;
- tỷ lệ thành công ;
- ngưỡng cảnh báo và chủ sở hữu.
Bản đồ này tránh việc tối ưu hóa một trang trình diễn trong khi quên đi công cụ tìm kiếm hoặc không gian khách hàng.
Đặt ngân sách thay vì một điểm mục tiêu
Một ngân sách hiệu suất giới hạn những gì mỗi trang có thể tải hoặc thực thi: JavaScript ban đầu, hình ảnh, phông chữ, các yêu cầu quan trọng, thời gian máy chủ và công việc trên luồng chính. Nó chuyển một tham vọng thành một hạn chế có thể kiểm chứng.
Ngân sách phải được điều chỉnh theo các trang. Một trực quan hóa nghiệp vụ có thể chấp nhận nhiều mã hơn so với một trang đích, nhưng nó phải tải mã theo nhu cầu. Các script bên thứ ba có ngân sách riêng và một người sở hữu nghiệp vụ.
Dòng thời gian giải thích LCP, INP và CLS và sự bổ sung lẫn nhau giữa dữ liệu phòng thí nghiệm và hiện trường.
Tối ưu hóa LCP từ đầu đến cuối
Đường dẫn quan trọng bắt đầu từ máy chủ. Một TTFB cao có thể đến từ tính toán, cơ sở dữ liệu, bộ nhớ đệm hoặc khoảng cách mạng. HTML phải tham chiếu nhanh đến tài nguyên chính và tránh để tài nguyên này được phát hiện sau nhiều tập lệnh.
Các hành động thường xuyên:
- bộ nhớ đệm ứng dụng và CDN thích hợp ;
- hình ảnh được điều chỉnh đúng kích thước và ưu tiên ;
- tắt lazy-loading trên phần tử LCP;
- cảnh sát kiểm soát các tình huống nguy cấp ;
- CSS cần thiết có sẵn mà không có chuỗi chặn;
- kết xuất phía máy chủ hoặc kết xuất trước khi cần thiết ;
- giảm chuyển hướng.
Cần kiểm tra rằng việc tối ưu hóa không làm giảm chất lượng của một biến thể, một ngôn ngữ hoặc một thiết bị.
Giảm INP mà không loại bỏ kinh nghiệm
Ưu tiên là xác định các tác vụ dài và nguồn gốc của chúng. Mã có thể được cắt nhỏ, tải khi cần thiết và thực thi ngoài đường đi tương tác. Các cập nhật giao diện được nhóm lại và các phép tính nặng được chuyển sang một worker khi điều đó mang lại giá trị thực sự.
Các thành phần bên thứ ba cần được đánh giá. Một thẻ tiếp thị chặn các tương tác có chi phí có thể đo lường được. Quản trị phải cho phép trì hoãn, thay thế hoặc loại bỏ nó.
Một phản hồi hình ảnh ngay lập tức, kèm theo xử lý không đồng bộ, cải thiện khả năng nhận thức với điều kiện không thông báo sai rằng thao tác đã hoàn tất.
Ổn định bố cục
Dành chỗ cho hình ảnh, video, quảng cáo và biểu ngữ loại bỏ nhiều sự chênh lệch. Các thành phần điều kiện phải xuất hiện trong một khu vực được dự kiến. Việc tải phông chữ có thể sử dụng một chiến lược tránh sự thay đổi đột ngột về số liệu.
CLS phải được phân tích trong suốt quá trình thăm khám. Một thông báo hoặc một module được chèn sau vài giây có thể không nhìn thấy trong một bài kiểm tra ngắn nhưng lại gây khó chịu cho người dùng.
Hình ảnh và phương tiện
Phục vụ đúng định dạng là chưa đủ. Trình duyệt phải nhận được một kích thước phù hợp với ngữ cảnh, một srcset, các kích thước rõ ràng và nén tương thích với nội dung. Hình ảnh chính có thể được tải trước một cách thận trọng; các phương tiện ngoài màn hình sẽ bị trì hoãn.
Đường ống tạo ra phải tránh việc tạo ra hàng chục biến thể không sử dụng. Việc theo dõi tỷ lệ tái sử dụng và trọng lượng thực sự giúp đơn giản hóa.
JavaScript và các phụ thuộc
Mỗi phụ thuộc đều thêm việc tải xuống, phân tích cú pháp, thực thi và rủi ro cập nhật. Một cuộc kiểm toán phải phân biệt mã được sử dụng, mã tải xuống quá sớm và mã dư thừa.
Các kiến trúc hiện đại có thể phân mảnh gói thành quá nhiều yêu cầu hoặc nhân bản các thư viện. Một báo cáo thành phần, các giới hạn trong CI và các nhập khẩu có mục tiêu hiệu quả hơn việc dọn dẹp hàng năm.
Script của bên thứ ba
Phân tích, sự đồng ý, trò chuyện, video, thử nghiệm và quảng cáo có thể chiếm ưu thế về chi phí. Mỗi bên thứ ba phải có:
- một chủ sở hữu ;
- một mục đích;
- một điều kiện tải;
- một ngân sách ;
- một quy trình sự cố;
- một ngày xem lại.
Một bên thứ ba không quan trọng có thể được tải sau khi tương tác hoặc có sự đồng ý. Cần thử nghiệm tác động của nó với và không có bộ nhớ đệm.
Backend, cơ sở và bộ nhớ đệm
Hiệu suất có thể nhìn thấy phụ thuộc vào toàn bộ chuỗi. Các truy vấn chậm, N+1, các cuộc gọi tuần tự và việc vô hiệu hóa toàn cục làm tăng thời gian máy chủ. Các bản ghi theo dõi và hồ sơ phải liên kết trang với các hoạt động bên trong.
Bộ đệm phải bảo đảm tính nhất quán và quyền truy cập. Một bộ đệm chia sẻ bị phân đoạn kém có thể trở thành một vấn đề về bảo mật. Chiến lược phải được ghi tài liệu theo loại dữ liệu và sự kiện vô hiệu hóa.
Ngăn ngừa sự thoái lui
Ngân sách phải được kiểm soát trong các pull request và trên một môi trường đại diện. Sự biến đổi trong phòng thí nghiệm đòi hỏi các biên độ và nhiều phép đo. Một sự suy giảm bền vững hoặc quan trọng sẽ chặn việc giao hàng; một ngoại lệ phải có người chịu trách nhiệm và thời hạn kết thúc.
Dữ liệu thực địa kích hoạt cảnh báo dựa trên xu hướng, không dựa trên từng biến động. Những thay đổi về cơ cấu lưu lượng và trang cần được xem xét.
Hiệu suất và khả năng tiếp cận được củng cố
Một trang nhẹ, ổn định và có thể sử dụng bằng bàn phím mang lại lợi ích cho nhiều người dùng hơn. Tuy nhiên, việc tối ưu hóa không được loại bỏ nhãn, giảm các vùng có thể nhấp hoặc ngăn chặn phóng to. Các bài kiểm tra bao gồm trình đọc màn hình, bàn phím và sở thích giảm chuyển động.
Liên kết hiệu suất và kết quả kinh doanh
So sánh tốc độ và chuyển đổi đòi hỏi phải kiểm soát bối cảnh. Thường hữu ích hơn khi theo dõi tỉ lệ thành công của một quá trình, việc bỏ cuộc sau tương tác chậm, lỗi và sự hài lòng hơn là tìm kiếm một mối tương quan phổ quát.
Một cải tiến thành công cũng có thể giảm cơ sở hạ tầng, mức tiêu thụ dữ liệu và hỗ trợ.
Biến hiệu suất thành quy tắc của sản phẩm
Hiệu suất bền vững đến từ ngân sách, công cụ, một chủ sở hữu và các cuộc đánh giá. Mỗi tính năng mới giải thích chi phí và các sự đánh đổi của nó. Các nhóm có các thành phần được tối ưu hóa thay vì phải phát minh lại giải pháp.
Partitech có thể đo lường một nền tảng, xác định các nguyên nhân phía frontend, backend và hạ tầng, sau đó tích hợp ngân sách và kiểm soát vào chuỗi cung ứng. Kết quả mong muốn là một trải nghiệm nhanh chóng trên thực địa, không chỉ là một điểm số trong phòng thí nghiệm.
Hãy nói về dự án của bạn
Được kiểm toán và công nghiệp hóa hiệu suất của nền tảng của bạn với Partitech. Liên hệ Partitech.