網(wǎng)站移動(dòng)端網(wǎng)頁(yè)打開(kāi)速度教程 秒殺＂百度閃電算法＂

時(shí)間：2022-08-22 21:00:01 | 來(lái)源：建站知識(shí)

時(shí)間：2022-08-22 21:00:01 來(lái)源：建站知識(shí)

最近一項(xiàng)研究表明：80%的網(wǎng)民對(duì)移動(dòng)端的瀏覽體驗(yàn)感到失望，同時(shí)，當(dāng)體驗(yàn)提升時(shí)，他們會(huì)在智能手機(jī)上花費(fèi)更多的時(shí)間。

由于64%的智能手機(jī)用戶希望網(wǎng)站可以在4秒內(nèi)加載完畢，但一半的網(wǎng)站花費(fèi)了二倍以上的時(shí)間，達(dá)到了9秒，所以，今天?，巗eo工程師就為大家介紹一些提高網(wǎng)站在移動(dòng)端打開(kāi)速度的方法技巧。

1、移動(dòng)端用戶的下載速度

讓我們來(lái)研究下究竟是什么影響了智能手機(jī)上的網(wǎng)頁(yè)加載速度，最明顯的原因是智能機(jī)的網(wǎng)速，最佳情況下，移動(dòng)端用戶使用3G與4G上網(wǎng)。

在美國(guó)，57%的用戶使用3G上網(wǎng)，27%的用戶使用4G;在加拿大，4G用戶更少;而在英國(guó)，4G還是新鮮事物。Pcworld的研究表明：在美國(guó)，3G平均下載速度為2mbps，4G則為6.2mbps;ofcom的研究顯示，在英國(guó)3G的下載速度為2.1mbps;北美和歐洲以外的連接速度一般較慢;1mpbs可換算為122kb每秒，或者0.12mb每秒，因此以上的數(shù)據(jù)可以轉(zhuǎn)換如下：

244 KB/s 3G用戶平均網(wǎng)速值 (0.24 MB/s)

756 KB/s 4G用戶平均網(wǎng)速值(0.76 MB/s)

如果把上述值乘以移動(dòng)用戶等待時(shí)間4秒，這意味著網(wǎng)站對(duì)于3G用戶來(lái)說(shuō)最大為1mb，而4G用戶為3mb。

然而下載速度并不是瓶頸，網(wǎng)絡(luò)延遲及智能機(jī)的內(nèi)存與cpu才是瓶頸，即使手機(jī)可以在4秒內(nèi)下載完1mb，頁(yè)面也要花費(fèi)更長(zhǎng)的時(shí)間去加載，因?yàn)槭謾C(jī)需要接收并解析代碼與圖片。

在桌面端，下載文件只占顯示網(wǎng)站時(shí)間的20%，其余時(shí)間花費(fèi)在解析http請(qǐng)求，獲取樣式表，腳本文件及圖片上，由于移動(dòng)端的cpu，內(nèi)存與緩存跟桌面端完全無(wú)法相提并論，這些在手機(jī)上會(huì)花費(fèi)更長(zhǎng)的時(shí)間。

2、怎樣減少加載時(shí)間

構(gòu)建一個(gè)快速的網(wǎng)站，就是一個(gè)做出艱難決定與砍掉非核心體驗(yàn)的過(guò)程，如果某一項(xiàng)需求價(jià)值不大，去掉之，這個(gè)原則適用于所有開(kāi)發(fā)階段，尤其是規(guī)劃和編碼時(shí)。

減少依賴文件：更少的文件意味著更少的http請(qǐng)求與更快的加載時(shí)間。

降低圖片大?。哼m應(yīng)與調(diào)整高分辨率圖片，在額外的下載時(shí)間中占居榜首，占用了寶貴的內(nèi)存與處理資源。

減輕客戶端負(fù)擔(dān)：最佳實(shí)踐是重新思考你的javascript，并使之降低到最小尺寸。

3、怎樣減少依賴文件

如果你想為移動(dòng)端用戶隱藏圖片，display:none與visibility：hidden是不能阻止文件下載的，測(cè)試下面的代碼：

你可以觀察下面的瀑布圖，圖片容器設(shè)置display: none或visibility: hidden后仍然會(huì)被下載。

替代方案是利用css加載背景圖片，之后利用media query媒體查詢來(lái)通過(guò)條件隱藏圖片，這個(gè)技術(shù)最初被Jason grigsby測(cè)試過(guò)，之后被tim kandlec進(jìn)一步拓展，亞馬遜獨(dú)立的移動(dòng)端頁(yè)面使用了此種技術(shù)，根據(jù)設(shè)備來(lái)?xiàng)l件加載特定的圖片。

你可以看到圖片不加載的瀑布圖：

4、保持最小數(shù)量的外聯(lián)樣式表

如果你已經(jīng)根據(jù)斷點(diǎn)來(lái)加載分開(kāi)的樣式表，你需要仔細(xì)思考這樣的做法了，我們測(cè)試了以下的代碼：

你可以看到這四個(gè)樣式表在豎屏下(portrait mode)都被加載了。

因此無(wú)論如何這些樣式表都會(huì)被加載，你需要把這些文件合并在一個(gè)文件里，減少http請(qǐng)求。

另一種方法，你可以通過(guò)后端處理，通過(guò)判斷設(shè)備來(lái)自動(dòng)插入樣式表 (這種方式在wordpress的響應(yīng)式網(wǎng)站中使用過(guò))。

另一種方案可以使用內(nèi)部樣式，亞馬遜獨(dú)立的移動(dòng)產(chǎn)品頁(yè)面有一個(gè)6KB大小的外部樣式表，連同一些內(nèi)部樣式，這只需要通過(guò)一個(gè)額外的HTTP請(qǐng)求來(lái)下載所有的頁(yè)面樣式，亞馬遜的桌面版本并不是很高效，帶有9個(gè)外部樣式表，總共40KB。

5、利用CSS3代替圖片

圓角，陰影，漸變填充等，這些樣式不需要使用圖片，可以減少http請(qǐng)求，加快加載時(shí)間。

CSS3可以減少http請(qǐng)求，但增加了處理負(fù)荷，我們創(chuàng)建了一系列的html文件，每個(gè)文件包含一個(gè)基本的css3特性，參考下面的圖表，你可以發(fā)現(xiàn)css3帶來(lái)的處理時(shí)間很小，但不能不考慮，特別注意box-shadow對(duì)處理時(shí)間的影響最大。

6、DATAURI來(lái)代替圖片與WEB字體文件

Data uri方案可以不使用任何額外資源就可以向html及css中插入內(nèi)容，這個(gè)技術(shù)可以在web頁(yè)面中插入任何內(nèi)容，通常被用于插入圖片及web字體文件，這個(gè)技術(shù)最大的好處是可以減少http請(qǐng)求。

Data uri使用很簡(jiǎn)單，你可以按照下面的格式，使用base64編碼過(guò)的數(shù)據(jù)直接插入html與css中代替圖片文件。

data:[MIME-type][;charset=encoding][;base64],[data]

舉個(gè)例子，下面的小圖標(biāo)就是用data uri創(chuàng)建的：

代碼在這：

Wordpress的響應(yīng)式網(wǎng)站使用這個(gè)技術(shù)插入了圖片及字體，波士頓環(huán)球報(bào)的響應(yīng)式網(wǎng)站也使用了這個(gè)技術(shù)，他們的網(wǎng)站在智能手機(jī)上，四秒內(nèi)就加載完畢了。

使用這項(xiàng)技術(shù)，從此不用為外部圖片及字體文件勞心費(fèi)神，也需要測(cè)試與比較是否值得應(yīng)用這項(xiàng)技術(shù)來(lái)代替?zhèn)鹘y(tǒng)方式。

7、可縮放矢量圖形(SVG)而不是圖片

就像data URIs可縮放矢量圖形(SVG)可以被嵌入到一個(gè)頁(yè)面來(lái)減少HTTP請(qǐng)求數(shù)，例如，下面的圖片是一個(gè)內(nèi)聯(lián)SVG：

