瞭解MIP（Mobile Instant Pages）

時間  2019-11-08
標籤 瞭解 mip mobile instant pages 欄目 無線 简体版
原文   原文鏈接
 
什麼是mip？
mip是百度在2016年提出的移動網頁加速器項目。能夠簡單理解爲是一個規範。
 
mip能作什麼？
mip能幫助站長和網站開發者快速搭建移動端頁面。
 
mip怎麼實現加速的？
mip不僅是CDN加速，mip從前端渲染和頁面網絡傳輸兩方面進行優化，杜絕頁面渲染中的阻塞問題，提高頁面展示速度。
 
頁面渲染耗時主要分爲三類：DNS解析耗時、網絡傳輸耗時、瀏覽器渲染重繪耗時。mip加速的基本原理就是減小各個步驟的耗時：
  • 爲減小DNS解析，MIP-Cache將靜態文件以相對路徑存儲在百度CDN中；
  • 爲減小網絡傳輸耗時，MIP-JS控制靜態資源的按需加載，MIP-Cache系統優先從CDN讀取文件；
    • MIP-JS是MIP的運行環境，包括基本類引入（AMD），內置組件加載（mip-img），外置組件管理（組件css插入）以及組件佈局管理（解決佈局兼容性問題）
    • MIP-JS優勢：
      • 使用精簡的基礎類，儘可能減小網絡傳輸時間
      • 內置優秀的組件，在不阻塞瀏覽器渲染的前提下提供最好的交互體驗
      • 提供組件佈局管理，預先爲組件設定寬高，避免組件加載後的瀏覽器重佈局
  • 爲減小瀏覽器渲染重繪耗時，MIP-HTML對<img>、<video>等形成瀏覽器重繪的標籤進行了封裝控制。
    • img標籤替換成mip-img，利用懶加載和按需加載提升頁面的渲染速度
    • 自定義交互組件，如輪播、表單、分享等，依賴自身的腳本和MIP-JS就能運行，無需引入第三方庫。減小頁面發送的網絡請求和傳輸時間，加快了頁面的傳輸和渲染。
 
MIP和CDN區別？
  • MIP要求站點必須按照MIP標準進行修改或者從新制做，CDN只會站點提供節點加速服務，無需修改。
  • MIP服務器基本上是在用百度移動端的快照緩存服務器。而CDN提供的節點是沒法和百度服務器想媲美的。
  • MIP地址使用是百度緩存服務器域名，能夠提高必定安全性，而CDN仍是本身的域名。
  • MIP只針對移動頁面進行加速，不影響PC端，而CDN則能夠支持不一樣用戶端。
  • MIP是一項長久免費的開源計劃，而大部分CDN是須要付費使用的。
 
補充：
CDN（Content Delivery Network）加速原理：簡單說就是在不一樣地點創建內容緩存節點，經過負載均衡技術，將用戶的請求定向到最合適的緩存服務器上去獲取內容。
 
MIP-Cache能夠理解爲一套CDN緩存系統。MIP-Cache給經過MIP規範和MIP校驗的MIP頁面提供靜態文件（圖片、外鏈css等）的緩存服務，在緩存靜態文件的同時，HTML頁面自己會被改寫，引用圖片的地址會被改爲MIP-Cache中的圖片地址。這樣就能夠避免從不一樣域名下讀取靜態文件，使用同源策略減小DNS解析時間，可以加速加載速度。
 
MIP-Cache更新和校驗策略：
MIP-Cache會按期從新抓取MIP頁並進行校驗，知足頁面更新需求。
在MIP-Cache中：
  • 頁面的緩存時間是最短52分鐘~最長5天（具體時間由該頁面用戶點擊量和站點自己穩定性決定）
  • 圖片緩存時間爲10天
  • MIP-JS組件文件的緩存時間爲10分鐘
  • MIP-Cache快速更新機制，MIP-Cache開放了單獨清理的接口，具體參考 MIP-cache 清理，生效時間大概5min
     
