Khu vực Opportunities (cơ hội) của report Lighthouse sẽ liệt kê tất cả các stylesheets tất cả CSS ko sử dụng- cùng với tiềm năng tiết kiệm ngân sách và chi phí được từ bỏ 2 KB trở lên. Loại trừ CSS không sử dụng giúp giảm lượng bytes (dữ liệu) không quan trọng tiêu thụ bởi vận động mạng:


*
Nguyên văn: loại bỏ CSS không sử dụng (unused). Vứt bỏ các luật lệ CSS không cần sử dụng và trì hoãn tải CSS không áp dụng cho câu chữ thuộc màn hình thứ nhất (above-the-fold) để giảm tiêu thụ dữ không cần thiết bởi vận động mạng.

Bạn đang xem: Xóa biểu định kiểu xếp chồng (css) không dùng


#1. CSS không áp dụng làm lờ đờ website như vậy nào?

Sử dụng thẻ link là phương thức phổ đổi thay để thêm style vào trang web:

...file main.css mà trình duyệt sở hữu xuống còn được nghe biết với tên thường gọi stylesheet ko kể (external), bởi vì nó được lưu trữ tách biệt với tư liệu HTML thực hiện nó.

Theo mặc định, trình duyệt bắt buộc tải, đối chiếu cú pháp (parse), cùng xử lý tất cả các stylesheets kế bên mà trình duyệt chạm chán trước khi nó có thể hiển thị (hay còn gọi là render / kết xuất) bất cứ nội dung nào trên mình hình fan dùng. Sẽ không còn có ý nghĩa khi trình duyệt cố gắng hiển thị nội dung trước lúc stylesheets được xử lý, bởi vì stylesheets bao gồm thể bao hàm các quy tắc ảnh hưởng đến style của trang.

Từng stylesheet bên ngoài phải được cài đặt xuống trường đoản cú internet. Phần đông vòng lặp mạng bổ sung này hoàn toàn có thể làm ngày càng tăng đáng kể thời hạn mà người tiêu dùng phải đợi trước khi thấy bất kỳ nội dung nào trên màn hình của họ.

CSS không sử dụng cũng có tác dụng chậm quá trình xây dựng cây render của trình duyệt. Cây render giống như cây DOM, nước ngoài trừ vấn đề nó còn bao hàm cả style cho từng nút (node). Để xuất bản cây render, trình duyệt đề xuất đi qua toàn thể cây DOM, và kiểm soát CSS làm sao được áp dụng cho mỗi nút. Gồm càng các CSS ko sử dụng, thì trình phê chuẩn càng mất quá nhiều thời gian (vô ích) dùng để giám sát style cho mỗi nút.

#2. Làm cụ nào khẳng định được CSS ko sử dụng

Tab coverage của Chrome Dev
Tools (công nỗ lực cho đơn vị phát triển, được tích thích hợp sẵn trên trình phê chuẩn Chrome) rất có thể giúp chúng ta phát hiện ra được CSS đặc biệt quan trọng và CSS ko quan trọng.


*

#3. Nội đường CSS đặc biệt và trì hoãn CSS không quan trọng

Tương tự bài toán bạn nội con đường (inline) mã JS vào vào thẻ

Bạn vẫn muốn khắc phục và loại bỏ Java
Script cùng CSS ngăn kết xuất trong Word
Press không? nếu bạn kiểm tra trang web của bản thân trên thông tin chi tiết về Google Page
Speed, thì bao gồm thể bạn sẽ thấy một lời khuyên để loại bỏ các đoạn mã ngăn và kết xuất vật dụng họa. Trong nội dung bài viết này, chúng tôi sẽ chỉ cho mình cách dễ dãi sửa chữa trị kết xuất ngăn Java
Script và CSS vào Word
Press để cải thiện điểm số Google Page
Speed ​​của bạn.


Kết xuất Java
Script ngăn và CSS là gì?

Mỗi trang web Word
Press đều sở hữu một chủ thể và plugin té sungcác tệp
Java
Scriptvà
CSSvào phần đầu của trang web của bạn.Cáctập lệnhnàycó thể tăng thời gian tải trang của website của bạnvà chúng cũng có thể chặn kết xuất trang.