這是代碼：

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">

SVG文件可以通過(guò)一個(gè)矢量圖形編輯器，如Adobe Illustrator創(chuàng)建，一旦創(chuàng)建，在文本編輯器中打開(kāi)文件并把其代碼拷貝出來(lái)(減去任何不必要的數(shù)據(jù))。

上面的代碼在HTML文件中會(huì)生效，但不會(huì)在樣式表中生效，若在一個(gè)樣式表中嵌入SVG文件，需要先將它轉(zhuǎn)換為一個(gè)數(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(雪碧圖)技術(shù)可以把經(jīng)常使用的圖片合成為一張圖片，從而減少http請(qǐng)求，比如當(dāng)你將四張圖片合成到一個(gè)sprite中后，http請(qǐng)求從4減少到1，需要顯示的圖片利用background-position屬性來(lái)控制。

9、字體圖標(biāo)

字體圖標(biāo)是利用字體文件來(lái)包含符號(hào)和圖表(如Wingdings或Webdings 都是某種圖標(biāo)字體)，可以用來(lái)代替加載一個(gè)圖像文件，例如，下面的圖標(biāo)不是一個(gè)圖像，而是Wingdings字體中的“h”字符:

Wingdings和Webdings有點(diǎn)過(guò)氣了，現(xiàn)在有其他更專業(yè)的Web字體可用的，可以通過(guò)font-face加載。

單獨(dú)的Web字體，對(duì)于所有圖標(biāo)來(lái)講，HTTP請(qǐng)求的數(shù)量可以減少到一個(gè)，如果Web字體使用數(shù)據(jù)URI(如上所述)嵌入頁(yè)面，HTTP請(qǐng)求可以減少到零，這正是WordPress使用的技術(shù)，這是他們樣式表中嵌入的web字體：

WordPress訪問(wèn)所有這些圖標(biāo)，不會(huì)有任何額外的HTTP請(qǐng)求，因?yàn)閳D標(biāo)通過(guò)數(shù)據(jù)URI，以Web字體的方式嵌入到WordPress的樣式表中。

同時(shí)，字體圖標(biāo)可以使用CSS3關(guān)鍵幀動(dòng)畫(huà)(這很有用，比如“加載”圖標(biāo)(小菊花))，主要的缺點(diǎn)是，字體圖標(biāo)做成的CSS sprites只能是某個(gè)純色，亞馬遜的css雪碧圖包括彩色圖標(biāo)，因此它不能使用這種技術(shù)。

如IcoMoon之類的工具可以很方便的建立一個(gè)自定義Web字體，所需要的只是每個(gè)圖標(biāo)的SVG文件。

10、避免內(nèi)聯(lián)iframe

每一個(gè)內(nèi)聯(lián)框架(iframe)都會(huì)生成一個(gè)HTTP請(qǐng)求，這是在iframe內(nèi)沒(méi)有另外依賴資源的情況下，這是我們做一個(gè)快速測(cè)試，比較一個(gè)iframe只含有文本。

包含一個(gè)iframe增加了將近0.2s的加載時(shí)間，為了保證web站點(diǎn)加載迅速，最好不要使用iframe。

11、移動(dòng)先行

移動(dòng)先行也適用于前端開(kāi)發(fā)，編碼時(shí)以移動(dòng)用戶作為第一考慮,然后為平板電腦和桌面逐步增強(qiáng)，減少不必要的依賴。

另外一種方式為桌面端優(yōu)先，重型組件默認(rèn)加載，然后為小屏幕隱藏這些組件(稱為“優(yōu)雅降級(jí)”)。

下面例子為桌面端優(yōu)先的編碼:

在上面的代碼中，默認(rèn)是顯示圖像，然后在移動(dòng)設(shè)備上通過(guò)媒體查詢隱藏了圖片。

下面的例子為移動(dòng)端優(yōu)先的編碼：

默認(rèn)情況下，圖片不顯示，之后使用媒體查詢對(duì)更大的屏幕進(jìn)行漸進(jìn)增強(qiáng)。

12、拆分到多個(gè)頁(yè)面(單獨(dú)的移動(dòng)網(wǎng)站)

保持你的核心內(nèi)容在頁(yè)面上,之后提供到次要內(nèi)容的鏈接到次要內(nèi)容，這將減少HTML的加載負(fù)擔(dān)，同時(shí)防止相關(guān)的資源被下載。

亞馬遜的移動(dòng)產(chǎn)品頁(yè)面有通用的產(chǎn)品信息，同時(shí)提供鏈接到“用戶評(píng)論”、“描述和細(xì)節(jié)”和“新&使用提供。

這就減少了三張圖片的HTTP請(qǐng)求，且HTML的大小減少45KB。

13、保持最少重定向(單獨(dú)的移動(dòng)網(wǎng)站)

亞馬遜有一個(gè)重定向，來(lái)引導(dǎo)游客到單獨(dú)的移動(dòng)頁(yè)面，這帶來(lái)了0.4秒的延遲，與之相比，戴爾的網(wǎng)站有兩個(gè)重定向，帶來(lái)了1.2秒延遲。

14、如何縮小圖片尺寸

響應(yīng)式圖片的思路是讓訪客圖像只下載那些最適合他們的設(shè)備的圖片，對(duì)于智能手機(jī)，,使用低分辨率圖像，可以快速下載和渲染。

亞馬遜的獨(dú)立的移動(dòng)產(chǎn)品頁(yè)面使用響應(yīng)式圖像技術(shù)，利用媒體查詢分配一個(gè)特定的背景圖像到一個(gè)div，這是亞馬遜的代碼:

盡管亞馬遜在內(nèi)部樣式中有八個(gè)產(chǎn)品圖片，在豎屏模式下的iPhone 4或Nexus S只有兩個(gè)被下載。

《波士頓環(huán)球報(bào)》的響應(yīng)式網(wǎng)站，采用了利用不同的data-fullsrc來(lái)加載圖片的響應(yīng)式圖像技術(shù)，這是一個(gè)html標(biāo)記和一個(gè)服務(wù)器端JavaScript重定向規(guī)則的組合：

src是手機(jī)上使用的圖像，確保網(wǎng)站默認(rèn)為尺寸較小的版本(移動(dòng)先行)，而data-fullsrc是全尺寸的圖像，JavaScript用來(lái)檢測(cè)設(shè)備的屏幕大小，之后寫(xiě)入cookie。

對(duì)于大屏幕，JavaScript利用data-fullsrc上的高分辨率圖像替換較小的圖片，服務(wù)器也使用Apache重寫(xiě)規(guī)則，來(lái)在圖像文件的名稱中檢查.r.(mobile用的圖片帶有.r.)，同時(shí)顯示一個(gè)備用GIF，而不會(huì)使用較小的移動(dòng)圖像(從而防止手機(jī)大小的圖像被下載到桌面)。

微軟的響應(yīng)式網(wǎng)站使用的斯科特·杰爾的Picturefill技術(shù):

注意：上面的代碼片段中，data-picture= ""應(yīng)該是data-picture，沒(méi)有= ""(=字符是smashing magazine的所見(jiàn)即所得編輯器自動(dòng)插入的)，利用這種技術(shù)，JavaScript掃描頁(yè)面的代碼，發(fā)現(xiàn)包含data-picture屬性的div，然后根據(jù)data-media屬性插入一個(gè)新的img標(biāo)簽。

這些響應(yīng)式圖像技術(shù)的主要好處有:

(1)、小屏幕下載低分辨率的圖像，而大屏幕下載高分辨率圖像。

(2)、只下載所需的圖片，而不需要的圖片不在后臺(tái)加載。

另外，還有各種各樣的其他技術(shù)實(shí)現(xiàn)響應(yīng)式圖像。

15、如何減少客戶端處理

