Nếu bạn đã từng chạy trang web WordPress của mình thông qua Google PageSpeed Insights, Google có thể đã nói với bạn rằng bạn cần loại bỏ tài nguyên chặn hiển thị trên trang web WordPress của mình. Trên thực tế, đó có thể là lý do tại sao bạn đang đọc bài viết này ngay bây giờ.
Điều đó có thể đặt ra hai câu hỏi trong đầu của bạn:
- Tài nguyên chặn hiển thị ở màn hình đầu tiên là gì?
- Làm thế nào bạn có thể loại bỏ tài nguyên chặn hiển thị trên WordPress?
Trong bài đăng này,Tài sẽ trả lời cả hai câu hỏi cho bạn. Đây là tất cả mọi thứ mà chúng Tài sẽ đề cập trong bài viết này:
Không loại bỏ các tài nguyên chặn hiển thị có nghĩa là sao ?
Để hiểu tài nguyên chặn hiển thị là gì và tại sao chúng làm tổn hại tới thời gian tải trang web của bạn, Tài cần bắt đầu với một cái nhìn cơ bản về cách trình duyệt web hiển thị trang web.
Khi khách truy cập hạ cánh trên trang web của bạn, trình duyệt web của họ về cơ bản bắt đầu ở đầu mã trang web của bạn và đọc xuống. Từ trên xuống dưới, OK chưa? 😀
Nếu trong quá trình đó, nó gặp một tệp CSS hoặc JavaScript, thì nó cần dừng việc đọc trong khi nó chờ để tải xuống và xử lý tệp đó.
Thời gian mà nó dành thời gian đã tạm dừng để tải xuống và phân tích các tài nguyên đó có thể được sử dụng cho một thứ gì đó hiệu quả hơn, như tải một phần nội dung trang web của bạn có thể nhìn thấy ngay lập tức khi có ai đó truy cập trang.
Hãy xem xét một ví dụ cực đoan để cho thấy tại sao điều này có thể là một vấn đề.
Giả sử bạn có hiệu ứng JavaScript tuyệt vời này ở Footer của bạn. Nó được cung cấp bởi nhóm coolfooter.js, đây là tập lệnh được tham chiếu ở đầu mã trang web của bạn ( mặc dù hiệu ứng nằm ở chân trang, vì vậy khách truy cập sẽ không thấy nó cho đến khi họ cuộn đến chân trang ).
Vì vậy, bố cục cho mã trang web của bạn có thể giống như:
- Tiêu đề meta
- Coolfooter.js
- HTML cho nội dung trên màn hình đầu tiên của bạn. Đây là tất cả nội dung mà khách truy cập nhìn thấy ngay lập tức ( trước khi họ bắt đầu tương tác với trang )
Và đây là lý do tại sao:
Khi khách truy cập hạ cánh trên trang web của bạn, trình duyệt của họ bắt đầu đọc từ trên xuống dưới.
Vì vậy, trước khi nó có thể phân tích cú pháp và hiển thị HTML cho nội dung trong màn hình đầu tiên trên trang web của bạn, nó cần phải chờ để tải xuống và phân tích tệp coolfooter.js.
Kết quả cuối cùng? Sẽ mất nhiều thời gian hơn để hiển thị HTML cho nội dung trong màn hình đầu tiên, điều đó có nghĩa là khách truy cập của bạn sẽ cảm thấy trang web của bạn chậm hơn.
Khi Google yêu cầu bạn loại bỏ các tài nguyên chặn kết xuất, về cơ bản, đó là, hey hey, không tải các tài nguyên không cần thiết ở đầu mã trang web của bạn vì sẽ khiến các trình duyệt của khách truy cập mất nhiều thời gian hơn để tải xuống phần hiển thị của bạn Nội dung”.
Với các mẹo trong bài đăng này, bạn sẽ có thể chờ để tải một số tài nguyên CSS và JavaScript nhất định cho đến khi phần hiển thị của trang của bạn đã được tải.
Tài nguyên chặn hiển thị là gì?
Khi đề cập đến tài nguyên chặn kết xuất, chúng ta thường nói về:
Điều quan trọng là phải hiểu rằng không phải tất cả các tệp CSS và JavaScript đều chặn hiển thị .
Là hình ảnh chặn?
Không, hình ảnh không bị chặn hiển thị . Điều quan trọng là tối ưu hóa hình ảnh của bạn để giảm kích thước tệp của chúng, nhưng bạn không cần phải lo lắng về việc tối ưu hóa đường dẫn phân phối cho hình ảnh của mình.
Cách kiểm tra nếu trang web của bạn có tài nguyên chặn hiển thị
Để đánh giá xem trang web WordPress của bạn hiện có tài nguyên chặn kết xuất hay không, bạn có thể sử dụng Google PageSpeed Insights .
Tất cả những gì bạn làm là nhập URL mà bạn muốn kiểm tra. Sau đó, nếu bạn gặp vấn đề với tài nguyên chặn kết xuất, PageSpeed Insights sẽ liệt kê từng tài nguyên riêng lẻ trong phần Loại bỏ tài nguyên chặn kết xuất trong Cơ hội :
Thông báo Tài nguyên chặn hiển thị loại bỏ trong thông tin chi tiết về tốc độ trang
Làm thế nào để bạn loại bỏ tài nguyên chặn hiển thị?
Đừng lo lắng, bạn không phải làm điều này bằng tay. Chúng ta sẽ nói về các plugin WordPress có thể giúp bạn loại bỏ các tài nguyên chặn kết xuất trong phần tiếp theo.
Tuy nhiên, thật hữu ích để hiểu những gì các plugin này đang làm đằng sau hậu trường để loại bỏ các tài nguyên chặn kết xuất.
Cách loại bỏ JavaScript chặn hiển thị
Có một vài chiến lược khác nhau để loại bỏ JavaScript chặn kết xuất, nhưng đây là các phương pháp chính:
- Async – cho phép trình phân tích cú pháp HTML ( ví dụ: trình duyệt của khách truy cập ) tải xuống JavaScript trong khi vẫn phân tích phần còn lại của HTML. Đó là, nó không hoàn toàn dừng phân tích cú pháp trong khi tải xuống tệp. Tuy nhiên, nó sẽ tạm dừng trình phân tích cú pháp HTML để thực thi tập lệnh sau khi tải xuống.
- Trì hoãn – cho phép trình phân tích cú pháp HTML tải xuống JavaScript trong khi phân tích phần còn lại của HTML và chờ thực thi tập lệnh cho đến khi phân tích cú pháp HTML kết thúc.
JavaScript Async vs Defer
Lợi ích của việc sử dụng Defer là các tập lệnh của bạn được đảm bảo thực thi theo thứ tự xuất hiện trong mã.
Async không sử dụng phương pháp này, đôi khi có thể gây ra sự cố nếu bạn áp dụng async cho tất cả các tài nguyên JavaScript vì nó thường có thể phá vỡ các tài nguyên phụ thuộc vào tài nguyên xuất hiện trước đó trong tài liệu.
Cách loại bỏ CSS chặn hiển thị
Loại bỏ CSS chặn hiển thị có thể khó hơn một chút vì bạn phải cẩn thận không trì hoãn CSS cần thiết để hiển thị nội dung trong màn hình đầu tiên. Sự sắp xếp lý tưởng là:
- Xác định các kiểu được yêu cầu để hiển thị nội dung trong màn hình đầu tiên và phân phối các kiểu đó theo dòng HTML .
- Sử dụng thuộc tính đa phương tiện trên các thành phần liên kết kéo theo tệp CSS để xác định tài nguyên CSS có điều kiện, nghĩa là chỉ cần cho các thiết bị hoặc tình huống cụ thể.
- Các tài nguyên CSS còn lại phải được tải không đồng bộ, một động thái thường được thực hiện bằng cách thêm chúng bằng JavaScript hoãn lại hoặc không đồng bộ. .
Cách loại bỏ tài nguyên CSS và JavaScript chặn hiển thị với các plugin WordPress
Để giải thích cách loại bỏ tài nguyên chặn kết xuất trên WordPress, Tài đã thiết lập một trang web thử nghiệm đơn giản bao gồm CSS và JavaScript chặn kết xuất và sau đó Tài sẽ hướng dẫn bạn cách sử dụng hai giải pháp plugin khác nhau để loại bỏ chặn kết xuất kết xuất CSS và JavaScript:
- Autoptimize + Async JavaScript (miễn phí)
- WP-Rocket (trả phí)
Để tham khảo, đây là trang web thử nghiệm của Tài trông như thế nào trước khi tối ưu hóa phân phối CSS và JavaScript:
Thông báo Tài nguyên chặn hiển thị loại bỏ trong thông tin chi tiết về tốc độ trang
Nếu bạn đang kiểm tra tính hiệu quả của các thay đổi của mình với Google PageSpeed Insights, hãy lưu ý rằng Google lưu trữ kết quả của nó trong vài phút. Về cơ bản, điều này có nghĩa là nếu bạn nhanh chóng
- Kiểm tra trang web không được tối ưu hóa của bạn
- Kích hoạt một trong các plugin Tài đã nói
- Kiểm tra lại trang web của bạn
Sau đó, bạn vẫn sẽ thấy kết quả cho trang web chưa được tối ưu hóa của mình cho đến khi Google đặt lại bộ đệm của nó. Vì vậy, hãy đảm bảo bạn đợi vài phút để Google xóa bộ nhớ cache trước khi bạn nghĩ rằng plugin không hoạt động.
Cách loại bỏ tài nguyên chặn kết xuất với Autoptimize + Plugin Async
Autoptimize và Async JavaScript là hai plugin miễn phí riêng biệt từ cùng một nhà phát triển. Cùng nhau, chúng giúp bạn tối ưu hóa việc phân phối cả CSS và JavaScript của bạn.
Khi bạn đã cài đặt cả hai plugin, hãy đi tới Setting → Async JavaScript và:
- Chọn hộp để bật Async JavaScript ở trên cùng.
- Chọn giữa Áp dụng Async và Áp dụng Trì hoãn trong hộp Cài đặt nhanh .
Cách định cấu hình plugin Async JavaScript
Nếu tùy chọn Async gây ra sự cố trên trang web của bạn, Tài khuyên bạn nên thử Defer hoặc loại trừ jQuery , mà plugin cung cấp cho bạn một tùy chọn.
Khi bạn đã thiết lập plugin Async JavaScript, hãy đi tới Setting → Autoptimize và:
- Chọn hộp để Tối ưu hóa mã JavaScript
- Chọn hộp để Tối ưu hóa Mã CSS
Cách cấu hình plugin Tự động tối đa hóa
Nếu bạn là người dùng nâng cao, bạn có thể chơi xung quanh với các cài đặt tối ưu hóa JavaScript và CSS bổ sung, nhưng hầu hết các trang web sẽ ổn với các mặc định.
Sau khi định cấu hình cả Tự động tối đa hóa và Async JavaScript, trang web thử nghiệm của Tài đã thông qua các loại tài nguyên chặn chặn kết xuất của PageSpeed Insights
Kết quả thông tin chi tiết của PageSpeed / Auoptimize và Async JavaScript
Bạn cũng có thể sử dụng các plugin riêng nếu thích. Nhưng do cả hai plugin đều đến từ cùng một nhà phát triển và được xây dựng để chơi đẹp với nhau, cách tiếp cận tốt nhất cho hầu hết các trang web là kết hợp chúng.
Cách loại bỏ tài nguyên chặn kết xuất với WP Rocket
WP Rocket là một plugin hiệu năng và bộ nhớ đệm cao cấp phổ biến của WordPress.
Điều đó thật tuyệt vời vì WP Rocket thực hiện nhiều hơn cho hiệu suất WordPress thay vì chỉ lưu vào bộ đệm, bao gồm cả việc giúp bạn loại bỏ các tài nguyên CSS và JavaScript chặn kết xuất trên trang web WordPress của bạn.
Sau khi bạn cài đặt và kích hoạt WP Rocket, hãy chuyển đến tab Tối ưu hóa tệp . Sau đó, kích hoạt hai tùy chọn sau:
- Optimize CSS Delivery
- Tải JavaScript hoãn lại trong phần tệp JavaScript . Bạn có thể thử nghiệm tắt Chế độ an toàn cho jQuery . Nhưng nếu bạn nhận thấy các sự cố ở mặt trước của trang web của mình, bạn sẽ muốn bật lại chế độ an toàn cho jQuery vì đó là thủ phạm có khả năng.
Cách cấu hình WP Rocket
Sau khi kích hoạt hai tính năng này, trang web thử nghiệm của Tài cũng đã thông qua các loại bỏ tài nguyên chặn kết xuất dữ liệu kiểm toán của YouTube trong PageSpeed Insights. WP Rocket cũng quản lý để loại bỏ nhiều tài nguyên chặn kết xuất hơn so với cài đặt JavaScript Tự động tối ưu hóa / Async:
Kết quả thông tin chi tiết của PageSpeed / WP Rocket
Và đó là cách loại bỏ tài nguyên chặn hiển thị trên trang web WordPress của bạn!
Tóm lại
Tài nguyên chặn hiển thị làm chậm thời gian tải trang nhận biết của trang web WordPress của bạn bằng cách buộc trình duyệt của khách truy cập trì hoãn hiển thị nội dung trong màn hình đầu tiên trong khi trình duyệt tải xuống các tệp không cần thiết ngay lập tức.
Để giúp khách truy cập tải phần hiển thị của trang của bạn nhanh hơn, bạn nên trì hoãn tải tài nguyên không cần thiết ngay lập tức.
Để loại bỏ tài nguyên chặn kết xuất trên WordPress, bạn có thể sử dụng các plugin.
Đối với một giải pháp miễn phí, bạn có thể sử dụng kết hợp Autoptimize và Async JavaScript, hai plugin từ cùng một nhà phát triển.
Bạn có câu hỏi nào thêm về cách loại bỏ tài nguyên chặn hiển thị trên WordPress không? Hãy cho Tài biết trong các ý kiến!
titanic.vn .
