wordpress前端优化之dns-prefetch

 admin  Wordpress  2020-02-26

在网页体验中我们常会遇到这种情况，即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢？
一般来说这种延时的原因不会是对方网站带宽或者负载的原因，那么到底是什么导致了这种情况呢。假设是DNS的问题，DNS解析速度很可能是造成资源延时的最大原因。于是在页面header中添加了以下代码（用以DNS预解析）：

效果很不错（测试浏览器为IE8），再打开其他页面时百度分享按钮的加载明显提高！
下面我们来简单了解一下dns-prefetch：
DNS 作为互联网的基础协议，其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。
浏览器对网站第一次的域名DNS解析查找流程依次为：
浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索
域名DNS解析查找流程
Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性，由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置，所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现：
1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:
2. 在页面header中使用link标签来强制对DNS预解析: 注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。
PS：DNS预解析主要是用于网站前端页面优化，在SEO中的作用湛蓝还未作验证，但作为增强用户体验的一部分rel=”dns-prefetch”或许值得大家慢慢发现。
参考文章：百度泛用户体验-浏览器的加载与页面性能优化 http://www.baiduux.com/blog/2011/02/15/browser-loading/

如何让wordpress支持dns prefetch标签？

function v7v3_dns_prefetch() {
    }
add_action( 'wp_head', 'v7v3_dns_prefetch');

在wordpress主题的functions.php文件中加上以上代码后wordpress就会自动在头部载入dns prefetch标签，当然这个前提是你的主题加载了wp_head()钩子。不过以上代码是全局载入的，也就是说在每个页面都会载入这段代码，如果每个页面都设置了dns预取域名的话则每个页面都要对设置中的域名做一次预取操作这样一来预取标签就相当于没有用了，那么如何只让首页加载dns预取标签呢？其实我们可以给代码加上个判断，即可。

function v7v3_dns_prefetch() {
        wp_reset_query(); if(is_home()){?>

但是如果只在网站首页显示dns预取标签的话，入口页面不在首页的访客就感觉不到dns预取的加速效果了，其实我们可以给访客的浏览器写入一个cookies来判断访客是否为第一访问网站，如果是第一次访问则在入口页面输出dns预取标签。首先在functions.php文件中加上以下代码：

function set_newuser_cookie() {
if (!isset($_COOKIE['v7v3_cookie'])) {
setcookie('v7v3_cookie', 1, time()+1209600, COOKIEPATH, COOKIE_DOMAIN, false);
}
}
add_action('after_setup_theme', 'set_newuser_cookie');
然后在主题文件夹下新建一个dns.php文件并加入以下代码：
 //开启dns预取';
}
    elseif (isset($_COOKIE['v7v3_cookie'])) { //判断是否为初次访问
        echo '';
            }
        else        {
        echo '';
            }
?>

然后在主题的header.php文件的标签之前加入以下代码：

wordpress优化文章来源：http://v7v3.com/wpjiaocheng/201308250.html