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

當我們談到優化網站性能的前幾年，我們只專注于優化其服務器端只因為大部分的網站都是靜態的和被處理的服務器端。然而，Web 2技術的出現，利用動態Web應用程序很受歡迎。因此，它已成為當務之急，重視你的站點上執行的客戶端像服務器端處理。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS雪碧將多個圖像到一個單一的圖像
CSS雪碧將多個圖像到一個單一的圖像
使用數據的URI的優化
還有另一種方法，可以用來優化減少HTTP請求的圖像，稱為數據的URI。當使用一個

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

數據：[ ] [ ]；base64，

現在，讓我們看看一個例子，數據的URI的形式“重復的CSS背景圖像”：

體{

背景圖像：URL（數據：image/png；base64，'）；

重復：重復的背景；

}

結束了
隨著互聯網越來越快，網站的擁有者需要確保他們的網站前端性能的快速性能優化。希望上述要點可以幫助優化您的前端性能，產生更快的網站速度。

牧羊人設計文章推薦：

網站設計享受靈感最佳實踐
深圳網站制作軟件