Tên lửa css wp quan trọng
|
Nếu bạn đã từng chạy trang web WordPress của mình thông qua Google PageSpeed Insights, Google có thể đã nói với bạn rằng bạn cần loại bỏ các tài nguyên chặn hiển thị trên trang web WordPress của mình. Trên thực tế, đó có thể là lý do tại sao bạn đang đọc bài đăng này ngay bây giờ Show
Điều đó có thể đặt ra hai câu hỏi trong đầu bạn
Trong bài đăng này, chúng tôi sẽ trả lời cả hai câu hỏi cho bạn. Đây là tất cả mọi thứ mà chúng tôi sẽ trình bày trong bài đăng này Thích xem phiên bản video?“Loại bỏ tài nguyên chặn kết xuất” nghĩa là gì?Để hiểu tài nguyên chặn hiển thị là gì và tại sao chúng ảnh hưởng đến thời gian tải trang web của bạn, chúng ta cần bắt đầu với cái nhìn cơ bản về cách trình duyệt web hiển thị trang web Khi khách truy cập vào trang web của bạn, trình duyệt web của họ về cơ bản sẽ bắt đầu ở đầu mã trang web của bạn và đọc xuống. Từ trên xuống dưới, hiểu chưa? Xem cách Kinsta chống lại đối thủ. So sánh Nếu trong quá trình đó, nó gặp một tệp CSS hoặc JavaScript, nó cần dừng “đọc” trong khi chờ tải xuống và xử lý tệp đó. Thời gian dành cho việc “tạm dừng” để tải xuống và phân tích cú pháp các tài nguyên đó có thể được dành cho việc gì đó hiệu quả hơn nhiều, chẳng hạn như tải một phần nội dung trang web của bạn hiển thị ngay lập tức khi ai đó truy cập vào trang Hãy xem xét một ví dụ cực đoan để cho thấy tại sao đây có thể là một vấn đề Giả sử bạn có hiệu ứng JavaScript thú vị này ở chân trang của trang web. Nó được hỗ trợ bởi “coolfooter. js”, là một tập lệnh được tham chiếu ở đầu mã trang web của bạn (mặc dù hiệu ứng nằm ở chân trang, vì vậy khách truy cập sẽ không nhìn thấy nó cho đến khi họ cuộn đến chân trang) Vì vậy, một bố cục rất thô sơ cho mã trang web của bạn có thể giống như
Và đây là lý do tại sao đây là một vấn đề Khi khách truy cập vào trang web của bạn, trình duyệt của họ bắt đầu đọc từ trên xuống dưới. Vì vậy, trước khi nó có thể phân tích cú pháp và hiển thị HTML cho nội dung trong màn hình đầu tiên trên trang web của bạn, nó cần đợi để tải xuống và phân tích cú pháp coolfooter. tập tin js Kết quả cuối cùng? Khi Google yêu cầu bạn loại bỏ các tài nguyên chặn kết xuất, về cơ bản, điều đó có nghĩa là, “này, đừng tải các tài nguyên không cần thiết ở đầu mã trang web của bạn vì nó sẽ khiến trình duyệt của khách truy cập tải xuống phần hiển thị của bạn lâu hơn. Với các mẹo trong bài đăng này, bạn sẽ có thể đợi để tải một số tài nguyên CSS và JavaScript nhất định cho đến khi phần hiển thị trên trang của bạn đã tải xong Tài nguyên chặn kết xuất là gì?Khi đề cập đến tài nguyên chặn hiển thị, chúng ta thường nói về
Điều quan trọng là phải hiểu rằng không phải tất cả các tệp CSS và JavaScript đều chặn hiển thị Ví dụ: điều quan trọng là phải tải CSS quan trọng của bạn ở gần đầu trang, nếu không, khách truy cập của bạn có thể gặp phải nội dung được gọi là flash nội dung không theo kiểu (FOUC) Hình ảnh có phải là tài nguyên chặn kết xuất không?Không, hình ảnh không bị chặn hiển thị. Điều quan trọng là tối ưu hóa hình ảnh của bạn để giảm kích thước tệp của chúng, nhưng bạn không cần phải lo lắng về việc tối ưu hóa đường dẫn phân phối cho hình ảnh của mình Đăng kí để nhận thư mớiBạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress Cách kiểm tra xem trang web của bạn có tài nguyên chặn hiển thị hay khôngĐể đánh giá xem trang web WordPress của bạn hiện có tài nguyên chặn hiển thị hay không, bạn có thể sử dụng Google PageSpeed Insights Tất cả những gì bạn làm là nhập URL mà bạn muốn kiểm tra. Sau đó, nếu bạn gặp sự cố với tài nguyên chặn hiển thị, PageSpeed Insights sẽ liệt kê từng tài nguyên riêng lẻ trong phần Loại bỏ tài nguyên chặn hiển thị trong Cơ hội Làm thế nào để bạn loại bỏ tài nguyên chặn kết xuất?Đừng lo lắng, bạn không phải làm điều này theo cách thủ công. Chúng tôi sẽ nói về các plugin WordPress có thể giúp bạn loại bỏ các tài nguyên chặn hiển thị trong phần tiếp theo Tuy nhiên, sẽ rất hữu ích nếu bạn hiểu những plugin này đang làm gì đằng sau hậu trường để loại bỏ các tài nguyên chặn hiển thị Cách loại bỏ JavaScript chặn kết xuấtCó một vài chiến lược khác nhau để loại bỏ JavaScript chặn hiển thị. Chúng tôi trình bày chi tiết những điều này trong bài viết của chúng tôi về cách trì hoãn phân tích cú pháp JavaScript, nhưng đây là các phương pháp chính
Hình minh họa này từ Phát triển với Web đã thể hiện rất tốt sự khác biệt Lợi ích của việc sử dụng defer là các tập lệnh của bạn được đảm bảo thực thi theo thứ tự xuất hiện trong mã Async không sử dụng phương pháp này, điều này đôi khi có thể gây ra sự cố nếu bạn áp dụng async cho tất cả các tài nguyên JavaScript vì nó thường có thể phá vỡ các tài nguyên phụ thuộc vào các tài nguyên xuất hiện trước đó trong tài liệu. Vấn đề phổ biến nhất mà async tạo ra là các tài nguyên jQuery bị hỏng cố tải trước jquery. js đã được thêm vào tài liệu Cách loại bỏ CSS chặn kết xuấtViệc loại bỏ CSS chặn hiển thị có thể phức tạp hơn một chút vì bạn phải cẩn thận để không trì hoãn CSS cần thiết để hiển thị nội dung trong màn hình đầu tiên. Sự sắp xếp lý tưởng là
Để có một cách nhanh chóng và dễ dàng khác nhằm tăng khả năng tối ưu hóa tổng thể của bạn, hãy xem xét cả việc giảm thiểu mã của bạn. Kinsta đã tích hợp tính năng rút gọn mã ngay trong bảng điều khiển MyKinsta , cho phép . Nếu bạn không thể xác định vị trí tính năng này trong bảng điều khiển của mình, chỉ cần xem video Cách bật Thu nhỏ trong MyKinsta của chúng tôi Cách loại bỏ các tài nguyên JavaScript và CSS chặn kết xuất bằng các plugin WordPressĐể minh họa cách loại bỏ tài nguyên chặn hiển thị trên WordPress, chúng tôi đã thiết lập một trang web thử nghiệm đơn giản bao gồm CSS và JavaScript chặn hiển thị, sau đó chúng tôi sẽ hướng dẫn bạn cách sử dụng hai giải pháp plugin khác nhau để loại bỏ chặn hiển thị
Để tham khảo, đây là trang web thử nghiệm của chúng tôi trông như thế nào trước khi tối ưu hóa phân phối CSS và JavaScript Nếu bạn đang kiểm tra tính hiệu quả của các thay đổi của mình bằng Google PageSpeed Insights, hãy lưu ý rằng Google lưu trữ kết quả của nó trong vài phút. Về cơ bản, điều này có nghĩa là nếu bạn nhanh chóng…
…thì bạn vẫn sẽ thấy kết quả cho trang web chưa được tối ưu hóa của mình cho đến khi Google đặt lại bộ nhớ cache của nó. Vì vậy, hãy đảm bảo rằng bạn đợi vài phút để Google xóa bộ nhớ cache trước khi bạn nghĩ rằng plugin không hoạt động Cách loại bỏ các tài nguyên chặn hiển thị bằng Autoptimize + Plugin JavaScript không đồng bộAutoptimize và Async JavaScript là hai plugin miễn phí riêng biệt từ cùng một nhà phát triển. Cùng nhau, chúng giúp bạn tối ưu hóa việc phân phối cả CSS và JavaScript của bạn Khi bạn đã cài đặt cả hai plugin, hãy đi tới Cài đặt → Async JavaScript và
Nếu tùy chọn Async gây ra sự cố trên trang web của bạn, chúng tôi khuyên bạn nên thử Trì hoãn hoặc loại trừ jQuery, plugin này cung cấp cho bạn tùy chọn cho Khi bạn đã thiết lập plugin Async JavaScript, hãy đi tới Cài đặt → Tự động tối ưu hóa và
Nếu bạn là người dùng nâng cao, bạn có thể thử với cài đặt tối ưu hóa JavaScript và CSS bổ sung, nhưng hầu hết các trang web sẽ ổn với cài đặt mặc định Sau khi định cấu hình Autoptimize và Async JavaScript, trang web thử nghiệm của chúng tôi đã vượt qua cuộc kiểm tra “Loại bỏ tài nguyên chặn hiển thị” của PageSpeed Insights Nếu bạn muốn loại bỏ nhiều tệp đó hơn nữa, bạn có thể tiếp tục. Tuy nhiên, điều này đòi hỏi một số kiến thức phát triển, vì vậy đây không phải là điều mà những người không phải là nhà phát triển nên thử. Bạn cũng có thể sử dụng các plugin riêng biệt nếu muốn. Nhưng do cả hai plugin đều đến từ cùng một nhà phát triển và được xây dựng để hoạt động tốt với nhau, cách tiếp cận tốt nhất cho hầu hết các trang web là kết hợp chúng Cách loại bỏ tài nguyên chặn kết xuất với WP RocketWP Rocket là một plugin lưu trữ và hiệu suất WordPress cao cấp phổ biến Thông thường, chúng tôi không cho phép các plugin bộ nhớ đệm trên các trang web WordPress được lưu trữ tại Kinsta vì chúng tôi đã xử lý bộ nhớ đệm cho bạn ở cấp độ máy chủ thông qua bộ đệm Nginx FastCGI tốc độ cao Tuy nhiên, WP Rocket có tích hợp đặc biệt với Kinsta cho phép WP Rocket hoạt động tốt với bộ nhớ đệm Kinsta của bạn. Điều đó thật tuyệt vì WP Rocket làm được nhiều điều hơn cho hiệu suất của WordPress ngoài việc lưu vào bộ nhớ đệm, bao gồm cả việc giúp bạn loại bỏ các tài nguyên CSS và JavaScript chặn hiển thị trên trang web WordPress của bạn Sử dụng tên lửa WP? . Dùng thử Kinsta miễn phí Khi bạn cài đặt và kích hoạt WP Rocket, hãy chuyển đến tab Tối ưu hóa tệp. Sau đó, kích hoạt hai tùy chọn này
Sau khi kích hoạt hai tính năng này, trang web thử nghiệm của chúng tôi cũng đã vượt qua kiểm tra “loại bỏ tài nguyên chặn hiển thị” trong PageSpeed Insights. WP Rocket cũng quản lý để loại bỏ nhiều tài nguyên chặn kết xuất hơn so với thiết lập JavaScript Tự động tối ưu hóa/Không đồng bộ Và đó là cách loại bỏ tài nguyên chặn hiển thị trên trang web WordPress của bạn Bạn muốn loại bỏ các tài nguyên chặn hiển thị trong #WordPress? . Kiểm tra cách điều chỉnh cài đặt của họ và làm cho trang web của bạn nhanh hơn. ⚙️🏃♀️Nhấp để TweetTóm tắtCác tài nguyên chặn hiển thị làm chậm thời gian tải trang được cảm nhận của trang web WordPress của bạn bằng cách buộc trình duyệt của khách truy cập trì hoãn hiển thị nội dung trong màn hình đầu tiên trong khi trình duyệt tải xuống các tệp không cần thiết ngay lập tức Để giúp khách truy cập tải phần hiển thị trên trang của bạn nhanh hơn, bạn nên trì hoãn việc tải các tài nguyên không cần thiết ngay lập tức Để loại bỏ các tài nguyên chặn hiển thị trên WordPress, bạn có thể sử dụng các plugin có sẵn Đối với giải pháp miễn phí, bạn có thể sử dụng kết hợp Autoptimize và Async JavaScript, hai plugin từ cùng một nhà phát triển Nếu bạn sẵn sàng trả tiền, bạn có thể sử dụng WP Rocket, cung cấp tích hợp đặc biệt với Kinsta và có thể trợ giúp với nhiều điều chỉnh hiệu suất WordPress khác Bạn có thêm câu hỏi nào về cách loại bỏ tài nguyên chặn hiển thị trên WordPress không? Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm
Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn |
