Cách triển khai các phương thức tối ưu tốc độ load trong WordPress:
1. Preload:
Preload: To tell browsers to fetch static resources early (image, font, js, css, videos…)
+ Some plugins to test: Better resource hints (free plugin for CSS & Js); WP Rocket (paid plugin)
+ How to test this technique: check page source (<link rel=”preload” ….>)
2. Preconnect:
If resources are loaded from other domains (CDN, 3rd party providers…), Preconnect tells browsers to establish a connection to other domains in the background to save time for DNS lookup, redirection, TCP handshake, TLS negotiation,…
+ Plugin to test: Better resource hints, Perfmatters (extra tab)
+ How to test: view page source => <link rel=”preconnect”….>
3. Prefetch:
Prefetch: To let browsers to fetch next page & store it in the local cache and serve it quickly if an user navigates around (after 1st page)
3.1 Link prefetch: prefetch static resources (img, script, css…)
+ Plugin: Pre Party Resource hints plugin
+ How to check: <link rel=”prefetch” href=”url” as=”type of resource”>
3.2 DNS prefetch:
DNS prefetch to perform DNS lookup earlier & lower overall latency
+ How to use: using “perfmatters” or add the following snippet to functions.php:
//* 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);
4. Prerender:
Prerender helps load assets in the background but need to test carefully.
=> Nên sử dụng code, hạn chế plugin.
Source: https://geekflare.com/implementing-preload-prefetch-preconnect-in-wordpress/
