Nếu bạn là người dùng WordPress, tôi thực sự khuyên bạn nên ưu tiên hiệu suất trang web. Bằng cách cung cấp các trang tải nhanh cho khách truy cập, bạn sẽ cải thiện thứ hạng trên công cụ tìm kiếm của mình, tăng lưu lượng truy cập trang web và mang đến cho người đọc trải nghiệm người dùng tuyệt vời.
Phần quan trọng của việc tối ưu hóa trang web là phân tích các trang web bằng cách sử dụng các công cụ đo điểm chuẩn 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 của một URL, xác nhận kích thước của trang và xác nhận thời gian tải trang.
Các công cụ đo điểm chuẩn hiệu suất không chỉ phân tích các trang web của bạn mà còn cho biết những gì cần được giải quyết để cải thiện thời gian tải trang. Ví dụ:bạn có thể được khuyên xóa mã CSS không sử dụng hoặc giảm dung lượng hình ảnh trên trang web của mình.
Một đề xuất mà bạn sẽ thường xuyên thấy là Loại bỏ tài nguyên chặn hiển thị trong WordPress . Trong bài viết này, tôi sẽ giải thích tài nguyên chặn hiển thị trong WordPress là gì và chỉ ra cách bạn có thể cải thiện thời gian tải trang của trang web bằng cách xóa chúng.
Tài nguyên chặn kết xuất trong WordPress là gì?
Tối ưu hóa trang web là tất cả về việc cung cấp các trang web của bạn cho khách truy cập trong thời gian nhanh nhất có thể. Một trang điển hình chứa nhiều yếu tố khác nhau.
| Cấu trúc &Thiết kế | Được tạo bằng HTML và CSS |
| Nội dung | Văn bản và hình ảnh |
| Nội dung động | Nội dung động như video và thanh trượt được hiển thị bằng Javascript |
Khi ai đó truy cập một trang trên trang web của bạn, trình duyệt của họ sẽ xử lý mã của trang từ trên xuống dưới. Điều này thường được gọi là “ Hiển thị trang “.
Nếu trình duyệt gặp các lệnh gọi đến các tệp CSS hoặc Javascript bên ngoài, trình duyệt cần dừng hiển thị trang và tải xuống các tệp CSS và Javascript này trước khi chúng có thể được xử lý. Do đó, những tài nguyên này được coi là “ Chặn hiển thị ”Khi họ đang dừng quá trình hiển thị 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, đây là một chỉ số xếp hạng hiệu suất và công cụ tìm kiếm quan trọng mà Google gọi là Bức tranh có ý nghĩa đầu tiên (FMP).
Lưu ý rằng văn bản và hình ảnh không chặn hiển thị và không phải tất cả các tệp CSS và Javascript cũng đều chặn hiển thị. Nó có xu hướng là các tệp CSS và Javascript lớn hơn làm chậm quá trình hiển thị trang.
Cách xác định tài nguyên chặn hiển thị trên WordPress
Các tài nguyên chặn hiển thị trên WordPress có thể được xác định dễ dàng bằng cách sử dụng các công cụ đo điểm chuẩn hiệu suất. Tất cả những gì bạn phải làm là nhập URL của trang bạn muốn kiểm tra.
Google PageSpeed Insights đánh dấu tổng thời gian mà các tài nguyên chặn hiển thị thêm vào lớp sơn đầu tiên của trang của bạn. Bên dưới, bạn sẽ thấy bảng phân tích hiển thị URL của từng tài nguyên chặn hiển thị và kích thước của tệp. Nó cũng cho biết trang của bạn có thể tải nhanh hơn bao nhiêu nếu tài nguyên chặn hiển thị bị loại bỏ.
GTmetrix cũng liệt kê từng tài nguyên chặn hiển thị, kích thước của tệp và thời gian tải tệp xuống.
Mặc dù Kiểm tra tốc độ trang web Pingdom không có phần cụ thể làm nổi bật các tài nguyên chặn hiển thị, nhưng bạn có thể xem điều gì đang khiến các trang chậm lại từ phần “ Yêu cầu tệp " diện tích.
Nó sẽ làm nổi bật các tài nguyên chặn hiển thị như biểu tượng, phông chữ và tệp Javascript. URL của tệp, kích thước tệp và thời gian tải xuống được hiển thị cho từng tài nguyên. Khu vực yêu cầu tệp cũng hữu ích để xem hình ảnh nào đang tăng thời gian tải trang.
Vì WordPress gọi các tệp CSS và Javascript khác nhau trên trang web của bạn, điều quan trọng là phải chạy kiểm tra hiệu suất cho nhiều trang để tất cả các tài nguyên chặn hiển thị đều được phát hiện. Ví dụ:bạn có thể chạy các bài kiểm tra hiệu suất cho các khu vực chính của trang web như trang chủ, chỉ mục blog, bài đăng trên blog, trang giới thiệu và trang liên hệ.
Xác định Tài nguyên Quan trọng
Một tài nguyên được coi là quan trọng nếu nó được yêu cầu hiển thị phần sơn đầu tiên của một trang web. Tất cả các tài nguyên khác được coi là không quan trọng.
Một trong những cách dễ nhất để xác định các tài nguyên quan trọng là sử dụng tab Mức độ phù hợp trong Chrome DevTools. Nó làm nổi bật chính xác phần trăm tệp cần thiết để hiển thị tải trang ban đầu một cách chính xác. Kiểu quan trọng được hiển thị bằng màu xanh lục, trong khi kiểu không quan trọng được hiển thị bằng màu đỏ.
Trong ảnh chụp màn hình bên dưới, bạn có thể thấy rằng trên WordPress.org, một tỷ lệ lớn mã trong các tệp CSS và Javascript chặn hiển thị không được sử dụng. Tình trạng này còn tồi tệ hơn trên nhiều trang web WordPress, với kiểm tra mức độ phù hợp làm nổi bật một số tệp trong đó 100% mỗi tệp không được sử dụng.
Loại bỏ CSS chặn hiển thị trong WordPress bằng cách sử dụng cuộc gọi nội tuyến
Google khuyên bạn nên chuyển tất cả mã quan trọng từ tài nguyên chặn hiển thị sang cuộc gọi nội tuyến từ trang HTML của bạn. Bạn có thể xác định kiểu dáng quan trọng đối với lớp sơn đầu tiên của trang bằng cách sử dụng kiểu chặn trong head trên trang của bạn, trong khi các hàm Javascript quan trọng có thể được gọi nội tuyến trong trang của bạn bằng cách sử dụng Tập lệnh các thẻ.
Trên một nền tảng động như WordPress, nơi mã CSS và Javascript được thêm vào trang web thông qua các chủ đề và plugin, có thể không thực tế nếu di chuyển kiểu quan trọng theo cách thủ công. Do đó, nhiều người dùng WordPress sử dụng các dịch vụ như NitroPack và Critical CSS để các bảng định kiểu quan trọng được trích xuất tự động và hiển thị nội tuyến trong head phần.
Nếu tạo kiểu trang web nằm trong các tệp CSS nhỏ, bạn có thể sử dụng Trình dọn dẹp tài sản của plugin WordPress hiệu suất để tự động tạo kiểu nội tuyến từ các bảng định kiểu nhỏ.
Xóa Javascript chặn hiển thị trong WordPress bằng Async &Defer
Các tài nguyên Javascript chặn hiển thị trong WordPress có thể được loại bỏ bằng hai kỹ thuật được gọi là Async và Defer. Cả hai phương pháp đều cho phép trình duyệt tiếp tục hiển thị trang trong khi các tệp CSS và Javascript chặn hiển thị trong nội dung trong màn hình đầu tiên trong wordpress được tải xuống ở chế độ nền.
Có thể bạn nên sử dụng Async hoặc Defer trên một trang vì vậy điều quan trọng là phải kiểm tra cả hai và xem kỹ thuật nào cung cấp kết quả tốt nhất. Tuy nhiên, bạn sẽ thấy giảm thời gian tải trang cho dù bạn sử dụng phương pháp nào.
| Async | Tải xuống tệp khi trang đang được hiển thị và thực thi tệp ngay khi chúng có sẵn |
| Trì hoãn | Tải xuống tệp khi trang đang được hiển thị và thực thi tệp theo thứ tự tuần tự sau khi trang hoàn tất hiển thị |
Không đồng bộ và Trì hoãn có thể được áp dụng trên toàn bộ trang web của bạn bằng cách sử dụng plugin hiệu suất WordPress.
Trên blog cá nhân của mình, tôi sử dụng plugin Async JavaScript để trì hoãn Javascript trên các trang. Được phát triển bởi người sáng tạo Autoptimize Frank Goossens, Async Javascript cho phép bạn áp dụng Async và Defer cho các tệp Javascript không quan trọng và cung cấp cho bạn tùy chọn áp dụng các cài đặt khác nhau cho các tệp JQuery.
Trình hướng dẫn thiết lập của plugin sẽ chạy nhiều thử nghiệm trên GTmetrix để xác định cài đặt tốt nhất cho trang web của bạn.
Tôi đã chọn Async JavaScript vì nó tự động áp dụng Async hoặc Defer trên toàn bộ trang web của tôi. Đây chắc chắn là cách tiếp cận đơn giản nhất để loại bỏ các 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 WordPress HTTP / 2 Push Preload.
Khi bạn đã xác định các tài nguyên chặn hiển thị trên trang web WordPress của mình bằng cách sử dụng công cụ phù hợp của Chrome hoặc dịch vụ đo điểm chuẩn hiệu suất như GTmetrix hoặc Google PageSpeed Insights, bạn có thể áp dụng Async and Defer bằng HTTP / 2 Push Preload trên cơ sở từng tệp.
Nếu bạn sẵn sàng kiểm tra hiệu suất của Async và Defer cho từng tệp, bạn sẽ có thể 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 nhiều hơn.
Cho dù bạn sử dụng plugin WordPress nào để áp dụng Async và Defer, hãy nhớ kiểm tra thiết kế trang web của bạn sau đó để đảm bảo không có gì bị hỏng.
Để có cái nhìn tổng quan hơn về chủ đề này, vui lòng đọc bài viết của tôi “Cách hoãn phân tích cú pháp Javascript trong WordPress bằng cách sử dụng Defer và Async”.
Lời kết
Render-Blocking Resources trong WordPress giúp tăng đáng kể thời gian tải trang. Chúng cũng ảnh hưởng đến trải nghiệm người dùng trên trang web của bạn vì khách truy cập sẽ thấy một trang trống cho đến khi tất cả các tài nguyên chặn hiển thị đã được tải xuống và thực thi.
Công cụ và dịch vụ phù hợp của Chrome như Google PageSpeed Insights và GTmetrix giúp dễ dàng xác định các tài nguyên chặn hiển thị. Sau đó, bạn có thể loại bỏ các tài nguyên chặn hiển thị bằng các plugin WordPress như Async JavaScript và HTTP / 2 Push Preload.
Cảm ơn vì đã đọc.
Kevin