百度移動網頁加速器MIP(Mobile Instant Pages)問題解決方案大全

MIP 推出后,我們收到了一些站長的疑問?,F將常見問題整理出來,幫助大家了解 MIP 的知識

MIP (Mobile Instant Pages - 移動網頁加速器), 是一套應用于移動網頁的開放性技術標準。通過提供 MIP-HTML 規范、MIP-JS 運行環境以及 MIP-Cache 頁面緩存系統,實現移動網頁加速。關于MIP的基礎知識可以到MIP官網進行了解。為幫助站長和開發者更好地了解MIP,MIP開發團隊對大家的疑問進行了整理,幫助大家了解 MIP 的知識。

MIP 主要由三部分組織成:

  • MIP HTML:基于 HTML 中的基礎標簽制定了全新的規范,通過對一部分基礎標簽的使用限制或功能擴展,使 HTML 能夠展現更加豐富的內容;

  • MIP JS:可以保證 MIP HTML 頁面的快速渲染;

  • MIP Cache:用于實現 MIP 頁面的高速緩存,從而進一步提高頁面性能。


移動網頁加速器MIP的加速原理

slide1.jpg

經過精心設計的 JavaScript

為了去除臃腫的客戶端腳本,MIP 文件不允許自定義 JavaScript;對一些強依賴 JavaScript 的功能(如:廣告、統計和交互),MIP 提供與 MIP runtime 兼容的封裝好的組件來實現。

JavaScript 引用原則:

  • 目前 MIP 不允許用戶自定義 JavaScript,需要用 MIP 組件的形式引進來,從而確保安全性和性能表現

  • 可以引用 mip-iframe 來引入實現部分富交互的功能,這樣,即使開發時使用最影響性能的 document.write,也不會影響主頁面的渲染

  • MIP 組件是開源的,允許開發者自定義功能組件,項目也將持續提供多樣的組件,以適應不同的需求

所有靜態資源需要標明尺寸

