Cách khắc phục JavaScript và CSS chặn kết xuất trong WordPress

Bạn đang cố gắng loại bỏ JavaScript và CSS chặn hiển thị trong WordPress?

Nếu bạn kiểm tra trang web của mình trên thông tin chi tiết về Tốc độ trang của Google, thì bạn có thể sẽ thấy đề xuất loại bỏ các tập lệnh chặn hiển thị và CSS. Tuy nhiên, nó 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 web WordPress của bạn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng khắc phục JavaScript và CSS chặn hiển thị trong WordPress để cải thiện điểm số Google PageSpeed ​​của bạn.

JavaScript và CSS chặn kết xuất là gì?

JavaScript và CSS chặn hiển thị là các tệp ngăn trang web hiển thị trang web trước khi tải các tệp này.

Mỗi trang web WordPress đều có một chủ đề và 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 tập lệnh này có thể 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 tập lệnh 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 vài mili giây để xem trang.

Các tập lệnh và biểu định kiểu này được gọi là JavaScript và CSS chặn hiển thị.

Chủ sở hữu trang web WordPress đang cố gắng đạt được số điểm Google PageSpeed ​​là 100 sẽ cần khắc phục sự cố này để đạt được số điểm hoàn hảo đó.

Điểm tốc độ trang của Google 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 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 bạn.

Nó hiển thị cho bạn điểm số dựa trên số lần kiểm tra mà trang web của bạn vượt qua. Hầu hết các trang web nhận được một nơi nào đó giữa 50-70. Tuy nhiên, một số chủ sở hữu trang web cảm thấy bắt buộc 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 Google PageSpeed ​​hoàn hảo “100” không?

Mục đích của thông tin chi tiết về Tốc độ trang của Google 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 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 vì nó 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 thứ hơn là tốc độ. Bạn cũng 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 bằng văn bản, hình ảnh và video.

Mục tiêu của bạn 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 ​​làm đề xuất. 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 nhiều nhất có thể, và sau đó đừng lo lắng về phần còn lại.

Như đã nói, chúng ta hãy xem bạn có thể làm gì để khắc phục JavaScript và CSS chặn hiển thị trong WordPress.

Chúng tôi sẽ đề cập đến hai phương pháp sẽ khắc phục JavaScript và CSS chặn hiển thị trong WordPress. Bạn có thể chọn một trong những hoạt động tốt nhất cho trang web của bạn.

Phương pháp 1: Sửa Render Blocking Scripts và CSS Với 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 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 hay thiết lập phức tạp nào.

Trước 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 vượt trội 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 về nó trong hướng dẫn đầy đủ của chúng tôi về cách cài đặt và thiết lập đúng cách WP Rocket trong WordPress .

Theo mặc định, nó 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ó khả năng ả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.

Để làm điều đó, bạn cần truy cập trang Cài đặt »WP Rocket rồi chuyển sang tab ‘Tối ưu hóa tệp’.

Từ đây, cuộn đến phần Tệp CSS và chọn hộp bên cạnh ‘Thu nhỏ CSS’, ‘Kết hợp các tệp CSS’ và ‘Tối ưu hóa phân phối CSS’.

Lưu ý: WP Rocket sẽ cố gắng thu nhỏ 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.

Tiếp theo, bạn cần cuộn đến phần Tệp JavaScript. 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ể thu nhỏ 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. Đó là một tập lệnh mà WordPress tải để cung cấp khả năng tương thích cho các plugin và chủ đề sử dụng các phiên bản jQuery cũ.

Hầu hết các trang web không cần tệp này, nhưng bạn vẫn sẽ muốn kiểm tra trang web của mình để đảm bảo rằng việc xóa nó không ảnh hưởng đến chủ đề 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 tùy chọn ‘Tải JavaScript bị trì hoãn’ và ‘Chế độ an toàn cho jQuery’.

Các tùy chọn này trì hoãn việc tải các JavaScript 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 chủ đề có thể 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 chủ đề 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 ‘Lưu thay đổi’ để lưu 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 PageSpeed ​​​​Insights.

Trên trang web thử nghiệm của chúng tôi, chúng tôi có thể đạt được 100% điểm số trên thiết bị máy tính để bàn 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à máy tính để bàn.

Phương pháp 2: Sửa Render Blocking Scripts và CSS với 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 tệp CSS và JS trên trang web của bạn. Mặc dù plugin này hoàn thành công việc 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 . Để 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 Cài đặt (Settings) » JavaScript Optimize để đị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 ‘Optimize JavaScript Code’ trong khối Tùy chọn JavaScript. Đảm bảo rằng tùy chọn ‘Aggregate CSS-files’ không được 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’ không được chọn.

Giờ đây, 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ụ PageSpeed ​​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 tập lệnh chặn kết xuất, thì bạn cần quay lại trang cài đặt của plugin và xem lại cài đặt 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 lệnh bị loại trừ theo mặc định, như seal.js hoặc jquery.js. Sau đó, chỉ cần nhấp vào nút ‘Lưu thay đổi và làm trống bộ nhớ cache’ để lưu các thay đổi của bạn và làm trống bộ nhớ cache của plugin.

Khi bạn đã hoàn tất, hãy tiếp tục và kiểm tra lại trang web của mình bằng công cụ PageSpeed ​​Insights.

Tự động tối ưu hóa hoạt động như thế nào?

Tự động tối ưu hóa tổng hợp tất cả JavaScript và CSS được đưa vào hàng đợi . Sau đó, nó tạo các tệp CSS và JavaScripts được rút gọn và cung cấp các bản sao được lưu trong bộ nhớ cache cho 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ề tập lệnh và kiểu chặn hiển thị. Tuy nhiên, xin lưu ý rằng nó cũng có thể ảnh hưởng đến hiệu suất hoặc giao diện của trang web của bạn.

Khắc phục sự cố JavaScript và CSS chặn kết xuất

Tùy thuộc vào cách các plugin và chủ đề WordPress của bạn sử dụng JavaScript và CSS, có thể khó khắc phục hoàn toàn tất cả các sự cố JavaScript và CSS chặn hiển thị.

Mặc dù các công cụ trên có thể trợ giúp, 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 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 phần bổ trợ đó 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ất định, chẳng hạn như tối ưu hóa phân phối CSS cho nội dung trong màn hình đầu tiên. WP Rocket cho phép bạn khắc phục điều đó bằng cách thêm thủ công CSS quan trọng cần thiết để hiển thị khu vực màn hình đầu tiên trong chủ đề của bạn.

Tuy nhiên, có thể khá khó để tìm ra mã CSS nào bạn sẽ cần để hiển thị nội dung trong màn hình đầu tiên.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách khắc phục JavaScript và CSS chặn hiển thị trong WordPress. Bạn cũng có thể muốn xem hướng dẫn cuối cùng 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 lưu trữ WordPress được quản lý tốt nhất .