信搭建網(wǎng)站的用戶都是看重網(wǎng)站速度，希望搭建的網(wǎng)站訪問速度良好，這樣才能保障網(wǎng)站業(yè)務的運行，所以今天小編就來介紹一下，優(yōu)化網(wǎng)站訪問速度的方法。

　　用戶想要優(yōu)化網(wǎng)站訪問速度，或者說網(wǎng)站訪問速度出現(xiàn)問題，可以先檢測下網(wǎng)站速度。網(wǎng)站速度可以使用IIS7網(wǎng)站監(jiān)控，先進行檢測，查看搭建的網(wǎng)站是否被劫持、網(wǎng)站域名是否被墻、DNS污染檢測、網(wǎng)站打開速度檢測等信息

　　如果正常情況下，那么可以通過以下幾種方法來優(yōu)化網(wǎng)頁用戶的訪問速度：

　　1、進行網(wǎng)站代碼優(yōu)化，刪除冗余的代碼，比如無用的空格、換行符、注釋，不需要加載的JS等，將JS代碼和CSS樣式合并，減少請求次數(shù)，可以有效提高網(wǎng)頁加載速度。

　　2、減少頁面上不必要的元素，瀏覽網(wǎng)頁實際上是將主機上的內(nèi)容下載到本地硬盤，再使用瀏覽器查看，所以說網(wǎng)頁本身所占空間越小，網(wǎng)頁瀏覽速度就越快。盡量不要使用flash動畫、大量的圖片或多媒體資源，如視頻、音頻等。

　　3、盡量使用靜態(tài)頁面，靜態(tài)頁面可以直接運行在客戶端，無需主機編輯便可以直接在瀏覽器上顯示，在訪問速度上比較快。而動態(tài)頁面雖然交互性好，但這類程序需要由服務器執(zhí)行處理，生成HTML頁面，然后通過瀏覽器瀏覽，網(wǎng)頁顯示速度較慢。

　　4、簡化頁面結構，在設計網(wǎng)頁時，不少站長為了追求頁面的對齊，將整個頁面內(nèi)容塞進一個Table中，然后由單元格劃分各個區(qū)塊，這會讓網(wǎng)頁顯示速度變慢。因為Table需要等所有的內(nèi)容加載好再分級顯示，如果某些內(nèi)容難以加載出來，整個頁面也就無法顯示出來。正確的做法應該使用DIV+CSS的頁面結構，它可以實現(xiàn)頁面的逐步加載。

　　5、使用CDN加速網(wǎng)絡，CDN即內(nèi)容分發(fā)網(wǎng)絡，它可以實時的根據(jù)網(wǎng)絡流量和各節(jié)點的鏈接、負載狀況以及用戶的距離和響應時間等信息將用戶的請求重新導向到離用戶最近的服務節(jié)點。這能讓用戶就近取得所需內(nèi)容，提高網(wǎng)頁響應速度。

　　6、大圖使用懶加載Lazy Load，圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求、減輕服務器壓力，提高頁面加載速度。

　　7、如果是大量圖片的網(wǎng)站，那么可以對網(wǎng)站的圖片進行壓縮之后，再使用到網(wǎng)頁上面，避免因為圖片占用太多緩存而導致網(wǎng)頁訪問緩慢。

　　以上就是優(yōu)化網(wǎng)站訪問速度的方法，希望能幫助到有需要的用戶。

家好，我是 Echa。

今天來分享 12 個優(yōu)化 CSS 代碼小技巧！

1. 避免高消耗屬性

分析表明，一些CSS屬性的渲染速度比其他屬性慢，因此應該謹慎使用。包括以下屬性：

• box-shadow
• border-radius
• position: fixed
• transform
• :nth-child
• filter

上述屬性都是對性能要求比較高的。如果這些屬性使用較少，那這就不是問題。但是如果一個頁面出現(xiàn)幾百次，那么整體的CSS可能會受到影響，所以要謹慎使用。

2. 使用 <link> 代替 @import

@import 規(guī)則主要用于導入資源或者CSS文件。它會阻止其他文件并行下載，并可能會導致網(wǎng)站速度變慢。

? 不要在CSS中這樣操作：

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

可以使用多個HTML 中的<link>標簽來代替@import，它將并行加載CSS文件，可以在一定程度上提高應用的加載的速度。

? 可以在HTML這樣操作：

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

3. 簡化選擇器

我們知道，有很多方法可以對 HTML 元素進行樣式設置，而最復雜的 CSS 選擇器可能需要幾毫秒的時間來解析。降低選擇器的復雜性就可以減少瀏覽器的負載并保持代碼簡潔明了。

? 避免這么寫：

