Nếu bạn là người dùng WordPress, tôi mạnh mẽ khuyên bạn ưu tiên hiệu suất trang web. Bằng cách cung cấp trang tải nhanh cho người truy cập, bạn sẽ cải thiện thứ hạng tìm kiếm, tăng traffic và mang lại trải nghiệm người dùng tuyệt vời.
Một phần quan trọng của tối ưu hóa trang web là phân tích các trang web bằng công cụ đo hiệu suất như Google PageSpeed Insights, GTmetrix và Pingdom Website Speed Test. Các dịch vụ này sẽ đánh giá hiệu suất URL, xác nhận kích thước trang và thời gian tải.
Công cụ đo hiệu suất không chỉ phân tích trang web, chúng còn chỉ ra những gì cần giải quyết để cải thiện thời gian tải. Ví dụ, bạn có thể được khuyên loại bỏ CSS không sử dụng hoặc giảm trọng lượng hình ảnh.
Một khuyến nghị thường gặp là Loại bỏ tài nguyên chặn hiển thị trong WordPress. Trong bài này, tôi sẽ giải thích tài nguyên chặn hiển thị là gì và chỉ cách cải thiện tốc độ tải bằng cách loại bỏ chúng.
Tài nguyên chặn hiển thị (Render-Blocking Resources) trong WordPress là gì?
Tối ưu hóa trang web là về việc giao trang web cho người truy cập trong thời gian nhanh nhất. Một trang điển hình chứa nhiều yếu tố khác nhau.
| Cấu trúc & Thiết kế | Xây dựng bằng HTML và CSS |
| Nội dung | Văn bản và hình ảnh |
| Nội dung động | Video, slider hiển thị bằng JavaScript |
Khi ai đó truy cập trang, trình duyệt sẽ xử lý mã trang từ trên xuống dưới. Quá trình này thường gọi là "Render trang" (Rendering the Page).
Nếu trình duyệt gặp lệnh gọi file CSS hoặc JavaScript bên ngoài, nó phải dừng render trang và tải các file đó trước khi xử lý tiếp. Những tài nguyên này do đó được gọi là "Chặn hiển thị" (Render-Blocking) vì chúng ngăn cản quá trình render trang.
Tài nguyên chặn hiển thị làm tăng thời gian trình duyệt hiển thị nội dung chính cho người dùng — chỉ số hiệu suất và xếp hạng tìm kiếm quan trọng mà Google gọi là First Meaningful Paint (FMP).
Lưu ý: văn bản và hình ảnh không chặn hiển thị. Không phải tất cả file CSS/JS đều chặn hiển thị. Thường là file CSS và JS lớn làm chậm render trang.
Cách xác định tài nguyên chặn hiển thị trên WordPress
Tài nguyên chặn hiển thị trên WordPress dễ dàng xác định bằng công cụ đo hiệu suất. Chỉ cần nhập URL trang cần test.
Google PageSpeed Insights làm nổi bật tổng thời gian tài nguyên chặn hiển thị thêm vào first paint. Dưới đó là phân tích chi tiết: URL từng tài nguyên, kích thước file, và trang có thể tải nhanh hơn bao nhiêu nếu loại bỏ tài nguyên đó.
GTmetrix cũng liệt kê từng tài nguyên chặn hiển thị, kích thước file và thời gian tải.
Mặc dù Pingdom không có mục chuyên biệt cho tài nguyên chặn hiển thị, bạn vẫn thấy nguyên nhân làm chậm trang ở khu vực "File Requests".
Nó làm nổi bật tài nguyên chặn hiển thị như icon, font, file JavaScript. URL file, kích thước, thời gian tải hiển thị cho từng tài nguyên. Khu vực File Requests cũng hữu ích để xem hình ảnh nào làm tăng thời gian tải.
Vì WordPress gọi các file CSS/JS khác nhau trên toàn trang web, quan trọng là chạy test hiệu suất cho nhiều trang để phát hiện hết tài nguyên chặn hiển thị. Ví dụ: test trang chủ, blog index, bài viết, trang giới thiệu, liên hệ.
Xác định tài nguyên quan trọng (Critical Resources)
Tài nguyên được coi là quan trọng (critical) nếu nó cần thiết để hiển thị first paint của trang. Tất cả tài nguyên khác là không quan trọng (non-critical).
Một cách dễ dàng nhất xác định tài nguyên quan trọng là dùng tab Coverage trong Chrome DevTools. Nó làm nổi bật chính xác phần trăm file cần thiết để hiển thị đúng first paint. CSS quan trọng hiển thị xanh, không quan trọng hiển thị đỏ.
Trong ảnh chụp dưới, bạn thấy trên WordPress.org, phần lớn mã trong file CSS/JS chặn hiển thị không được sử dụng. Tình huống tồi tệ hơn trên nhiều web WordPress, test coverage làm nổi bật nhiều file với 100% mã không dùng.
Loại bỏ CSS chặn hiển thị trong WordPress bằng Inline Calls
Google khuyến nghị di chuyển tất cả mã quan trọng từ tài nguyên chặn hiển thị sang inline call từ trang HTML. CSS quan trọng cho first paint có thể định nghĩa bằng khối style trong phần head của trang, còn hàm JS quan trọng có thể gọi inline bằng thẻ Script.
Trên nền tảng động như WordPress nơi CSS/JS được thêm qua theme/plugin, việc di chuyển thủ công có thể không thực tế. Do đó, nhiều người dùng WordPress dùng dịch vụ như NitroPack và Critical CSS để tự động trích xuất stylesheet quan trọng và hiển thị inline trong head.
Nếu CSS trang web nằm trong file nhỏ, bạn có thể dùng plugin hiệu suất Asset Cleanup để tự động inline CSS từ stylesheet nhỏ.
Loại bỏ JavaScript chặn hiển thị trong WordPress bằng Async & Defer
Tài nguyên JavaScript chặn hiển thị trong WordPress có thể loại bỏ bằng hai kỹ thuật: Async và Defer. Cả hai cho phép trình duyệt tiếp tục render trang trong khi tải file CSS/JS chặn hiển thị ở above-the-fold content nền.
Có thể ưu tiên Async hoặc Defer tùy trang, nên quan trọng test cả hai xem kỹ thuật nào cho kết quả tốt nhất. Dù dùng phương pháp nào, bạn sẽ thấy giảm thời gian tải trang.
| Async | Tải file khi trang đang render và thực thi file ngay khi sẵn sàng |
| Defer | Tải file khi trang đang render và thực thi file theo thứ tự sau khi trang render xong |
Async và Defer có thể áp dụng cho toàn trang web bằng plugin hiệu suất WordPress.
Trên blog cá nhân, tôi dùng plugin Async JavaScript để defer JS trên trang. Được phát triển bởi Frank Goossens — tác giả Autoptimize, Async JavaScript cho phép áp dụng Async/Defer cho file JS không quan trọng, và tùy chọn cài đặt khác cho file JQuery.
Wizard cài đặt plugin sẽ chạy nhiều test trên GTmetrix để xác định cài đặt tốt nhất cho trang web.
Tôi chọn Async JavaScript vì nó tự động áp dụng Async/Defer cho toàn trang web. Đây ללא nghi ngờ là cách đơn giản nhất loại bỏ tài nguyên chặn hiển thị trong WordPress, nhưng bạn có thể thấy kết quả tốt hơn với plugin HTTP/2 Push Preload.
Sau khi xác định tài nguyên chặn hiển thị bằng công cụ Coverage của Chrome hoặc dịch vụ đo hiệu suất như GTmetrix, Google PageSpeed Insights, bạn có thể áp dụng Async/Defer bằng HTTP/2 Push Preload trên cơ sở từng file.
Nếu bạn sẵn sàng test hiệu suất Async/Defer cho từng file, bạn sẽ tìm thấy kỹ thuật tốt nhất cho từng tài nguyên. Điều này có thể dẫn đến giảm thời gian tải trang lớn hơn.
Dù dùng plugin nào áp dụng Async/Defer, hãy kiểm tra thiết kế trang web sau đó để đảm bảo không bị vỡ.
Để hiểu toàn diện hơn, hãy đọc bài "Cách Defer Parsing của JavaScript trong WordPress dùng Defer và Async".
Tổng kết
Tài nguyên chặn hiển thị trong WordPress làm tăng lớn thời gian tải trang. Chúng cũng ảnh hưởng trải nghiệm người dùng vì người truy cập thấy trang trắng cho đến khi tất cả tài nguyên chặn hiển thị được tải và thực thi xong.
Công cụ Coverage của Chrome và dịch vụ như Google PageSpeed Insights, GTmetrix giúp dễ dàng xác định tài nguyên chặn hiển thị. Sau đó bạn có thể loại bỏ chúng dùng plugin WordPress như Async JavaScript và HTTP/2 Push Preload.
Cảm ơn bạn đã đọc.
Kevin