Một số quản trị viên trang web WordPress quá quan tâm đến PageSpeed Insights hoặc GTmetrix. Lời khuyên của tôi, cũng như của nhiều người khác có kiến thức sâu rộng hơn về vấn đề này, là bạn không nên đặt quá nhiều trọng tâm vào các chỉ số đó hơn mức cần thiết.
Nếu tốc độ tải trang được cảm nhận là tốt, không cần thiết phải "đặt mọi thứ vào trạng thái xanh". Trong nhiều trường hợp, điều này thậm chí còn phản tác dụng vì bạn có thể rơi vào tình trạng tối ưu hóa quá mức, hoặc tệ hơn, bạn có thể làm hỏng nhiều thứ khác khi cố gắng sửa chữa một vấn đề duy nhất.
Tuy nhiên, dù bạn là một người đam mê WPO, một tín đồ tối ưu hóa hay chỉ muốn thử cải thiện độ phản hồi của trang web, những công cụ này gần như là không thể thiếu. Vấn đề là chúng chỉ cung cấp "hình ảnh tĩnh" được lấy từ các máy chủ bên ngoài. Nhưng điều gì sẽ xảy ra khi bạn, với tư cách là quản trị viên, duyệt trang web của mình? Làm sao với những quảng cáo tải chậm hoặc menu nhảy lên ngay khi bạn chuẩn bị nhấp chuột?
Nguồn gốc
Speed Auditor ra đời như một giải pháp đáp ứng nhu cầu cá nhân về việc sở hữu một số công cụ chẩn đoán cục bộ đơn giản nhưng mạnh mẽ. Đây không phải là một plugin tối ưu hóa (nó không thay đổi bất kỳ phần nào trong mã nguồn của bạn), mà là một plugin kiểm tra thời gian thực.
Nếu bạn đang tìm kiếm một plugin trả phí tốt, có thể là tốt nhất, cho WPO để thực hiện các thay đổi và tinh chỉnh, hãy xem xét Perfmatters. Nếu bạn đang tìm kiếm một giải pháp miễn phí và đơn giản, không cần phải loay hoay với các thiết lập và điều chỉnh phức tạp, nhưng vẫn có nhiều tính năng, bạn có thể thử WPO Rocket Tweaks của Fernando Tellado, có sẵn trong kho plugin WordPress.
Nếu bạn không biết DOM node hoặc chỉ số độ trễ là gì, đừng lo lắng. Speed Auditor được thiết kế để giúp bạn hiểu rõ trang web của mình chỉ trong nháy mắt:
- Chỉ báo thông minh: Một biểu tượng thay đổi màu sắc sẽ xuất hiện trên thanh công cụ quản trị của bạn. Nếu biểu tượng có màu Xanh lục, thời gian hiển thị nội dung quan trọng nhất (LCP) của bạn đang ở mức tối ưu. Nếu biểu tượng chuyển sang màu Cam hoặc Đỏ, có điều gì đó cần sự chú ý của bạn.
- Kiểm tra trong khi duyệt web: Bạn không cần phải cấu hình bất kỳ thiết lập phức tạp nào. Chỉ cần kích hoạt plugin, và trong khi bạn kiểm tra các bài đăng của mình, plugin sẽ hoạt động ngầm để phân tích xem hình ảnh của bạn có quá nặng hay máy chủ của bạn có phản hồi chậm chạp hay không.
- Báo cáo chi tiết hơn: Chỉ với một cú nhấp chuột, bạn có thể tải xuống tệp .txt để gửi cho nhà phát triển của mình hoặc lưu lại để so sánh kết quả sau khi áp dụng các thay đổi.
Dưới nắp ca-pô
Phiên bản 1.1.8 cố gắng cung cấp một số tính năng chẩn đoán chi tiết để tiết kiệm thời gian điều chỉnh trong bảng điều khiển trình duyệt.
- Xác định chính xác LCP: Plugin phát hiện chính xác thành phần nào (hình ảnh hoặc khối văn bản) đã kích hoạt Largest Contentful Paint.
- Phân tích độ sâu DOM: Điều quan trọng để tránh tình trạng "kích thước DOM quá lớn". Speed Auditor phân tích số lượng nút theo các vùng (Đầu trang, Nội dung, Chân trang) và cảnh báo nếu độ sâu nhúng vượt quá 15-20 cấp.
- Trình theo dõi độ trễ truyền tải phương tiện: Đo lường thời gian truyền tải thực tế (API Thời gian tài nguyên) của hình ảnh. Nếu một hình ảnh mất 500ms để tải xuống, plugin sẽ đánh dấu nó là quan trọng.
- Không ảnh hưởng đến máy chủ: Tất cả các thao tác xử lý đều diễn ra trên phía client (trình duyệt). Không có các truy vấn cơ sở dữ liệu nặng nề hoặc các quy trình PHP gây chậm trang web.
Bước nhảy vọt. Sắp ra mắt: Speed Auditor 1.1.9 (với "Radar CLS")
Cho đến nay, Chỉ số Di chuyển Bố cục Tích lũy (CLS) chỉ là một con số trừu tượng trong báo cáo. Bạn biết có điều gì đó đang di chuyển, nhưng không phải lúc nào cũng biết đó là gì. Rất sớm, trong phiên bản 1.1.9, điều này sẽ thay đổi.
Nút "Highlighter" của radar hoặc Hệ thống Lệnh Hạ cánh Thị giác ( Visual CLS) sẽ được giới thiệu.
Hãy tưởng tượng việc kích hoạt chế độ "radar" hiển thị các hộp đỏ trên bất kỳ yếu tố nào di chuyển khi bạn cuộn trang. Tính năng này, mà một số tiện ích mở rộng đã thực hiện với mức độ thành công khác nhau, luôn là một công cụ trực quan hữu ích để phát hiện những "vượt tràn" đôi khi bị bỏ sót.
- Đó có phải là banner AdSense đang quảng cáo nội dung của bạn không? Bạn sẽ thấy nó có một hộp màu đỏ. Bạn có thể tìm hiểu thêm về vấn đề này tại đây.
- Đó có phải là một hình ảnh không có kích thước xác định? Radar sẽ phát hiện nó.
- Tính năng theo dõi liên tục: Bạn có thể duyệt toàn bộ trang web của mình với tính năng theo dõi luôn hoạt động; plugin sẽ ghi nhớ rằng bạn muốn tiếp tục kiểm tra trực quan mọi góc cạnh.
Bản cập nhật này cũng sẽ bao gồm một từ điển kỹ thuật ngắn gọn, sẽ được mở rộng để bao gồm các mẹo và hướng dẫn, và sẽ được tích hợp vào bảng điều khiển WordPress của bạn, để các thuật ngữ như ins, iframe hoặc figure sẽ không còn là điều bí ẩn.
Mục tiêu là cải thiện cả hiệu suất phân tích và các báo cáo được tạo ra khi tôi thử nghiệm trong các tình huống khác nhau, đồng thời nhận phản hồi về các đề xuất cải tiến hoặc cảnh báo về lỗi.
Phiên bản 1.1.8 hiện đã có sẵn để giúp bạn sắp xếp lại các chỉ số, và sắp tới, phiên bản 1.1.9 sẽ giúp việc khắc phục sự ổn định giao diện của WordPress trở nên dễ dàng hơn. Nếu bạn cài đặt ngay bây giờ, bạn sẽ nhận được bản cập nhật trong thời gian ngắn.
Nó hoạt động như thế nào?
Mã này thực hiện theo ba bước sau:
1. Trình quan sát hiệu suất
Trình duyệt (Chrome, Edge, Opera) có một API tích hợp sẵn gọi là Performance API. Plugin đăng ký một "watcher" gọi là PerformanceObserver được cấu hình cụ thể cho loại đầu vào layout-shift.
Mỗi khi có sự thay đổi trên màn hình sau khi nó đã được vẽ ban đầu, trình duyệt sẽ tạo ra một sự kiện. Plugin bắt sự kiện đó và trích xuất hai thông tin quan trọng:
- Giá trị của hệ số bù: (Số đó là 0,0145).
- Yếu tố gây ra sự cố: Trình duyệt thông báo cho plugin chính xác nút HTML nào đã bị di chuyển.
2. Bộ lọc "Hoạt động gần đây"
Đây là nơi plugin cố gắng thông minh. Không phải tất cả các thao tác đều là "xấu". Nếu bạn nhấp vào menu thả xuống và nội dung cuộn xuống, đó là một thao tác mong đợi của người dùng.
Plugin kiểm tra một thuộc tính có tên là hadRecentInput. Nếu bạn đã nhấn phím hoặc nhấp chuột trong 500ms gần đây, trình duyệt sẽ đánh dấu chuyển động đó là "dự kiến" và plugin sẽ bỏ qua nó để tránh kết quả sai. Plugin chỉ phát hiện các chuyển động xảy ra một cách bất ngờ (chẳng hạn như quảng cáo xuất hiện đột ngột).
3. Hiển thị hình ảnh (Các hộp màu đỏ)
Khi plugin đã có phần tử đã được di chuyển, phần giao diện sẽ được hiển thị:
- Tính toán tọa độ: Sử dụng hàm getBoundingClientRect() để xác định vị trí của phần tử đó trên màn hình tại thời điểm chính xác đó (tọa độ dọc, tọa độ ngang).
- Chèn khung: Tạo một
divcó vị trí tuyệt đối, viền đỏ 2px vàchỉ số zrất cao để hiển thị ở trên cùng của mọi thứ. - Nhãn: Thêm một hộp nhỏ ở góc trên bên trái của hộp màu đỏ với tên của nhãn (ins, img, div) và giá trị của CLS tích lũy.
Tại sao điều này tốt hơn so với một báo cáo bên ngoài?
Các công cụ như PageSpeed đôi khi không phát hiện được CLS vì chúng không cuộn xuống cuối trang hoặc không đợi một số quảng cáo tải xong.
Plugin này sử dụng cơ chế lưu trữ để đo lường độ trễ tích lũy(CLS) trong suốt phiên duyệt web thực tế của người dùng. Nếu một phần tử di chuyển một chút ở đầu và một chút khi cuộn, plugin sẽ cộng dồn và đánh dấu nó, cung cấp cho bạn con số gần đúng nhất mà Google sẽ thấy trong báo cáo"Chrome User Experience" (CrUX) của mình.
