Phát hiện thú vị từ GitHub WordPress Performance

Mình có thói quen thỉnh thoảng lên GitHub của WordPress Performance team xem họ đang làm gì. Tuần này mình phát hiện một PR khá hay – số #2572 – về việc skip oversized Link preload header trong Optimization Detective. Nghe hơi kỹ thuật nhưng thực ra rất dễ hiểu và cực kỳ hữu ích cho website WordPress của bạn.

Link preload header là gì và tại sao nó lại gây chậm?

Khi trình duyệt load website của bạn, server gửi kèm một HTTP header gọi là Link. Header này báo cho trình duyệt biết: “Ê, có mấy file này quan trọng (ảnh, font, CSS…), tải trước đi cho nhanh”. Về lý thuyết thì nghe hay đấy, nhưng vấn đề là:

Nếu header này quá to – nó có thể bị proxy server, CDN, hoặc thậm chí chính trình duyệt cắt bỏ hoặc bỏ qua. Bạn bỏ công set up preload mà cuối cùng chả có tác dụng gì. Còn tệ hơn, nó làm tăng kích thước response header, gây chậm ngược lại.

Faisal Ahammad – contributor của PR này – đã đề xuất giải pháp: nếu header quá to (oversized), thì tự động skip, đừng nhồi nhét nữa. Cách tiếp cận này thông minh hơn hẳn cách cũ là giới hạn độ dài bằng filter.

Kỹ thuật đằng sau Optimization Detective

Optimization Detective là một plugin trong hệ sinh thái WordPress Performance Lab – nó tự động phát hiện và đề xuất các tối ưu dựa trên hành vi thực tế của người dùng. Cụ thể ở đây, PR #2572 xử lý vấn đề imagesrcset và imagesizes trong Link header bị quá dài.

Thay vì cố gắng cắt giảm (mà vẫn có thể vượt ngưỡng), giải pháp mới strip bỏ các thuộc tính imagesrcset/imagesizes khỏi header khi tổng kích thước vượt quá giới hạn cho phép. Kết quả: header gọn hơn, load nhanh hơn, không bị proxy từ chối.

Áp dụng cho website của bạn ngay hôm nay

Nếu bạn chưa cài Optimization Detective (hoặc chưa biết đến Performance Lab), đây là cách bắt đầu:

Bước 1: Cài plugin Performance Lab từ WordPress.org (miễn phí). Plugin này bao gồm nhiều module tối ưu, trong đó có Optimization Detective.

Bước 2: Kiểm tra response header hiện tại. Bạn có thể dùng Chrome DevTools (tab Network, chọn request chính, xem Response Headers) để xem Link header hiện tại dài bao nhiêu. Nếu nó dài hơn 8KB, bạn cần tối ưu ngay.

Bước 3: Kết hợp với plugin cache. RabbitLoader hoặc WP Rocket sẽ tự động xử lý nhiều vấn đề về header, nhưng nếu bạn muốn kiểm soát chi tiết hơn, Performance Lab là công cụ không thể thiếu.

Đừng bỏ qua những PR nhỏ

Một bài học mình rút ra từ việc theo dõi GitHub của WordPress: những cải tiến nhỏ nhất đôi khi mang lại hiệu quả lớn nhất. PR #2572 chỉ thay đổi vài dòng code, nhưng nó có thể giúp hàng triệu website WordPress load nhanh hơn khi được merge vào core.

Còn bạn, bạn đã kiểm tra response header của website mình chưa? Vào Chrome DevTools ngay bây giờ và xem thử Link header dài bao nhiêu nhé!