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 xóa hiển thị chặn tài nguyên 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ể làm nảy sinh hai câu hỏi trong đầu bạn:
- Màn hình hiển thị tài nguyên trong màn hình đầu tiên là gì?
- Làm cách nào bạn có thể xóa màn hình khối tài nguyên trong WordPress?
Trong bài 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 Tài chính sẽ truy cập trong bài đăng 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 kết xuất tài nguyên là gì và tại sao chúng tôi làm ảnh hưởng đến thời gian tải trang web của bạn, Tài khoản của bạn cần bắt đầu với cái nhìn cơ bản về cách trình duyệt web hiển thị trang web.
Khi một khách truy cập đến trang web của bạn, về cơ bản, web của họ bắt đầu ở đầu mã trang web của bạn và đọc xuống. Từ trên xuống dưới, OK? :NS
Nếu trong quá trình này, nó xuất hiện một tệp CSS hoặc JavaScript, nó cần dừng đọc trong khi chờ tải xuống và xử lý tệp.
Thời gian tạm dừng để tải xuống và phân tích cú pháp tài nguyên có thể được sử dụng cho một việc có hiệu quả hơn, khi tải xuống một phần nội dung trên web của bạn, bạn có thể thấy được. tức là ai đó ghé thăm trang.
Hãy xem một ví dụ minh họa để xem đây có thể là một vấn đề ở đâu.
Giả sử bạn có hiệu ứng JavaScript tuyệt vời này trong Chân trang của mình. Nó được cung cấp bởi nhóm coolfooter.js, đó là tập lệnh được tham chiếu trong trang web đầu tiên 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 nhìn thấy nó cho đến khi họ cuộn đến chân trang).
Vì vậy, bố cục web trang mã của bạn có thể trông giống như sau:
- 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 một khách truy cập vào trang web của bạn, trình duyệt của họ sẽ 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 đợi để tải xuống và phân tích cú pháp tệp coolfooter.js.
Kết quả của kết quả? 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, có nghĩa là khách truy cập 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ỏ tính năng chặn tài nguyên hiển thị, về cơ bản, xin chào, đừng tải các tài nguyên không cần thiết ở đầu trang web của bạn vì nó sẽ khiến trình duyệt của khách hàng mất thêm thời gian để tải xuống hiển thị nội dung của bạn “.”
Với các mẹo trong bài đăng này, bạn có thể đợi để tải một số tài nguyên CSS và JavaScript nhất định cho đến khi bạn tải xong các phần của trang.
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ề:
- CSS
- JavaScript
Đ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 hiển thị từ màn hình. Điều quan trọng là phải 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ó chặn hiển thị tài nguyên 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 bạn muốn kiểm tra. Sau đó, nếu bạn gặp sự cố với hiển thị chặn tài nguyên, PageSpeed Insights sẽ liệt kê từng tài nguyên riêng lẻ trong phần Tài nguyên Snooping trong Cơ hội:
Hiển thị thông báo xóa khối tài nguyên chi tiết về tốc độ trang
Hoặc bạn có thể sử dụng công cụ DevTools của Chrome, mở tab Phạm vi để xác định các thẻ CSS và Javascript không quan trọng và loại bỏ.
# Phương pháp 1: Mở công cụ DevTools để kiểm tra thẻ CSS
Nhấp chuột phải vào bất kỳ đâu trên trang, chọn Kiểm tra hoặc nhấn phím tắt Command + Option + C (đối với Mac) hoặc Control + Shift + C (đối với Windows, Linux, Chrome OS).
# Phương pháp 2: Mở công cụ DevTools để kiểm tra thẻ Javascript
Sử dụng phím tắt Command + Option + J (đối với Mac) hoặc Control + Shift + J (đối với Windows, Linux, Chrome OS).
Sau khi trang tải, tab Phạm vi sẽ thông báo cho bạn về lượng mã được sử dụng và mã được tải trên trang:
Bạn có thể giảm kích thước trang của mình bằng cách chỉ tải mã và kiểu thẻ bạn cần. URL đến màn hình hiển thị trên bảng Nguồn để tìm kiếm tệp:
Các kiểu thẻ trong tệp CSS và mã Javascript sẽ được đánh dấu bằng 2 màu chính:
- Màu xanh lá cây (quan trọng): Kiểu thẻ này là yêu cầu cho lần đầu tiên xem nội dung trên trang. Mã thẻ này cực kỳ quan trọng đối với chức năng của chính trang web.
- Màu đỏ (không quan trọng): Kiểu thẻ này không hiển thị khi thiết lập trên trang nội dung, không được sử dụng để hỗ trợ cho chức năng chính của trang web.
Khi bạn đã xác định được tầm quan trọng của tài nguyên trên trang, đã đến lúc tìm cách loại bỏ nó. Có 5 cách cơ bản giúp bạn loại bỏ hoặc giảm số lượng và tác động của màn hình tài nguyên. Để mình hướng dẫn chi tiết nhé!
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 cần phải làm điều này theo cách thủ công. Chúng tôi sẽ nói về các plugin WordPress có thể giúp bạn loại bỏ việc hiển thị tài nguyên trong phần tiếp theo.
Tuy nhiên, sẽ rất hữu ích nếu bạn hiểu plugin này đang làm gì để loại bỏ việc hiển thị tài nguyên.
Cách loại bỏ JavaScript chặn hiển thị
Có một số chiến lược khác nhau để loại bỏ JavaScript chặn hiển thị, nhưng đây là các phương pháp:
- Không đồng bộ – Cú pháp phân tích cú pháp HTML cho phép (ví dụ: truy cập trình duyệt) tải xuống JavaScript trong khi vẫn lưu trữ HTML. Có nghĩa là, nó không hoàn toàn ngừng phân tích cú pháp khi tải xuống tệp. Tuy nhiên, nó sẽ tạm dừng cú pháp phân tích cú pháp HTML để thực thi lệnh sau khi tải xuống.
- Defer – parse cho phép HTML được tải xuống JavaScript trong khi phân tích lại phần HTML và chờ thực thi script cho đến khi quá trình phân tích cú pháp kết thúc.
JavaScript Async vs Defer
Lợi ích của việc sử dụng Defer là tập lệnh của bạn đang được bảo vệ khỏi đầu ra hiện tại trong mã.
Async không sử dụng phương pháp này, nhân đôi khi bạn có thể từ bỏ cố định nếu bạn áp dụng async cho tất cả tài nguyên JavaScript bởi vì nó là nếu nó nếu nó cũng là một sự cố của tài nguyên đối với đầu ra hiện tại của tài liệu. .
Cách loại bỏ CSS chặn hiển thị
Việc loại bỏ các màn hình CSS có thể phức tạp 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 loại cần thiết để 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 phần tử liên kết kéo trong tệp CSS để xác định tài nguyên CSS theo điều kiện, tức là chỉ cần thiết cho các thiết bị hoặc tình huống cụ thể.
- Tài nguyên CSS không tải lại đồng hồ, trạng thái bình thường đang được thực hiện bằng cách thêm chúng bằng JavaScript đang chờ xử lý hoặc không đồng hồ. .
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 xóa chặn hiển thị tài nguyên trên WordPress, Accounts thiết lập một trang web thử nghiệm đơn giản bao gồm CSS và JavaScript chặn đầu ra duy nhất và sau đó Tài sẽ hướng dẫn bạn cách sử dụng plugin hai giải pháp khác nhau để loại bỏ CSS và JavaScript chặn đầu ra:
- 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:
Hiển thị thông báo xóa khối tài nguyên 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 với Google PageSpeed Insights, hãy lưu ý rằng Google lưu kết quả vào bộ nhớ cache 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 chưa được tối ưu hóa của bạn
- Kích hoạt một trong các Tài khoản Plugin đã nói
- Kiểm tra lại trang web của bạn
Sau đó, bạn sẽ vẫn thấy kết quả của trang web chưa được tối ưu hóa của mình cho đến khi Google đặt lại bộ nhớ cache của nó. Vì vậy, hãy đảm bảo rằng bạn đợi một vài phút để Google xóa bộ nhớ cache trước khi bạn cho 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 tôi 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 Cài đặt → Không đồng bộ hóa JavaScript và:
- Hộp chọn để bật JavaScript không đồng bộ cùng một lúc.
- Chọn giữa Áp dụng không đồng bộ và Chấm dứt 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ể thử với các cài đặt tối ưu hóa CSS và JavaScript bổ sung, nhưng hầu hết các trang web sẽ giải quyết với các giá trị mặc định.
Sau khi định cấu hình cả tính năng tự động hóa tối đa và không đồng bộ hóa JavaScript, trang web thử nghiệm của tài khoản đã vượt qua các khối tài nguyên hiển thị 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 của riêng mình nếu bạn thích. Nhưng cả hai plugin đều đến từ cùng một nhà phát triển và được xây dựng để chơi tốt 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 WordPress cao cấp và chức năng plugin.
Điều đó thực sự tuyệt vời vì WP Rocket làm được nhiều thứ hơn cho hiệu suất của WordPress chứ không chỉ là bộ nhớ đệm, bao gồm cả việc giúp bạn loại bỏ CSS tài nguyên và chặn đầu ra JavaScript 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 đó, bật hai tùy chọn sau:
Tối ưu hóa phân phối CSS
Tải lại JavaScript trong tệp JavaScript. Bạn có thể thử nghiệm với việc tắt Chế độ an toàn cho jQuery. Nhưng nếu bạn nhận thấy sự cố trên giao diện người dùng 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à phạm vi có thể xảy ra.
Cách cấu hình WP Rocket
Sau khi bật hai tính năng này, trang web thử nghiệm của Tài cũng đã vượt qua vòng loại bỏ khối tài nguyên kiểm tra xuất khẩu của YouTube trong PageSpeed Insights. WP Rocket cũng quản lý để loại bỏ nhiều khối tài nguyên hiển thị hơn với cài đặt JavaScript Tự động tối ưu hóa / Không đồng bộ hóa:
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
Ngăn chặn các tài nguyên hiển thị làm chậm thời gian tải trang web của bạn WordPress bằng cách yêu cầu trình duyệt của khách truy cập tạm dừng nội dung trong màn hình đầu tiên khi trình duyệt tải xuống các tệp không mong muốn cần được thiết lập ngay lập tức.
Để giúp khách hàng truy cập phần hiển thị trên trang của bạn nhanh hơn, bạn nên tạm dừng tải các tài nguyên không yêu cầu thiết lập ngay lập tức.
Để loại bỏ kết xuất tài nguyên trên WordPress, bạn có thể sử dụng các plugin.
Để có 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ài viết đáng đọc: Học cách tối ưu tốc độ Wordpress từ A – Z
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!
Từ khóa:
loại bỏ các tài nguyên chặn hiển thị
loại bỏ các tài nguyên chặn hiển thị wordpress
giảm javascript không dùng đến
xóa javascript không dùng wordpress
giảm css không dùng đến
plugin async javascript
Loại bỏ CSS thừa
Tắt JavaScript