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/