.container > div.links-container ul li .link {

}

? 可以這么寫：

.container .link {

}

4. 避免使用 !Important

在一些時候，可以使用!Important 來提高樣式的優(yōu)先級，以使樣式生效。除非沒有別的辦法，否則不要使用!Important。

添加 !Important CSS聲明將覆蓋掉其他對應的樣式聲明，如果CSS的規(guī)則中 !Important 太多，瀏覽器就必須對代碼進行額外的檢查，這可能會降低頁面的加載速度。所以，盡量避免使用!Important。在很多情況下我們是可以通過選擇器來實現(xiàn)樣式重寫的，除非是想要對第三方庫的CSS進行重寫。

5. CSS實現(xiàn)特效和SVG代替圖片

頁面中加載圖像很可能需要很長的時間，尤其是在圖像未針對web進行優(yōu)化的情況下。在實現(xiàn)背景圖、漸變、幾何圖形時，盡量少使用圖片，而是使用CSS代碼實現(xiàn)。使用 CSS 代碼實現(xiàn)就會比圖片加載速度更快。

還可以使用SVG來代替PNG或者JPG圖片：

• 可以給圖片添加效果；
• 圖像加載速度更快；
• 圖像自動適應用戶屏幕。

6. 壓縮 CSS

我們可以通過壓縮CSS文件來刪除文件中所有的空白和不必要的代碼來減少文件的大小。CSS文件變小了，加載的時間自然就變少了，頁面的加載速度就會變。

7. 使用0而不是0px

當一個屬性的值為0時，我們可以不添加任何單位。即不要這么寫：0rem，0em，0px等。

當然，這么寫是沒有錯的，但是這些單位是沒有用的，當處理一個巨大的CSS文件時，沒有單位會比有單位時文件小一點。

8. 使用十六進制而不是顏色名稱

當我們將顏色設置為顏色名稱時，瀏覽器就會花費更多時間來找出顏色的十六進制值。假如想使用紅色，那設置為color:red之后，不同的瀏覽器顯示效果可能是不一樣的，作為開發(fā)人員，我們不能讓瀏覽器來決定網(wǎng)頁將如何顯示。

因此，盡量使用使用十六進制（例如紅色#ff0000）來定義顏色，就能確保在所有瀏覽器中以相同的色調(diào)準確得顯示想要的顏色。

9. 避免過多 font-family

為每個選擇器去定義字體并不是一個好的辦法，它會導致代碼很難維護，假如以后想要更改字體，就不得不在每個選擇器中更改它。

因此不要像下面這樣來定義字體：

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

.selection {
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  font-family: "Times New Roman", Times, serif;
}

可以在正文中定義要使用的字體，如果想要在其他選擇器中覆蓋該字體，就可以通過在該選擇器中使用所需的字體來實現(xiàn)：

body{
  font-family: Arial, Helvetica, sans-serif;
}

footer{
  font-family: "Times New Roman", Times, serif";
}

如果頁面中很多部分的字體都不盡相同，就可以將字體定義在 class 中，然后在需要的HTML標簽上使用該class即可：

.font-helvetica {
  font-family: Arial, Helvetica, sans-serif;
}

.font-times {
  font-family: "Times New Roman", Times, serif";
}

10. 使用備用字體

有些情況下，應用中使用的字體可能在用戶設備上不可用。在這種情況下，可以指定使用其他備用字體：

p{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

這樣，瀏覽器就會按順序進行解析，直到解析到第一個可用的字體，如果都不可用，就會使用瀏覽器的默認字體。

11. 使用 CSS 重置

每個瀏覽器都有自己的 HTML 元素默認樣式。假如有一個沒有任何樣式的 H1 元素，那么在默認情況下，在Firefox中，會給它一個上下為21.433px，左右為 0 的margin值。而在Safari中，會給它一個上下為21px，左右為 0 的margin值。

因此，重置CSS樣式，一個很好的做法就是從頭開始定義樣式。很多開發(fā)人員會使用通用選擇器（*）來執(zhí)行基本重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在使用通用選擇器 (*) 進行重置有時會導致性能問題，因為它會針對每個標簽去設置其樣式。

可以使用一些常用的CSS重置代碼庫，比如normalize。也可以參考一些CSS重置的最佳實踐。

12. 減少重復代碼

當兩個元素或選擇器具有相同的 CSS 屬性時，可以使用逗號來組合這些選擇器，而不是重復聲明樣式，這樣它們將共享 CSS 樣式。

? 避免這樣寫：

.header {
  background-color: #fefefe;
  padding: 20px 0;
}

.footer {
  background-color: #fefefe;
  padding: 20px 0;
}

? 建議這樣寫：