如何制作一个AMP或MIP网站

AMP(Accelerated Mobile Pages)和MIP(Mobile Instant Pages)技术分别是Google和百度推出的一种针对移动设备的页面优化方案，其主要实现思路是不在页面中使用影响加载和渲染的HTML标签，通过一些极致化的要求降低网页的加载时间，提高加载速度，详细的介绍和要求可以去它们各自的网站上介绍。

目前市面上已经有很多AMP或MIP的网站建设的思路，比如Wordpress的一些AMP插件，国内的甚至有一些专门用于MIP网站建设的CMS。本人认为，目前有些企业对自己的营销型网站中的AMP或MIP实现有些误区，主要表现如下：

1，单独建设一个AMP或MIP的站点：

很显然这本身是和这项技术的精神相违背的，AMP或MIP技术是用来帮助移动网站提高加载速度的，在实现时，每个网页都会在头部加入一个标签，指向备用网页，这个备用网页就是AMP页面，AMP页面上也通过标签指向一个规范网页，这个规范网页就是原始网页。AMP或MIP技术本身，就让帮助网页进行更先进的移动页面改造的，企业不再原来网站进行AMP或MIP改造，又徒增一个全AMP网站，简直是给自己找麻烦，不断浪费人力物力，没有起到任何帮助，而且还会分散网站管理精力。

2，使用Wordpress插件建设AMP网站：

目前有一些企业网站用的是Wordpress搭建的，企业借助Wordpress强大插件的功能，安装Wordpress的AMP插件，快速实现了AMP功能，这样去实现可以说是成本最低的一种方式，对于一些个人网站来说，这样去做当然无可厚非，然而对于营销型网站，通过插件实现的功能过于粗燥，无法很好的兼顾宣传转化，还可能把移动端的搜索流量导入到AMP页面，造成转化降低。

AMP或MIP最佳实践

个人认为AMP或MIP网站也应该像普通网站一样，搭建好了之后，无需投入其他精力，对网站进行正常的更新管理即可，也就是说，内容上保持和普通网站的同步更新，尽量降低后期单独的管理成本。

如何搭建AMP或MIP页面

搭建AMP或者MIP页面其实没什么太困难的地方，我们知道网页中的内容一般就2种来源，一种为后台添加的，一种为调用的，例如当前这篇文章，你所看到的内容就是用户添加的，而其他页面的相关部分，如头部，侧边栏则是通过标签调用的。通过标签调用的内容，是很好符合AMP或MIP规范的，例如HTML的图片展示<img src="调用标签" alt="调用标签">，而AMP的图片展示为<amp-img src="调用标签" alt="调用标签" layout="responsive" width="XXX" height="XXX"></amp-img>，但是用户在内容框里输入的内容，我们永远是不知道的，尤其是网站后台添加文站使用编辑器的时候，各种内容，样式，图片可能都被添加了，所以必须对用户的输入内容进行适当处理，才会保证不违反相关实现规范。下面是一个典型的用户添加的内容改造成AMP内容的函数，供参考：