Trình thông qua của người tiêu dùng sẽ buộc phải tải những tập lệnh cùng CSS đó trước lúc tải phần sót lại của HTML bên trên trang.Điều này có nghĩa là người sử dụng trên liên kết chậm rộng sẽ phải chờ thêm vài mili giây nữa để xem trang.

Các tập lệnh cùng biểu định dạng hình này được call là Java
Script và CSS ngăn kết xuất.

Chủ sở hữu website đang nỗ lực đạt được số điểm Google Page
Speed ​​là 100 sẽ phải khắc phục vấn đề này để dành được số điểm hoàn hảo và tuyệt vời nhất đó.

Google Page
Speed ​​Insights là gì?

Google Page
Speed ​​Insightslà một khí cụ trực con đường được tạo vị Google để giúp đỡ chủ sở hữu trang web tối ưu hóa với kiểm tra trang web của họ.Công nuốm này kiểm tra trang web của doanh nghiệp theo trả lời của Google về tốc độ và chỉ dẫn các đề xuất để nâng cấp thời gian cài đặt trang của bạn.

Nó cho bạn thấy một vài điểm dựa trên con số quy tắc mà trang web của doanh nghiệp vượt qua.Hầu hết các trang web nhận được một ở đâu đó thân 50-70.Tuy nhiên, một vài chủ sở hữu trang web cảm thấy yêu cầu phải đã có được 100 (trang cao nhất có thể ghi điểm).

Bạn có thực sự bắt buộc Điểm số tuyệt đối của Google 100 điểm Google Page
Speed ​​không?

Mục đích của thông tin chi tiết Google Page
Speed
​​là cung cấp cho bạn các bề ngoài để nâng cấp tốc độ và công suất của trang web của bạn.Bạn không cần thiết phải tuân theo các quy tắc này một giải pháp nghiêm ngặt.

Hãy nhớ rằng tốc độ chỉ là 1 trong những trong nhiềusố liệu
SEOgiúp Google khẳng định cách xếp hạng trang web của bạn.Lý do vận tốc rất quan trọng đặc biệt là do nó nâng cao trải nghiệm người dùng trên trang web của bạn.

Trải nghiệm fan dùng giỏi hơn đòi hỏi nhiều rộng là tốc độ.Bạn cũng cần đưa thông tin hữu ích, giao diện bạn dùng xuất sắc hơn cùng nội dung hấp dẫn với văn bản, hình hình ảnh và video.

Mục tiêu của doanh nghiệp là tạo ra một website nhanh cung ứng trải nghiệm người tiêu dùng tuyệt vời.

Chúng tôi khuyên chúng ta nên sử dụng các quy tắc Google Pagespeed Insightslàm khuyến nghị và nếu bạn có thể thực hiện chúng một cách thuận lợi mà không làm cho hỏng trải nghiệm fan dùng, thì thật tuyệt.Nếu không, chúng ta nên nỗ lực làm không còn sức rất có thể và tiếp đến đừng băn khoăn lo lắng về phần còn lại.

Hãy xem gần như gì bạn có thể làm để khắc phục kết xuất ngăn Java
Script và CSS trong Word
Press.

Chúng tôi đã đề cập cho hai phương thức sẽ khắc phục và hạn chế kết xuất ngăn Java
Script và CSS trong Word
Press.Bạn tất cả thể lựa chọn 1 trong những chuyển động tốt tuyệt nhất cho website của bạn.

Điều đó đích thực có ý nghĩa gì?Đây là 1 trong lời giải thích sâu hơn.

Khi trình duyệt tải một trang web, tài nguyên Java
Script cùng CSS thường ngăn website hiển thị cho đến khi chúng được trình duyệt mua xuống và cách xử lý xong.Trong một số trong những trường hợp, đây là một điều tốt.Ví dụ: hiển thị HTML thuần túy trước khi tải xuống bất kỳ CSS làm sao và bạn sẽ nhận được mộtnội dungchưa được chỉnh sửa (FOUC) rất có thể là hưởng thụ tồi tệ hơn cho tất cả những người dùng của chúng ta so với việc chờ đón một vài tỷ lệ giây để ngôn từ xuất hiện.

