Hotline : 1800 1093 - 07 088 44444
Share

2 cách loại bỏ tài các nguyên chặn hiển thị đơn giản nhất

30/12/2021

Tốc độ tải trang được đánh giá là một yếu tố quan trọng trong SEO khi các công cụ tìm kiếm xếp hạng website của bạn. Tuy nhiên, website xuất hiện một vài lý do làm giảm tốc độ tải trang đi đáng kể, một trong số đó là các tài nguyên chặn hiển thị trên WordPress. Việc này không những ảnh hưởng đến trải nghiệm người dùng mà còn có tác động tiêu cực đến thứ hạng SEO của website.

Trong bài viết này, Vietnix sẽ hướng dẫn cách loại bỏ các tài nguyên chặn hiển thị trên WordPress chỉ với 4 bước.

Tài nguyên chặn hiển thị là gì?

Tài nguyên chặn hiển thị hay còn được gọi là rendering-block resources, là những phần code nằm bên trong file website, thường là CSS hoặc JavaScript.

Tại sao cần loại bỏ các tài nguyên chặn hiển thị? Các tài nguyên này mất tương đối nhiều thời gian để trình duyệt có thể xử lý, nhưng đồng thời lại không thật sự cần thiết cho trải nghiệm của người dùng. Vì vậy, để cải thiện hiệu suất và tốc độ của website đôi khi ta nên xóa hoặc delay các thành phần này khi trình duyệt chưa cần xử lý.

Tài nguyên chặn hiển thị là gì?
Tài nguyên chặn hiển thị là gì?

Vậy cách loại bỏ các tài nguyên chặn hiển thị có khó không? Ở ngay trong phần dưới đây, Vietnix sẽ hướng dẫn bạn cách tìm tài nguyên chặn hiển thị và sau đó giới thiệu chi tiết 2 cách loại bỏ JavaScript và CSS chặn hiển thị WordPress nhanh nhất. Cùng tìm hiểu thôi nào.

Xác định tài nguyên chặn hiển thị

Trước hết, ta cần xác định các tài nguyên chặn hiển thị đang có trên website của mình. Bạn có thể sử dụng các công cụ kiểm tra tốc độ tải trang của website như PageSpeed Insights của Google: Ta chỉ cần paste URL của trang vào rồi click Analyze để thực hiện việc phân tích.

Sau đó Google sẽ chấm điểm tốc độ của website với thang điểm từ 0 (chậm nhất) đến 100 (nhanh nhất). Điểm nằm trong khoảng 50 đến 80 là ở mức trung bình. Vì vậy, ta cần loại bỏ các tài nguyên chặn hiển thị và sau đó, tối ưu website sao cho số điểm nằm ở trên ngưỡng này.

Tiếp theo, để kiểm tra những tài nguyên chặn hiển thị ta kéo xuống phần Opportunities rồi chọn vào Eliminate render-blocking resources như hình dưới đây:

Xác định tài nguyên chặn hiển thị
Xác định tài nguyên chặn hiển thị

Danh sách này sẽ hiển thị những file đang làm ảnh hưởng đến tốc độ của website, cụ thể là thời gian tải trang của nội dung trên cửa sổ trình duyệt trong lần tải trang đầu tiên. Lúc này, ta cần lưu ý đến những file có đuôi .css.js để có thể loại bỏ JavaScript và CSS chặn hiển thị WordPress ở các bước sau.

3 cách loại bỏ tài nguyên chặn hiển thị

Sau khi xác định được những tài nguyên cần xử lý, ta có thể loại bỏ JavaScript và CSS chặn hiển thị WordPress bằng hai cách: Loại bỏ thủ công hoặc dùng plugin.

Hiện nay có rất nhiều plugin miễn phí cho phép xóa JavaScript chặn hiển thị wordpress, trong đó phổ biến nhất là AutoptimizeW3 Total Cache. Tuy nhiên, ta sẽ sử dụng plugin để thao tác trên backend để loại bỏ các tài nguyên chặn hiển thị, do vậy cần lựa chọn những plugin uy tín, dễ dàng thực hiện các tính năng và cẩn thận trong từng thao tác.

Sử dụng plugin Autoptimize

Autoptimize là một plugin miễn phí cho phép loại bỏ JavaScript và CSS chặn hiển thị WordPress và sửa đổi các file website để cải hiện tốc độ của trang. Plugin này hoạt động bằng cách tổng hợp các file, giảm thiểu lượng code (xóa các ký tự thừa hoặc không cần thiết) và trì hoãn việc tải các tài nguyên chặn hiển thị này.

Hướng dẫn cài đặt và kích hoạt plugin Autoptimize để loại bỏ JavaScript và CSS chặn hiển thị:

Bước 1: Vào Settings > Autoptimize trong dashboard WordPress.

Bước 2: Check vào Optimize JavaScript code? và bỏ check Aggregate JS-files? trong phần JavaScript Options.

Hướng dẫn cài đặt plugin Autoptimize Settings
Hướng dẫn cài đặt plugin Autoptimize Settings

Bước 3: Tương tự, check Optimize CSS Code? và bỏ check Aggregate CSS-files? trong phần CSS Options.

Plugin Autoptimize Settings giúp loại bỏ tài nguyên chặn hiển thị
Plugin Autoptimize Settings giúp loại bỏ tài nguyên chặn hiển thị

Bước 4: Click vào Save ChangesEmpty Cache ở phần cuối trang.

Bước 5: Cuối cùng là kiểm tra xem đã loại bỏ các tài nguyên chặn hiển thị hết chưa và kiểm tra lại hiệu suất của website bằng PageSpeed Insights.

Tới đây vẫn còn các file JavaScript chặn hiển thị, đừng vội lo lắng quá nhé, bạn chỉ cần vào lại Settings > Autoptimize rồi check vào Aggregate JS-files?Aggregate CSS-files?, lưu các thay đổi rồi thử lại.

Sử dụng plugin W3 Total Cache Plugin

W3 Total Cache là một plugin phổ biến, chuyên dùng để giải quyết các code bị lag ở trên website:

Hướng dẫn cài đặt và kích hoạt plugin W3 Total Cache trên trang

Bước 1: Chọn Performance > General Settings trong dashboard WordPress.

Bước 2: Trong phần Minify, check vào Minify rồi đặt Minify mode thành Manual.

Hướng dẫn cài đặt và kích hoạt plugin W3 Total Cache trên trang.

Bước 3: Click Save all settings ở dưới phần Minify.

Bước 4: Trong menu dashboard, chọn tiếp vào Performance > Minify.

Bước 5: Bây giờ ta sẽ bắt đầu xóa JavaScript chặn hiển thị WordPress. Ở phần JS bên cạnh JS minify settings, hãy đảm bảo rằng bạn đã check vào ô Enable. Tiếp theo, mở menu dropdown Embed type trong Operations in areas rồi chọn Non-blocking using “defer”.

Sử dụng plugin W3 Total Cache bắt đầu xóa JavaScript chặn hiển thị WordPress
Sử dụng plugin W3 Total Cache bắt đầu xóa JavaScript chặn hiển thị WordPress

Bước 6: Trong phần JS file management, chọn theme đang sử dụng trong menu Theme của bạn.

Bước 7: Tiếp theo, kiểm tra lại hiệu suất của trang bằng PageSpeed Insights. Lưu ý với mỗi file trong phần tài nguyên hiển thị có đuôi .js, click vào Add a script rồi copy toàn bộ URL của tài nguyên JavaScript trong PageSpeed Insights. Cuối cùng là dán URL này vào phần file URI như hình bên dưới:

Kiểm tra lại hiệu suất của trang bằng PageSpeed Insights
Dán tất cả tài nguyên JavaScript vào file URL

Bước 8: Sau khi dán xong tất cả tài nguyên JavaScript theo bước trên, click vào Save Settings & Purge Caches ở bên dưới phần JS.

Bước 9: Bây giờ đến với phần CSS, check vào dòng CSS minify settings rồi đặt Minify method thành Combine & Minify.

Tùy chọn loại bỏ các tài nguyên chặn hiển thị trong CSS
Tùy chọn loại bỏ các tài nguyên chặn hiển thị trong CSS

Bước 10: Chọn theme đang sử dụng trong menu Theme của phần CSS file management.

Bước 11: Với mỗi item trong Eliminate render-blocking resources của PageSpeed Insights có đuôi .css, chọn vào Add a style sheet, copy URL rồi paste vào File URL tương tự như ở bước trên:

Dán URL vào file URL
Dán URL vào file URL

Bước 12: Lặp lại thao tác này với tất cả item rồi chọn Save Settings & Purge Caches.

Bước 13: Bây giờ hãy tiến hành thử kiểm tra lại hiệu suất của website với PageSpeed Insights và chắc chắn bạn sẽ bất ngờ đó.

Loại bỏ các tài nguyên chặn hiển thị theo phương pháp thủ công

Việc sử dụng plugin để loại bỏ các tài nguyên chặn hiển thị đôi khi cũng làm chậm tốc độ và hiệu suất của website. Tuy nhiên, ta hoàn toàn có thể loại bỏ JavaScript và CSS chặn hiển thị thông qua việc code thủ công.

Để tiến hành loại bỏ, trước hết, tìm tag <script> có trong file website đối với từng tài nguyên có trong PageSpeed Insights mà ta vừa quét trước đó:

<script src="resource.js">

Trong đó, tag <script> có nhiệm vụ yêu cầu trình duyệt tải và thực thi script được xác định bởi thuộc tính src (source). Tuy nhiên, việc này có thể làm chậm quá trình parse của trình duyệt và ảnh hưởng xấu đến tổng thời gian tải của trang.

Loại bỏ các tài nguyên chặn hiển thị theo code

Do đó, ta có thể khắc phục bằng cách thêm thuộc tính async (asynchronous) hoặc defer vào các tag <script> như dưới đây:

<script src="resource.js" async>
<script src="resource.js" defer>

Trong đó, thuộc tính aysnc sẽ yêu cầu trình duyệt tải tài nguyên JavaScript trong khi phân tích phần còn lại của trang, đồng thời thực thi script này ngay sau khi nó được tải. Việc thực thi script sẽ tạm dừng quá trình HTML như hình dưới đây:

Loại bỏ JavaScript và CSS chặn hiển thị bằng cách sử dụng code
Loại bỏ JavaScript và CSS chặn hiển thị bằng cách sử dụng code

Tương tự, các script với thuộc tính defer cũng được tải trong khi trang đang được phân tích, nhưng các script này sẽ bị hoãn cho đến lần hiển thị đầu tiên, hoặc sau khi các thành phần quan trọng khác đã được tải xong:

Xóa JavaScript chặn hiển thị bằng code

Tuy nhiên, Vietnix khuyên bạn không nên sử dụng cả hai thuộc tính deferasync cùng một lúc vì mỗi thuộc tính sẽ phù hợp với từng kiểu tài nguyên khác nhau. Nói chung, nếu một script không quan trọng dựa vào một script nào đó để chạy trước, thì ta có thể dùng defer. Thuộc tính này giúp đảm bảo rằng script sẽ phải chạy sau khi tải hoàn tất các script cần thiết khác. Mặt khác, ta có thể dùng aysnc đối với những tài nguyên còn lại.

Sau khi thực hiện xong việc loại bỏ các tài nguyên chặn hiển thị trên trang WordPress, hãy thử kiểm tra lại hiệu suất của website với PageSpeed Insights. Nếu hiệu năng vẫn không được cải thiện nhiều thì có thể website của bạn đang gặp các vấn đề khác như: file ảnh chưa được nén, quá nhiều nội dung, hosting không chất lượng, thiếu caching,…

Tham khảo: Hosting giá rẻ tại Vietnix giảm giá 40% trọn đời tại đây.

Và cuối cùng là kiểm tra xem website có hoạt động bình thường sau khi loại bỏ JavaScript và CSS chặn hiển thị hay không? Nếu bạn gặp một số lỗi như: Trang tải không đúng cách, các phần tử không hiển thị trên trang,… thì hãy khôi phục lại các thay đổi để khắc phục lỗi nhé.

Lời kết

Như vậy trong bài viết trên Vietnix đã giới thiệu 2 cách giúp bạn loại bỏ các tài nguyên chặn hiển thị bằng cách sử dụng plugin và bằng phương pháp thủ công. Nói chung có rất nhiều yếu tố khác nhau có thể ảnh hưởng đến tốc độ và hiệu suất của trang của bạn. Mỗi người dùng nên thường xuyên phân tích tính năng và hiệu suất của website để luôn đảm bảo trang có tốc độ load tốt nhất.

Nếu bạn có bất kỳ thắc mắc hoặc góp ý hãy để lại bình luận bên dưới. Chúc các bạn thành công!

Hãy đánh giá bài viết post

Vietnix hiện đang có chương trình khuyến mãi lớn nhất trong năm

Giảm giá: Giảm giá TRỌN ĐỜI:
  • 40% Hosting Giá Rẻ, Hosting Cao Cấp & Business Hosting.
Ngoài ra, khi sử dụng dịch vụ VPS và Hosting, quý khách sẽ được tặng bộ Theme & Plugin Wordpress bản quyền trị giá đến 800$/năm. Đăng ký dùng thử ngay và Vietnix sẽ hoàn tiền 100% nếu quý khách không hài lòng với chất lượng sản phẩm, dịch vụ! Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với Vietnix thông qua các kênh sau:
  • Hotline: 1800 1093 - 07 088 44444
  • Email: support@vietnix.vn
  • Hoặc chat trực tiếp với Vietnix thông qua biểu tượng Livechat ở góc phải màn hình. Đội ngũ chuyên viên của chúng tôi luôn sẵn sàng tư vấn và hỗ trợ bạn 24/7.
Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PearsonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé!
Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận