更 近一項研究表明：80%的網(wǎng)民對手機端的瀏覽體驗感到失望，同時，當體驗提升時，他們會在智能手機上花費更多的時間。
由于64%的智能手機用戶希望網(wǎng)站可以在4秒內加載完畢，但一半的網(wǎng)站花費了二倍以上的時間，達到了9秒，所以，今天鄭州seo公司老秦就為大家介紹一些提高網(wǎng)站在手機端打開速度的方法技巧。
1、手機端用戶的下載速度
讓我們來研究下究竟是什么影響了智能手機上的網(wǎng)頁加載速度，更 明顯的原因是智能機的網(wǎng)速，更佳 情況下，手機端用戶使用3G與4G上網(wǎng)。
在美國，57%的用戶使用3G上網(wǎng)，27%的用戶使用4G；在加拿大，4G用戶更少；而在英國，4G還是新鮮事物。Pcworld的研究表明：在美國，3G平均下載速度為2mbps，4G則為6.2mbps；ofcom的研究顯示，在英國3G的下載速度為2.1mbps；北美和歐洲以外的連接速度一般較慢；1mpbs可換算為122kb每秒，或者0.12mb每秒，因此以上的數(shù)據(jù)可以轉換如下：
244 KB/s 3G用戶平均網(wǎng)速值 (0.24 MB/s)
756 KB/s 4G用戶平均網(wǎng)速值(0.76 MB/s)
如果把上述值乘以手機用戶等待時間4秒，這意味著網(wǎng)站對于3G用戶來說更大 為1mb，而4G用戶為3mb。
然而下載速度并不是瓶頸，網(wǎng)絡延遲及智能機的內存與cpu才是瓶頸，即使手機可以在4秒內下載完1mb，頁面也要花費更長的時間去加載，因為手機需要接收并解析代碼與圖片。
在桌面端，下載文件只占顯示網(wǎng)站時間的20%，其余時間花費在解析http請求，獲取樣式表，腳本文件及圖片上，由于手機端的cpu，內存與緩存跟桌面端完全無法相提并論，這些在手機上會花費更長的時間。
2、怎樣減少加載時間
構建一個快速的網(wǎng)站，就是一個做出艱難決定與砍掉非核心體驗的過程，如果某一項需求價值不大，去掉之，這個原則適用于擁有 開發(fā)階段，尤其是規(guī)劃和編碼時。
減少依賴文件：更少的文件意味著更少的http請求與更快的加載時間。
降低圖片大小：適應與調整高分辨率圖片，在額外的下載時間中占居榜壹 ，占用了寶貴的內存與處理資源。
減輕客戶端負擔：更佳 實踐是重新思考你的javascript，并使之降低到更 小尺寸。
3、怎樣減少依賴文件
如果你想為手機端用戶隱藏圖片，display:none與visibility：hidden是不能阻止文件下載的，測試下面的代碼：
<div style="display:none;">
<img src="logo-none.png" />
</div>
<div style="visibility:hidden;">
<img src="logo-hidden.png" />
</div>
你可以觀察下面的瀑布圖，圖片容器設置display: none或visibility: hidden后仍然會被下載。
替代方案是利用css加載背景圖片（具體可查看鄭州seo公司老秦博客《如何通過CSS3實現(xiàn)背景圖片色彩的梯度漸變》的相關介紹），之后利用media query媒體查詢來通過條件隱藏圖片，這個技術更 初被Jason grigsby測試過，之后被tim kandlec進一步拓展，亞馬遜獨立的手機端頁面使用了此種技術，根據(jù)設備來條件加載特定的圖片。
<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>
你可以看到圖片不加載的瀑布圖：
4、保持更 小數(shù)量的外聯(lián)樣式表
如果你已經(jīng)根據(jù)斷點來加載分開的樣式表，你需要仔細思考這樣的做法了，我們測試了以下的代碼：
<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的響應式網(wǎng)站中使用過)。
另一種方案可以使用內部樣式，亞馬遜獨立的手機產(chǎn)品頁面有一個6KB大小的外部樣式表，連同一些內部樣式，這只需要通過一個額外的HTTP請求來下載擁有 的頁面樣式，亞馬遜的桌面版本并不是很 ，帶有9個外部樣式表，總共40KB。
5、利用CSS3代替圖片
圓角，陰影，漸變填充等，這些樣式不需要使用圖片，可以減少http請求，加快加載時間（具體可查看鄭州seo公司老秦博客《CSS無圖片技術的實現(xiàn)方法有哪些》的相關介紹）。
CSS3可以減少http請求，但增加了處理負荷，我們創(chuàng)建了一系列的html文件，每個文件包含一個基本的css3特性，參考下面的圖表，你可以發(fā)現(xiàn)css3帶來的處理時間很小，但不能不考慮，特別注意box-shadow對處理時間的影響更大 。
6、DATAURI來代替圖片與WEB字體文件
Data uri方案可以不使用任何額外資源就可以向html及css中插入內容，這個技術可以在web頁面中插入任何內容，通常被用于插入圖片及web字體文件，這個技術更大 的好處是可以減少http請求。
Data uri使用很簡單，你可以按照下面的格式，使用base64編碼過的數(shù)據(jù)直接插入html與css中代替圖片文件。
data:[MIME-type][;charset=encoding][;base64],[data]
舉個例子，下面的小圖標就是用data uri創(chuàng)建的：
代碼在這：
<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的響應式網(wǎng)站使用這個技術插入了圖片及字體，波士頓環(huán)球報的響應式網(wǎng)站也使用了這個技術，他們的網(wǎng)站在智能手機上，四秒內就加載完畢了。
使用這項技術，從此不用為外部圖片及字體文件勞心費神，也需要測試與比較是否值得應用這項技術來代替?zhèn)鹘y(tǒng)方式。
7、可縮放矢量圖形(SVG)而不是圖片
就像data URIs可縮放矢量圖形(SVG)可以被嵌入到一個頁面來減少HTTP請求數(shù)，例如，下面的圖片是一個內聯(lián)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創(chuàng)建，一旦創(chuàng)建，在文本編輯器中打開文件并把其代碼拷貝出來(減去任何不必要的數(shù)據(jù))。
上面的代碼在HTML文件中會生效，但不會在樣式表中生效，若在一個樣式表中嵌入SVG文件，需要先將它轉換為一個數(shù)據(jù)URI，如果這樣做，我們需要從編輯器中(一定要包括元數(shù)據(jù))拷貝出，用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=);
8、Sprites圖
Sprites（雪碧圖）技術可以把經(jīng)常使用的圖片合成為一張圖片，從而減少http請求，比如當你將四張圖片合成到一個sprite中后，http請求從4減少到1，需要顯示的圖片利用background-position屬性來控制。
9、字體圖標
字體圖標是利用字體文件來包含符號和圖表(如Wingdings或Webdings 都是某種圖標字體)，可以用來代替加載一個圖像文件，例如，下面的圖標不是一個圖像，而是Wingdings字體中的“h”字符:
Wingdings和Webdings有點過氣了，現(xiàn)在有其他更專業(yè)的Web字體可用的，可以通過font-face加載。
單獨的Web字體，對于擁有 圖標來講，HTTP請求的數(shù)量可以減少到一個，如果Web字體使用數(shù)據(jù)URI(如上所述)嵌入頁面，HTTP請求可以減少到零，這正是WordPress使用的技術，這是他們樣式表中嵌入的web字體：
WordPress訪問擁有 這些圖標，不會有任何額外的HTTP請求，因為圖標通過數(shù)據(jù)URI，以Web字體的方式嵌入到WordPress的樣式表中。
同時，字體圖標可以使用CSS3關鍵幀動畫(這很有用，比如“加載”圖標(小菊花))，主要的缺點是，字體圖標做成的CSS sprites只能是某個純色，亞馬遜的css雪碧圖包括彩色圖標，因此它不能使用這種技術。
如IcoMoon之類的工具可以很方便的建立一個自定義Web字體，所需要的只是每個圖標的SVG文件。
10、避免內聯(lián)iframe
每一個內聯(lián)框架(iframe)都會生成一個HTTP請求，這是在iframe內沒有另外依賴資源的情況下，這是我們做一個快速測試，比較一個iframe只含有文本。
包含一個iframe增加了將近0.2s的加載時間，為了保證web站點加載迅速，更好 不要使用iframe。
11、手機先行
手機先行也適用于前端開發(fā)，編碼時以手機用戶作為 考慮,然后為平板電腦和桌面逐步增強，減少不必要的依賴。
另外一種方式為桌面端優(yōu)先，重型組件默認加載，然后為小屏幕隱藏這些組件(稱為“優(yōu)雅降級”)。
下面例子為桌面端優(yōu)先的編碼:
<style>
.image {
background-image: url(image1.jpg);
}
@media (max-width:390px) {
.image {
display: none;
}
}
</style>
<div class="image"></div>
在上面的代碼中，默認是顯示圖像，然后在手機設備上通過媒體查詢隱藏了圖片。
下面的例子為手機端優(yōu)先的編碼：
<style>
@media (min-width:391px) {
.image {
background-image: url(image1.jpg);
}
}
</style>
<div class="image"></div>
默認情況下，圖片不顯示，之后使用媒體查詢對更大的屏幕進行漸進增強。
12、拆分到多個頁面(單獨的手機網(wǎng)站)
保持你的核心內容在頁面上,之后提供到次要內容的鏈接到次要內容，這將減少HTML的加載負擔，同時防止相關的資源被下載。
亞馬遜的手機產(chǎn)品頁面有通用的產(chǎn)品信息，同時提供鏈接到“用戶評論”、“描述和細節(jié)”和“新&使用提供。
這就減少了三張圖片的HTTP請求，且HTML的大小減少45KB。
13、保持更 少重定向(單獨的手機網(wǎng)站)
亞馬遜有一個重定向，來引導游客到單獨的手機頁面，這帶來了0.4秒的延遲，與之相比，戴爾的網(wǎng)站有兩個重定向，帶來了1.2秒延遲。
14、如何縮小圖片尺寸
響應式圖片的思路是讓訪客圖像只下載那些更 適合他們的設備的圖片，對于智能手機，,使用低分辨率圖像，可以快速下載和渲染。
亞馬遜的獨立的手機產(chǎn)品頁面使用響應式圖像技術，利用媒體查詢分配一個特定的背景圖像到一個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: url(image5.jpg);
}
}
@media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:1.5) {
.image {
background-image: url(image7.jpg);
}
}
@media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:2) {
.image {
background-image: url(image8.jpg);
}
}
@media (min-width:768px) {
#image-container {
max-width: 303px;
}
.image {
background-image: url(image8.jpg);
}
}
@media (min-width:768px) and (-webkit-min-device-pixel-ratio:1.5) {
.image {
background-image: url(image8.jpg);
}
}
@media (min-width:768px) and (-webkit-min-device-pixel-ratio:2) {
.image {
background-image: url(image8.jpg);
}
}
</style>
<div id="image-container">
<div class="image">
<img src="image1.jpg" />
</div>
</div>
盡管亞馬遜在內部樣式中有八個產(chǎn)品圖片，在豎屏模式下的iPhone 4或Nexus S只有兩個被下載。
《波士頓環(huán)球報》的響應式網(wǎng)站，采用了利用不同的data-fullsrc來加載圖片的響應式圖像技術，這是一個html標記和一個服務器端JavaScript重定向規(guī)則的組合：
<img alt="" src="mobile-size.r.jpg" data-fullsrc="desktop-size.jpg" />
src是手機上使用的圖像，確保網(wǎng)站默認為尺寸較小的版本(手機先行)，而data-fullsrc是全尺寸的圖像，JavaScript用來檢測設備的屏幕大小，之后寫入cookie。
對于大屏幕，JavaScript利用data-fullsrc上的高分辨率圖像替換較小的圖片，服務器也使用Apache重寫規(guī)則，來在圖像文件的名稱中檢查.r.(mobile用的圖片帶有.r.)，同時顯示一個備用GIF，而不會使用較小的手機圖像(從而防止手機大小的圖像被下載到桌面)。
微軟的響應式網(wǎng)站使用的斯科特·杰爾的Picturefill技術:
<div data-picture data-alt="Alternate text here">
<div data-src="image1.png"></div>
<div data-src="image2.png" data-media="(min-device-pixel-ratio: 2.0)"></div>
<div data-src="image3.png" data-media="(max-width: 539px)"></div>
<div data-src="image4.png" data-media="(max-width: 539px) and (min-device-pixel-ratio: 2.0)"></div>
<noscript><img src="image1.png" alt="Alternate text here" /></noscript>
</div>
注意：上面的代碼片段中，data-picture= ""應該是data-picture，沒有= ""(=字符是smashing magazine的所見即所得編輯器自動插入的)，利用這種技術，JavaScript掃描頁面的代碼，發(fā)現(xiàn)包含data-picture屬性的div，然后根據(jù)data-media屬性插入一個新的img標簽。
這些響應式圖像技術的主要好處有:
（1）、小屏幕下載低分辨率的圖像，而大屏幕下載高分辨率圖像。
（2）、只下載所需的圖片，而不需要的圖片不在后臺加載。
另外，還有各種各樣的其他技術實現(xiàn)響應式圖像，你可以查看鄭州seo公司老秦博客《響應式網(wǎng)頁設計的基本原則布局》的相關介紹，了解更多的細節(jié)。
15、如何減少客戶端處理
星巴克的響應式網(wǎng)站在chrome下禁用javascript后，桌面端良好的網(wǎng)絡環(huán)境下花費了3.53秒加載完畢，而啟用javascript后，花費了4.73秒，增加了34%。
Javascript對加載時間的影響，在手機端較小的內存，cpu及緩存下會表現(xiàn)得更明顯，通常，我們要重新思考javascript的使用，并保持其在更 小尺寸。
一個很好的例子是BBC手機網(wǎng)站的JavaScript，網(wǎng)站不使用外部JavaScript文件——都是內聯(lián)，內聯(lián)腳本僅限于幾行，沒有顯著影響內存，HTML文件和擁有 內聯(lián)JavaScript花費0.78秒加載完畢，就像BBC那樣，亞馬遜的手機產(chǎn)品頁面也沒有外部JavaScript文件，而使用更 少的內聯(lián)腳本，HTML文件和擁有 內聯(lián)JavaScript花費0.75秒加載完畢。
請注意：jQuery不是一個輕量的替代方案，事實上是jquery本身的補充。
這兩個網(wǎng)站在iPhone 4下均在4秒內加載完畢，使用一個JavaScript框架前，考慮它是否真的有必要，在某些情況下，使用少量的JavaScript比調用一個框架更有效。
16、避免組件
組件對實際加載時間的影響是災難性的，為了驗證這一點，我們創(chuàng)建了一系列簡單的HTML文件，每個文件包含默認的嵌入代碼，一個小部件，你可以看到下面的結果多糟糕。
注意，這不是一個 的測試，因為這些都是在模擬環(huán)境中的可控實驗，不過結果比較有意思。
在單個頁面中，結合他們?yōu)橐粋€小部件，結果只包含這個部件的情況下，加載時間長達4秒。
17、服務器端(后端)技術
除了優(yōu)化前端，服務器端技術也可以用來加速加載時間，這些技術都值得考慮，如以下幾點：
（1）、緩存HTTP重定向來加速重復訪問。
（2）、合并HTTP重定向鏈來減少重定向。
（3）、使用HTTP壓縮來減少數(shù)量的字節(jié)(Gzip或縮小)。
鄭州seo公司老秦博客點評：
為了滿足手機用戶的高期望，你需要對網(wǎng)站針對手機設備進行優(yōu)化，在4秒或更少的時間里加載完畢，更好 的方式來達到4秒這個魔術時間，是通過減少JavaScript和優(yōu)化HTML、CSS和圖像，保持智能手機上更 少的處理負荷。
版權聲明：本站部分文章，由 鄭州路普科技整理發(fā)表(信息來自互聯(lián)網(wǎng),不代表本站觀點)，如有冒犯請聯(lián)系我們