Một số tài nguyên cần được được tải xuống cùng xử lý trước lúc hiển thị bất kể điều gì.Tuy nhiên, nhiều tài nguyên CSS và Java
Script là bao gồm điều kiện, chỉ được áp dụng trong các trường hợp cụ thể hoặc dễ dàng là không quan trọng để hiển thị câu chữ trong màn hình hiển thị đầu tiên.Để chế tác trải nghiệm nhanh nhất có thể cho tất cả những người dùng của bạn, bạn nên cố gắng loại bỏ mọi tài nguyên ngăn kết xuất không cần thiết để hiển thị câu chữ trong screen đầu tiên.

Có thể quá nhiều nỗ lực hoặc dễ dàng và đơn giản là không thể các loại bỏtất cả cáctài nguyên chặn kết xuất.Làm như vậy thậm chí hoàn toàn có thể tạo ra FOUC xấutôi sẽ đề cập trước.Chỉ buộc phải nhớ rằng đó không hẳn là kim chỉ nam của họ để giành được số điểm Page
Speed ​​hoàn hảo.Thay vào đó, mục tiêu của bọn họ là cung ứng trải nghiệm tín đồ dùng giỏi nhất hoàn toàn có thể và điều đó có nghĩa là một website tải nhanh nhất hoàn toàn có thể .

Nói phương pháp khác, sử dụngPage
Speed ​​Insights
để xác định các tệp ngăn kết xuất mà chúng ta có thể cố gắng sa thải .

Cách đào thải Java
Script và CSS ngăn hiển thị

Có một plugin đến điều đó, buộc phải không?
Chà, chắc chắn, nhưng bạn cần hiểu số đông gì đang ra mắt trước khi bạn bắt đầu cắm plugin.Nhiều plugin có cấu hình mạnh mẽ và biết cách đào thải tài nguyên ngăn kết xuất sẽ giúp bạn làm cho việc hiệu quả hơn với plugin các bạn chọn.

Xóa JS khỏi đường truyền kết xuất quan liêu trọng

Đầu tiên,hãy nói tới Java
Script.Ý tưởng cơ bản là dịch chuyển các khoáng sản Java
Script cùng j
Query không quan trọng ra khỏiđường dẫn kết xuất quan liêu trọng.Điều này thường xuyên được thực hiện bằng phương pháp thêmdefer hoặcasync thuộc tính vào cácscript thành phần HTML hotline tài nguyên Java
Script.

Cácthuộc tínhdeferasync không được tạo nên bằng nhau,và sự biệt lập có thể đặc trưng để hiểu.

Cácthuộc tính asynccho trình phê chuẩn để ban đầu tải những tài nguyên ngay mau chóng mà ko làm chậm rãi phân tích cú pháp HTML.Khi tài nguyên có sẵn, phân tích cú pháp HTML được tạm ngưng để tài nguyên có thể được tải.Cácthuộc tính Hoãncho trình chăm chú để tổ chức off trên tải tài nguyên cho đến khi so sánh cú pháp HTML trả tất.Khi trình duyệt hoàn thành với HTML, nó sẽ cài đặt xuống và hiển thị toàn bộ các tập lệnh bị trì hoãn theo máy tự xuất hiện trong tài liệu.

Sự khác hoàn toàn lớn giữa hai điều này làdefer đảm bảo rằng các tập lệnh được thiết lập xuống và áp dụng cho website theo trang bị tự chúng xuất hiện thêm trong tư liệu HTML, trong khiasync thì không.Kết trái là nếuasync được thực hiện trên tất cả các khoáng sản Java
Script, nó thường có thể phá vỡ những tài nguyên phụ thuộc vào vào những tài nguyên xuất hiện trước đó trong tài liệu.Vấn đề phổ cập nhấtasync tạo ra là khoáng sản j
Query bị hỏng nhưng mà cố tải trước đójquery.js sẽ được sản xuất tài liệu.

Tối ưu hóa cung cấp tài nguyên CSS

Kết xuất chặn CSS cũng rất có thể khó khăn còn nếu không thể loại bỏ hoàn toàn.Sự bố trí lý tưởng là:

