Bạn có muốn loại bỏ lỗi “render-blocking JavaScript and CSS” trong WordPress không?
Nếu bạn kiểm tra trang web của mình trên Google PageSpeed Insights, bạn có thể thấy một đề xuất loại bỏ các đoạn script render-blocking và CSS. Tuy nhiên, thông báo đó lại không cung cấp bất kỳ chi tiết nào về cách thực hiện điều đó trên trang WordPress của bạn.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách dễ dàng khắc phục lỗi render-blocking JavaScript và CSS trong WordPress để cải thiện tốt độ trang web của bạn.
Render-Blocking JavaScript và CSS là gì?
Các file render blocking JavaScript và CSS là các file ngăn một trang web hiển thị trước khi tải xong các file này.
Mỗi trang web WordPress đều có một theme và các plugin bổ sung các tệp JavaScript và CSS vào giao diện người dùng của trang web của bạn. Các đoạn scripts này có thể làm tăng thời gian tải trang của trang web của bạn và chúng cũng có thể chặn hiển thị trang.
Trình duyệt của người dùng sẽ phải tải các đoạn scripts và CSS đó trước khi tải phần còn lại của HTML trên trang. Điều này có nghĩa là người dùng có kết nối chậm hơn sẽ phải đợi thêm một chút mới có thể nhìn thấy trang web của bạn
Các scripts và stylesheets này được gọi là render-blocking JavaScript và CSS.
Chủ sở hữu trang web đang cố gắng đạt được điểm 100 của Google PageSpeed sẽ cần phải khắc phục vấn đề này mới đạt được con số hoàn hảo đó.
Điểm Google PageSpeed là gì?
Google PageSpeed Insights là một công cụ kiểm tra tốc độ trang web. Đây là công cụ do Google tạo ra để giúp chủ sở hữu trang web tối ưu hóa và kiểm tra trang web của họ. Công cụ này kiểm tra trang web của bạn theo các nguyên tắc của Google về tốc độ và đưa ra các đề xuất để cải thiện thời gian tải trang trang web của bạn.
Nó hiển thị cho bạn điểm dựa trên số lượng các quy tắc mà trang web của bạn cần vượt qua. Hầu hết các trang web có được khoảng từ 50-70 điểm. Tuy nhiên, một số chủ sở hữu trang web đều cảm thấy cần phải đạt được 100 (điểm cao nhất mà một trang có thể đạt được).
Bạn có thực sự cần điểm “100” hoàn hảo trên Google PageSpeed không?
Mục đích của Google PageSpeed là cung cấp cho bạn các nguyên tắc để cải thiện tốc độ và hiệu suất trang web của bạn. Bạn không bắt buộc phải tuân theo các quy tắc này một cách nghiêm ngặt.
Hãy nhớ rằng tốc độ chỉ là một trong nhiều số liệu SEO giúp Google xác định cách xếp hạng trang web của bạn. Lý do tốc độ quan trọng như vậy là vì nó cải thiện trải nghiệm người dùng trên trang web của bạn.
Một trải nghiệm người dùng tốt đòi hỏi nhiều hơn thứ hơn chỉ là tốc độ. Bạn cũng cần cung cấp những thông tin hữu ích, giao diện người dùng đẹp mắt và nội dung hấp dẫn với văn bản, hình ảnh và video.
Mục tiêu của bạn phải là tạo một trang web nhanh, mang lại trải nghiệm người dùng tuyệt vời.
Chúng tôi khuyên bạn nên sử dụng các quy tắc Google Pagespeed để tham khảo và nếu bạn có thể triển khai chúng một cách dễ dàng mà không làm hỏng trải nghiệm người dùng thì điều đó thật tuyệt. Nếu không, bạn nên cố gắng làm hết sức có thể và sau đó đừng lo lắng về phần còn lại.
Bây giờ, chúng ta hãy xem những gì bạn có thể làm để sửa lỗi render-blocking JavaScript và CSS trong WordPress.
Chúng tôi sẽ đề cập đến hai phương pháp khắc phục lỗi JavaScript và CSS chặn hiển thị trong WordPress. Bạn có thể chọn phương pháp nào phù hợp nhất với trang web của mình.
Bật mí 2 cách khắc phục lỗi Render-Blocking JavaScript và CSS trong WordPress
1. Sửa lỗi Render Blocking Scripts và CSS bằng WP Rocket
Đối với phương pháp này, chúng tôi sẽ sử dụng plugin WP Rocket. Đây là plugin bộ nhớ đệm WordPress tốt nhất trên thị trường và cho phép bạn nhanh chóng cải thiện hiệu suất trang web của mình mà không cần bất kỳ kỹ năng kỹ thuật hoặc thiết lập phức tạp nào.
Đầu tiên, bạn cần cài đặt và kích hoạt plugin WP Rocket. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .
WP Rocket hoạt động hiệu quả và sẽ bật bộ nhớ đệm với các cài đặt tối ưu cho trang web của bạn. Bạn có thể tìm hiểu thêm về plugin này trong hướng dẫn đầy đủ của chúng tôi về cách cài đặt và thiết lập WP Rocket trong WordPress đúng cách .
Theo mặc định, WP Rocket không bật các tùy chọn tối ưu hóa JavaScript và CSS. Những tính năng tối ưu hóa này có thể ảnh hưởng đến giao diện trang web của bạn hoặc một số tính năng khác, đó là lý do tại sao plugin cho phép bạn bật các cài đặt này theo tùy chọn.
Để làm điều đó, bạn cần truy cập trang Settings » WP Rocket và sau đó chuyển sang tab ‘File Optimization’. Từ đây, cuộn đến phần CSS Files và chọn hộp bên cạnh các tùy chọn Minify CSS, Combine CSS Files, và Optimize CSS Delivery.
Lưu ý: WP Rocket sẽ cố gắng giảm thiểu tất cả các tệp CSS của bạn, kết hợp chúng và chỉ tải CSS cần thiết cho phần hiển thị trên trang web của bạn. Điều này có thể ảnh hưởng đến giao diện trang web của bạn, vì vậy bạn cần kiểm tra kỹ lưỡng trang web của mình trên nhiều thiết bị và kích thước màn hình khác nhau.
Tiếp theo, bạn cần cuộn đến phần JavaScript Files. Từ đây, bạn có thể kiểm tra tất cả các tùy chọn để cải thiện tối đa hiệu suất.
Bạn có thể minify và kết hợp các tệp JavaScript giống như bạn đã làm với CSS.
Bạn cũng có thể ngăn WordPress tải tệp jQuery Migrate. Đây là một script mà WordPress tải để cung cấp khả năng tương thích cho các plugin và theme sử dụng các phiên bản cũ của jQuery.
Hầu hết các trang web không cần các files này, nhưng bạn vẫn nên kiểm tra trang web của mình để đảm bảo rằng việc xóa các files đó không ảnh hưởng đến theme hoặc plugin của bạn.
Tiếp theo, cuộn xuống thêm một chút và chọn các hộp bên cạnh các tùy chọn ‘Load JavaScript Defered’ và ‘Safe Mode for jQuery’.
Các tùy chọn này trì hoãn việc tải các JavaScrip không cần thiết và chế độ an toàn của jQuery cho phép bạn tải jQuery cho các theme sử dụng nó nội tuyến. Bạn có thể bỏ chọn tùy chọn này nếu bạn chắc chắn rằng theme của mình không sử dụng jQuery nội tuyến ở bất kỳ đâu.
Đừng quên nhấp vào nút Save changes để lưu lại cài đặt của bạn.
Sau đó, bạn cũng có thể muốn xóa bộ nhớ cache trong WP Rocket trước khi kiểm tra lại trang web của mình với Google Page Speed Insights.
Trên trang web thử nghiệm, chúng tôi có thể đạt được 100% điểm trên Desktop và vấn đề chặn hiển thị đã được giải quyết ở cả thiết bị di động và máy tính để bàn.
2. Sửa lỗi Render Blocking Scripts và CSS bằng Autoptimize
Đối với phương pháp này, chúng tôi sẽ sử dụng một plugin riêng được tạo để cải thiện việc phân phối các tệp CSS và JS trên trang web của bạn. Mặc dù plugin này khá tốt nhưng nó không có thêm các tính năng mạnh mẽ khác mà WP Rocket có.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Autoptimize. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, bạn cần truy cập trang Settings » Autoptimize để định cấu hình cài đặt plugin.
Trước tiên, bạn cần chọn hộp bên cạnh tùy chọn ‘Optimize JavaScript Code’ trong khối Tùy chọn JavaScript. Đảm bảo rằng tùy chọn ‘Aggregate JS-files’ được bỏ chọn.
Tiếp theo, cuộn xuống hộp Tùy chọn CSS và chọn tùy chọn ‘Optimize CSS Code’. Đảm bảo rằng tùy chọn ‘Aggregate CSS-files’ được bỏ chọn.
Bây giờ bạn có thể nhấp vào nút ,Save Changes and Empty Cache’ để lưu cài đặt của mình.
Hãy tiếp tục và kiểm tra trang web của bạn bằng công cụ Page Speed Insights. Trên trang web demo của chúng tôi, chúng tôi đã có thể khắc phục sự cố chặn hiển thị bằng các cài đặt cơ bản này.
Nếu vẫn còn các tập lệnh chặn hiển thị, thì bạn cần quay lại trang cài đặt của plugin và xem lại các tùy chọn trong cả tùy chọn JavaScript và CSS.
Ví dụ, bạn có thể cho phép plugin bao gồm JS nội tuyến và xóa các tệp scripts bị loại trừ theo mặc định như seal.js hoặc jquery.js.
Nhấp vào nút ‘Save changes and Empty Cache’ để lưu lại bất kỳ thay đổi nào của bạn và làm trống bộ nhớ cache plugin.
Sau khi hoàn tất, hãy tiếp tục và kiểm tra lại trang web của bạn bằng công cụ Page Speed.
Plugin này hoạt động như thế nào?
Autoptimize tổng hợp tất cả JavaScript và CSS. Sau đó, nó tạo các tệp CSS và JavaScripts đã được thu gọn và cung cấp các bản sao được lưu trong bộ nhớ cache đến trang web của bạn dưới dạng async hoặc deferred.
Điều này cho phép bạn khắc phục sự cố render-blocking. Tuy nhiên, hãy nhớ rằng việc khắc phục lỗi render-blocking cũng có thể ảnh hưởng đến hiệu suất hoặc giao diện trang web của bạn.
Xử lý các sự cố thường gặp
Tùy thuộc vào cách các plugin và theme WordPress của bạn sử dụng JavaScript và CSS, việc khắc phục hoàn toàn tất cả các vấn đề render-blocking JavaScript và CSS có thể khá khó khăn.
Mặc dù các công cụ trên đều hoạt động tốt, nhưng plugin của bạn có thể cần một số tập lệnh nhất định ở mức ưu tiên để hoạt động bình thường. Trong trường hợp đó, các giải pháp trên có thể phá vỡ chức năng của các plugin đó hoặc chúng có thể hoạt động không mong muốn.
Google vẫn có thể hiển thị cho bạn một số vấn đề như cần tối ưu hóa phân phối CSS. WP Rocket cho phép bạn khắc phục điều đó bằng cách thêm thủ công các đoạn code CSS quan trọng cần thiết để hiển thị vùng màn hình đầu tiên ở trên của chủ đề của bạn.
Tuy nhiên, Việc tìm ra đoạn CSS nào bạn sẽ cần để hiển thị trong nội dung của mình cũng không mấy dễ dàng.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách sửa lỗi JavaScript và CSS chặn hiển thị trong WordPress. Bạn cũng có thể muốn xem hướng dẫn mới nhất của chúng tôi về cách tăng tốc hiệu suất WordPress cho người mới bắt đầu và so sánh của chúng tôi về các công ty managed hosting WordPress tốt nhất .
Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.