Nếu bạn chạy trang web của mình thông qua Lighthouse, bạn có thể nhận thấy đề xuất xóa các tài nguyên chặn hiển thị.
Bằng cách trì hoãn JavaScript và đặt các kiểu CSS quan trọng trong dòng, bạn có thể loại bỏ các tài nguyên trong WordPress làm chậm quá trình hiển thị. Điều này được hỗ trợ bởi phần lớn các plugin bộ đệm, Tự động tối ưu hóa và JavaScript không đồng bộ. Cả Elementor và Divi đều có các cách tích hợp sẵn để loại bỏ các tài nguyên ngăn trang hiển thị, bằng cách sử dụng CSS nội tuyến và hoãn lại. Việc xóa mã CSS, JavaScript và bên thứ ba không cần thiết cũng có thể hỗ trợ giải quyết vấn đề này.
Trong bài viết này, chúng tôi sẽ xác định các tài nguyên chặn hiển thị và tìm hiểu những lợi ích của việc loại bỏ chúng khỏi trang web của bạn. Sau đó, chúng tôi sẽ trình bày năm cách thay thế để loại bỏ chúng cho bạn.
Tài nguyên chặn hiển thị là gì?
Hiểu quy trình tải trang web điển hình là rất quan trọng trước khi chúng tôi xem xét kỹ hơn các tài nguyên chặn hiển thị. Toàn bộ nội dung trang web của bạn phải được hiển thị (hoặc tải xuống) bởi trình duyệt của khách truy cập sau khi họ nhấp vào liên kết đến trang web đó. Nó đọc tất cả HTML, CSS và JavaScript trên trang web của bạn từ trên xuống dưới. Trang web của bạn sẽ không hiển thị với khách truy cập cho đến khi trình duyệt đọc xong hàng đợi tập lệnh này. Họ có thể phải đợi lâu nếu có tài nguyên chặn hiển thị. Về cơ bản, tệp CSS hoặc JavaScript ngăn trình duyệt tải nội dung khác trong khi nội dung đó đang được xử lý là tài nguyên chặn hiển thị. Điều này có thể dừng quá trình hiển thị và làm cho trang có vẻ chưa hoàn thành hoặc trống.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờKhi có tài nguyên chặn hiển thị trên trang web của bạn, các tệp bổ sung sẽ được tải ở đầu mã. Trước khi xem trang web, người dùng phải đợi trong khi các tệp này được xử lý. Các tài nguyên chặn hiển thị có khả năng ảnh hưởng đến một số chỉ số hiệu suất trang web. Chẳng hạn như, bức tranh có nội dung lớn nhất đo lường thời gian tải nội dung chính của trang. Lần đầu tiên tài liệu từ Mô hình đối tượng tài liệu (DOM) của trang web của bạn được trình duyệt hiển thị được gọi là bức vẽ nội dung đầu tiên. Totalblockingtime là thời gian giữa lần vẽ nội dung đầu tiên và thời gian tương tác (mất bao lâu để một trang trở nên tương tác hoàn toàn).
Mặc dù chúng không cần thiết để tải nhưng các tài nguyên chặn kết xuất có thể cản trở kết xuất. Kết quả là Trải nghiệm người dùng trên trang web của bạn có thể bị ảnh hưởng (UX). Vì vậy, điều quan trọng là bạn phải loại bỏ những thứ này để ngăn khách truy cập rời khỏi trang của bạn.
Lợi ích của việc loại bỏ tài nguyên chặn hiển thị
Người dùng Internet thường không thích chờ tải trang web. Một trang web nhanh có thể lôi kéo người dùng khám phá tài liệu của bạn và ngăn họ truy cập trang của đối thủ. Bằng cách loại bỏ các thành phần chặn kết xuất, bạn đang làm cho mã trang web của mình nhẹ nhất có thể một cách hiệu quả, đây có thể là bí quyết để nâng cao tốc độ trang. Bởi vì hiệu suất trang web và mức độ tương tác của người dùng là hai yếu tố mà những người khổng lồ trong công cụ tìm kiếm như Google xem xét khi đánh giá trang web, việc xóa các tệp chặn hiển thị có thể giúp nâng cao thứ hạng trên công cụ tìm kiếm của trang web của bạn.
Cách loại bỏ tài nguyên chặn kết xuất trong WordPress
Bạn có thể tự hỏi làm thế nào để loại bỏ các phần tử chặn hiển thị khỏi trang web của mình khi bạn đã hiểu cách phát hiện chúng trong WordPress. May mắn thay, chúng tôi đã tập hợp một danh sách nhiều phương pháp mà bạn có thể thực hiện để thực hiện điều này, bắt đầu với những phương pháp đơn giản nhất.
Tối ưu hóa tải CSS
Tăng tốc độ tải CSS trên trang web của bạn là một kỹ thuật để loại bỏ các tài nguyên chặn hiển thị. Trình duyệt tải trang web của bạn từ trên xuống dưới, như đã nói trước đây. Điều này có thể khiến quá trình tải mất nhiều thời gian hơn khi cần xử lý một số tệp nhất định. Điều quan trọng cần nhớ là chỉ một số tệp CSS phải tải để trang hiển thị. Do đó, bạn có thể hiển thị các tệp quan trọng nhất trước khi tối ưu hóa tải CSS. Có thể xóa CSS chặn kết xuất theo cách thủ công nhưng bạn cũng có thể cài đặt plugin để giúp mọi việc dễ dàng hơn. Bạn có thể tối ưu hóa trang web của mình ngay từ bảng điều khiển WordPress bằng Jetpack Boost. Plugin này giúp đơn giản hóa việc triển khai tải chậm, trì hoãn JavaScript không cần thiết và cải thiện tải CSS. Một trong những cách đơn giản nhất để loại bỏ tài nguyên chặn hiển thị trong WordPress là thực hiện việc này.
Bắt đầu bằng cách tìm kiếm Jetpack Boost trong Plugin Thêm mới trong bảng điều khiển WordPress của bạn. Cài đặt và sau đó bật plugin trên trang web của bạn.
Bạn có thể vào Jetpack My Jetpack nếu bạn đã tải Jetpack. Tìm Boost và chọn Kích hoạt từ danh sách hàng hóa Jetpack.
Sau khi plugin đã được kích hoạt, hãy nhấp vào tab Jetpack Boost và chọn Bắt đầu.
Trang web của bạn sẽ ngay lập tức nhận được đánh giá hiệu suất từ Jetpack. Bạn sẽ thấy điểm chữ cái cùng với thông tin trên máy tính để bàn và điểm di động của bạn.
Sau đó, kích hoạt tính năng này bằng cách cuộn xuống Tối ưu hóa tải CSS. Khi được kích hoạt, Jetpack Boost sẽ tăng CSS quan trọng cho trang web của bạn để trang web tải nhanh hơn.
Trì hoãn JavaScript không cần thiết
Bạn có thể thực hiện nhiều biện pháp hơn để loại bỏ các tài nguyên chặn hiển thị trong WordPress ngoài việc chỉ tối ưu hóa tải CSS. JavaScript không cần thiết cũng có thể được hoãn lại để tăng tốc độ tải trang web của bạn hơn nữa. JavaScript không cần thiết có thể bị trì hoãn để trì hoãn một số quy trình cho đến khi nội dung của bạn tải xong. Bạn có thể ngăn trình duyệt thực thi các tệp JavaScript nếu chúng không cần thiết để tải trang. May mắn thay, việc sử dụng plugin Jetpack Boost giúp việc này trở nên đơn giản. Bạn có thể dễ dàng trì hoãn JavaScript không cần thiết sau khi đã tối ưu hóa quy trình tải CSS. Bật công tắc của khu vực Trì hoãn JavaScript không cần thiết. Bạn có thể tìm thấy phần này bên dưới phần Tối ưu hóa tải CSS.
Plugin sẽ cập nhật đánh giá về hiệu suất tổng thể của trang sau khi bạn bật cài đặt này. Điểm của bạn cả trước và sau khi sử dụng Jetpack Boost sẽ được hiển thị.
Hãy xem điểm số trong ảnh chụp màn hình được chụp cả trước và sau khi chúng tôi hoàn thành quy trình này. Bạn sẽ lưu ý rằng việc tăng tốc độ trang được thực hiện bằng cách trì hoãn JavaScript không cần thiết và tải CSS hiệu quả hơn. Các trình duyệt có thể tải nội dung của bạn nhanh hơn vì chúng không phải thực thi các tập lệnh lớn.
Trì hoãn hình ảnh ngoài màn hình
Mặc dù hình ảnh không phải là tài nguyên ngăn các trang hiển thị, nhưng bạn có thể muốn nghĩ đến việc tăng tốc thời gian tải của chúng. Các trang web thường có hình ảnh ngoài màn hình không hiển thị cho đến khi người dùng tương tác với trang, chẳng hạn như cuộn. Bạn có thể trì hoãn những thứ này với tải chậm vì chúng không cần thiết để tải trang web. Chỉ những hình ảnh mà khách truy cập có thể nhìn thấy được tải một cách lười biếng. Những ảnh này sẽ tải ngay trước khi chúng hiển thị trên trang sau khi người dùng cuộn. Trình duyệt sẽ cố gắng tải mọi hình ảnh trên một trang cùng một lúc nếu tính năng tải chậm không được bật. Tài liệu của bạn tải càng lâu thì càng có nhiều khả năng khách truy cập sẽ rời khỏi trang web của bạn.
Tải thường xuyên có thể không thành vấn đề nếu khách truy cập đang sử dụng máy tính để bàn. Mặt khác, điện thoại thông minh và máy tính bảng có màn hình nhỏ hơn và băng thông ít hơn. Trang web của bạn có thể tiêu tốn nhiều băng thông hơn và mất nhiều thời gian hơn để tải đối với người dùng điện thoại di động nếu trang web tải đầy đủ tất cả ảnh cùng một lúc. Vấn đề này được giải quyết thông qua quá tải.
Để bật chế độ tải chậm trên trang web của bạn, hãy sử dụng Jetpack Boost. Chỉ cần tìm tùy chọn Tải hình ảnh lười biếng và kích hoạt nó.
Người xem sẽ chỉ thấy hình ảnh tải trên trang web của bạn khi họ cuộn xuống trang nếu bạn làm điều này. Mặc dù ảnh không phải là tài nguyên hiển thị các khối, nhưng việc cho phép tải từng phần có thể tăng tốc trang của bạn.
Loại bỏ tài nguyên chặn kết xuất với Elementor/Divi
Cả Elementor và Divi đều bao gồm các tùy chọn để loại bỏ các tài nguyên cản trở kết xuất.
Bật tính năng Tải CSS và phông chữ tuyệt vời trong dòng được cải thiện trong cài đặt Thử nghiệm Elementor của bạn để tải CSS và phông chữ nội tuyến, khiến chúng không bị chặn kết xuất. Tải nội dung được cải thiện loại bỏ CSS/JavaScript không cần thiết, giúp cải thiện các chỉ số quan trọng cơ bản của web theo nhiều cách khác nhau.
Bằng cách áp dụng CSS quan trọng, trì hoãn CSS/JavaScript và tải trực tiếp phông chữ của bạn, các tùy chọn hiệu suất của Divi cũng có thể giảm các tài nguyên chặn hiển thị.
Xóa JavaScript chặn hiển thị theo cách thủ công
Bạn cũng có thể xóa tài nguyên chặn hiển thị theo cách thủ công, mặc dù cài đặt plugin tối ưu hóa là tùy chọn dễ dàng hơn nhiều. Tốt nhất, bạn chỉ nên nghĩ về lựa chọn này nếu bạn là một lập trình viên có kinh nghiệm. Nếu bạn muốn cắt giảm số lượng plugin trên trang web của mình, quy trình này cũng có thể hữu ích. Bạn có thể đặt thuộc tính async hoặc defer cho các tệp của mình để giúp JavaScript chạy hiệu quả hơn. Trình duyệt sẽ được hướng dẫn hiển thị riêng các tập lệnh không quan trọng bằng cách đánh dấu chúng như vậy. Cả hai đặc điểm có thể được sử dụng để tăng tốc độ tải thông tin HTML.
Tệp HTML được phân tích cú pháp theo cách thông thường cho đến khi gặp tệp tập lệnh. Quá trình phân tích cú pháp sau đó sẽ dừng lại trong khi nó định vị tập lệnh. Sau khi tải xuống và chạy nó, quá trình phân tích cú pháp sẽ tiếp tục.
Trong khi xử lý HTML còn lại, trình duyệt có thể tải xuống JavaScript nhờ tính năng không đồng bộ. Sau khi tải xuống, nó có thể tạm dừng xử lý HTML và chạy tập lệnh.
Thuộc tính defer hoạt động tương tự, cho phép trình duyệt tải xuống tập lệnh trong khi phân tích cú pháp HTML. Điểm khác biệt là nó cũng trì hoãn việc chạy tập lệnh cho đến khi quá trình phân tích cú pháp HTML hoàn tất.
Bạn phải bao gồm một đoạn mã trong tệp tin functions.php của mình để triển khai một trong hai thuộc tính này. Trước tiên, bạn phải tìm thẻ script> của tài nguyên chặn kết xuất. sau đây dưới dạng thuộc tính không đồng bộ:
<script src="resource.js" async></script>Thay vào đó, hãy xem xét cách một tập lệnh có thể xuất hiện khi thuộc tính defer được sử dụng:
http://resource.jsMặc dù một plugin có thể đảm nhận các thuộc tính này cho bạn, nhưng việc tự làm nó có thể phù hợp với sở thích của bạn hơn. Nếu vậy, điều quan trọng là phải hiểu khi nào nên áp dụng từng thuộc tính. Bạn phải sử dụng thuộc tính trì hoãn cho các tập lệnh không cần thiết phụ thuộc vào tập lệnh khác. Tùy chọn không đồng bộ phù hợp với bất kỳ tập lệnh nào khác.
Áp dụng các thuộc tính không đồng bộ hoặc trì hoãn bằng plugin
Sử dụng plugin như Async JavaScript nếu bạn gặp sự cố khi chỉnh sửa tập lệnh theo cách thủ công. Bạn có toàn quyền kiểm soát tập lệnh nào có thuộc tính async hoặc defer nhờ công cụ này.
Sau khi plugin đã được cài đặt, hãy chọn Bật JavaScript không đồng bộ trong Cài đặt JavaScript không đồng bộ.
Tiếp theo, chuyển đến phần có tiêu đề Phương thức JavaScript không đồng bộ. Bạn có thể chọn bật thuộc tính không đồng bộ hoặc trì hoãn tại đây.
Bạn nên loại trừ các tập lệnh này vì nhiều plugin phụ thuộc vào jQuery. Việc áp dụng các thuộc tính không đồng bộ cho jQuery có thể khiến trang web của bạn bị hỏng.
Khi nghi ngờ, bạn có thể sử dụng thuộc tính defer, nhưng loại trừ hoàn toàn jQuery là cách tốt nhất.
Giờ đây, bạn có thể chỉ định tập lệnh nào bạn muốn chạy không đồng bộ hoặc trì hoãn. Bạn phải cẩn thận đặt từng tập lệnh vào phần thích hợp.
Bạn có thể liệt kê bất kỳ tập lệnh nào bạn muốn loại trừ khỏi quy trình này trong phần Loại trừ tập lệnh.
Ngoài ra còn có các tùy chọn để loại trừ plugin và chủ đề ở cuối trang. Các tập lệnh cho bất kỳ chủ đề hoặc plugin nào bạn đề cập ở đây sẽ không áp dụng cho các đặc điểm không đồng bộ hoặc trì hoãn.
Sau khi thực hiện bất kỳ điều chỉnh cần thiết nào, bạn có thể nhấp vào Lưu Cài đặt. Cách tiếp cận này có thể là một sự thỏa hiệp hữu ích giữa việc thay đổi tập lệnh theo cách thủ công và sử dụng plugin để xử lý tác vụ cho bạn. Thay vào đó, bạn có thể loại bỏ các bước bổ sung này bằng cách sử dụng ứng dụng tất cả trong một như Jetpack Boost.
kết thúc
Bằng cách làm cho trình duyệt của khách truy cập hoãn hiển thị nội dung trong màn hình đầu tiên trong khi tải xuống nội dung không cần thiết ngay lập tức, các tài nguyên chặn hiển thị sẽ tăng thời gian tải trang được cảm nhận của trang web WordPress của bạ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 để hỗ trợ khách truy cập tải khu vực có thể xem được trên trang của bạn nhanh hơn. Sử dụng các plugin được tạo sẵn để loại bỏ các tài nguyên chặn hiển thị trên WordPress. Bạn có thể kết hợp Autoptimize và Async JavaScript, hai plugin được tạo bởi cùng một nhà phát triển, để có giải pháp miễn phí. Bạn có thể sử dụng WP Rocket, cung cấp tương tác cụ thể với Kinsta và có thể hỗ trợ nhiều điều chỉnh hiệu suất WordPress bổ sung, nếu bạn sẵn sàng trả tiền cho nó.
