Sửa Google PageSpeed ​​Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên

Giải quyết kết xuất chặn Javascript và CSS

Bài kiểm tra Google PageSpeed ​​[1] “Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên” đề xuất bạn phân phối các tệp JS và CSS của trang web sau khi HTML được tải đầy đủ - và do đó, không tạm dừng tải HTML của bạn để tải xuống.

Định nghĩa tập lệnh chặn hiển thị: Các tập lệnh được tải trước khi DOM HTML đầy đủ được phân tích cú pháp. Ví dụ: các tập lệnh được bao gồm trong tiêu đề hoặc trong nội dung, mà không có bất kỳ hướng dẫn cụ thể nào cho các trình duyệt để trì hoãn tải tập lệnh cho đến sau khi sơn HTML.

Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên: chỉ ra cách khắc phục

1. Có một hệ thống bên ngoài tối ưu hóa trang web của bạn cho bạn
   
2. Sử dụng CDN sẽ thay mặt bạn thực hiện tất cả các tối ưu hóa có thể có, bao gồm cả ba tối ưu hóa cần thiết sau để khắc phục việc loại bỏ tài nguyên chặn hiển thị:
   
3. Trì hoãn tải tệp Javascript
   
4. Tải CSS sau khi tải HTML
   
5. Sử dụng một plugin WordPress
   

Có rất nhiều cách tối ưu hóa cần thiết để khắc phục việc loại bỏ các tài nguyên chặn hiển thị và có thể khá tẻ nhạt khi tự mình triển khai chúng - ngoài ra, bạn sẽ phải liên tục tìm kiếm các thử nghiệm mới có trong Chrome LightHouse và Google PageSpeed ​​trong số các thử nghiệm tốc độ trang khác.

Không có giải pháp hiện có nào để loại bỏ các tài nguyên chặn hiển thị trong mã htaccess vì vấn đề liên quan đến DOM, nghĩa là nội dung trang web và thứ tự tải các tài nguyên bao gồm, chẳng hạn như Javascript và CSS, nhưng không chỉ. Chúng không thể được kích hoạt trong Htaccess, mà chỉ trong nội dung DOM HTML.

Nếu bạn giải quyết những vấn đề này cho máy tính để bàn, bạn sẽ đồng thời loại bỏ tài nguyên chặn hiển thị cho thiết bị di động vì cả hai đều hoàn toàn giống nhau!

Did you know that you can even have all these steps executed automatically for you by using an external Trình tăng tốc tốc độ trang web technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Trì hoãn tải tệp Javascript

Để trì hoãn tải các tệp JS của bạn [2], bạn có thể thêm lệnh async hoặc defer vào các liên kết tập lệnh của mình. Async sẽ không đảm bảo rằng chúng được tải trong cùng một trình tự - do đó, nếu bạn có một số tập lệnh sẽ chạy sau một tập lệnh khác, trì hoãn là thích hợp hơn để đảm bảo trình tự:

Tải CSS sau khi tải HTML

Để CSS được tải sau khi HTML đầy đủ được truyền đi, Google đề xuất [3] đoạn mã này để thêm vào cuối HTML của bạn, ví dụ: sau thẻ đóng chân trang và trước thẻ đóng nội dung:

Để tối ưu hóa trang web của bạn, đó cũng là một ý tưởng tốt để loại bỏ mã CSS không sử dụng, một thao tác có thể tẻ nhạt nếu bạn không có kiến ​​thức về thiết kế web. Nếu bạn chưa tạo chủ đề trang web của mình, thì có thể khôn ngoan hơn để sử dụng một hệ thống bên ngoài để loại bỏ mã CSS không sử dụng trên các trang của bạn thay mặt bạn, chẳng hạn như Ezoic Leap, ví dụ, phiên bản mới (và hoàn toàn miễn phí) của trang web tuyệt vời của họ Tăng tốc tốc độ.

Vượt qua bài kiểm tra tốc độ trang web của Google!

Điều này cho phép tôi vượt qua bài kiểm tra Google PageSpeed ​​[1] Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (cùng với Leverage trình duyệt bộ nhớ đệm [4]) trên một trang web, tăng từ 51 điểm trên thiết bị di động ( Hình 1) đến 72 (Hình 2), và lên từ 59 (Hình 3) đến 79 trên máy tính để bàn (Hình 4).

Cách loại bỏ tài nguyên chặn kết xuất trong WordPress

Để loại bỏ tài nguyên chặn kết xuất trong WordPress, cần phải cài đặt một plugin như JetPack.

Sau đó, đi đến các tùy chọn mà bạn phải là quản trị viên và đi đến tùy chọn JetPack> Viết> Hiệu suất và Tốc độ> kiểm tra Bật trình tăng tốc trang web, tăng tốc thời gian tải hình ảnh, tăng tốc thời gian tải tệp tĩnh và cho phép tải nhanh hình ảnh.

Sáng tạo trang web Master: Ghi danh ngay!

Biến đổi sự hiện diện kỹ thuật số của bạn với khóa học tạo trang web toàn diện của chúng tôi - bắt đầu hành trình trở thành một chuyên gia web ngày hôm nay!