function amp_filter($content){
    if(!is_mobile())
        return $content;
    $mipcontent = preg_replace('/<style.*?<\/style>/iS', '', $content);
    $mipcontent = preg_replace('/<script.*?<\/script>/iS', '', $mipcontent);
    $mipcontent = preg_replace('/<img([^>]*?)\/?>/iS', '<amp-img$1></amp-img>', $mipcontent);
    $mipcontent = str_replace('<iframe', '<amp-iframe layout="fixed-height"', $mipcontent);
    $mipcontent = str_replace('</iframe>', '</amp-iframe>', $mipcontent);
    $mipcontent = str_replace('<video', '<amp-video', $mipcontent);
    $mipcontent = str_replace('</video>', '</amp-video>', $mipcontent);
    $mipcontent = preg_replace('/\s+style="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+href="javascript[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+href=\'javascript[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+style=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+textvalue=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+textvalue="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+border=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+border="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+vspace=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+vspace="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace_callback('/<amp-img\s+([^>]*)><\/amp-img>/iS', function($m){
       preg_match_all('/([^=\s]*)=(["\'])(.*?)\2/i', $m[1], $ms);
       $attrs = array_combine($ms[1], $ms[3]);
       if((empty($attrs['width']) || empty($attrs['height'])) && function_exists('getimagesize')){
           $imgsrc = urldecode($attrs['src']);
           if(substr($imgsrc, '0', 4) != 'http')
               $imgsrc = ABSPATH.$imgsrc;
           elseif(strpos($imgsrc, 'https://www.example.com/') === 0){
                $imgsrc = ABSPATH.substr($imgsrc, 24);
           }else
               $imgsrc = esc_url($imgsrc);
           $imgsize = getimagesize($imgsrc);
           $attrs['width'] = $imgsize[0];
           $attrs['height'] = $imgsize[1];
       }
       if(empty($attrs['layout'])){
            $attrs['layout'] = 'responsive';
       }
       $returned = '';
       foreach($attrs as $k=>$v){
           $returned .= " $k=\"$v\"";
       }
        return "<amp-img$returned></amp-img>";
    }, $mipcontent);
    $mipcontent = preg_replace_callback('/<amp-video\s+([^>]*)>.*?<\/amp-video>/iS', function($m){
       preg_match_all('/([^=\s]*)=(["\'])(.*?)\2/i', $m[1], $ms);
       $attrs = array_combine($ms[1], $ms[3]);
       if(empty($attrs['width']) || empty($attrs['height'])){
           $attrs['width'] = 600;
           $attrs['height'] = 400;
    }
       if(empty($attrs['layout']))
            $attrs['layout'] = 'responsive';
       $returned = '';
       foreach($attrs as $k=>$v){
           $returned .= " $k=\"$v\"";
       }
        return "<amp-video$returned></amp-video>";
    }, $mipcontent);
    $mipcontent = preg_replace_callback('/<amp-iframe\s+([^>]*)>.*?<\/amp-iframe>/iS', function($m){
       preg_match_all('/([^=\s]*)=(["\'])(.*?)\2/i', $m[1], $ms);
       $attrs = array_combine($ms[1], $ms[3]);
       if(empty($attrs['width']) || empty($attrs['height']) || !is_numeric($attrs['width']) || !is_numeric($attrs['height'])){
           $attrs['width'] = 'auto';
           $attrs['height'] = 500;
            $attrs['layout'] = 'fixed-height';
       }
       if(empty($attrs['sandbox']))
            $attrs['sandbox'] = 'allow-scripts allow-same-origin';
       if(empty($attrs['layout']))
            $attrs['layout'] = 'responsive';
       $returned = '';
       foreach($attrs as $k=>$v){
           $returned .= " $k=\"$v\"";
       }
        return "<amp-iframe$returned></amp-iframe>";
    }, $mipcontent);
    return $mipcontent;
}

上面这个函数就是用某个用Domai CMS实现的网站内容过滤的一部分，通过系统的过滤器，在移动端对内容进行修改（此网站移动端就是AMP网站）。

哆麦CMS如何帮助企业制作AMP或MIP网站

双主题支持可以说是最好实现AMP和MIP功能的，你可以一个主题用通用模版，另一个主题使用AMP或MIP模板，Domai CMS的两套主题是强关联的，这意味着你可以在一个页面获取到另外一个对应页面的链接，可以根据情况，选择让用户点击链接后去哪里。

此外，还有一种实现方法，有些企业网站希望包含了PC版和移动版的基础上，再制作一个AMP版本，通过Domai CMS的网站差异化复用功能，也可以实现这个功能，而且网站内容是完全保持同步的。

其他

由于百度在移动端一再的摇摆，从熊掌号，MIP到小程序等等技术不断变更，且目前百度已经取消了MIP网页在搜索结果页面的标示，加上本人对MIP网站将尽一年的观察，很多原来的接口都已经无效，本人认为MIP不是百度移动端技术推广的重点，可以说，百度上基本上放弃了MIP技术*。