注意： MIP-Cache目前限制100s只能夠更新10條，若是MIP站點是https協議，那麼$api應該是$api = 'http://mipcache.bdstatic.com/update-ping/c/s/';
 
移動站應該嘗試百度mip的五個緣由
  1. 加速移動端頁面
  2. 提高到達率和用戶體驗，更少的流失率
  3. 百度搜索提權，更大的用戶量
    • 百度的天然結果是根據用戶點擊和頁面質量排名的。《百度搜索Mobile Friendly標準》的頁面可讀性包含了：頁面加載速度體驗、頁面結構、頁面瀏覽體驗。
  4. 開發簡單，遷移成本低
  5. 已有組件兼容性好，也可個性化定製新組件
 
用百度MIP快速搭建體驗友好的移動頁面
一、Doctype改造：將<!DOCTYPE ****>改成<!DOCTYPE html>
 
二、<html>標籤改造：<html xmlns='http://www.w3c.org/1999/xhtml'>或<html lang='en'>改成<html mip>，注意所有小寫
 
三、Head部分改造：
  • <head>標籤必須徹底小寫
  • 頁面的編碼必須是utf-8，修改聲明爲<meta charset="utf-8">
  • 頁面中加入<meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>
  • 頁面中加入MIP專用樣式文件<link rel='stylesheet' type='text/css' href='https://mipcache.dbstatic.com/static/v1/mip.css'>
  • 告訴搜索引擎改頁面對應的標準html頁面地址，若是存在則標識<link rel='canonical' href='http://www.baidu.com'>其中href值修改成與當前mip頁面相對應的標準頁面（移動頁）url地址。若是隻有mip頁面沒有對應的標準頁面就將href修改成當前mip頁面地址就好了。
 
四、body內改造：
  • 首先body標籤必須小寫；
  • 將img、style、frame、form、input、textarea、select、option標籤替換成對應的mip組件標籤；
  • 引用MIP-JS運行環境：<script src='https://mipcache.dbstatic.com/static/v1/mip.js'></script>放在頁面的尾部。
 
五、使用MIP Cache注意事項
  • 通常cache圖片、腳本、樣式，作完上述4步後，修改資源地址爲相對地址或合法絕對地址（以校驗工具爲準）；
  • cache的內容須要更新要經過MIP數據提交中的更新數據接口，把更新的url連接推送過去，等待百度更新。
 
六、其餘組件使用
官方文檔包含了目前支持的全部組件，以百度統計爲例：
查找原有百度統計工具查看統計js代碼（全局查找關鍵字var_hmt關鍵字）獲取token（hm.js？以後的編碼），在頁面底部，全部script前放入代碼：
<mip-stats-baidu token="22090d4a309827eb62bc1335b2b28f11（網站統計token值）"></mip-stats-baidu>
最後去除原來的百度統計代碼。
 
canonical標籤
百度MIP規範要求必須添加標籤canonical，否則MIP校驗工具會報錯。
 
一、canonical標籤有什麼用？
canonical標籤用於關聯原頁面和MIP頁面，保證MIP頁面繼承原頁面的權重，在爬蟲抓取MIP頁後，會根據canonical標籤獲得對應的MIP頁面和原頁面的關係，在移動搜索時優先展示MIP頁面。
canonical標籤不寫或者寫錯都會致使MIP頁面不能和原頁面產生聯繫，致使權重丟失，MIP頁面不展現。
 
二、原頁面指什麼頁面？
原頁面是相對於MIP頁面來說的，若是在m.a.com/1.html的基礎上，mip改造後獲得mip.a.com/1.html，那麼m.a.com/1.html就是mip.a.com/1.html的原頁面。
 
三、標籤的正確寫法
canonical標籤添加在MIP頁面的<head>標籤中，href指向原頁面地址。
在mip.a.com/1.html頁面（MIP頁面）：
<link rel='canonical' href='http://m.a.com/1.html'>
 
補充：
href指向原則：href指向百度移動搜索導流最多的頁面。
不一樣狀況下href指向：
  • 若是一樣的內容既存在對應的pc頁面，也存在移動頁面，那麼href指向百度移動搜索流量大的頁面。
  • 若是是動態頁面，原頁面已經存在canonical標籤，則href指向與原頁面指向一致。
  • 若是原頁面有多個版式，href指向流量最大的頁面。
  • 若是沒有對應的原頁面url（如新建的mip站），或者直接在當前url進行MIP改造並直接生效 ，則href指向mip頁面自己。
 
使用規則：
  • <link rel="miphtml">在H5頁使用，指向對應內容的MIP頁，方便搜索引擎發現對應的MIP頁。
  • <link rel="canonical">在 MIP 頁中使用, 指向內容對應的 H5 頁面。
  • 若沒有 H5 頁，則指向內容對應的 PC 頁。
  • 若直接在原連接修改 MIP，則canonical指向當前 URL。
 
注意事項：
  • MIP頁面與原始頁面的主體內容應該大體相同。若是內容相差較大，被搜索引擎斷定主體內容不一致的話，會認爲canonical標籤無效。
  • 原頁面與MIP頁面的url的對應關係應該儘可能簡單、直接。原網頁出現的文檔名或者文檔id，在MIP頁面命名時候也要出現。簡單直接的對應關係有利於搜索引擎分析mip頁面與原頁面的關係，加快MIP頁面被收錄和展示的速度。
     如原頁面url爲：https://m.baidu.com/123.html
          
 
MIP廣告
目前，百度網盟廣告以及百度全網推薦已經接入MIP。使用mip-ad廣告組件，可以在內容秒開的基礎上，同時加載廣告內容。避免頁面展示初期因廣告加載慢致使廣告位空白的問題，提高廣告的曝光率。
 
版本升級
只須要替換線上引用的MIP文件爲v1版本，就能夠完成升級。升級帶來的好處就是減小將來的開發和維護版本。
 
MIP-CLI
一、MIP-CLI工具安裝與環境部署
   MIP-CLI：mip開發工具，用於MIP頁面和組件的開發和校驗。
  • 確保安裝了node（v>=4.x）和git，而後輸入npm install -g mip-cli，安裝好後輸入mip -v查看mip版本號。
  • 安裝mip-extension-optimizer，它是mip組件編譯工具，用於將mip-extension中的特定組件源碼編譯成js文件。輸入npm i -g mip-extension-optimizer
  • 建立開發文件結構
     打開https://github.com/Missup/mip-extensions，fork一份mip-extensions項目代碼，進入本身的mip-extensions項目頁面，克隆到本地文件夾（本身新建一個目錄mip-project），建議目錄結構以下：
     
     其中html文件夾用來存放咱們後續開發的mip頁面。
 
二、MIP-CLI工具調試MIP網頁
  • 初始化mip配置，在html目錄下輸入mip init將建立mip.config文件。
  • 新建一個mip頁面，在html目錄下輸入mip add index.html將新建一個index.html文件，這個頁面就是一個基礎的MIP頁面。固然，在新建頁面的時候能夠同時載入mip組件js腳本，如mip add index.html mip-share
  • 編寫mip頁面代碼，注意符合mip網頁規範，mip校驗規則地址：https://www.mipengine.org/doc/2-tech/2-validate-mip.html
  • 校驗MIP網頁：mip validate index.html，線上校驗器地址：https://www.mipengine.org/validator/validate
  • 調試MIP網頁：在html項目目錄輸入mip server，訪問http://127.0.0.1:8000進入調試頁面
    • mip server默認監聽8000和35730端口，若是端口衝突可在mip.config中修改啓動端口，也可使用mip server -f命令強制關閉當前佔用端口的node進程（windows下無效）。
 