在頁面開發時,資源常常不會被設定寬高,特別是使用廣告或者通過調用 `document.write() 注入的時候。由于資源大小不能確定,頁面經常要進行反復重新的繪制;

現在,MIP 要求將所有的資源(廣告、圖片、音頻和視頻)標明尺寸。當資源真正加載時,所有資源大小可以被立即推斷出并迅速的用于計算頁面布局,加載中的資源將無縫呈現,不必因為頁面頻繁更新布局而影響到用戶的閱讀體驗。

不允許任何機制阻止頁面渲染

開發者的任何自定義腳本,都需要用 MIP 的 tag 反饋給 MIP,例如 mip-ad、mip-iframe 等,這些方式不會阻塞頁面的 layout 和渲染。

控制外部資源加載

MIP runtime 會控制外部資源的額加載來確保其高效性,從而使用戶想閱讀的內容盡快出現在屏幕中。

封裝交互功能

MIP 提倡網頁能給用戶直接簡單的體驗,但這并不意味著 MIP 限制了頁面的生動和有趣。MIP runtime 提供了高度優化的被封裝的 JavaScript,開發者無需投入過多精力去實現復雜的交互功能。

建議使用 inline 的 css

css 的加載,會阻止頁面的渲染,css 內聯可以減少客戶端的開銷。

只允許 GPU 加速的動畫

MIP 只允許用 transforms 和 opacity 來完成動畫效果,當動畫能在 GPU 上執行時,僅觸發渲染層合并。

MIP 緩存

MIP 另一個重要的意義在于能夠幫站長加速網頁,百度將會把 MIP 網頁緩存到百度 CDN 中。只要符合 MIP 標準,都可以使用 MIP 緩存。

開放且持續更新

MIP 是一個開源項目,所有的標準并非一成不變。我們會持續不斷進行優化,期待您的共同參與!


MIP 內容聲明

從搜索結果頁點出的MIP頁面,其頁面上的任何內容(包括但不限于廣告、在線咨詢、統計等組件)均視為在原站點上的投放和使用。

MIP (Mobile Instant Pages - 移動網頁加速器), 是一套應用于移動網頁的開放性技術標準。通過提供 MIP-HTML 規范、MIP-JS 運行環境以及 MIP-Cache 頁面緩存系統,實現移動網頁加速。

移動站點可以根據需要使用MIP技術進行開發,從而達到H5移動頁面加速效果。

  1. 站點發布的MIP頁面,由站點開發人員采用MIP技術自行開發。開發與發布過程完全由站點把控。

  2. 采用MIP技術開發的H5頁面,頁面中展現的內容和功能,與普通H5頁面一樣,完全由開發方放置。

  3. 采用MIP技術開發的H5頁面,站點流量以及所投放廣告等內容的展現與點擊等使用情況,完全由開發方進行統計和監控。

  4. 在用戶使用搜索引擎時,為了保證MIP頁面的加速效果,搜索引擎可能會將MIP頁面緩存到離用戶更近的CDN服務器。目前,緩存刷新的平均時間為50分鐘左右。

因此,無論是從搜索點出的MIP頁面還是直接訪問的MIP頁面,頁面開發過程、展現內容、相關監控,均完全由站點開發方進行把控。在這兩種情況下的頁面上的任何內容(包括但不限于:廣告、在線咨詢、統計等組件)均視為在原站點上的投放和使用。


MIP 認知類問題

MIP 認知類問題

1.1 MIP 化的收益是什么?具體數據是怎樣的?

從目前收集到的數據來看,網站 MIP 化上線后,頁面速度提升 30%~80%,頁面到達率提升 5%~40%。

1.2 有沒有已上線MIP頁可以參考呢?

現在已經有上千家站點完成了MIP改造,點擊《MIP頁面效果精選》查看示例。

鏈接中帶有閃電標的頁面都使用了MIP技術,可以作為開發參考。

請使用手機或移動端模擬器查看頁面效果。

1.3 開發 MIP 后,搜索流量是導流到 MIP,還是導流到原頁面?

應該導流到 MIP 頁面,需要在 MIP 頁面中做好和原頁面的 對應關系。

1.4 MIP 移動網頁加速器做了之后是只針對移動百度的展示,還是說也對我們其他的正常用戶一樣顯示?

MIP 頁面是可以獨立運行的,可以在瀏覽器中通過 url 直接訪問,不依賴百度結果頁。由于 MIP 頁速度較快,體驗更優,會在百度移動結果頁有更高的權重。

1.5 搜索結果打開是百度的域名,用戶分享的是否也是是百度鏈接?使用百度域名是否不利于網站的品牌傳播同時也會影響流量統計,該如何解決?

答:如果用戶通過分享組件分享,則分享的標題,圖片和內容都是原頁面內容,具體分享內容可以在使用組件時定義。這種做法不會影響品牌傳播,也不會影響流量統計。如果用戶直接從瀏覽器復制鏈接分享,那么被分享的是當前頁面 URL (MIP Shell 鏈接),URL 中是能夠反解出原頁面 URL 的。統計代碼在頁面加載完成后都會生效,不會受到分享影響。

1.6 搜索結果打開是百度的域名,是否會影響廣告計費?

從搜索結果頁點出的MIP頁面,其頁面上的任何內容(包括但不限于廣告、在線咨詢、統計等組件)均視為在原站點上的投放和使用。詳情請見MIP 內容聲明。

1.7 如果采取新建一套 MIP 頁面的方式,假設新建 MIP 頁面出現問題,譬如改造錯誤、失效或者其他不可預知問題,百度的處理機制是怎樣的?

MIP 是有回退機制的,MIP 訪問出問題后,會直接回到原來的 H5 頁面;不會影響權重,MIP 會更被認可和優先。

1.8 MIP 可以加什么樣的廣告?

MIP 既可以加入百度聯盟廣告,也可以加入第三方廣告。

1.9 MIP 是否開源?

MIP 核心代碼和組件都是開源的,歡迎交流討論。

1.10 MIP 對什么樣的內容有較好的效果?

目前我們對內容瀏覽類的站點支持比較全面。后續,隨著不斷豐富的開放組件,MIP 可以支持更多類型的站點。

1.11 站長構建一個 MIP 的成本有多少?

MIP HTML 是基于 HTML 進行的優化。對于新建站點,按照 MIP 規范開發即可,沒有額外成本;如果是已有的頁面,需要具體看頁面生成方式,模板形式的改造一次性成本。

1.12 MIP 與 Mobile Friendly 是什么關系?

Mobile Friendly 是用于評估個頁面在手機端的瀏覽體驗,評估標準包括內容易讀性,功能易用性,廣告面積等。 而 MIP 是一套解決方案,不僅可以提升移動端瀏覽體驗,還會解決頁面加速和安全性的問題。 所以應用了 MIP 的頁面能夠提升一定的移動友好性,但不一定能達到 Mobile Friendly 的要求。

1.13 加了 MIP 標簽后對頁面的展示有沒有影響?

沒有影響。MIP 標簽會自帶一些樣式,但這些樣式是可以被覆蓋的。所以加了 MIP 標簽后網頁還可以保持原來的樣式。


站點MIP改造前需要哪些準備

站點MIP改造前準備

2.1 MIP 在原網站搭建,還是重新在新子域做,還是新目錄做?

答:都可以,這三種方案改造 MIP 都是可行的。做好 canonical 標簽 對應即可。

2.2 使用偽靜態 url 的網站如何使用 MIP?

MIP 頁面可能會被 MIP-Cache 緩存,所以用戶看到的不一定是動態的頁面。當需要更新頁面內容時,可通過 MIP 組件形式封裝 JS 請求,以及后續更新 DOM 的 JS 操作。

2.3 代碼適配站點如何使用 MIP?

區別討論。如果后端根據 UA 判斷是否為移動端頁面,并返回頁面,則將返回的頁面 MIP 化即可。如果是前端判斷瀏覽器寬度或 UA,再請求后端返回相應頁面,則需要改變這套流程,使用后端判斷,或直接改為響應式頁面。

2.4 是否必須是 HTTPS 才能 MIP 化,如果不是 HTTPS 會有什么影響?如何快速 HTTPS 化 ?

MIP 改造本身是不需要支持 HTTPS 的。但如果頁面需要與服務端進行交互,比如發送統計,提交表單,獲取數據,需要支持 HTTPS??焖龠M行 HTTPS 化可以通過百度云加速的 HTTPS 方案進行快速部署 HTTPS 環境。

2.5 gbk 編碼的網站如何使用 MIP?

更改成 utf-8 編碼后使用 MIP。gbk 編碼并不是國際通用標準,在一些手機上會有會顯示亂碼。


MIP前端改造,組件使用

MIP前端改造,組件使用

3.1 目前 MIP 組件之外的一些 JavaScript 插件如何支持?譬如廣告、統計、推薦,等等?

MIP 為了確保安全性和性能表現,不允許用戶自定義 JavaScript,需要用 MIP 組件的形式引進來;MIP 組件是開源的,開發者可以自行開發組件并提交給 MIP 組件庫??梢詤⒄?/span>MIP組件開發規范文檔來封裝組件并提交。

3.2 MIP 頁面中可以展現哪些元素?對于彈窗廣告有何限制?

MIP 頁面中可以展示所有原頁面的元素,在前端代碼中對于一些標簽做替換即可。比如,如果需要使用懸浮元素(position:fixed)需要改用 mip-fixed 組件或 mip-semi-fixed 組件。

3.3 MIP 提供的組件不能滿足交互需求怎么辦?

在 MIP 官方組件不能滿足需求的情況下,如果升級官方組件可以滿足,可以 提需求 或自己升級官方組件,MIP 項目組來審核;如果涉及到站點自身業務邏輯,可以自行封裝組件并通過 組件審核平臺 提交審核組件,審核通過后可以上線。

3.4 網盟反屏蔽廣告申請廣告位的時候,能否同時生成 MIP 頁面的廣告代碼片段?

暫時還是不支持直接生成的,需要人工的根據轉換規則將非 MIP 反屏蔽投放代碼轉換成 MIP 反屏蔽投放代碼。這個轉換規則還是比較清晰的,在 MIP 文檔 里有說明。

3.5 為什么投放網盟反屏蔽廣告,直接打開MIP頁廣告展現,在MIP預覽工具和百度搜索結果頁卻看不到廣告呢?

MIP預覽工具和百度搜索結果頁是https環境,會相應地引用https反屏蔽腳本。如果反屏蔽域名不支持https,就不能加載腳本了??梢詤⒖?/span>反屏蔽廣告組件文檔的注意事項,通過支持https來解決這個問題。

3.6 對于自適應站點,MIP 對頁面的改造要怎么弄?

MIP 改造主要有三步:

  1. 引用 MIP 提供的 JS 和 CSS

  2. 替換部分標簽為 mip-html 標簽

  3. 去除原有 JS 邏輯,改引用 mip-js 組件。

是否需要特殊改造,由網站對 “響應式” 的實現方式決定:

  • 如果您的自適應站點是用 CSS 的 Media Query 來實現的,那么不需要做特殊的改造,MIP 對 CSS 沒有限制。

  • 如果您的自適應是通過 JS 計算實現的,則需要進行相應的改造(見改造第 3 步)。 如果您需要的功能不在我們的組件列表里面,可以通過 github issues 給我們反饋。

3.7 MIP 規范中寫到不能用 link 標簽對樣式表進行加載,是不是我的樣式都要寫到 HTML 頁面里,并且只能出現一次 style 標簽?

MIP 規范不建議外鏈樣式表,是為了節省網絡加載時間,加速 MIP 頁面。 開發時,樣式表可以作為單獨的文件維護,上線前通過一次編譯(fis3,grunt,gulp)實現文件內聯,將 css 作為<style>標簽插入<html>, 達到 MIP 要求。

3.8 如何保證 MIP 頁面代碼符合規范,有校驗工具么?

代碼校驗工具地址為:https://www.mipengine.org/validator/validate。在 MIP 官網—常用鏈接中也可以找到。

3.9 react 能否和 MIP 結合使用?是否會和其他 js 框架(比如angular )結合?

MIP 與其他框架(除zepto和jquery)及其組件不能結合使用。交互功能可以通過引入 MIP組件實現。

3.10 MIP頁是否支持自定義cookie? 實現 登錄、統計、廣告等功能

cookie可以使用<mip-access>組件實現,使用方法見博客《MIP ACCESS細節剖析》。

3.11 MIP的統計功能如何實現的?

目前我們提供百度統計,天潤統計,第三方站長開發的 cnzz 統計,還有 mip-pix 自定義統計。在頁面中引入相應的組件就可以實現統計功能。

3.12 與服務端異步交互請求如何發出,如AJAX,官方提供了什么組件?

與服務端的交互請求比較個性化,需要自行封裝組件,在組件中可以用 fetch 自行實現。文檔請見官網。示例:

fetch(location.href).then(function (res) {
   return res.text();
}).then(function (text) {
   fetchElement.innerHTML = 'fetch: ' + (text.search('mip-test') !== -1);
});

3.13 第三方自定義組件的時候是否限制個數和規范?

暫無個數限制,規范需要通過FECS的規范檢查,請保證新提交的組件不重復實現已有功能。未來我們會開放MIP組件平臺,方便大家提交組件。

3.14 組件開發后多久可以上線?

組件開發按照 github 的標準,開發自測完成后,提交到 MIP 組件上線平臺。1個工作日內可以上線。

3.15 組件之間是否可以交互?

為了組件間的抽象分離,mip不建議做組件間的交互。但是可以通過dom加on屬性的形式控制。如mip-lightbox 彈層組件與mip-sidebar 側邊欄組件,點擊button按鈕可以觸發展開收起。

<button on="tap:my-lightbox.open" id="btn-open" role="button" tabindex="0">
   Open lightbox
</button>

<mip-lightbox
   id="my-lightbox"
   layout="nodisplay"
   class="mip-hidden">
   <div class="lightbox">
       <h1>Hello, World!</h1>
       <p> this is the lightbox</p>
   </div>
</mip-lightbox>

如果有遇到新的前端技術問題,可以通過 GitHub issues 與我們交流,提交 issue 可以按照博客文章操作。


百度MIP如何提交生效

4.1 如何提交 MIP 頁?MIP 推送 URL 限制是多少?

博客《百度站長平臺 MIP 引入工具》中有提交 MIP 頁的詳細教程。提交上限根據站點而不同,最少的上限是每天 10000 條 URL,上不封頂。

4.2 MIP 化后對其他搜索引擎抓取收錄以及 SEO 的影響如何?

在原頁面 MIP 化,不會影響其它搜索引擎的抓取收錄,也不會影響頁面權重。新增 MIP 頁可通過 robots.txt 文件禁用其它搜索引擎的抓取,從而保證原頁面的權重。MIP相關的內容可以這么寫(假設您的目錄是/mip/):

User-agent: Baiduspider
(這里不用寫關于mip的內容)

User-agent: Googlebot
Disallow: /mip/

4.3 針對擁有 PC、WAP、MIP 三套頁面的網站,如何進行移動適配工具和 MIP 工具提交?

答:MIP 頁面可單獨通過百度站長平臺的 MIP 引入 提交,不會影響 PC 和 WAP。

4.4 網站如何確認改造的 MIP 頁面已經在線上生效?

答:MIP 頁面都會使用百度搜索結果頁異步打開,只需要在百度搜索中搜索鏈接,并且打開后 URL 上是百度地址。

4.5 MIP 提交幾個月時間了,生效量比較少,是什么原因?

答:提交 MIP 頁面后,經過收錄、校驗、和生效三個步驟,才能在結果頁看到閃電標。

1)提交 url 后,spider 會去抓取收錄; 2)頁面收錄后,會進行 MIP 校驗,如果頁面不能通過 前端校驗,則說明頁面源碼不符合 MIP 規范,此時頁面 收錄 成功,但是并沒有 生效。 3)只有頁面符合 MIP 規范,并且能通過前端校驗,頁面才算生效,也就是搜索引擎看到的是帶閃電標志的頁面。

生效量少的原因也會根據不同站點而不同,請先確認頁面是否被收錄并且能通過 MIP 校驗,可以反饋問題到站長平臺,來定位具體原因。

4.6 MIP 頁面提交并收錄了為什么搜索結果沒有 MIP 閃電圖標。

這種情況大多數是因為 MIP 頁面亂碼或者頁面源碼不能通過 校驗 導致。如果還有其他問題,可以從站長平臺 反饋入口 反饋問題。

4.7 MIP 頁面提交給百度收錄后,為什么有些會被轉碼?

由于廣告不符合百度規范。MIP頁面跟普通頁面性質相同,都是可訪問的html頁面。百度搜索會將質量較低的頁面轉碼,無論是否是MIP頁面都會被轉碼。如果您的頁面被轉碼,請參考《百度移動搜索落地頁體驗白皮書——廣告篇》 修改頁面內廣告的投放。

4.8 為什么在搜索生效后,百度統計看不到數據?

  1. 百度統計組件使用:查看瀏覽器請求,如果有hm.gif請求發出,則說明百度統計組件使用正確。

  2. 百度統計后臺使用:如果不添加篩選項,是可以統計到全部頁面流量的,包括直接訪問MIP頁和MIP-Cache頁面。MIP-Cache流量URL有mipcdn.com或mipcache.bdstatic.com的特點,篩選可見。注意不能篩選m.baidu.com。

百度搜索相關問題,可以通過百度站長平臺的 反饋入口 反饋。


MIPCache

5.1 為什么要使用 MIPCache?

MIP-Cache 是百度提供的,所有從百度搜索結果頁打開的頁面都是 MIP-Cache 的頁面。

1. CDN 加速

CDN (Content Delivery Network) 加速原理,簡單來說就是在不同地點建立內容緩存節點。通過負載均衡技術,將用戶的請求定向到最合適的緩存服務器上去獲取內容。

MIP-Cache 可以理解為一套 CDN 緩存系統。當用戶從百度搜索結果頁訪問 MIP 頁面時,請求首先會發到 MIP-Cache CDN 服務器,如果頁面存在,則從 CDN 直接返回靜態頁面;如果頁面不存在或過期,則會請求第三方服務器(或站長自己使用的 CDN)。本次返回的符合 MIP 規范的頁面會同時加入 MIP-Cache,為下次頁面請求做準備。

2. 緩存靜態文件,同源策略加速

百度 MIP-Cache 給所有符合 MIP 規范,能通過 MIP 校驗的 MIP 頁面提供靜態文件的緩存服務,靜態文件包括圖片,外鏈 CSS 文件(不推薦)等。在緩存靜態文件的同時,HTML 頁面本身也會被改寫,引用圖片的地址會被修改為 MIP-Cache 中的圖片地址。

緩存靜態文件帶來最大的好處是避免從不同域名下讀取靜態文件,使用同源策略減少 DNS 解析時間,能夠加速加載速度。

3. 百度搜索的預取加速

頁面預取是指在搜索結果頁展示后,用戶點擊某條結果之前,搜索引擎就開始預測用戶可能點擊的結果,提前加載落地頁的內容。在用戶真正點擊這條結果時,結果的內容已經從遠端進入了瀏覽器緩存,省去了網絡加載時間。

搜索預取會請求 MIP-Cache 內容,所有進入 MIP-Cache 的頁面都被認為是合法的 MIP 頁(原理見下文)。目前 MIP 項目組正在討論預取的技術方案,請關注博客進展。

附: MIP-Cache 的更新和校驗策略

考慮到站長有更新頁面的需求,MIP-Cache 會定期重新抓取 MIP 頁并進行校驗。

在 MIP-Cache 中:

  • 頁面的緩存時間為52分鐘-5天(由該頁面用戶點擊量和站點本身穩定性決定)。

  • 圖片緩存時間為10天。

  • MIP-JS 組件文件的緩存時間為10分鐘。

在當前文件過期后,MIP-Cache 會重新抓取資源。如果是 HTML 頁面,MIP-Cache 還會對頁面文件進行 MIP 規范校驗。如果此時頁面內容不再符合 MIP 規范,MIP-Cache 就不再緩存這個頁面了。這樣,所有 MIP-Cache 中的頁面都是最新的,并且符合 MIP 規范。

如果要快速清理 MIP-Cache 內容,請參考站長平臺 MIP-Cache 說明。注意,對于同一個站點,每100秒最多清理10條。

MIP-Cache 使用方法及 URL 生成規則,請查閱 MIP 官方文檔《MIP-Cache 規范》。


5.2 如果提交的網址錯了,怎么刪除錯誤的網址,另外把頁面都改成404對站點排名有沒有影響?


可以使用站長平臺 mip-cache 的更新接口,刪除錯誤網址。如果還有對應的h5網頁的話,對排名沒有影響。


5.3 已使用了 CDN 之后,再進行 MIP 改造,兩套 CDN 會不會產生沖突和影響?


答:不會產生沖突,也不會存在雙重加速的問題。 搜索請求會先發到 MIP-Cache(MIP-CDN),如果頁面不存在或過期,會進一步訪問原 CDN。


5.4 已經使用 CDN 再用 MIP 的必要性是什么?


答:MIP 的性能提升方案,很大一部分是技術實現的收益,非 cdn 收益。MIP 原理不能簡單的理解為 Mobile Friendly 框架 + CDN,技術核心是通過頁面渲染技術等提升性能,詳見 博客:百度 MIP 移動頁面加速——不只是 CDN。


5.5 頁面的 url 沒變,但展現內容進行了改版。改版后,新的內容為什么沒有同步在百度搜索結果頁?


答:MIP Cache 頁面沒更新導致。具體分兩種情況:一是頁面沒有點擊導致頁面不被更新(自動更新時間最長 5 天,也就是說最多 5 天,頁面也會被更新);二是頁面有點擊,但是站長服務器封禁了 spider 抓取,這樣導致 Cache 抓取不回來新的頁面,導致無法更新。目前 MIP Cache 抓取 UA 為 baidumib、mip,理論上講,除非站長服務不穩定導致多次抓取失敗,否則不會帶來額外的太大壓力。


5.6 MIP Cache 緩存更新時間是多長時間?


答:目前頁面過期時間是 50 分鐘左右,詳細請見 MIP-Cache 的更新和校驗策略。


5.7 使用MIP-cache是否增加頁面抓取的壓力?


會。MIP-cache為了保證頁面的時效性,會在cache過期(52分鐘-5天)后重新抓取所有頁面,網站服務器會受到較高的qps壓力。


百度移動網頁加速器MIP(Mobile Instant Pages)問題解決方案大全相關百科

    沒有找到您想要的百科