網站對于很多企業都已經是必備的宣傳渠道之一了,其中移動端網站更是重中之重。隨著基礎網絡設施及移動技術發展進步,人們越來越依賴移動設備,使用移動設備的頻率已經遠大于電腦。
現在很多企業會發現,移動端網站訪問總是有卡頓現象,使用體驗有很大的提升空間。
移動端網頁出現卡頓的原因:
1.加載資源多,下載需要較長時間,比如圖片過大、過多,導致渲染頁面時間過長;
2.多余組件、js使用不當等
如何解決移動頁面卡頓問題:
之前已經分享一篇通過技術手段解決網頁加載慢的解決辦法。如何提高前端網頁加載速度
今天分享另外一種方案:谷歌AMP技術和百度MIP技術
谷歌AMP技術與百度MIP技術實現思路是一樣的,谷歌AMP技術適用于大陸以外地區,百度MIP技術適用于大陸地區。雖說百度下線了MIP Cache 服務,MIP失去了百度服務器cdn加速,但是MIP這項技術還是可以使用的。
Web 優化有很多種方案,每種方案都有自己的適用范圍。有些收益很高的優化手段,存在這樣那樣的限制:例如針對具體業務邏輯所做的優化,很難通用化;部署 Google 的 PageSpeed 模塊等服務端優化方案,使用成本很高;借助客戶端所做的優化,如現在廣為流行的移動端 WebView 容器加速方案,優化效果局限在指定 APP 內,甚至還會導致使用通用瀏覽器訪問速度更慢。以內容為主的新聞詳情頁,大部分性能消耗在圖片、視頻等媒體資源以及第三方功能如廣告、社會化組件的加載上。
瀏覽器對不同資源加載和預加載有自己的策略,對于預加載,我們有一些控制權,但總的看來這一塊對于開發者來說還是很不可控。例如瀏覽器默認會并行加載多張圖片,但在屏幕小、網速慢、性能差的手機上,串行由上到下加載圖片很可能體驗更好。
移動設備在網絡、CPU、內存等方面與 PC 差距很大,很多 PC 上可以忽略的問題,在移動端不得不重視起來。例如我們都知道圖片是異步加載的,頁面觸發 DOMContentLoaded 事件并不需要等圖片加載完,但在移動端,大量圖片加載帶來性能開銷卻會大幅延后 DOMContentLoaded 時機。
我們再來看百度MIP或谷歌AMP是如何優化網頁提升加載速度的
AMP html是HTML 的子集,在 AMP HTML 中只允許使用有限的標簽。例如 <body>、<article> 這些標簽可以直接使用,沒有任何限制;有些標簽允許有限制的使用,例如 <meta> 標簽不能使用 http-equiv 屬性;而像 <img>、<audio> 這樣的標簽需要替換為 <amp-img>、<amp-audio> 等 AMP Components;更多的標簽如 <frame>、<form> 不允許使用。(MIP也是這樣的)
簡單的說,就是AMP和MIP接管了頁面加載順序控制權和限制部分消耗性能過多的標簽,并新增許多專用標簽,讓頁面加載速度呈現大幅度提升,同時也給了很多普通網站、無法進行WPO的網站另外一個解決辦法。