星巴克的響應(yīng)式網(wǎng)站在chrome下禁用javascript后，桌面端良好的網(wǎng)絡(luò)環(huán)境下花費(fèi)了3.53秒加載完畢，而啟用javascript后，花費(fèi)了4.73秒，增加了34%。

Javascript對(duì)加載時(shí)間的影響，在移動(dòng)端較小的內(nèi)存，cpu及緩存下會(huì)表現(xiàn)得更明顯，通常，我們要重新思考javascript的使用，并保持其在最小尺寸。

一個(gè)很好的例子是BBC移動(dòng)網(wǎng)站的JavaScript，網(wǎng)站不使用外部JavaScript文件——都是內(nèi)聯(lián)，內(nèi)聯(lián)腳本僅限于幾行，沒(méi)有顯著影響內(nèi)存，HTML文件和所有內(nèi)聯(lián)JavaScript花費(fèi)0.78秒加載完畢，就像BBC那樣，亞馬遜的移動(dòng)產(chǎn)品頁(yè)面也沒(méi)有外部JavaScript文件，而使用最少的內(nèi)聯(lián)腳本，HTML文件和所有內(nèi)聯(lián)JavaScript花費(fèi)0.75秒加載完畢。

請(qǐng)注意：jQuery不是一個(gè)輕量的替代方案，事實(shí)上是jquery本身的補(bǔ)充。

這兩個(gè)網(wǎng)站在iPhone 4下均在4秒內(nèi)加載完畢，使用一個(gè)JavaScript框架前，考慮它是否真的有必要，在某些情況下，使用少量的JavaScript比調(diào)用一個(gè)框架更有效。

16、避免組件

組件對(duì)實(shí)際加載時(shí)間的影響是災(zāi)難性的，為了驗(yàn)證這一點(diǎn)，我們創(chuàng)建了一系列簡(jiǎn)單的HTML文件，每個(gè)文件包含默認(rèn)的嵌入代碼，一個(gè)小部件，你可以看到下面的結(jié)果多糟糕。

注意，這不是一個(gè)完美的測(cè)試，因?yàn)檫@些都是在模擬環(huán)境中的可控實(shí)驗(yàn)，不過(guò)結(jié)果比較有意思。

在單個(gè)頁(yè)面中，結(jié)合他們?yōu)橐粋€(gè)小部件，結(jié)果只包含這個(gè)部件的情況下，加載時(shí)間長(zhǎng)達(dá)4秒。

17、服務(wù)器端(后端)技術(shù)

除了優(yōu)化前端，服務(wù)器端技術(shù)也可以用來(lái)加速加載時(shí)間，這些技術(shù)都值得考慮，如以下幾點(diǎn)：

(1)、緩存HTTP重定向來(lái)加速重復(fù)訪問(wèn)。

(2)、合并HTTP重定向鏈來(lái)減少重定向。

(3)、使用HTTP壓縮來(lái)減少數(shù)量的字節(jié)(Gzip或縮小)。

18、借助于第三方軟件工具和服務(wù)

借助于第三方軟件工具或者服務(wù)來(lái)實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)的預(yù)加載、適配和網(wǎng)頁(yè)加速

(1)、MIP官網(wǎng)_移動(dòng)網(wǎng)頁(yè)加速器_MIP(Mobile Instant Pages) . mipengine. org/

(2)、云適配(AllMobilize Inc.) --全球領(lǐng)先的HTML5企業(yè)移動(dòng)化解決方案供應(yīng)商 . yunshipei. com/

(3)、使用CDN加速或者域名加速等第三方cdn節(jié)點(diǎn)緩存技術(shù)達(dá)到快速訪問(wèn)效果

Enweitech博客點(diǎn)評(píng)：

為了滿足移動(dòng)用戶的高期望，你需要對(duì)網(wǎng)站針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化，在4秒或更少的時(shí)間里加載完畢，最好的方式來(lái)達(dá)到4秒這個(gè)魔術(shù)時(shí)間，是通過(guò)減少JavaScript和優(yōu)化HTML、CSS和圖像，保持智能手機(jī)上最少的處理負(fù)荷。