翻譯：瘋狂的技術宅
為你網站的使用者留下良好的第一印象是非常必要的。隨著商業領域的競爭，擁有一個吸引人的網站可以幫助你脫穎而出。研究表明，如果載入時間超過3秒，會有 40％ 的使用者放棄訪問你的網站（www.optimumsystemsonline.com/business-su…
如果開發人員急於瀏覽網站的編碼部分，問題的發生只是時間問題。各種各樣的編碼錯誤可能會導致網站載入速度非常慢，從而使用者離開的網站。在頁面載入時間與跳出率的爭論中，你可以清楚地看到載入速度較慢的網站的參與率較低。
同時提高網站載入速度也是提高網站排名的必要步驟之一。以下是避免頁面載入速度緩慢時需要考慮的一些事項。
為你的頁面元素選擇正確的載入順序
你的頁面中 <head> 部分中的所有元素都需要以正確的方式預載入。使用者在你的網站上看到任何內容之前，所有這些元素都必須按順序載入。在 <head> 部分中使用 JavaScript 會導致頁面在嘗試呈現資訊時變慢。
如果沒有對頁面載入元素的順序進行優化，那麼使用者可能會在載入過程中看到白屏。通過優化頁面載入元素，可以大大的加快頁面載入的速度。雖然優化頁面載入元素非常耗時，但這種付出還是很值得的。
伺服器效能可能會導致頁面載入問題
只要有人點選你的網站，它就會啟用從伺服器開始的一系列事件。瀏覽器所做的最重要的一件事就是向你的伺服器傳送請求。
如果伺服器響應緩慢，就會導致頁面載入問題，所以你必須排除網路故障。如果這類問題經常發生，你可能需要重新尋找其他 Web 服務商，要考慮它能為你的網站提供多少速度，即使你需要為可靠的網路主機支付更多費用。
優化程式碼很重要
壓縮 JavaScript 程式碼也是解決頁面載入速度緩慢問題的好方法。使用程式碼壓縮工具，你可以擺脫逗號、註釋甚至不需要的空格。使用 Google Closure Compiler 等程式是不錯的選擇。
優化之前：
function test(node) {
var parent = node.parentNode;
if (0) {
alert( "Hello Everybody" );
} else {
alert( "We love Websites" );
}
return;
alert( 1 );
}
複製程式碼優化後：
function test(){alert("We love Websites")}
複製程式碼正如你所看到的，優化工具刪除不會用到的變數，還刪掉了死程式碼。
優化伺服器端程式碼同樣非常重要，就像我們在處理大檔案一文中看到的那樣，而不會損失效能。
瞭解延遲和非同步標記
JavaScript 中最常用的同步載入機制之一是非同步載入。基本上此機制可確保你的網站以多流方式載入。
在使用瀏覽器找到一串如 <script src =“some.js"> </ script> 的程式碼後，將立即停止建立 CSSOM 和 DOM 模型。所以將 JavaScript 程式碼放在主 HTML 程式碼之後可以加快頁面載入速度。
此程式碼可讓你更好地理解非同步標記的功能：
<html>
<head>
<script src="big.js"></script>
</head>
<body>
複製程式碼在載入 big.js 之前，下面的程式碼不會處理。
</body>
</html>
複製程式碼向此程式碼新增 async 標記可確保立即建立 DOM 模型，並且不會干擾正確載入和執行的 JavaScript。以下是正確使用 async 標記的示例。
<html>
<head>
<script src="big.js" async></script>
</head>
<body>
複製程式碼這段程式碼會被處理，並且不依賴於big.js載入進度。
</body>
</html>
複製程式碼需要注意的是，如果你的 JavaScript 必須進行 HTML 或 CSS 操作，則使用 sync 標記可能不是最好的方法。必須以強制的順序載入指令碼時，應避免使用 sync 標記。
注意複雜的檔案格式和大影象
雖然編碼錯誤是頁面載入速度緩慢的主要原因之一，但大影象和複雜檔案格式等也會導致問題。一旦你使用的伺服器被瀏覽器請求，它會開始將需要的每個位元組都載入到使用者的移動裝置或計算機上。
如果你有許多大影象，那麼載入它們需要更長的時間。這就是你需要使用檔案壓縮軟體和外掛的原因。雖然壓縮這些影象的大小可能會有所幫助，但在某些情況下，你可能需要刪除一些影象。
未使用的 .JS 庫元件
許多開發人員按原樣使用 jQuery UI 之類的庫，而根本不去優化它。這樣做可能會導致你根本不需要的程式碼元件。如果可以選擇從 JavaScript 庫中排除哪些元件，那麼你一定要抓住這個機會。通過修改這些庫中的程式碼，可以為使用者提供更好的體驗並加快你的網站速度。
使用 GZIP 模組是理想的選擇
雖然 gzip 是一個相對古老的發明，但在加快網站載入速度時絕對值得使用。這個程式能夠壓縮 Web 伺服器上的檔案大小，甚至可以將一些靜態檔案壓縮到原始大小的 99％。
由於 JavaScript 被視為文字檔案，因此可以通過用 gzip 壓縮來減少頁面載入所需的時間。
使用 Node.js 對檔案壓縮也是一個好主意。以下是進行設定的方法：
const zlib = require('zlib');
你可以通過以下幾種方式使用：
const gzip = zlib.createGzip();
const fs = require('fs');
const inp = fs.createReadStream('input.txt');
const out = fs.createWriteStream('input.txt.gz');
inp.pipe(gzip).pipe(out);
複製程式碼在gzip的幫助下，你可以找到並消除程式碼中的重複元素。這些重複的元素也可以用歸檔字典中的小符號進行替換。剩下的最終程式碼將不會那麼笨重，並且完全針對效能進行了優化。
Be Aware of Code Density
意識到程式碼密度
當你的網站中包含大而密集的元素時只會減慢它的速度。像 Facebook 這樣的大型網站擁有超過 6000 萬行程式碼。雖然你的站點沒有這麼多程式碼，但還是需要找到優化程式碼的方法，以確保能夠快速載入。
不斷審查自己的程式碼並對其進行優化是避免問題的唯一方法。從長遠來看，在程式碼優化方面投入的時間和精力肯定會得到回報。
處理太多檔案請求
每次新使用者訪問時，你網站上的每個 CSS 檔案、社交分享按鈕和 JavaScript 元素都會生成一個新的檔案請求。即使是最強大和最可靠的伺服器也只能在處理這麼多請求時開始減速。
你需要考慮的是刪除頁面上的某些檔案請求，而不是試圖弄清楚如何提高伺服器的速度。
放任此此問題會導致在吸引使用者訪問你網站時遇到很多問題。你的主要目標應該是盡一切可能加速你的網站，並讓人們輕鬆瀏覽它。
避免使用太多外掛
即使你使用 WordPress 網站，在頁面載入速度方面也可能會遇到問題。大多數企業主使用 WordPress 模板，因為它可以與他們的新網站一起執行。但是，你通常還需要使用許多不同的外掛來使網站具有更多功能。
這些外掛可能是有用的，但是有太多外掛會產生問題。如果有外掛太多又試圖同時執行，那麼它將大大減慢你的網站速度。
客觀地看待正在使用的外掛可以幫助你找出哪些外掛是可以不用的。減少外掛的數量將使你的 WordPress 網站更快。
適當的用 CSS3 效果而不是 JavaScript
一些程式設計師沒有意識到 CSS 的新版本可以比以舊版本做得更多。在過去 CSS 1.0 和 2.0 需要大量的 JavaScript 輔助才能實現高階樣式效果。但是用 CSS3 不僅可以為你提供更大的靈活性，還可以降低你的 CPU 使用率。
下面是一些程式碼，你可以用 CSS3 實現滑塊效果而無需使用 JavaScript：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Slider</title>
</head>
<body>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
</body>
</html>
複製程式碼CSS
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
複製程式碼學習如何使用更新的工具將幫助你實現所追求的頁面載入速度。
定期更新內容管理系統
大多數企業會使用提供內容管理功能的網站平臺，比如 Wix 和 WordPress 這樣的平臺，無需花費大量時間和金錢。如果你用的是其中之一的話，則必須定期去更新它。
歡迎關注京程一燈公眾號：京程一燈，獲取更多前端乾貨。