Ghi danh ở đây

Điều này sẽ loại bỏ tài nguyên chặn kết xuất trong WordPress và tải trang nhanh hơn bằng cách cho phép JetPack tối ưu hóa hình ảnh của bạn và phục vụ hình ảnh và tệp tĩnh của bạn (như CSS và JavaScript) từ mạng máy chủ toàn cầu của họ.

Ngoài ra, đừng quên hoãn việc tải hình ảnh ngoài màn hình bằng cách sử dụng chức năng tải lười biếng. Mặc dù đã từng khó khăn và cần có một thư viện bên ngoài để hoãn hình ảnh tải hình ảnh, giờ đây có thể có trong HTML5!

Để triển khai tải hình ảnh lười biếng trên trang web của bạn, chỉ cần thêm các giá trị lười biếng vào các thuộc tính tải hình ảnh trang web của bạn và các trình duyệt gần đây sẽ hiểu rằng các hình ảnh này chỉ nên được yêu cầu và tải nếu chúng đang được hiển thị, có nghĩa là nếu người dùng cuộn xuống các giữ chỗ hình ảnh.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Trên hết, tải lười cũng hoạt động với iframe và là một triển khai quan trọng để loại bỏ các tài nguyên chặn kết xuất khỏi các trang web của bạn.

Khi các tài nguyên chặn kết xuất sẽ có hướng dẫn để tải theo nội dung chính, có nghĩa là HTML DOM, bạn sẽ kiếm được rất nhiều điểm trên bài kiểm tra LighThouse của Google, kiểm tra thông tin chi tiết trang web hoặc Vitals Web Core.

Có một hệ thống bên ngoài tối ưu hóa trang web của bạn cho bạn

Bạn có biết rằng bạn thực sự có thể giải quyết tất cả các vấn đề Google PageSpeed ​​thay mặt bạn mà không cần nỗ lực nhiều từ trang web của bạn - ngoại trừ đăng ký dùng thử miễn phí và thay đổi DNS của bạn không?

Sử dụng công nghệ Trình tăng tốc tốc độ trang web của nền tảng Ezoic, tất cả các sự cố thông thường của Google PageSpeed ​​sẽ được hệ thống của họ giải quyết, đây sẽ là trung gian giữa trang web của bạn và khách truy cập. Họ sẽ tối ưu hóa trang web cho bạn trước khi hiển thị nó cho khách truy cập của bạn.

Trở nên xanh hơn bằng cách đăng ký dùng thử miễn phí trên nền tảng Ezoic và tự mình thử - chúng sẽ giúp trang web của bạn đạt tiêu chuẩn tối ưu hóa tốc độ trang cao nhất trong vài ngày: hiển thị hình ảnh webp thế hệ tiếp theo, tối ưu hóa CSS và JavaScript bằng cách xóa CSS không sử dụng và JS, lười tải hình ảnh, thay đổi kích thước hình ảnh, lưu trữ trang web của bạn, tối ưu hóa phông chữ, kết nối trước với tất cả các trang web được bao gồm của bạn và nhiều hơn nữa.

Không cần thẻ tín dụng - tất cả những gì bạn phải làm là đăng ký miễn phí và dùng thử. Ngoài ra, nếu trang web của bạn kiếm tiền từ quảng cáo hiển thị, ngoài việc làm cho trang web của bạn nhanh hơn nhiều, họ cũng có thể giúp bạn kiếm được số tiền gấp nhiều lần so với Google AdSense bằng cách tối ưu hóa quảng cáo của bạn bằng máy học và tính trực quan nhân tạo nâng cao.

Câu Hỏi Thường Gặp

Làm thế nào để loại bỏ các JavaScript và CSS chặn kết xuất trong nội dung đã gấp?

Để loại bỏ các JavaScript và CSS chặn kết xuất cho nội dung đã gấp, bạn nên đảm bảo các tệp JS và CSS của trang web của bạn được tải sau khi HTML được tải đầy đủ. Điều này có nghĩa là không tạm dừng quy trình tải HTML để tải xuống các tệp này. Bạn có thể trì hoãn các tệp JavaScript bằng thuộc tính Async hoặc trì hoãn và đối với CSS, bạn có thể sử dụng mã cụ thể để tải nó sau HTML. Một hệ thống tối ưu hóa bên ngoài như Ezoic cũng có thể tự động xử lý việc này.

Làm thế nào các nhà phát triển web có thể giải quyết khuyến nghị của Google Pagespeed để loại bỏ JavaScript và CSS chặn kết xuất?

Các nhà phát triển web có thể tối ưu hóa trang web của họ bằng cách thu nhỏ các tệp JavaScript và CSS, sử dụng tải không đồng bộ cho JavaScript, nội tuyến CSS quan trọng trực tiếp vào HTML và trì hoãn việc tải các tệp CSS và JavaScript không quan trọng. Việc thực hiện các chiến lược này có thể cải thiện đáng kể thời gian tải và điểm Pagespeed.

Điểm đăng ký ngọn hải đăng Chrome hoàn hảo: Điều gì xảy ra?