移動端提高頁面速度與網站性能
移動端用戶的下載速度
讓咱們來研究下到底是什麼影響了智能手機上的網頁加載速度。javascript
最明顯的緣由是智能機的網速。最佳狀況下，移動端用戶使用3g與4g上網。在美國，57%的用戶使用3g上網，27%的用戶使用4g。在加拿大，4g用戶更少。而在英國，4g仍是新鮮事物。Pcworld的研究代表，在美國，3g平均下載速度爲2mbps，4g則爲6.2mbps。ofcom的研究顯示，在英國3g的下載速度爲2.1mbps。北美和歐洲之外的鏈接速度通常較慢。1mpbs可換算爲122kb每秒，或者0.12mb每秒，所以以上的數據能夠轉換以下：css
- 244 KB/s 3G用戶平均網速值 (0.24 MB/s)
- 756 KB/s 4G用戶平均網速值(0.76 MB/s)
若是把上述值乘以移動用戶等待時間4秒,這意味着網站對於3g用戶來講最大爲1mb，而4g用戶爲3mb。html
然而下載速度並非瓶頸，網絡延遲及智能機的內存與cpu纔是瓶頸。即便手機能夠在4秒內下載完1mb，頁面也要花費更長的時間去加載，由於手機須要接收並解析代碼與圖片。前端
在桌面端，下載文件只佔顯示網站時間的20%，其他時間花費在解析http請求，獲取樣式表，腳本文件及圖片上。因爲移動端的cpu，內存與緩存跟桌面端徹底沒法相提並論，這些在手機上會花費更長的時間。java
怎樣減小加載時間
構建一個快速的網站，就是一個作出艱難決定與砍掉非核心體驗的過程。若是某一項需求價值不大，去掉之。這個原則適用於全部開發階段,尤爲是規劃和編碼時。jquery
- 減小依賴文件 : 更少的文件意味着更少的http請求與更快的加載時間
- 下降圖片大小: 適應與調整高分辨率圖片，在額外的下載時間中佔居榜首，佔用了寶貴的內存與處理資源。
- 減輕客戶端負擔: 最佳實踐是從新思考你的javascript，並使之下降到最小尺寸
怎樣減小依賴文件
怎樣減小依賴文件
若是你想爲移動端用戶隱藏圖片，display:none與visibility：hidden是不能阻止文件下載的。測試下面的代碼：css3
<div style="display:none;"> <img src="logo-none.png" /> </div> <div style="visibility:hidden;"> <img src="logo-hidden.png" /> </div>
你能夠觀察下面的瀑布圖，圖片容器設置display: none或visibility: hidden後仍然會被下載。git
替代方案是利用css加載背景圖片，以後利用media query媒體查詢來經過條件隱藏圖片。這個技術最初被Jason grigsby測試過，以後被tim kandlec進一步拓展。亞馬遜獨立的移動端頁面使用了此種技術，根據設備來條件加載特定的圖片。github
<meta name="viewport" content="width=device-width"> <style> @media (max-width:600px) { .image { display:none; } } @media (min-width:601px) { .image { background-image: url(image1.jpg); } } </style> <div class="image"></div>
你能夠看到圖片不加載的瀑布圖：web
保持最小數量的外聯樣式表
若是你已經根據斷點來加載分開的樣式表，你須要仔細思考這樣的作法了。咱們測試瞭如下的代碼：
<link href="extra-small.css" rel="stylesheet" media="screen and (max-width: 390px)" /> <link href="small.css" rel="stylesheet" media="screen and (min-width: 391px) and (max-width: 500px)" /> <link href="medium.css" rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 767px)" /> <link href="large.css" rel="stylesheet" media="screen and (min-width: 768px)" />
你能夠看到這四個樣式表在豎屏下(portrait mode)都被加載了.
所以不管如何這些樣式表都會被加載，你須要把這些文件合併在一個文件裏，減小http請求。另外一種方法，你能夠經過後端處理，經過判斷設備來自動插入樣式表。 (這種方式在wordpress.com的響應式網站中使用過)。
另外一種方案可使用內部樣式。亞馬遜獨立的移動產品頁面有一個6 KB大小的外部樣式表,連同一些內部樣式。這隻須要經過一個額外的HTTP請求來下載全部的頁面樣式。亞馬遜的桌面版本並非很高效,帶有9個外部樣式表,總共40 KB。
利用CSS3代替圖片
圓角，陰影，漸變填充等，這些樣式不須要使用圖片，能夠減小http請求，加快加載時間。
Css3能夠減小http請求，但增長了處理負荷。咱們建立了一系列的html文件，每一個文件包含一個基本的css3特性。參考下面的圖表，你能夠發現css3帶來的處理時間很小，但不能不考慮。特別注意box-shadow對處理時間的影響最大。
DATAURI來代替圖片與WEB字體文件
Data uri方案能夠不使用任何額外資源就能夠向html及css中插入內容。這個技術能夠在web頁面中插入任何內容，一般被用於插入圖片及web字體文件。這個技術最大的好處是能夠減小http請求。
Data uri使用很簡單，你能夠按照下面的格式，使用base64編碼過的數據直接插入html與css中代替圖片文件。
data:[MIME-type][;charset=encoding][;base64],[data]
舉個例子，下面的小圖標就是用data uri建立的:
代碼在這：
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAACI0lEQVQoz2P48/bFX1Tw58vn3/dv/rp56dfD238+vocIfl029UOC3dsgS4Y/nz4gq/794sm3VbO+zmr/MqX+S1/l597yb2vn/rpx6VN14od4+3cBRgx/vn9F1vB9/+bPPeVfJlZ/6S793JwDVPcxL/BjQeiHFNf3cbbvgw0Z4JZCwM/Lpz81Zn2qS/1Ul/apOv5jUfiHbP8PSc7vY23fh5m+C9JjALoVzQ8/zx7+0lH4IcvnQ4bXhwzPD8muINXhZu+C9N/56zB8mdr49/cfdH9/fPdj36bPLbkgpYH670KNQaoDdV47aTK8j7H+tmXpX6zg95+f545+7ix656PxzlP5jaf2c2M1hvcRZu8jzb4umfrn6xfs2v78+XFkx9sI2+fass8N1Rje+eu/dtR+YaD0Jj70296df3/+xKrr593bL91tnmnJMbwwVXtuoAbU+kxD5pmu4pvYkK9rVvz58B5Tz7dd257pKDAAlT43giEDFZA2NclXAe5fN60DOgZFx48fb6ICGRCqIchY/bmhKkibivinOdPRLPnQ1cwAUqGrCFQBVIes7ZmmzEtni9+vXiFr+DR9IsMzHfnXIV5vs5OeqUs/05B+rqcIdBhQ81M1yRfW+r+fPUHRMLWfAejir+tWATlf1ix/HR34wlL3ub7Scx2F56Yan6ZPQnPS+6oihlc+Tr/fv4OG+Levv+7d+X700PeDe3/dv4um+tfjhy9drQDa2DKqOJhVKgAAAABJRU5ErkJggg==" />
Wordpress.com的響應式網站使用這個技術插入了圖片及字體。波士頓環球報的響應式網站也使用了這個技術，他們的網站在智能手機上，四秒內就加載完畢了。
使用這項技術，今後不用爲外部圖片及字體文件勞心費神。也須要測試與比較是否值得應用這項技術來代替傳統方式。
可縮放矢量圖形(SVG)而不是圖片
就像data URIs,可縮放矢量圖形(SVG)能夠被嵌入到一個頁面來減小HTTP請求數。例如,下面的圖片是一個內聯SVG:
這是代碼：
<svg version="1.1" id="drop" x="0px" y="0px" width="17.812px" height="28.664px" viewBox="296.641 381.688 17.812 28.664" enable-background="new 296.641 381.688 17.812 28.664" xml:space="preserve"> <path fill="#EE1C4E" d="M314.428,401.082c-0.443-5.489-5.146-9.522-7 .52-14.186c-0.816-1.597-1.352-5.208-1.352-5.208 s-0.555,3.792-1.388 ,5.425c-2.233,4.371-7.127,8.999-7.507,14.047c-0.36,4.794,4.101,9.191 ,8.896,9.191 C310.49,410.354,314.816,405.941,314.428,401.082z"/> </svg>
SVG文件能夠經過一個矢量圖形編輯器,如Adobe Illustrator建立。一旦建立,在文本編輯器中打開文件並把其代碼拷貝出來(減去任何沒必要要的數據)。
上面的代碼在HTML文件中會生效，,但不會在樣式表中生效。若在一個樣式表中嵌入SVG文件,須要先將它轉換爲一個數據URI。若是這樣作，咱們須要從編輯器中(必定要包括元數據)拷貝出,用base64編碼,而後使用如下格式嵌入樣式表:
data:image/svg+xml[;base64],[data]
這是代碼：
background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i MS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx 1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOi A2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL 0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8x LjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzE iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Im h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3a WR0aD0iMTcuODEycHgiIGhlaWdodD0iMjguNjY0cHgiIHZpZXdCb3g9IjI5Ni42NDEg MzgxLjY4OCAxNy44MTIgMjguNjY0Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI 5Ni42NDEgMzgxLjY4OCAxNy44MTIgMjguNjY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj 4NCjxwYXRoIGZpbGw9IiNFRTFDNEUiIGQ9Ik0zMTQuNDI4LDQwMS4wODJjLTAuNDQzL TUuNDg5LTUuMTQ2LTkuNTIyLTcuNTItMTQuMTg2Yy0wLjgxNi0xLjU5Ny0xLjM1Mi01 LjIwOC0xLjM1Mi01LjIwOA0KCXMtMC41NTUsMy43OTItMS4zODgsNS40MjVjLTIuMjM zLDQuMzcxLTcuMTI3LDguOTk5LTcuNTA3LDE0LjA0N2MtMC4zNiw0Ljc5NCw0LjEwMS w5LjE5MSw4Ljg5Niw5LjE5MQ0KCUMzMTAuNDksNDEwLjM1NCwzMTQuODE2LDQwNS45N DEsMzE0LjQyOCw0MDEuMDgyeiIvPg0KPC9zdmc+DQo=);
Sprites圖
Sprites（雪碧圖）技術能夠把常用的圖片合成爲一張圖片，從而減小http請求。好比當你將四張圖片合成到一個sprite中後，http請求從4減小到1.須要顯示的圖片利用background-position屬性來控制。
字體圖標
字體圖標是利用字體文件來包含符號和圖表(如Wingdings或Webdings 都是某種圖標字體),能夠用來代替加載一個圖像文件。例如,下面的圖標不是一個圖像,而是Wingdings字體中的「h」字符:
Wingdings和Webdings有點過氣了,如今有其餘更專業的Web字體可用的,能夠經過font-face加載。
單獨的Web字體,對於全部圖標來說，HTTP請求的數量能夠減小到一個。若是Web字體使用數據URI(如上所述)嵌入頁面，HTTP請求能夠減小到零。這正是WordPress.com使用的技術。這是他們樣式表中嵌入的web 字體:
WordPress.com訪問全部這些圖標,不會有任何額外的HTTP請求,由於圖標經過數據URI,以Web字體的方式嵌入到WordPress的樣式表中。
同時,字體圖標可使用CSS3關鍵幀動畫(這頗有用，好比「加載」圖標(小菊花))。 主要的缺點是,字體圖標作成的CSS sprites只能是某個純色。亞馬遜的css雪碧圖包括彩色圖標,所以它不能使用這種技術。
如IcoMoon之類的工具能夠很方便的創建一個自定義Web字體。所須要的只是每一個圖標的SVG文件。
避免內聯iframe
每個內聯框架(iframe)都會生成一個HTTP請求,這是在iframe內沒有另外依賴資源的狀況下。這是咱們作一個快速測試,比較一個iframe只含有文本。
包含一個iframe增長了將近0.2s的加載時間。爲了保證web站點加載迅速，最好不要使用iframe。
移動先行
移動先行也適用於前端開發。
編碼時以移動用戶做爲第一考慮,而後爲平板電腦和桌面逐步加強,減小沒必要要的依賴。另一種方式爲桌面端優先,重型組件默認加載,而後爲小屏幕隱藏這些組件(稱爲「優雅降級」)。
下面例子爲桌面端優先的編碼:
<style> .image { background-image: url(image1.jpg); } @media (max-width:390px) { .image { display: none; } } </style> <div class="image"></div>
在上面的代碼中,默認是顯示圖像,而後在移動設備上經過媒體查詢隱藏了圖片。
下面的例子爲移動端優先的編碼:
<style> @media (min-width:391px) { .image { background-image: url(image1.jpg); } } </style> <div class="image"></div>
默認狀況下,圖片不顯示,以後使用媒體查詢對更大的屏幕進行漸進加強。
拆分到多個頁面(單獨的移動網站)
保持你的核心內容在頁面上,以後提供到次要內容的連接到次要內容。這將減小HTML的加載負擔，同時防止相關的資源被下載。
亞馬遜的移動產品頁面有通用的產品信息,同時提供連接到「用戶評論」、「描述和細節」和「新&使用提供。
這就減小了三張圖片的HTTP請求,且HTML的大小減小45 KB。
保持最少重定向(單獨的移動網站)
亞馬遜有一個重定向，來引導遊客到單獨的移動頁面,這帶來了0.4秒的延遲。與之相比,戴爾的網站有兩個重定向,帶來了1.2秒延遲。
如何縮小圖片尺寸
響應式圖片
響應式圖片的思路是讓訪客圖像只下載那些最適合他們的設備的圖片,對於智能手機,使用低分辨率圖像,能夠快速下載和渲染。
亞馬遜的獨立的移動產品頁面使用響應式圖像技術,利用媒體查詢分配一個特定的背景圖像到一個div。這是亞馬遜的代碼:
<!-- // This meta viewport is inserted for iPhones // --> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0"> <!-- // This meta viewport is inserted for the Nexus S // --> <meta name="viewport" content="width=device-width"> <style> @media (max-width:390px) { #image-container { max-width: 109px; } .image { background-image: url(image1.jpg); } } @media (max-width:390px) and (-webkit-min-device-pixel-ratio:1.5) { .image { background-image: url(image2.jpg); } } @media (max-width:390px) and (-webkit-min-device-pixel-ratio:2) { .image { background-image: url(image3.jpg); } } @media (min-width:391px) and (max-width:500px) { #image-container { max-width: 121px; } .image { background-image: url(image4.jpg); } } @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:1.5) { .image { background-image: url(image5.jpg); } } @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:2) { .image { background-image: url(image6.jpg); } } @media (min-width: 501px) and (max-width: 767px) { #image-container { max-width: 182px; } .image { background-image: