這是一個(gè)眾所周知的事實(shí)，緩慢的頁(yè)面加載時(shí)間，很大程度上影響人們拋棄一個(gè)網(wǎng)站。根據(jù)一項(xiàng)調(diào)查由KISSmetrics，“近百分之40的用戶(hù)放棄一個(gè)網(wǎng)站，需要超過(guò)3秒加載”。網(wǎng)站速度已成為迄今為止最重要的決定因素，實(shí)現(xiàn)在今天的不穩(wěn)定和網(wǎng)絡(luò)市場(chǎng)競(jìng)爭(zhēng)的成功。

當(dāng)我們談到優(yōu)化網(wǎng)站性能的前幾年，我們只專(zhuān)注于優(yōu)化其服務(wù)器端只因?yàn)榇蟛糠值木W(wǎng)站都是靜態(tài)的和被處理的服務(wù)器端。然而，Web 2技術(shù)的出現(xiàn)，利用動(dòng)態(tài)Web應(yīng)用程序很受歡迎。因此，它已成為當(dāng)務(wù)之急，重視你的站點(diǎn)上執(zhí)行的客戶(hù)端像服務(wù)器端處理。

如今，在客戶(hù)端遇到性能問(wèn)題需要立即解決與服務(wù)器端的性能問(wèn)題，因?yàn)榍罢呖梢杂绊懹脩?hù)體驗(yàn)。雖然這是事實(shí)，整個(gè)Web應(yīng)用程序的性能，10%可以通過(guò)提高50%的后端性能提高，不可否認(rèn)，40%或更多的比例可以提高聚焦在前端和減少加載時(shí)間的一半到你的應(yīng)用程序的性能。

更多是什么？相比于后端的項(xiàng)目，你需要花更少的時(shí)間和在改進(jìn)你的前端資源。這就是為什么它是為網(wǎng)站所有者在改善他們的網(wǎng)站前端性能付出應(yīng)有的代價(jià)，重要的。

下面是一些最佳實(shí)踐之后，將有助于提高你的前端性能的一個(gè)偉大的程度：

1。首先，測(cè)量你的前端性能。
當(dāng)然，你想知道你的前端響應(yīng)當(dāng)用戶(hù)提交請(qǐng)求的瀏覽器。此外，只有在測(cè)量你的前端性能，你可以知道改進(jìn)作水平。幸運(yùn)的是，有幾個(gè)有用的工具，可以幫助你找出你的在線(xiàn)網(wǎng)站的前端性能，如網(wǎng)頁(yè)的速度，y-slow和螢火蟲(chóng)等等。

2。減少你的CSS的大小，通過(guò)HTML和JavaScript資源縮小。
編寫(xiě)CSS代碼時(shí)，我們經(jīng)常使用的是更容易理解的格式。基本上，我們傾向于使用一種人類(lèi)友好的格式看起來(lái)像：

中心{。
保證金：汽車(chē)；
寬度：80%；
邊境：6px固體# d3d3d3；
填料：8；
}

在上面的例子中，我們可以清楚地看到，我們的中心對(duì)準(zhǔn)使用保證金和其他CSS屬性。上面的CSS也可以寫(xiě)為：

。中心{保證金：汽車(chē)；寬度：80%；邊境：6px固體# d3d3d3；填充：8px；}

但你可以看到，這行代碼是不太清楚像上面的CSS代碼段。雖然，我們也許容易閱讀，但它包含不必要的字符。如果你用一千行代碼運(yùn)行一個(gè)大型網(wǎng)站，然后寫(xiě)代碼就像以前的代碼片段會(huì)降低性能。但是，CSS文件的壓縮可以幫助你減少不必要的字符如空格，評(píng)論，等等。

關(guān)于縮小最好的部分是，所有不需要的字符（包括冗余數(shù)據(jù)）可以消除不影響你的網(wǎng)站的性能。你甚至可以縮小你的CSS代碼，以及使用YUI壓縮器工具JavaScript。此外，你可以縮小你的HTML使用pagespeed工具的見(jiàn)解。

3。你的CSS和JavaScript文件捆綁在一起以減少HTTP的開(kāi)銷(xiāo)。
當(dāng)你的網(wǎng)站的一個(gè)HTTP請(qǐng)求發(fā)送到遠(yuǎn)程服務(wù)器，和你的網(wǎng)站的CSS和JavaScript文件，如有需要的可以下載到您的網(wǎng)頁(yè)瀏覽器。

所以，如果你有4個(gè)CSS文件，你將需要至少四個(gè)“得到”的要求提供所有的文件。這最終會(huì)增加開(kāi)銷(xiāo)，生成網(wǎng)頁(yè)需要。然而，通過(guò)捆綁你的CSS和JavaScript文件，可以幫助提高你的網(wǎng)頁(yè)速度大大。

SitePoint也談到了捆綁CSS和JavaScript在一起，因?yàn)樗麄兡軌蚩s減到1.6秒的響應(yīng)時(shí)間，從而幫助他們減少“響應(yīng)時(shí)間由原來(lái)的百分之76次”。

