DNS Prefetch and Link prefetching in HTML5 is a method to resolve the fully qualified domain names before an user tries to get the linked static files. In other words, DNS Prefetch can significantly increase the Page Loading speed as the time that is consumed for DNS resolution is highly variable, even before the file is requested on demand, if the domain name is resolved, it will be faster to GET the file. The implementation is quite easy. There are important things around Link prefetching in HTML5 and web, right now – first is HTML5 vocabularies and HTTP 2.0.
Basics of DNS Prefetch and Link prefetching in HTML5
Link prefetching is a proprietary terminology which gives the web browsers a hint about the static documents which it can pre-fetch. A web page provides a set of prefetching hints to the browser and after the browser has finished loading the page and an idle time has been passed, it begins silently prefetching the specified documents in background, storing them in cache. When the user visits or uses one of the prefetched documents, it can be served up quickly out of the browser’s cache.
Link prefetching is a W3C Candidate Recommendation for HTML5. It is partially implemented in Mozilla Firefox and a different but related concept is implemented in Google Chrome. Internet Explorer 9 and newer instead use DNS prefetching too. Examples :
Chromium watches for an HTTP header of the form “X-DNS-Prefetch-Control” :
---
1 | http://www.chromium.org/developers/design-documents/dns-prefetching#TOC-DNS-Prefetch-Control |
DNS Prefetch and Link prefetching in WordPress
We can simply add the snippet to call the CSS or JS files from active theme or child theme’s functions.php file :
There are couple of Plugins :
1 2 | https://wordpress.org/plugins/link-prefetching/ https://wordpress.org/plugins/dns-prefetch/ |
Likewise, we can add for header scripts :
1 2 3 4 5 | add_action( 'wp_head', 'theme_dns_prefetch', 400 ); function theme_dns_prefetch() { $dns_prefetch = array(); // stuffs goes here } |
A complex example with Google Analytics and CDN :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | add_action( 'wp_head', 'my_dns_prefetch', 500 ); function my_dns_prefetch() { global $wp_scripts, $wp_styles; $dns_prefetch = array(); $theme_options= get_option( 'options_my_child_theme_name_function' ); if ( isset($theme_options['analytics']) && $theme_options['analytics'] ) $dns_prefetch[]= '//ssl.google-analytics.com'; $upload_url_path = get_option('upload_url_path'); if ( $upload_url_path && strpos($upload_url_path, site_url('/')) !== 0 ) $dns_prefetch[]= $upload_url_path; if ( get_option('show_avatars') && ( is_admin_bar_showing() || ( is_singular() && comments_open() ) ) ) { $dns_prefetch[]= '//secure.gravatar.com'; $dns_prefetch[]= '//0.gravatar.com'; } $scripts = array( $wp_styles, $wp_scripts ); foreach ( $scripts as $wp_files ) { if ( count($wp_files->queue) ) { $dirs = array( '/wp-admin/', '/wp-include' ); foreach ( $wp_files->queue as $handle ) { if ( !isset($wp_files->registered[$handle]) ) continue; $wp_file = $wp_files->registered[$handle]; if ( strpos( $wp_file->src, $wp_files->base_url ) !== 0 && !in_array( substr($wp_file->src, 0, 10), $dirs ) ) $dns_prefetch[]= '//'.reset( explode( '/', str_replace( array('https://', 'http://'), '', $wp_file->src ) ) ); } unset($dirs, $wp_file, $handle); } } unset($scripts, $wp_files); } |
Google Page Speed Module supports automated Pre-Resolve DNS :
1 | https://developers.google.com/speed/pagespeed/service/PreResolveDns |
