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

Bạn muốn nâng cao tốc độ tải và hiệu suất website của mình thì bạn cần loại bỏ các tài nguyên chặn hiển thị bởi nó ảnh hưởng đến thứ hạng trong trang kết quả tìm kiếm trên Google. Hôm nay, Xuyên Việt Media sẽ hướng dẫn các cách loại bỏ các tài nguyên chặn hiển thị nhằm tối ưu SEO cho website của bạn.

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

Tài nguyên chặn hiển thị còn thường được gọi là rendering – block resources là các tệp dữ liệu tĩnh quan trọng trong quá trình hiển thị website. Ví dụ như HTML, CSS, JS, font chữ và hình ảnh…

Vậy tại sao bạn cần loại bỏ tài nguyên chặn hiển thị? Sự có mặt của các tài nguyên này không những không đem đến lợi ích gì cho người dùng mà nó còn làm trình duyệt mất nhiều thời giản để xử lý. Do đó, việc “khai trừ” nó càng sớm sẽ giúp cải thiện hiệu suất và tốc độ của Website. 

TÌM HIỂU THÊM: 10 phần mềm SEO Website tốt nhất 2022

Xác định tài nguyên chặn hiển thị bằng Google PageSpeed Insights

Sự có mặt của tài nguyên chặn hiển thị trên trang Web quả thật là “vô nghĩa” đúng không nào? Chíng vì thế, việc của bạn lúc này là hãy nhanh chóng xóa nó ra khỏi website của mình nhé, và tất nhiên trước khi xóa bạn cần  xác định rõ Website có tài nguyên chặn hiển thị đang tồn tại hay không. 

Cách xác định khá đơn giản, bạn hãy sử dụng công cụ Google Pagespeed Insight. Sau đó nhập URL muốn kiểm tra vào và nhấn Analyze để nhận kết quả. 

Bạn sẽ xác định được tài nguyên chặn hiển thị thông qua điểm số mà Google đánh giá từ 0 -100, số càng thấp tốc độ càng chậm và ngược lại.

• Các trang web được đánh giá dưới 50 điểm cần được tối ưu khá nhiều.
• Những trang web từ 50 – 80 điểm nằm ở mức trung bình và chỉ cần tối ưu hóa một vài chỗ. 
• Và từ 80 điểm trở lên tức website của bạn đã được đánh giá cao, không mắc lỗi và có thể hoạt động tốt.

THÔNG TIN THÊM: Cách tạo Chatbot Facebook đơn giản

Những cách loại bỏ các tài nguyên chặn hiển thị nhanh nhất 

Sau khi xác định được tài nguyên chặn hiển thị, bạn cần tiến hành xử lý ngay để cải thiện tốc độ cho trang Web. Vậy cách loại bỏ tài nguyên chặn hiển thị như thế nào? Bạn có thể tham khảo một số cách xóa tài nguyên chặn hiển thị trên web như sau: 

Khai báo sự hiện diện của file CSS bằng thuộc tính meta

Các file CSS thông thường được các trình duyệt xem là các tài nguyên chặn hiển thị. Tuy nhiên nếu bạn muốn thêm thuộc tính media vào thẻ thì có thể thông báo cho trình duyệt về sự hiện diện của file CSS.

Trong một vài trường hợp nhất định như cao hơn hoặc thấp hơn kích thước viewport thì file CSS mới được sử dụng (thẻ viewport – có nhiệm vụ cho biết kích thước website hiển thị trên từng thiết bị như thế nào) 

Không sử dụng thẻ CSS theo quy luật @import

Việc sử dụng cú pháp @import sẽ giúp cho các file HTML gọn gàng hơn nhưng đối với việc trình bày và hiển thị thì đây không phải là một lựa chọn tốt nhất.

Thêm thẻ CSS sẽ khiến cho trình duyệt file CSS chậm hơn bởi nó phải tải hết tất các file được nhập vào do theo quy luật @import bạn nhập file CSS từ các stylesheet khác nhau. Khiến cho quá trình hiển thị bị chặn lại cho đến khi quá trinh này diễn ra.

Nếu bạn muốn giảm tốc độ tải trang thì nên thêm yếu tố vào thẻ page HTML thay vì thêm thẻ CSS theo quy luật @import.

Nén hoặc gộp tất cả các file có chứa tài nguyên chặn hiển thị 

Song song cùng 2 cách trên đây, bạn có thể xóa những tài nguyên chặn hiển thị trên trang bằng việc dùng công cụ gộp file. Một số công cụ hỗ trợ nén/gộp file như sau: 

• Post CSS: Đây là một công cụ cung cấp giao diện tuyệt vời cho phép các công cụ để xử lý và tối ưu hóa CSS, hỗ trợ biến và Mixins.
• CSS Minifier: Là một công cụ đơn giản cho phép bạn nén và rút gọn cho các tệp JS,CC lên 80% so với kích thước ban đầu.
• Minify code: Đây là các file code đã nén – min, làm giảm tối đa dung lượng thừa bằng cách loại bỏ những khoảng trắng giữa các ký tự trống, đoạn ghi chú trong tập tin, gỡ bỏ các ký tự không cần thiết cho trang web.

Sử dụng plugin để xóa các tài nguyên chặn hiển thị trên Web

Dùng Plugin W3 Total Cache

Để có thể loại bỏ các tài nguyên chặn hiển thị trên web theo cách này, bạn cần phải cài đặt và kích hoạt plugin W3  Total Cache và thực hiện theo các bước sau đây:

• Bước 1. Vào Performance tiếp tục chọn General Settings và kéo xuống mục Minify
• Bước 2. Click vào Enable, sau đó chọn tiếp Manual (trong phần Minify Mode)
• Bước 3. Bấm Save all setting để lưu lại cài đặt của bạn 
• Bước 4. Chọn tiếp Performance và nhấp Minify (trong menu dashboard)
• Bước 5. Sau các bước thiết lập trên chúng ta sẽ đến giai đoạn xóa Javascript, mở menu Embed Type (trong Operations is areas) và chọn Non-blocking using “defer”.
• Bước 6. Trong mục JS file management, trong menu theme và chọn theme mà bạn đang sử dụng.
• Bước 7. Kiểm tra lại hiệu suất của trang bằng PageSpeed, nhấn vào Add script rồi dán toàn bộ URL đã được sao chép từ công cụ PageSpeed Insight vào file URI.
• Bước 8. Click vào Save settings and purge cache để lưu lại thiết lập của bạn.

Các dịch vụ Xuyên Việt Media cung cấp

• Dịch vụ SEO tổng thể
• Dịch vụ quản trị Website

Dùng plugin Autoptimize

Đây là một plugin miễn phí giúp bạn loại bỏ được các javascript và CSS chặn hiển thị trên WordPress và hoạt động bằng cách tổng hợp file, giảm bớt lượng code cải thiện được tốc độ tải của website. Cách loại bỏ tài nguyên chặn hiển thị bằng plugin Autoptimize như sau

• Bước 1. Vào Settings, sau đó chọn Autoptimize (trong phần dashboard WordPress)
• Bước 2. Đánh dấu check vào Optimize JavaScript code và đừng quên bỏ check Aggregate JS-files? trong phần Javascript Options nhé

• Bước 3. Tích vào Optimize CSS code và bỏ tích Aggregate CSS-files?  ở CSS Options

• Bước 4. Ở phần cuối trang, click vào Save change và Empty Cache 
• Bước 5. Xác định lại hiệu suất của trang thông qua đánh giá của Google PageSpeed Insight

 Lời kết 

Bài viết trên, Xuyenvietmedia.com đã hướng dẫn cho bạn một số cách loại bỏ các tài nguyên chặn hiển thị trên WordPress. Hy vọng qua bài viết này các bạn có thể lựa chọn một cách phù hợp để giúp trang web được cải thiện được tốc độ tải và mang lại hiệu suất cao cho website nhé.