Bạn muốn loại bỏ render-blocking của JavaScript và CSS trong WordPress?
Nếu bạn kiểm tra trang web của mình trên Google PageSpeed Insights, bạn có thể thấy đề xuất loại bỏ các render-blocking scripts và CSS. Tuy nhiên, lại không cung cấp bất kỳ thông tin chi tiết nào về cách thực hiện trên trang web WordPress của bạn.
Trong bài viết này, chúng tôi sẽ hướng dẫn cho bạn cách sửa render-blocking JavaScript và CSS trong WordPress.
Hãy cùng tìm hiểu nhé.
Render-Blocking JavaScript và CSS là gì?
Render-blocking JavaScript và CSS là các file ngăn trang web hiển thị trang web trước khi tải các file này.
Mỗi trang web WordPress đều có một theme và các plugin bổ sung các file JavaScript và CSS vào giao diện người dùng của trang web của bạn. Các scripts này có thể làm tăng thời gian tải trang của trang web của bạn và 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 scriptsvà CSS đó trước khi tải phần còn lại của HTML trên trang. Có nghĩa là người dùng có kết nối chậm hơn sẽ phải đợi thêm vài mili giây để có thể xem trang.
Các scriptsvà stylesheet kiểu 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 để đạt được số điểm 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 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 dựa 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 của trang web của bạn.
Công cụ này hiển thị cho bạn điểm dựa trên số lượng quy tắc mà trang web của bạn vượt qua. Hầu hết các trang web có được khoảng từ 50-70. Tuy nhiên, một số chủ sở hữu trang web cảm thấy buộc phải đạt được 100 (điểm cao nhất mà một trang có thể đạt được) để tăng lượng truy cập và tương tác hiệu quả nhất.
Bạn có thực sự muốn lấy “100” điểm Google PageSpeed?
Mục đích của thông tin chi tiết về Google PageSpeed insights 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. Tuy nhiên, bạn không nhất thiết 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 trang web giúp Google xác định cách xếp hạng trang web của bạn. Tốc độ rất quan trọng, ảnh hưởng đến việc cải thiện trải nghiệm người dùng trên trang web của bạn.
Trải nghiệm người dùng tốt hơn đòi hỏi nhiều hơn chỉ là tốc độ. Bên cạnh đó, trang web cần cung cấp thông tin hữu ích, giao diện người dùng tốt hơn 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 kèm theo đó là 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. Hãy xem những gì bạn có thể làm để khắc phục render-blocking JavaScript và CSS trong WordPress dưới đây:
Chúng tôi sẽ đề cập đến hai phương pháp để sửa lỗi render-blocking JavaScript và CSS trong WordPress. Bạn có thể chọn một trong hai cách mà phù hợp cho trang web của bạn.
Thao tác khắc phục 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 cache 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.
WP Rocket hoạt động hiệu quả. và nó 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 trong bài 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.
Thông thường plugin này không bật các tùy chọn tối ưu hóa JavaScript và CSS. Nhữ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, đó 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.
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 file CSS và tích vào ô 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 file CSS của bạn, kết hợp chúng lại và bạn sẽ 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.
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 hiệu suất tối đa.
Bạn có thể rút gọn và kết hợp các file JavaScript giống như bạn đã làm với CSS.
Bạn cũng có thể ngăn WordPress tải file jQuery Migrate. Nó là một scripts 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 file 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 file đó 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à tích vào ô 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 JavaScripts 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 để có thể sử dụng. 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 cài đặt của bạn.
Sau đó, bạn nê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 demo của chúng tôi, chúng tôi có thể đạt 100% điểm trên PC và vấn đề chặn hiển thị đã được giải quyết ở cả điểm số trên thiết bị di động và PC.
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 riêng để cải thiện việc phân phối các file CSS và JS trên trang web của bạn. Mặc dù plugin này rất ổn định nhưng nó không có 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.
Sau khi kích hoạt, bạn cần truy cập trang Settings » Autoptimize để cài đặt cấu hình 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 block JavaScript Options. Đả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 CSS Options 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 render-blocking scripts, 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 scripts bị loại trừ mặc định như seal.js hoặc jquery.js.
Nhấp vào nút Save changes and Empty Cache để lưu các thay đổi 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.
Làm thế nào scripts hoạt động?
Các JavaScript và CSS sẽ được tự động tối ưu hóa tổng hợp tất cả. Sau đó, sẽ tạo các file CSS và JavaScripts được rút 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 không đồng bộ hoặc bị trì hoãn.
Điều này cho phép bạn khắc phục sự cố về các scripts chặn hiển thị. Tuy nhiên, hiệu suất hoặc giao diện của trang web của bạn có thể bị ảnh hưởng.
Xử lý các sự cố
Tùy thuộc vào cách các plugin và theme WordPress của bạn sử dụng JavaScript và CSS, có thể khá khó khăn để khắc phục hoàn toàn tất cả các vấn đề render-blocking JavaScript và CSS.
Mặc dù các công cụ trên có thể hữu ích, nhưng các plugin của bạn có thể cần một số scriptsnhất định ở mức ưu tiên khác để 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 có thể hoạt động không như mong muốn.
Google có thể cho bạn thấy một số vấn đề như tối ưu hóa phân phối CSS cho nội dung. WP Rocket cho phép bạn khắc phục điều đó bằng cách thêm CSS quan trọng theo cách thủ công để hiển thị vùng màn hình fold ở trên của theme.
Tuy nhiên, có thể sẽ rất khó khăn để tìm ra mã CSS nào bạn sẽ cần để hiển thị trong nội dung màn hình fold.
Chúng tôi hy vọng qua bài viết này sẽ giúp bạn hiểu cách sửa lỗi render-blocking JavaScript và CSS trong WordPress. Bạn cũng có thể tham khảo bài hướng dẫn của chúng tôi về cách tăng hiệu suất WordPress cho người mới bắt đầu và so sánh của về các công ty hosting WordPress tại đây.
Nếu thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể theo dõi chúng tôi trên Twitter và Facebook để cập nhật các thông tin mới nhất từ cunghocwp.com
Chúc các bạn thành công!