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.

[1] - Thông tin chi tiết về tốc độ trang - developer.google.com
Đị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ự:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Loại bỏ Render-Blocking JavaScript | Thông tin chi tiết về tốc độ trang | Nhà phát triển giỏi - Developers.google.com

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:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[3] - Tối ưu hóa Phân phối CSS | Thông tin chi tiết về tốc độ trang | Nhà phát triển giỏi - Developers.google.com

Để 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).

[4] - Khắc phục Google PageSpeed ​​tận dụng bộ nhớ đệm của trình duyệt trong htaccess - Yoann Bierling, Tư vấn web / SAP quốc tế - www.ybierling.com

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.

Đ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ọ.

Cách loại bỏ JavaScript và CSS chặn kết xuất trên WordPress

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!

Tải ảnh lười biếng của hình ảnh: Hình ảnh trang web chỉ được yêu cầu đến máy chủ khi người dùng cuộn trên trang web và có thể hiển thị chúng

Để 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>
Đang tải lười - Hiệu suất Web - Mạng nhà phát triển Mozilla

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.

Vào tháng 4 năm 2021, Accelerator tốc độ trang web được trả lương của Ezoic sẽ trở thành Leap miễn phí và giúp các trang web đạt đến điểm số Vitals Web Core miễn phí!

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.

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





Bài viết tương tự

Google Thông tin chi tiết về tốc độ trang solve issues and get green

Google Thông tin chi tiết về tốc độ trang solve issues and get green

Google PageSpeed ​​Insights [1] là một công cụ tuyệt vời để xem trang web của bạn hoạt động như thế nào. Trong trường hợp bạn có điểm kém, đây là một loạt các bài viết với các giải pháp dễ thực hiện để giải quyết hầu hết các vấn đề.


Bình luận (8)

 2018-08-19  quranapk
Thích đọc nội dung của bạn hãy tiếp tục đăng - nó đã giúp tôi sửa lỗi CSS chặn hiển thị
 2018-09-23  Monica
Vì vậy, đây là cách chúng tôi thực hiện, thật tuyệt khi biết cách giải quyết việc loại bỏ các tài nguyên chặn kết xuất
Tuyệt vời, đó chính xác là những gì tôi đang tìm kiếm, bây giờ tôi đã sẵn sàng loại bỏ các tài nguyên chặn hiển thị trên thiết bị di động
 2018-11-03  utumikaji0
Thật tuyệt vời, giờ đã đến lúc tôi dùng thử và sửa lỗi loại bỏ tài nguyên chặn hiển thị!
Tôi không biết làm thế nào để cảm ơn bạn, nhưng đó là một thiên tài thuần túy, cảm ơn - nó đã hoạt động trên WordPress để loại bỏ các tài nguyên chặn hiển thị
 2019-04-21  Ludanulema
Xin chào, tôi đã xem bài viết của bạn và nó đã giúp tôi giải quyết vấn đề loại bỏ tài nguyên chặn hiển thị trên PHP, cảm ơn bạn
 2019-06-12  animeg2Q
Tôi sẽ thử ngay bây giờ, cảm ơn bạn đã chia sẻ bản sửa lỗi loại bỏ tài nguyên chặn hiển thị này
 2019-07-02  Gasfackele
Nó hoạt động tốt đối với tôi, không cần phải xem xét thêm để loại bỏ các tài nguyên chặn hiển thị trong trang web HTML

Để lại một bình luận