4。優(yōu)化你的圖像，以減少服務(wù)器的請(qǐng)求
下載多個(gè)圖像可以使你的網(wǎng)站速度很慢不顧自己的形象。這是因?yàn)?，在你的站點(diǎn)上每個(gè)圖像將HTTP請(qǐng)求負(fù)載。因此，更多的圖片，你會(huì)對(duì)你的網(wǎng)站，更要求將生成的，如下面的截圖：

elementhttprequest
更多的圖片，你有，它不再需要你的網(wǎng)站加載
不幸的是，瀏覽器只能處理一對(duì)一的同時(shí)請(qǐng)求，從而導(dǎo)致圖像的瓶頸。但是，多幅圖像融合成一個(gè)單一的圖像，有助于減少HTTP請(qǐng)求數(shù)。這正是一個(gè)CSS雪碧什么。

一個(gè)精靈，基本上，一個(gè)大的圖像包含一個(gè)圖像集合。值得慶幸的是，的CSS雪碧發(fā)生器使任務(wù)上傳圖片–需要組合成一個(gè)單一的CSS雪碧–容易很多。這里是精靈圖像實(shí)例：

CSS雪碧將多個(gè)圖像到一個(gè)單一的圖像
CSS雪碧將多個(gè)圖像到一個(gè)單一的圖像
使用數(shù)據(jù)的URI的優(yōu)化
還有另一種方法，可以用來(lái)優(yōu)化減少HTTP請(qǐng)求的圖像，稱(chēng)為數(shù)據(jù)的URI。當(dāng)使用一個(gè)

在你的HTML文件或CSS定義背景圖像元素，你需要鏈接單元外部圖像文件。隨著數(shù)據(jù)的URI，你可以消除瀏覽器加載外部來(lái)源的圖像數(shù)據(jù)的需要，因?yàn)樗度際TML或CSS文件數(shù)據(jù)導(dǎo)入。
數(shù)據(jù)的URI表示在數(shù)據(jù)字符串編碼為base64格式標(biāo)記和樣式表的數(shù)據(jù)。最好的部分是，字符串可以用來(lái)存儲(chǔ)你的圖片直接標(biāo)記和樣式表，而不是做一個(gè)HTTP請(qǐng)求從外部源加載圖像數(shù)據(jù)。
數(shù)據(jù)的URI的標(biāo)準(zhǔn)格式：

數(shù)據(jù)：[ ] [ ]；base64，

現(xiàn)在，讓我們看看一個(gè)例子，數(shù)據(jù)的URI的形式“重復(fù)的CSS背景圖像”：

體{

背景圖像：URL（數(shù)據(jù)：image/png；base64，'）；

重復(fù)：重復(fù)的背景；

}

結(jié)束了
隨著互聯(lián)網(wǎng)越來(lái)越快，網(wǎng)站的擁有者需要確保他們的網(wǎng)站前端性能的快速性能優(yōu)化。希望上述要點(diǎn)可以幫助優(yōu)化您的前端性能，產(chǎn)生更快的網(wǎng)站速度。

牧羊人設(shè)計(jì)文章推薦：

網(wǎng)站設(shè)計(jì)享受靈感最佳實(shí)踐
深圳網(wǎng)站制作軟件