Preload tài nguyên trong website WordPress

Preload tài nguyên trên website WordPress, sửa lỗi “Preload key requests” trong Google PageSpeed.

Bạn đã bao giờ test tốc độ website của mình trên Google PageSpeed Insights và nhận được cảnh báo màu đỏ với nội dung “Preload key requests” hay chưa? Cảnh báo này thường liên quan đến các file CSS, JS hoặc Web Font, Icon Font… trên website của bạn. Nó có nghĩa là bạn nên cho các thành phần kể trên được phép tải trước nhằm tăng tốc độ hiển thị của website. Vậy làm thế nào để preload các tài nguyên trong website WordPress? Nhờ sự trợ giúp của một plugin có tên là Pre* Party Resource Hints, mọi thứ sẽ trở nên thật dễ dàng để làm điều đó.

Tham khảo thêm:

• Máy chủ phản hồi chậm – nguyên nhân và cách khắc phục
• Khắc phục lỗi cache của Google Analytics trong WordPress

Tại sao bạn nên chọn Pre* Party Resource Hints?

• Hoàn toàn miễn phí.
• Dễ dàng cài đặt và sử dụng.
• Vẫn đang tiếp tục được duy trì và phát triển bởi lập trình viên.
• Ngoài tính năng preload, plugin này còn hỗ trợ cả DNS prefetch, prerender, preconnect và prefetch.

Preload tài nguyên trong WordPress

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin Pre* Party Resource Hints (download).

2. Quay trở lại kết quả test Google PageSpeed, copy link của những tài nguyên mà Google khuyên bạn nên preload.

3. Truy cập Pre* Party => Insert Hints, bạn sẽ nhìn thấy khung Add New Resource Hint.

Trong đó:

• Domain or URL: hãy điền link tài nguyên muốn preload mà bạn đã copy ở bước 2 vào đây.
• Preload: tick vào mục này.
• Crossorigin: tick vào mục này.
• as: chọn loại tài nguyên cho phù hợp.
• Mime Type: chọn định dạng file cho phù hợp.
• Media Attribute: tính năng này cho phép bạn thiết lập preload file trên một số kích thước màn hình tùy chỉnh. Với nhu cầu thông thường, hãy bỏ trống nó.

Click vào nút Insert Resource Hint để xác nhận.

4. Xóa cache website (nếu có) và xem mã nguồn website (view-source) để biết liệu tài nguyên đã được preload hay chưa.

Cuối cùng, tất nhiên rồi, hãy test lại một lần nữa với Google PageSpeed Insights để đảm bảo vấn đề “Preload key requests” đã được khắc phục. Thật đơn giản phải không nào? Chúc các bạn thành công!

Ngoài plugin Pre* Party Resource Hints (miễn phí), các bạn cũng có thể dùng plugin Perfmatters (trả phí) hoặc tính năng Preload specific requests của plugin Autoptimize (miễn phí) để làm điều tương tự. Tham khảo bài viết “Sử dụng plugin Autoptimize để tối ưu website WordPress” để biết thêm chi tiết.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)