Mới nhất 2 Cách Loại Bỏ Tài Nguyên Chặn Hiển Thị Đơn Giản

Bạn có muốn vô hiệu những tài nguyên chặn hiển thị trong WordP.ress không? Có thể những bạn sẽ thấy một đề xuất kiến nghị xóa render-blocking scripts và CSS khi kiểm tra website của tớ trên Google P.ageSpeed Insights,.

Trong nội dung bài viết này, Hoc11.vn sẽ chỉ cho bạn những cách thuận tiện và đơn thuần và giản dị khắc phục chúng để cải thiện điểm số Google P.ageSpeed – một trong những việc phải làm khi tối ưu SEO cho website ​​của bạn.

Render-blocking JavaScript và CSS là gì?

Trước hết, bạn phải ghi nhận “front end” là thuật ngữ nói về quá trình thiết kế và xây dựng giao diện website hoặc ứng dụng web bằng những ngôn từ HTML, CSS, JavaScript để người tiêu dùng xem và tương tác trực tiếp trên đó.

Mỗi website WordP.ress đều phải có một theme và plugin gắn tệp JavaScript và CSS vào front end của website. Những ngôn từ lập trình này trọn vẹn có thể tăng thời hạn tải trang của web bạn và chúng cũng trọn vẹn có thể chặn hiển thị trang.

Trình duyệt của người tiêu dùng sẽ phải tải JavaScript và CSS trước lúc tải phần còn sót lại của HTML trên trang. Điều này tức là người tiêu dùng liên kết chậm hơn sẽ phải chờ thêm vài mili giây nữa để xem trang.

Các chủ sở hữu website nên phải khắc phục yếu tố này nếu muốn đạt điểm số Google P.ageSpeed ​​tối đa.

Sử dụng Google P.ageSpeed ​​Insights để tìm những tài nguyên chặn hiển thị 

Là một công cụ trực tuyến của Google vốn để làm kiểm tra và tối ưu hóa website. Công cụ này kiểm tra website theo quy định của Google về vận tốc và đưa ra những đề xuất kiến nghị cải thiện thời hạn tải trang của bạn.

Nó cho bạn thấy số điểm dựa vào lượng tiêu chuẩn đạt được của website. Hầu hết những website sẽ nằm trong tầm từ 50-70 điểm. Tuy nhiên, một số trong những chủ sở hữu cảm thấy cần phải có điểm số tốt nhất là một trong những00.

Vậy, bạn có thực sự cần 100 điểm Google P.ageSpeed ​​không?

Mục đích của Google P.ageSpeed Insights ​​là hỗ trợ cho bạn xác lập phương hướng cải thiện hiệu suất cũng như thời hạn tải trang nhờ vào những chuẩn mực. Và bạn không cần thiết phải tuân thủ một những cách nghiêm ngặt.

Hãy nhớ rằng, vận tốc chỉ là một trong nhiều yếu tố để Google xếp hạng website của bạn. Nó trở nên quan trọng bởi hiệu suất cao cải thiện trải nghiệm người tiêu dùng trên website của bạn.

Nhưng để mọi người truy vấn mượt hơn không riêng gì có yên cầu bạn tạo ra một website chạy nhanh mà còn cần phục vụ nhu yếu thông tin hữu ích, giao diện và nội dung mê hoặc kèm video, hình ảnh.

Hiện nay, những dịch vụ SEO TP.Hồ Chí Minh đều triệu tập vào tối ưu vận tốc tải trang cũng như nâng cao trải nghiệm duyệt web.

Cách vô hiệu những tài nguyên chặn hiển thị

Chúng tôi đề xuất kiến nghị hai phương pháp xóa render blocking JavaScript và CSS trong WordP.ress. Hãy lựa chọn phương án phù thích phù hợp với website của bạn nhất.

1. Khắc phục Render Blocking Script và CSS bằng plugin Autoptimize

Cách này khá đơn thuần và giản dị và được những công ty marketing số 1 Việt Nam khuyên dùng.

Đầu tiên là setup và kích hoạt plugin Autoptimize. Sau đó, bạn vào mục Settings – Autoptimize, ghi lại chọn vào Optimize JavaScript Code và Optimize CSS Code rồi nhấn nút Save Changes.

Bây giờ thử kiểm tra website bằng công cụ P.ageSpeed. Nếu vẫn còn đấy những nguồn chặn hiển thị thì quay trở lại trang setup của plugin và click nút “Show Advanced Settings” ở trên cùng.

Tại đây, bạn cũng trọn vẹn có thể gồm có JS nội tuyến trong plugin và xóa những script được loại trừ bởi những mặc định như seal.js hoặc jquery.js.