三、MIP-CLI工具調試組件
  • 在mip-extensions倉庫中建立新的組件
    • 在mip-extensions目錄中建立組件：mip addelement mip-alert
    • 開發組件mip-alert.js用於定義組件，mip-alert.less用於定義組件樣式，README.md用於說明組件用法，package.json用於記錄組件版本及開發者信息
  • 預覽調試組件
    • 在mip-extensions目錄下啓動mip server來預覽組件，預覽頁面訪問的是README.md文件中的示例。若是代碼已經提交到mip-extensions-platform中，須要將組件文件夾複製到mip-extension中預覽
    • 打開調試網頁http://127.0.0.1:8000/會列出當前倉庫中的組件，點擊進入mip-alert組件預覽
      • 若是頁面不能預覽，將mip-extensions文件夾下的mip.config文件刪除
      • 預覽mip-extension-platform中的組件，須要將組件文件夾複製到mip-extension倉庫中，在mip-extension文件夾內使用mip server預覽
  • 在MIP頁引用本身編寫的MIP組件
    • 修改mip.config：進入mip-project/html文件夾下，修改mip.config文件的字段extensionsDir爲../mip-extensions
    • 在html目錄下建立mip-alert.html文件，並添加mip-alert組件：mip add mip-alert.html mip-alert；在body中引入<mip-alert alert-text='我是alert內容'>點擊觸發alert</mip-alert>
    • 在html目錄下啓動mip server：訪問http://127.0.0.1:8000進入mip-alert.html頁面
    • 組件提交到github倉庫時須要進行校驗：mip validateelement mip-demo，經過校驗後提交到倉庫，等待審覈。
 
四、MIP組件平臺使用說明，平臺地址： https://www.mipengine.org/platform/
  • 使用百度帳號登陸組件平臺；
  • mip組件編寫和測試，而後從組件平臺上傳組件，須要改下README.md中所需腳本的地址爲https://mipcache.bdstatic.com/extensions/platform/v1/mip-__/mip-__.js，注意地址須要包含‘platform’，eg：
  • 點擊上傳組件按鈕，上傳MIP組件zip壓縮包。組件經過校驗後能夠提交審覈。
  • 組件審覈會在一個工做日內，提交審覈後組件會被鎖定，不能再上傳或者修改。只有等待管理員經過審覈或者打回後才能繼續修改。
  • 組件上線後在本地能夠引入上線後的組件進行驗證。
  • 若是修改已經上線的組件，在修改代碼後，還須要修改package.json文件中的版本號，而後再次提交便可。
 
MIP和AMP的關係
  • AMP是一個開源性項目，MIP是這個開源項目的參與者
  • MIP維持AMP的目標，MIP在中國國內有一些特殊狀況的考慮，因此作了單獨的實現。
  • 一個站長開發了MIP如何遷移到AMP？目前MIP某些組件沒法實現百分百功能轉換。
  • MIP-Cache已經對部分AMP頁面作了支持。
  • 百度同時支持AMP和MIP的索引和打開
 
有了AMP，爲何還要作MIP？
AMP在中國的落地不是很理想，amp.js在中國不能訪問，AMP緩存在中國沒有服務，AMP不容許網頁彈層，不符合咱們的使用習慣。
 
關於流量和計費問題：
  • 開發MIP後，搜索流量是導流到MIP仍是原頁面？
    • 導流到MIP頁面，須要在MIP頁面中作好和原頁面的對應關係
  • MIP移動網頁加速器作了以後是隻針對移動百度展現仍是說對咱們其餘的正經常使用戶同樣顯示？
    • MIP頁面是能夠獨立運行的，能夠在瀏覽器中經過url直接訪問，不依賴百度結果頁。因爲MIP頁速度較快，體驗更優，會在百度移動結果頁有更高的權重。
  • 搜索結果打開的是百度域名，用戶分享是否也是百度連接？使用百度域名是否不利於網站的品牌傳播同時也會影響流量統計，如何解決？
    • 若是用戶經過組件分享，分享的標題、圖片和內容都是原頁面的內容，具體分享內容能夠在使用組件時定義。不會影響流量和品牌傳播。若是用戶直接從瀏覽器複製連接分享，那麼被分享的頁面是MIP Shell連接（MIP頁面連接），url中能看出原頁面的URL。統計代碼再頁面加載完成後都會生效，不會受到分享影響。
  • 搜索結果打開的是百度域名，是否影響廣告計費？
    • 從搜索結果點出的MIP頁面，頁面上的任何內容（包括但不限於廣告、在線諮詢、統計等組件）均視爲在原站點上投放和使用。
 
