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

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

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

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

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

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

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

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

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

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

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

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

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

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

SitePoint也談到了捆綁CSS和JavaScript在一起，因為他們能夠縮減到1.6秒的響應(yīng)時間，從而幫助他們減少“響應(yīng)時間由原來的百分之76次”。

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

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

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

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

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

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

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

體{

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

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

}

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

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

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