Tương tự, xuống tùy chọn CSS được chấp nhận plugin tổng hợp CSS nội tuyến. Nhấp vào “Save changes and Empty Cache” để lưu những thay đổi và dọn sạch plugin cache (bộ nhớ đệm của plugin).

Lúc này, kiểm tra website lại lần nữa với công cụ P.ageSpeed. Đảm nói rằng bạn đã kiểm tra kỹ lưỡng và không tồn tại sai phạm nào khi tối ưu hóa JavaScripts hoặc CSS của tớ.

Nó hoạt động giải trí và sinh hoạt ra làm thế nào?

Autoptimize tập hợp toàn bộ enqueued JavaScript và CSS. Sau đó, nó tạo những tệp CSS, JavaScript rút gọn và phục vụ nhu yếu những bản sao bộ nhớ đệm cho website của bạn ở dạng async hoặc deferred.

Điều này được chấp nhận bạn khắc phục render blocking scripts và CSS. Lưu ý là nó cũng trọn vẹn có thể ảnh hưởng tác động tác động đến hiệu suất và hiển thị website của bạn.

2. Sửa chữa Render Blocking JavaScript bằng W3 Total Cache P.lugin

P.hương pháp này yên cầu nhiều công sức của con người hơn và chỉ gợi ý cho những người dân đã sử dụng plugin W3 Total Cache trên website của mình.

Trước tiên, bạn cũng cần được setup và kích hoạt plugin W3 Total Cache. Kế tiếp, vào P.erformance – General Settings và xuống mục Minify.

Xem bạn đã click vào “Enable” chưa và tiếp sau đó chọn “Manual” ở phần “Minify Mode”. Nhấn nút “save all settings” để lưu lại setup của bạn. Thêm những script và CSS mà bạn muốn thu nhỏ.

Bạn trọn vẹn có thể nhận URL của toàn bộ script và CSS chặn hiển thị từ công cụ Google P.ageSpeed ​​Insights.

Trong đề xuất kiến nghị: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, click vào “Show how to fix”. Nó sẽ hiển thị cho bạn list của scripts và CSS.

Di chuyển chuột đến một script và nó sẽ hiển thị cho bạn URL khá đầy đủ để sao chép.

Q.uay trở về trang quản trị WordP.ress của bạn và đến mục P.erformance – Minify, thêm những tệp JavaScript mà bạn muốn thu nhỏ. Ở mục “Operations in areas” trong phần JS, đặt loại nhúng thành “Non-blocking async” cho phần vàlt;head.

Nhấn vào nút “Add script” và dán URL của script đã sao chép từ công cụ Google P.ageSpeed.

Khi đã hoàn tất, tiếp tục xuống phần CSS và nhấp chọn nút “Add a stylesheet”, dán URL CSS đã sao chép từ công cụ Google P.ageSpeed.

Cuối cùng, click “Save settings and purge cache” để lưu lại thiết lập của bạn. Truy cập công cụ Google P.ageSpeed ​​lần nữa và kiểm tra lại website của bạn để bảo vệ bảo vệ an toàn rằng mọi thứ đều hoạt động giải trí và sinh hoạt tốt.

Xử lý sự cố

Tùy thuộc vào những cách plugin và theme WordP.ress của bạn sử dụng JavaScript và CSS ra làm thế nào, sẽ rất trở ngại để khắc phục trọn vẹn toàn bộ yếu tố JavaScript và CSS chặn hiển thị.

Mặc dù có những công cụ trên trợ giúp, nhưng những plugin của bạn cũng mong ước những script nhất định ở tại mức độ ưu tiên rất khác nhau để hoạt động giải trí và sinh hoạt đúng chuẩn. Trong trường hợp đó, những giải pháp trên có tích điện phá vỡ những plugin của bạn hoặc mang lại giật mình đột ngột cho bạn.

Google vẫn trọn vẹn có thể hiển thị cho bạn một số trong những yếu tố nhất định như tối ưu hóa tính năng CSS cho above the fold content. Autoptimize được chấp nhận bạn khắc phục điều này bằng phương pháp thêm thủ công CSS nội tuyến rất cần thiết để hiển thị above fold area của theme.

Kết luận

Hy vọng đến đây bạn đã biết những cách vô hiệu những tài nguyên chặn hiển thị trong WordP.ress.

Nếu thích nội dung bài viết này hay có góp ý nào, hãy để lại phản hồi ở phía dưới và tiếp tục theo dõi những chủ đề khác của chúng tôi nhé.

Hệ sinh thái cộng đồng của BD Ventures: https://linktr.ee/bdventures