什麼網站適合加入MIP？
MIP已經能夠完美支持資訊、圖片、企業、小說、論壇等信息流類型的網站。複雜頁面暫不建議MIP改造。
網站加載速度慢，打開速度時間長；用戶體驗差，跳出率較高的網站建議MIP改造。
 
常見問題彙總：
一、MIP對什麼樣的內容有較好的效果？
內容瀏覽類的站點支持比較全面
 
二、MIP頁面發生錯誤會怎麼樣?
MIP有回退機制，訪問出問題後會直接回到原來的h5頁面，不會影響權重。
 
三、代碼適配站點如何使用MIP？
若是後端根據UA判斷是否爲移動端頁面，並返回頁面，那麼將返回的頁面MIP化便可。若是是前端判斷瀏覽器寬度或UA，再請求後端返回相應的頁面，則須要改變這套流程，使用後端判斷，或者直接改成響應式頁面。
 
四、是否必須是HTTPS？
MIP改造自己不須要支持HTTPS，可是若是頁面須要與服務端進行交互，好比發送統計，提交表單，獲取數據，須要支持HTTPS。
 
五、gbk編碼的網站如何使用MIP？
只能更改爲utf-8。
 
六、對於自適應站點，MIP對頁面的改造怎麼弄？
若是自使用站點是css的Media Query實現的，那麼不須要作什麼特殊改造；
若是是經過js計算實現的，則須要去除原有JS邏輯，改引用mip-js的方式實現。若是組件不在mip-js組件列表，須要反饋給mip，而後等待它們實現。。。。
 
七、MIP規範中寫道不能用link標籤引入樣式，是否是樣式都要寫到HTML頁面裏，而且只能出現一次style標籤？
MIP規範不建議外鏈樣式表，是爲了節省網絡加載時間，加速MIP頁面。開發時，樣式表能夠做爲單獨的文件維護，上線前經過一次編譯(fis3,grunt,gulp)實現文件內聯，將css做爲style標籤插入html，達到MIP要求。
 
八、MIP框架是否能夠和react等框架結合使用？
MIP與其餘框架（除zepto和jquery）及其組件不能結合使用。
 
九、MIP頁是否支持自定義cookie？實現登陸、統計、廣告等功能。
cookie可使用<mip-access>組件實現，使用方法詳見http://www.cnblogs.com/mipengine/p/mip-access.html
 
十、與服務端異步交互請求如何發出？
與服務端的交互請求須要自行封裝組件，在組件中能夠用fetch自行實現。
// get
fetch(location.href).then(function (res) {
    return res.text();
}).then(function (text) {
    fetchElement.innerHTML = 'fetch: ' + (text.search('mip-test') !== -1);
});
 
// jsonp
var fetchJsonp = require('fetch-jsonp');
fetchJsonp('xxx', {
    jsonpCallback: 'cb'
}).then(function (res) {
    return res.json();
}).then(function (data) {
    console.log(data);
});
 
十一、MIP化後對其餘搜索引擎抓取收錄以及SEO的影響？
在原頁面MIP化後，不會影響其餘搜索引擎的抓取記錄，也不會影響頁面權重。新增MIP頁面能夠經過robots.txt文件禁用其餘搜索引擎的抓取，從而保證原頁面權重。MIP相關內容能夠這麼寫（假設目錄是/mip/）：
// 這段代碼意思多是容許百度引擎抓取全部文件
User-agent: Baiduspider
（這裏不用寫關於mip的內容）
 
// 下面這段意思是禁止谷歌引擎抓取mip目錄下的文件
User-agent: Googlebot
Disallow: /mip/

 

MIP頁面效果精選

連接中帶有閃電標的頁面都使用了MIP技術，能夠做爲開發參考。 
請使用手機或移動端模擬器查看頁面效果。

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程