Tận dụng các tính năng hiện đại của trình duyệt như tải trước, tìm nạp trước, liên kết trước để tăng tốc trang web WordPress của bạn.
Là chủ sở hữu trang web, ai không muốn làm mọi thứ có thể để trang web tải nhanh hơn?
Làm cho trang web của bạn tải nhanh hơn trên toàn thế giới là một thách thức. Có một số điều bạn có thể thực hiện để tải tài nguyên trang web một cách nhanh chóng, bao gồm bật các mẹo trình duyệt sau. Đây còn được gọi là kỹ thuật sàng lọc trước.
Lưu ý: Các kỹ thuật gợi ý của trình duyệt không giúp ích nhiều khi bạn truy cập trang lần đầu nhưng các yêu cầu tiếp theo sẽ nhanh hơn.
Mức phí ban đầu
Bạn có thể sử dụng thẻ tải trước để yêu cầu trình duyệt tải xuống một số tài nguyên tĩnh trước đó. Đây có thể là hình ảnh, phông chữ, JavaScript, CSS, tập lệnh, video, v.v. Điều này giúp ưu tiên tải tài nguyên; do đó, hiệu suất được cải thiện.
Tải trước sẽ là một ý tưởng hay nếu bạn muốn người dùng truy cập nhiều trang sau này. Giống như cửa hàng Thương mại điện tử nơi người dùng truy cập trang sản phẩm và sau đó kiểm tra thông tin, so sánh với sản phẩm khác, thêm vào giỏ hàng, thanh toán, v.v.
Bạn có thể sử dụng các plugin sau để thiết lập tính năng tải trước.
Hướng dẫn nội dung tốt hơn – Plugin miễn phí để thiết lập tệp CSS và JS.
WP Rocket – một plugin cao cấp giúp tăng hiệu suất trang web bằng một số kỹ thuật cơ bản bao gồm tải trước bộ đệm và sơ đồ trang web.
Làm thế nào để bạn biết nếu tải trước được kích hoạt?
Cách nhanh nhất để tìm hiểu là xem nguồn trang. Bạn sẽ thấy một cái gì đó như dưới đây.
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
Không phải tất cả các trình duyệt đều hỗ trợ tải trước khi bạn nhập. Vì vậy, hãy kiểm tra ma trận tương thích trước khi thực hiện.
Kết nối ban đầu
Bạn có đang tải tài nguyên từ các miền khác không? Có lẽ CDN?
Nếu không và mỗi tài nguyên được tải từ miền duy nhất của bạn, điều này có thể không hữu ích.
Liên kết trước nhắc trình duyệt kết nối với các miền khác trong nền để tiết kiệm thời gian tra cứu DNS, chuyển hướng, bắt tay TCP, đàm phán TLS, v.v. Ý tưởng là giảm độ trễ để đảm bảo tải nhanh tài nguyên từ miền khác.
Một lần nữa, bạn có thể sử dụng tài nguyên tốt hơn đã nói ở trên hoặc plugin gợi ý cao cấp như perfcase.
Sau khi thiết lập các tài nguyên cần thiết, bạn sẽ thấy chúng trong nguồn trang như bên dưới.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Lưu ý: nếu bạn đang tải tài nguyên từ miền yêu cầu CORS, bạn cần chỉ định tài nguyên đó là nguồn gốc chéo và đầu ra sẽ như thế nào.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect tương thích với phiên bản Chrome, Edge, Firefox, Safari mới nhất.
Tải xuống ban đầu
Hãy để trình duyệt tìm nạp trang tiếp theo mà bạn cho là cần thiết khi người dùng điều hướng. Tìm nạp trước sẽ tìm nạp các tài nguyên cần thiết và lưu trữ chúng trong bộ đệm cục bộ để phục vụ chúng nhanh chóng khi cần. Có hai loại tìm nạp trước.
Tìm nạp DNS ban đầu – được giải thích bên dưới
Liên kết tìm nạp trước – được định cấu hình với . Được sử dụng để tìm nạp trước HTML hoặc tài nguyên tĩnh. Tài nguyên có thể được tìm nạp trước bằng cách sử dụng làm thuộc tính.
dưới dạng một thuộc tính, nó hỗ trợ nhiều tài nguyên khác nhau như âm thanh, video, tập lệnh, đường dẫn, kiểu, phông chữ, đối tượng, tài liệu, v.v. Tìm nạp trước liên kết có thể được định cấu hình bằng cách sử dụng plugin Gợi ý tài nguyên trước sự kiện.
Tìm nạp DNS ban đầu
Đang tải tài nguyên từ nhiều miền và muốn giải quyết chúng trong nền?
Thiết lập nhanh này có thể giúp giải quyết tất cả các miền tiềm năng sớm hơn, vì vậy, khi cần tài nguyên, thiết lập sẽ tải nhanh hơn. Điều này giúp giảm độ trễ tổng thể.
Giả sử bạn tải tài nguyên từ 3 miền và mỗi miền mất khoảng 100 mili giây để thực hiện tra cứu DNS, giúp bạn tiết kiệm được 300 mili giây độ trễ.
Điều đó không tuyệt sao?
Bạn có thể triển khai bằng plugin perfmatters hoặc thêm phần sau vào tệp functions.php của chủ đề nếu bạn không ngại chỉnh sửa các tệp chủ đề của mình.
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);Bạn có thể đọc thêm trên Tài liệu Web Mozilla.
kết xuất trước
Bạn có mong đợi khách truy cập trang web của mình điều hướng trang web tiềm năng của bạn không?
Trình kết xuất trước có thể giúp tải các tài nguyên này ở chế độ nền và khi người dùng nhấp vào chúng, họ sẽ nhận được chúng rất nhanh. Bạn có thể đạt được điều này với plugin Gợi ý tài nguyên trước bữa tiệc.
Hiển thị trước phù hợp với các trang hoặc nội dung nhẹ, nhưng hãy cẩn thận với nội dung nặng hoặc toàn trang vì nó có thể tăng mức sử dụng CPU và băng thông, đồng thời làm chậm trang web của bạn. Vì vậy, hãy thử với một tài nguyên nhỏ hơn và kiểm tra nó để đảm bảo không có tác dụng phụ.
Như bạn có thể thấy, có bốn plugin chính để triển khai chú giải công cụ trình duyệt trong WordPress. Chọn một trong những bạn thích và đáp ứng các yêu cầu.
Plugin đề xuất tài sản trước sự kiện – Plugin miễn phí cung cấp tìm nạp DNS, tìm nạp trước liên kết, kết xuất trước, liên kết trước và tải trước.
Gợi ý tài nguyên tốt hơn – Một giải pháp thay thế ở trên.
Một plugin miễn phí sẽ tốt miễn là nó được duy trì và hỗ trợ. Thật không may, đây không phải là trường hợp của nhiều plugin và do đó, đôi khi tốt hơn là chọn phiên bản trả phí. Phiên bản thương mại của plugin được duy trì chuyên nghiệp và cập nhật nhờ các bản sửa lỗi và bản sửa lỗi bảo mật tiêu chuẩn của WordPress. Nếu bạn sẵn sàng chi một vài đô la để tối ưu hóa hiệu suất trang web của mình, bạn có thể xem những điều sau đây.
WP Rocket – Uy tín, được tin tưởng bởi hơn 800.000 trang web. Nó có giá 49 đô la cho một trang web.
Nước hoa – Chi phí nhẹ và dễ theo dõi là 24,95 đô la cho mỗi trang web. Khi tôi viết, nó cung cấp các tính năng sau.
Đó là rất nhiều tối ưu hóa.
Đăng kí
Lõi WordPress nhẹ nhưng trở nên cồng kềnh tùy thuộc vào chủ đề và plugin bạn sử dụng. Và điều cần thiết là tối ưu hóa hiệu suất trang web của bạn để xếp hạng và chuyển đổi tìm kiếm tốt hơn. Các kỹ thuật trên rất dễ thực hiện, nhưng bạn không nên dừng lại ở đó.
Bạn cũng nên cân nhắc sử dụng CDN để lưu vào bộ nhớ đệm và phân phối nội dung nhanh hơn tới người dùng trên khắp thế giới. Có rất nhiều, nhưng tôi khuyên bạn nên dùng thử SUCURI, cung cấp cả CDN và bảo mật.