Xác định các kiểu được yêu mong để hiển thị ngôn từ trong màn hình đầu tiên vàphân phối những kiểu kia theo dòng HTML.Sử dụngmediathuộc tính trên cáclinkphần tử kéo theo tệp CSS để khẳng định tài nguyên CSS bao gồm điều kiện, nghĩa là chỉ việc cho những thiết bị hoặc tình huống cụ thể.Các tài nguyên CSS còn sót lại phải được sở hữu không đồng bộ, một hành động thường được thực hiện bằng cách thêm chúng bằng Java
Script hoãn lại hoặc không đồng bộ.Đây chắc chắn rằng là phạm vi hoạt động kỹ sư phương diện trước.Thật tuyệt nếu bạn là một kỹ sư đầu cuối, nhưng lại hầu hết họ thì không.Tin vui là đây là một bài viết về Word
Press và bạn cũng có thể loại vứt hoặc ít nhất là sút đáng kể con số tài nguyên JS với CSS chặn kết xuất ảnh hưởng đến trang web của bạn bằng (các) plugin phù hợp.

Khắc phục Render Blocking Script với CSS bằng tự động hóa thu nhỏ

Phương pháp này đơn giản dễ dàng hơn cùng được khuyến cáo cho phần nhiều người dùng.

Điều đầu tiên bạn đề nghị làm là thiết đặt và kích hoạtplugin
Tự động về tối đa hóa (Autoptimize).

Sau lúc kích hoạt, bạn cần truy cập trangSettings » Autoptimizeđể định cấu hình cài đặt plugin.

*

Bạn bao gồm thể bước đầu bằng biện pháp chọn hộp ở kề bên Java
Script Options
CSS Optionsvà tiếp nối nhấp vào nút SAVE.

Bây giờ bạn cũng có thể kiểm tra trang web của bản thân bằng biện pháp Page
Speed.Nếu vẫn còn các tập lệnh ngăn kết xuất, thì chúng ta cần trở về trang setup của plugin và nhấp vào nút 'Show Advanced Settings' ở trên cùng.

*

Tại đây, chúng ta có thể cho phép plugin bao hàm JS nội tuyến và xóa những tập lệnh được đào thải theo mặc định như seal.js hoặc jquery.js.

Tiếp theo, cuộn xuống tùy chọn CSS và cho phép plugin tổng thích hợp CSS nội tuyến.

Nhấp vào nút 'Save changes & Empty Cache' nhằm lưu các thay đổi và bộ đệm của bộ đệm trống.

Khi bạn đã hoàn tất, hãy liên tục và kiểm soát lại trang web của người tiêu dùng vớicông núm Page
Speed.

Hãy chắc chắn rằng bạn đã bình chọn kỹ lưỡng trang web của mình để thấy rằng không tồn tại gì bị hỏng bằng phương pháp tối ưu hóa Java
Scripts hoặc CSS của bạn.

Nó vận động như nuốm nào ?

Tự động tối ưu hóa tổng phù hợp tất cả
Java
Script và CSS.Sau đó, nó tạocác tệp CSS cùng Java
Scripts rút gọnvà giao hàng các phiên bản sao được lưu lại trong bộ lưu trữ cache vào trang web của người tiêu dùng dưới dạng không đồng bộ .

Điều này có thể chấp nhận được bạn hạn chế và khắc phục sự cố gắng chặn kết xuất tập lệnh cùng kiểu.Tuy nhiên, xin xem xét rằng nó cũng có thể tác động đến năng suất hoặc sự mở ra của website của bạn.

2. Khắc chế kết xuất Java
Script chặn bởi W3 Total Cache

Phương pháp này yên cầu nhiều công sức của con người hơn với được khuyến nghị cho người dùng đã áp dụng plugin W3 Total Cache trên trang web của họ.

Trước tiên, các bạn sẽ cần thiết đặt và kích hoạtplugin
W3 Total Cache.Nếu bạn cần trợ giúp, hãy xem chỉ dẫn của chúng tôi vềcách setup và tùy chỉnh W3 Total Cache cho tất cả những người mới bắt đầu.

Tiếp theo, bạn cần truy cập trangPerformance » General Settingsvà cuộn xuống phần Minify section.

*

