- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
Tận dụng tính năng của trình duyệt hiện đại như tải trước (preloading), tìm nạp trước (prefetching), preconnect để làm cho trang web WordPress nhanh hơn.
Là một chủ sở hữu trang web, bạn sẽ không muốn làm mọi điều với kỹ thuật phức tạp để làm trang web nhanh hơn
Đảm bảo trang web tải nhanh hơn một cách nhất quán trên toàn thế giới là một thách thức. Có một vài điều bạn có thể làm để cải thiện tốc độ trang web một cách nhanh chóng, trong đó có kỹ thuật pre-browsing.
Lưu ý : kỹ thuật browser hints không giúp được gì nhiều khi bạn truy cập vào trang web ở lần đầu tiên, nhưng các lần truy cập tiếp theo sẽ nhanh hơn.
Preload
Bạn có thể sử dụng thẻ preload
để cho phép trình duyệt lấy một số tài nguyên tĩnh sớm hơn. Nó có thể là một hình ảnh, font chữ, Javascript, CSS, script, video, vv. Nó giúp ưu tiên cho việc tải tài nguyên; do đó, hiệu suất được cải thiện.
Nạp trước sẽ là một ý tưởng tốt để thực hiện nếu bạn mong đợi người dùng của bạn truy cập nhiều trang sau đó. Giống như web thương mại điện tử nơi người dùng truy cập các 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 vv
Bạn có thể sử dụng các plugin sau để thiết lập tính năng Preload.
Better resource hints – một plugin miễn phí để cấu hình CSS và JS.
WP Rocket – một plugin trả phí giúp tăng hiệu suất trang web với nhiều kỹ thuật thiết yếu, trong đó có tải trước bộ nhớ đệm và sitemap.
Làm thế nào để biết nếu tải trước được kích hoạt
Cách nhanh nhất để check là xem mã nguồn trang web. Bạn sẽ thấy một cái gì đó giống như dưới đây.
<link rel="preload" as="style" href="IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
Trước đây, Không phải tất cả trình duyệt hỗ trợ Preload. Vì vậy, hãy kiểm tra có hỗ trợ tính năng này cho trình duyệt của bạn tại đây.
Preconnect
Bạn sử dụng các tài nguyên từ 1 miền khác
có thể bạn đã tích hợp CDN cho WordPress
Nếu không mọi tài nguyên sẽ được nạp từ 1 tên miền duy nhất của bạn, điều này không được khuyến khích.
Preconnecting gợi ý trình duyệt để thiết lập kết nối đến tên miền khác trên nền ẩn backround để tiết kiệm thời gian cho DNS lookup , chuyển hướng, TCP handshake, TLS negotiation vv. Ý tưởng là để giảm độ trễ & tăng tốc tải tài nguyên nhanh chóng bằng cách phân chia từ một tên miền khác.
Một lần nữa, bạn có thể sử dụng plugin ở trên hoặc một cái trả phí khác như perfmatters.
Sau khi cấu hình các tài nguyên cần thiết, bạn sẽ thấy chúng trong mã nguồn trang web như dưới đây.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Lưu ý: nếu bạn đang tải các nguồn tài nguyên từ một tên miền mà đòi hỏi CORS thì bạn cần phải xác định đó là crossorigin
và kết quả sẽ giống như sau.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect có tương thích với phiên bản mới nhất của Chrome, Edge, Firefox, Safari.
Prefetch
Hãy để cho trình duyệt lấy trang tiếp theo mà bạn nghĩ rằng sẽ cần thiết khi người dùng điều hướng đến các nội dung khác trên web. Prefetch sẽ tải về các nguồn lực cần thiết và lưu trữ trong bộ nhớ cache cục bộ và sau đó hiện thị một cách nhanh chóng khi cần thiết. Có hai loại prefetch.
DNS prefetch – giải thích bên dưới.
Link prefetch – cấu hình sử dụng
< link url ..>
. Được sử dụng để prefetch HTML hoặc các tài nguyên tĩnh. Bạn có thể prefetch nguồn lực sử dụng as
như một thuộc tính.
<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">
Thuộc tính as
hỗ trợ các nguồn khác nhau như audio, video, script, track, style, font, object, document, vv Liên. Link prefetch có thể được cấu hình với sự trợ giúp của plugin Pre Party Resource Hints.
DNS Prefetch
Web đang tải các tài nguyên từ nhiều tên miền khác nhau và bạn muốn chúng chạy trên nền ẩn.
Thiết lập nhanh chóng này giúp bạn khai báo tất cả các tên miền sẽ được prefetch trước đó nên khi nguồn tài nguyên được yêu cầu, nó sẽ tải nhanh hơn. Điều này giúp giảm độ đáng kể khi tải trang.
Chẳng hạn bạn đang tải sources từ 3 domains, và mỗi domain phải mất khoảng 100ms để thực hiện DNS lookup, như vậy bạn sẽ tiết kiệm được 300ms cho thời gian trễ.
Điều này có thể thực hiện bằng cách sử dụng plugin perfmatters hoặc chỉ đơn giản thêm đoạn code sau đây trong tệp functions.php
với giao diện WordPress hiện tại của bạn.
//* 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);
Tham khảo thêm tại Mozilla web docs.
PreRender
Bạn có muốn người dùng truy cập trang web điều hướng đến các trang tiềm năng
PreRender có thể giúp load các files trong chế độ nền, và khi người dùng nhấp chuột vào nó, họ nó thể xem nó rất nhanh chóng. Bạn có thể đạt được điều này với plugin Pre Party Resource Hints.
Prerendering là phù hợp để tải trang hoặc file nhưng phải cẩn thận với toàn bộ trang web hoặc tài nguyên có kích thước lớn vì nó có thể làm tăng việc sử dụng CPU và băng thông và do đó sẽ làm chậm trang web. Vì vậy, hãy thử với các nguồn tài nguyên nhỏ hơn và kiểm tra nó trước để đảm bảo không ảnh hưởng tới tốc độ của trang web.
Như bạn thấy, có 4 plugins chính có liên quan đến công việc gợi ý trình duyệt tải tài nguyên trước cho WordPress. Chọn một plugin mà bạn thích. Trong đó:
Pre Party Resource Hints Plugin – (miễn phí) với tính năng DNS-prefetch, link prefetch, prerender. preconnect, và preload.
Better resource hints – một plugin khác cho tính năng tương tự.
WP Rocket – khá nổi tiếng, đáng tin cậy cho hơn 800.000 trang web đang sử dụng. Nó có giá $49 cho một trang web.
Perfmatters – giá $24,95 cho một trang web. Như tôi đã viết, nó cung cấp các tính năng sau.
Có rất nhiều option để tối ưu hóa.
Kết luận
Phiên bản WordPress core có trọng lượng khá nhẹ, nhưng nó trở nên cồng kềnh tùy thuộc vào những gì bạn thiết kế giao diện WordPress và cài đặt plugin bổ sung. Và, dĩ nhiên nó là điều cần thiết để thực hiện tối ưu hóa trang web của bạn tốt hơn & cải thiện xếp hạng tìm kiếm và chuyển đổi. Các kỹ thuật trên là dễ dàng để làm theo, nhưng bạn không nên dừng lại ở đó.
Bạn cũng nên xem xét sử dụng một CDN để tạo bộ nhớ cache và cung cấp tải nội dung nhanh hơn cho người dùng của bạn trên toàn cầu.
Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype