Bạn có muốn loại bỏ việc chặn hiển thị JavaScript và CSS trong WordPress không?
Nếu bạn đang kiểm tra trang web của mình trên Google PageSpeed Insights, thì bạn có thể sẽ thấy đề xuất loại bỏ các khối kết xuất script và CSS. Tuy nhiên, nó không cung cấp chi tiết về cách thực hiện việc này 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 sửa lỗi chặn hiển thị JavaScript và CSS trong WordPress để cải thiện điểm Google PageSpeed của bạn.
Nhưng trước đây, hãy cùng nhau khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn.
JavaScript và CSS Render-Blocking là gì?
Chặn hiển thị JavaScript và CSS là các tệp ngăn trang web hiển thị trang web trước khi tải chúng.
Mọi trang web WordPress đều có chủ đề 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 tập lệnh 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ẽ cần tải các tập lệnh và CSS này trước khi tải phần còn lại của mã 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à bảng định kiểu này được gọi là trình chặn kết xuất 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 điều này để đạt được đ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 độ 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 nguyên tắc tốc độ của Google 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 dựa trên số quy tắc mà trang web của bạn vượt qua. Hầu hết các trang web đều nằm trong khoảng từ 50 đến 70. Tuy nhiên, một số chủ sở hữu trang web cảm thấy áp lực phải đạt được 100.
Bạn có thực sự cần điểm "100" trên Google PageSpeed 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 của trang web của bạn. Bạn không bắt buộc phải tuân thủ nghiêm ngặt các quy tắc này.
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 độ rất quan trọng là 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 hơn tốc độ. Bạn cũng phải cung cấp thông tin hữu ích, giao diện người dùng tốt hơn và thu hút nội dung bằng 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 chóng mang lại trải nghiệm người dùng tuyệt vời.
Trong quá trình thiết kế lại BlogPasCher mới nhất, chúng tôi đã tập trung vào tốc độ cũng như cải thiện trải nghiệm người dùng.
Chúng tôi khuyên bạn nên sử dụng quy tắc Google Pagespeed như một đề xuất và nếu bạn có thể triển khai chúng 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à đừng lo lắng về phần còn lại.
Như đã nói, chúng ta hãy xem những gì bạn có thể làm để sửa lỗi chặn hiển thị JavaScript và CSS trong WordPress.
Chúng tôi sẽ đề cập đến hai phương pháp sẽ khắc phục sự cố này. Bạn có thể chọn một trong những hoạt động tốt nhất trên trang web của bạn.
1. Sửa các tập lệnh và CSS chặn hiển thị 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 của trang web mà không cần thiết lập bất kỳ kỹ năng kỹ thuật hoặc phức tạp nào.
Trước hết, 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 kích hoạt bộ nhớ cache của nó với các cài đặt tối ưu. Theo mặc định, nó không kích hoạ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 đếnsự xuất hiện của trang web của bạn hoặc một số tính năng nhất định, đó là lý do plugin cho phép bạn bật các cài đặt đó dưới dạng tùy chọn.
Để làm điều này, bạn phải tiếp tục Cài đặt »WP Rocket, sau đó chuyển sang 'Tối ưu hóa tệp '. Từ đó, cuộn xuống phần Tệp CSS và đánh dấu vào các ô Giảm thiểu CSS, Kết hợp các tệp CSS et Tối ưu hóa phân phối CSS.
Remarque : 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 đếnsự xuất hiện của trang web của bạn, vì vậy bạn nê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.
Sau đó, bạn cần cuộn đến phần Tệp JavaScript. Từ đó bạn có thể đánh dấu vào 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 tệp JavaScript giống như bạn đã làm với các tệp CSS.
Bạn cũng có thể ngăn WordPress tải tệp lên. Di chuyển jQuery. Đây 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 cũ hơn của jQuery.
Hầu hết các trang web không cần tệp này, nhưng bạn nên kiểm tra trang web của mình để đảm bảo việc xóa nó không ảnh hưởng đến chủ đề hoặc các plugin của bạn.
Sau đó, cuộn xuống thêm một chút và kiểm tra các tùy chọn 'Tải JavaScript đã xác định'và'Chế độ An toàn cho jQuery'.
Các tùy chọn này trì hoãn việc tải 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ội tuyến.
Nhớ 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ể 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 của chúng tôi, chúng tôi có thể đạt được 100% điểm trên máy tính để bàn và vấn đề bị kẹt kết xuất đã được giải quyết ở cả điểm số trên thiết bị di động và máy tính để bàn.
2. Sửa lỗi chặn hiển thị JavaScript và CSS bằng tính năng tự động tối ưu hóa
Đối với phương pháp này, chúng tôi sẽ sử dụng một plugin khác đượ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ó thiếu các tính năng mạnh mẽ khác mà WP Rocket cung cấp.
Đ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.
Khi kích hoạt, bạn phải truy cập trang Cài đặt »Tự động tối ưu hóa để cấu hình các cài đặt plugin.
Trước hết, bạn cần kiểm tra tùy chọn 'Tối ưu hóa mã JavaScript'dưới khối JavaScript Các lựa chọn. Đảm bảo rằng tùy chọn 'Tổng hợp tất cả các tệp JS được liên kết' không được chọn.
Sau đó, cuộn xuống khu vực Tùy chọn CSS và kiểm tra tùy chọn ' Tối ưu hóa mã CSS?'. Đảm bảo rằng tùy chọn 'Tổng hợp tất cả các tệp CSS được liên kết'không được kiểm tra.
Bây giờ bạn có thể nhấp vào nút 'Lưu thay đổi và xóa bộ nhớ 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 với Thông tin chi tiết về tốc độ trang. Trên trang web demo của chúng tôi, chúng tôi đã có thể giải quyết sự cố kết xuất bị kẹt 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ị, bạn cần quay lại trang cài đặt của plugin và xem cá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.
Nhấp vào nút 'Lưu thay đổi và xóa bộ nhớ cache' để lưu các thay đổi của bạn và xóa bộ nhớ cache của 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ụ Thông tin chi tiết về tốc độ trang.
Nó hoạt động như thế nào?
Tự động tối ưu hóa gói tất cả các tệp JavaScript và CSS. Sau đó anh ta tạo ra Các tệp CSS và JavaScripts được rút gọn và cung cấp các bản sao đã lưu trong bộ nhớ cache của trang web của bạn trên cơ sở đồng bộ hoặc hoãn lại.
Điều này cho phép bạn giải quyết vấn đề chặn kết xuất tập lệnh và phong cách chặn. Tuy nhiên, xin lưu ý rằng điều này cũng có thể ảnh hưởng đến hiệu suất hoặcsự xuất hiện của trang web của bạn.
giúp
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ó khăn để giải quyết hoàn toàn tất cả các vấn đề với chặn của JavaScript và hiển thị 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ố 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 này, các giải pháp trên có thể phá vỡ chức năng của các plugin này hoặc chúng có thể hoạt động không mong muốn.
Google vẫn có thể cho bạn thấy một số vấn đề như tối ưu hóa phân phối CSS. WP Rocket cho phép bạn khắc phục điều này bằng cách thêm thủ công CSS quan trọng cần thiết để hiển thị chủ đề WordPress của bạn một cách hoàn hảo.
Tuy nhiên, có thể khá khó để biết bạn sẽ cần mã CSS nào để hiển thị.
Khám phá thêm một số chủ đề và plugin WordPress cao cấp
Bạn có thể sử dụng các plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của blog hoặc trang web của bạn.
Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.
1. Plugin Tối ưu hóa tốc độ WordPress
Bạn đang gặp khó khăn trong việc quản lý nhiều plugin tối ưu hóa tốc độ trang web? Bạn có lo lắng rằng chúng đang cản trở tốc độ thực thi của trang web của bạn không? thì plugin WordPress này sẽ là giải pháp tối ưu cho mọi lo lắng của bạn.
Plugin này được thiết kế để cung cấp cho bạn chức năng của gần như 6-8 plugin WordPress khác nhau. Bạn chỉ cần cài đặt và định cấu hình nó để thấy sự cải thiện rõ rệt trong việc tải các trang của mình.
Chúng tôi muốn chỉ ra rằng đây không phải là plugin bộ nhớ cache hoặc CDN, nhưng kết quả mà nó mang lại vẫn rất ấn tượng. Đừng ngần ngại thử plugin WordPress này để xem nó có khả năng gì.
Tải về | Bản demo | Web hosting
2. Social Share & Locker Pro
Tiện ích mở rộng Social Share & Locker Pro đã được thiết kế để giúp trang web của bạn hiển thị nhiều hơn trên các mạng xã hội. Chỉ với một vài cú nhấp chuột, bạn có thể đặt vị trí của các biểu tượng xã hội hoặc khóa nội dung của mình bằng cách yêu cầu chia sẻ trên một trong các mạng xã hội do bạn cung cấp.
Bạn có các chủ đề được xác định trước 10 và điều này sẽ bao gồm các mong muốn phổ biến nhất. Tất cả các chủ đề của cô là Retina và làm việc kỳ diệu.
Ngoài ra, với Social Share & Locker Pro, bạn sẽ có thể hiển thị tên đầy đủ của mạng xã hội hoặc chỉ biểu tượng. Nó sẽ phụ thuộc vào thiết kế của bạn, không gian có sẵn, hoặc mong muốn của bạn.
Tải về | Bản demo | Web hosting
3. Hình ảnh WordPress PDF Hộp đèn
WordPress PDF Lightbox là một Phần mở rộng WordPress cho phép bạn tạo người xem tệp PDF. Trình xem PDF là một tập hợp các ảnh có thể được lưu dưới dạng PDF.
Với tiện ích mở rộng này, bạn có thể tạo bao nhiêu trình xem PDF tùy thích. Đối với mỗi người xem, quản trị viên có thể đặt một số tùy chọn như:
- Ảnh bìa: sẽ được thêm vào làm trang đầu tiên của tệp PDF do người dùng tạo
- Hình ảnh tối đa cho mỗi người xem
- Hình ảnh watermark: được áp dụng trên các trang PDF
- Gửi qua email: nếu tính năng này được kích hoạt, một Mẫu liên hệ sẽ được cung cấp ngay sau bộ sưu tập hình ảnh. Thông qua biểu mẫu này, người dùng sẽ có thể gửi tệp PDF đã tạo qua email cho bất kỳ ai.
Tải về | Bản demo | Web hosting
Tài nguyên đề xuất
Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.
- Các plugin 10 WordPress để cải thiện SEO trang web của bạn
- Các plugin WordPress cao cấp 5 để tối ưu hóa danh mục của bạn
- 10 plugin WordPress để chuyển đổi tiền tệ
- 10 plugin WordPress để tích hợp một máy nghe nhạc âm thanh trong một trang web
Kết luận
Đây ! Đó là nó cho hướng dẫn này. 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 chặn hiển thị JavaScript và CSS trong WordPress. Bạn cũng có thể thấy hướng dẫn cuối cùng về cách tăng tốc hiệu suất WordPress cho người mới bắt đầu.
Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.
Đừng ngần ngại chia sẻ với bạn bè của bạn trên các mạng xã hội yêu thích của bạn. Và nếu bạn có bất kỳ đề xuất hoặc nhận xét nào, hãy để lại chúng trong phần của chúng tôi ý kiến.
...
