百度站长工具推出以后没有怎么关注,直到用时,才发现这手机端的速度优化真的不是盖的。

什么是MIP?

MIP (Mobile Instant Pages - 移动网页加速器), 是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。

MIP 主要由三部分组织成:

  • MIP HTML
  • MIP JS
  • MIP Cache

MIP HTML 基于 HTML 中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使 HTML 能够展现更加丰富的内容;MIP JS 可以保证 MIP HTML 页面的快速渲染;MIP Cache 用于实现 MIP 页面的高速缓存,从而进一步提高页面性能。

WordPress 如何应用 MIP ?

首先,你要区分一下自己的主题是自适应的还是pc手机分离的。这边推荐选择PC和手机端分离的模式,为什么?

  • 方便改造代码结构;
  • MIP禁止引入基于jQ的效果,如果你网站效果很多,那引入后会非常蛋疼。

然后,我们来看头部使用规范

  • 起始标签使用 <!doctype html>
  • html 标签必须加上 mip 标记,即: <html mip>
  • 必须包含 <head>和 <body>标签
  • 必须在 head 标签中包含字符集声明: <meta charset="utf-8">,字符集统一为utf-8
  • 必须在 head 标签中包含 viewport 设置标签: <meta name="viewport" content="width=device-width,initial-scale=1">,推荐包含minimum-scale=1
  • 必须在 head 标签中包含 < link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" >
  • 必须在 body 标签中包含 <script src="https://mipcache.bdstatic.com/static/v1/mip.js" ></script >
  • 必须在 head 标签中包含 <link rel="canonical" href="http(s)://xxx" >

案例:

<!DOCTYPE html>  
<html mip>  
<!-- 注意html标签后面要跟mip-->  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">  
  <title>MIP改造案例(你原本手机端主题的Title部分)</title>  
  <meta name="description" content="" />  
  <meta name="keywords" content="" />  
  <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">  
<!-- 添加canonical属性开始-->  
  <?php  
    if(is_home()){  
        echo '<link rel="canonical" href="'.get_bloginfo('url').'" />'."\n";  
    }else  
    if(is_tax() || is_tag() || is_category()){  
        $term = get_queried_object();  
        echo '<link rel="canonical" href="'.get_term_link( $term, $term->taxonomy ).'" />'."\n";  
    }else  
    if(is_page()){  
        echo '<link rel="canonical" href="'.get_permalink().'" />'."\n";  
    }else  
    if(is_single()){  
        echo '<link rel="canonical" href="'.get_permalink().'" />'."\n";  
    }  
  ?>  
<!-- 添加canonical属性结束-->  
  <style mip-custom>  
  //你的style.css需要全部写在这里,除了头部,不允许其他地方再出现style属性  
  </style>  
</head>

 

头部改造好以后,我们基本上就只需要改造一下页面内容里的img标签就可以了。

即:img 替换为 mip-img

接下来,是底部的改造:

底部我们只需要将js属性添加上就可以了:

<mip-stats-baidu token="xxxxx"></mip-stats-baidu>  
<!--  
// 例:百度统计代码截取hm.src = "https://hm.baidu.com/hm.js?02890d4a309827eb62bc3335b2b28f7f";  
// hm.js? 后为你的统计 token。此例 token="02890d4a309827eb62bc3335b2b28f7f"  
-->  
<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>  
<!--引入mip的菜单组件-->  
<script src="https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js"></script>    
<!--引入mip的百度统计组件-->  
<script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>

接下来,给大家一个菜单导航的案例:

<div class="mip-nav-wrapper show top-toolbar">  
    <mip-nav-slidedown data-id="bs-navbar" class="mip-element-sidebar container mip-element mip-layout-container" data-showbrand="1" data-brandname="股市百科">  
        <nav id="bs-navbar" class="" >  
            <?php wp_nav_menu(array('theme_location'=>'header','container' => false,'menu_class'=>'nav navbar-nav navbar-right','depth'=>'0','echo'=>true)); ?>  
        </nav>  
    </mip-nav-slidedown>  
</div>

那么,有同学注意到了,文章内容里面的img标签、style属性没有办法处理,可以复制下面代码进行处理,放入function文件里:

//整理内容,代码来源https://zhangzifan.com  
add_filter('the_content', 'fanly_mip_images');  
function fanly_mip_images($content){  
    //WordPress文章内图片适配百度MIP规范  
    preg_match_all('/<img (.*?)\>/', $content, $images);  
    if(!is_null($images)) {  
        foreach($images[1] as $index => $value){  
            $mip_img = str_replace('<img', '<mip-img', $images[0][$index]);  
            $mip_img = str_replace('>', '></mip-img>', $mip_img);  
            //以下代码可根据需要修改/删除  
            $mip_img = preg_replace('/(width|height)="\d*"\s/', '', $mip_img );//移除图片width|height  
            $mip_img = preg_replace('/ style=\".*?\"/', '',$mip_img);//移除图片style 
            //$mip_img = preg_replace('/ class=\".*?\"/', '',$mip_img);//移除图片class 
            //以上代码可根据需要修改/删除 
            $content = str_replace($images[0][$index], $mip_img, $content); 
        } 
    } 
    //WordPress文章内样式去除 
    preg_match_all('/ style=\".*?\"/', $content, $style); 
    if(!is_null($style)) { 
        foreach($style[0] as $index => $value){ 
            $mip_style = preg_replace('/ style=\".*?\"/', '',$style[0][$index]);//移除文章内容中的style  
            $content = str_replace($style[0][$index], $mip_style, $content);  
        }  
    }  
  
    return $content;  
}

相对于,MIP也有主动推送功能,代码也同时分享:

//整理内容,代码来源https://zhangzifan.com  
add_action('save_post', 'fanly_mip_notify_baidu_zz', 10, 3);  
function fanly_mip_notify_baidu_zz($post_id, $post, $update){  
    if($post->post_status != 'publish') return;  
   
    $baidu_zz_api_url = 'http://data.zz.baidu.com/urls?site=xxx&token=xxxs&type=mip';  
    //请到 百度站长后台>移动专区>MIP引入>数据提交>主动推送(实时),复制接口调用地址  
   
    $response = wp_remote_post($baidu_zz_api_url, array(  
        'headers' => array('Accept-Encoding'=>'','Content-Type'=>'text/plain'),  
        'sslverify' => false,  
        'blocking' => false,  
        'body' => get_permalink($post_id)  
    ));  
}

代码改造至此,就基本结束了。

演示:

手机访问:http://www.gsbaike.com/

可以多打开几个页面,你会发现,响应速度是很快的,而且,这个网站是搭建在美国机子上的哦。