Trước tiên, bạn phải kiểm tra 'Enable' cạnh bên tùy lựa chọn Minifyvà sau đó chọn 'Manual' đến tùy chọn chế độ thu nhỏ.

Nhấp vào nút lưu tất cả setup để lưu trữ thiết lập của bạn.

Tiếp theo, bạn phải thêm những tập lệnh cùng CSS mà bạn muốn thu nhỏ.

Bạn có thể nhận được URL của tất cả các tập lệnh và biểu định loại được kết xuất ngăn từ luật Google Page
Speed ​​Insights.

Trong các khuyến nghị có nội dung: 'Loại vứt Java
Script với CSS chặn kết xuất trong ngôn từ trong màn hình hiển thị đầu tiên', nhấp vào 'Hiển thị biện pháp khắc phục'.Nó đang hiển thị cho chính mình danh sách các tập lệnh cùng biểu định kiểu.

*

Đưa chuột cho một tập lệnh cùng nó đã hiển thị cho bạn URL đầy đủ.Bạn hoàn toàn có thể chọn URL này và sau đó sử dụng các phím CTRL + C (Command + C bên trên Mac) trên bàn phím để xào nấu URL.

Bây tiếng hãy đi tới khu vực quản trị Word
Press của người tiêu dùng và đi đến trang
Performance »Minify.

Trước tiên, bạn cần thêm các tệp Java
Script mà bạn muốn được thu nhỏ.Cuộn xuống phần JS và kế tiếp trong phần 'Operations in areas' để thành 'Non-blocking async' dồn phần .

*

Tiếp theo, bạn cần nhấp vào nút 'Add script' và sau đó bắt đầu thêm URL tập lệnh mà các bạn đã sao chép từ quy định Google Page
Speed.

Khi các bạn đã trả tất, hãy cuộn xuống phần CSS và sau đó nhấp vào nút 'Add a stylesheet'.Bây giờ đồng hồ hãy bắt đầu thêm URL biểu định kiểu bạn đã xào luộc từ phương tiện Google Page
Speed.

*

Bây giờ nhấp chuột nút 'Save settings and purge cache' nhằm lưu trữ cài đặt của bạn.

Truy cập khí cụ Google Page
Speed ​​và kiểm tra lại website của bạn.

Hãy chắc chắn rằng rằng chúng ta cũng soát sổ trang web của bản thân mình kỹ lưỡng giúp xem rằng mọi thứ đều vận động tốt.

Xử lý sự cố

Tùy nằm trong vào cách những plugin và phiên phiên bản Word
Press của khách hàng sử dụng Java
Script với CSS, có thể khá khó khăn để khắc phục hoàn toàn tất cả những kết xuất chặn các vấn đề về Java
Script và CSS.

Mặc dù các công thay trên có thể trợ giúp, các plugin của chúng ta có thể cần một số tập lệnh nhất định ở mức độ ưu tiên không giống nhau để vận động chính xác.Trong trường phù hợp đó, các giải pháp trên hoàn toàn có thể phá vỡ các plugin của người sử dụng hoặc chúng có thể hoạt động bất ngờ.

Google vẫn rất có thể hiển thị cho bạn một số vụ việc nhất định như buổi tối ưu hóa bày bán CSS cho nội dung .Tự động về tối đa hóa có thể chấp nhận được bạn hạn chế điều đó bằng phương pháp thêm thủ công CSS nội tuyến quan trọng để hiển thị khoanh vùng ở bên trên của chủ thể của bạn.

Tuy nhiên, có thể khá trở ngại để tìm thấy mã CSS nào các bạn sẽ cần hiển thị phía trên nội dung .

Xem thêm: Top 10 Website Đăng Tin Bán Hàng Online Miễn Phí Chất Lượng, Các Kênh Bán Hàng Online Miễn Phí

Đó là vớ cả, công ty chúng tôi hy vọng bài viết này đã khiến cho bạn tìm hiểu giải pháp khắc phục kết xuất chặn Java
Script với CSS trong Word
Press.Bạn cũng hoàn toàn có thể muốn xem phía dẫn cuối cùng của bọn chúng tôităng tốc độ và hiệu suất Word
Presscho người mới bắt đầu.