翻譯：瘋狂的技術(shù)宅
原文：https://likegeeks.com/improve-website-speed-tips-tricks/
為你網(wǎng)站的用戶留下良好的第一印象是非常必要的帆竹。隨著商業(yè)領(lǐng)域的競爭，擁有一個(gè)吸引人的網(wǎng)站可以幫助你脫穎而出。研究表明，如果加載時(shí)間超過3秒，會(huì)有 40％ 的用戶放棄訪問你的網(wǎng)站（https://www.optimumsystemsonline.com/business-success/5-stats-that-will-make-you-monitor-web-performance/）。
如果開發(fā)人員急于瀏覽網(wǎng)站的編碼部分，問題的發(fā)生只是時(shí)間問題抚垄。各種各樣的編碼錯(cuò)誤可能會(huì)導(dǎo)致網(wǎng)站加載速度非常慢，從而用戶離開的網(wǎng)站。在頁面加載時(shí)間與跳出率的爭論中呆馁，你可以清楚地看到加載速度較慢的網(wǎng)站的參與率較低桐经。
同時(shí)提高網(wǎng)站加載速度也是提高網(wǎng)站排名的必要步驟之一。以下是避免頁面加載速度緩慢時(shí)需要考慮的一些事項(xiàng)浙滤。
為你的頁面元素選擇正確的加載順序
你的頁面中 <head> 部分中的所有元素都需要以正確的方式預(yù)加載阴挣。用戶在你的網(wǎng)站上看到任何內(nèi)容之前，所有這些元素都必須按順序加載纺腊。在 <head> 部分中使用 JavaScript 會(huì)導(dǎo)致頁面在嘗試呈現(xiàn)信息時(shí)變慢畔咧。
如果沒有對(duì)頁面加載元素的順序進(jìn)行優(yōu)化，那么用戶可能會(huì)在加載過程中看到白屏揖膜。通過優(yōu)化頁面加載元素誓沸，可以大大的加快頁面加載的速度。雖然優(yōu)化頁面加載元素非常耗時(shí)壹粟，但這種付出還是很值得的拜隧。
服務(wù)器性能可能會(huì)導(dǎo)致頁面加載問題
只要有人點(diǎn)擊你的網(wǎng)站，它就會(huì)激活從服務(wù)器開始的一系列事件趁仙。瀏覽器所做的最重要的一件事就是向你的服務(wù)器發(fā)送請(qǐng)求洪添。
如果服務(wù)器響應(yīng)緩慢，就會(huì)導(dǎo)致頁面加載問題雀费，所以你必須排除網(wǎng)絡(luò)故障干奢。如果這類問題經(jīng)常發(fā)生，你可能需要重新尋找其他 Web 服務(wù)商盏袄，要考慮它能為你的網(wǎng)站提供多少速度忿峻，即使你需要為可靠的網(wǎng)絡(luò)主機(jī)支付更多費(fèi)用。
優(yōu)化代碼很重要
壓縮 JavaScript 代碼也是解決頁面加載速度緩慢問題的好方法貌矿。使用代碼壓縮工具炭菌，你可以擺脫逗號(hào)、注釋甚至不需要的空格逛漫。使用 Google Closure Compiler 等程序是不錯(cuò)的選擇。
優(yōu)化之前：
function test(node) {
var parent = node.parentNode;
if (0) {
alert( "Hello Everybody" );
} else {
alert( "We love Websites" );
}
return;
alert( 1 );
}
優(yōu)化后：
function test(){alert("We love Websites")}
正如你所看到的赘艳，優(yōu)化工具刪除不會(huì)用到的變量酌毡，還刪掉了死代碼。
優(yōu)化服務(wù)器端代碼同樣非常重要蕾管，就像我們?cè)?a target="_blank" rel="nofollow">處理大文件一文中看到的那樣枷踏，而不會(huì)損失性能。
了解延遲和異步標(biāo)記
JavaScript 中最常用的同步加載機(jī)制之一是異步加載掰曾⌒袢洌基本上此機(jī)制可確保你的網(wǎng)站以多流方式加載。
在使用瀏覽器找到一串如 <script src =“some.js"> </ script> 的代碼后，將立即停止創(chuàng)建 CSSOM 和 DOM 模型掏熬。所以將 JavaScript 代碼放在主 HTML 代碼之后可以加快頁面加載速度佑稠。
此代碼可讓你更好地理解異步標(biāo)記的功能：
<html>
<head>
<script src="big.js"></script>
</head>
<body>
在加載 big.js 之前，下面的代碼不會(huì)處理旗芬。
</body>
</html>
向此代碼添加 async 標(biāo)記可確保立即創(chuàng)建 DOM 模型舌胶，并且不會(huì)干擾正確加載和執(zhí)行的 JavaScript。以下是正確使用 async 標(biāo)記的示例疮丛。
<html>
<head>
<script src="big.js" async></script>
</head>
<body>
這段代碼會(huì)被處理幔嫂，并且不依賴于big.js加載進(jìn)度。
</body>
</html>
需要注意的是誊薄，如果你的 JavaScript 必須進(jìn)行 HTML 或 CSS 操作履恩，則使用 sync 標(biāo)記可能不是最好的方法。必須以強(qiáng)制的順序加載腳本時(shí)呢蔫，應(yīng)避免使用 sync 標(biāo)記切心。
注意復(fù)雜的文件格式和大圖像
雖然編碼錯(cuò)誤是頁面加載速度緩慢的主要原因之一，但大圖像和復(fù)雜文件格式等也會(huì)導(dǎo)致問題咐刨。一旦你使用的服務(wù)器被瀏覽器請(qǐng)求昙衅，它會(huì)開始將需要的每個(gè)字節(jié)都加載到用戶的移動(dòng)設(shè)備或計(jì)算機(jī)上。
如果你有許多大圖像定鸟，那么加載它們需要更長的時(shí)間而涉。這就是你需要使用文件壓縮軟件和插件的原因。雖然壓縮這些圖像的大小可能會(huì)有所幫助联予，但在某些情況下啼县，你可能需要?jiǎng)h除一些圖像。
未使用的 .JS 庫組件
許多開發(fā)人員按原樣使用 jQuery UI 之類的庫沸久，而根本不去優(yōu)化它季眷。這樣做可能會(huì)導(dǎo)致你根本不需要的代碼組件。如果可以選擇從 JavaScript 庫中排除哪些組件卷胯，那么你一定要抓住這個(gè)機(jī)會(huì)子刮。通過修改這些庫中的代碼，可以為用戶提供更好的體驗(yàn)并加快你的網(wǎng)站速度窑睁。
使用 GZIP 模塊是理想的選擇
雖然 gzip 是一個(gè)相對(duì)古老的發(fā)明挺峡，但在加快網(wǎng)站加載速度時(shí)絕對(duì)值得使用。這個(gè)程序能夠壓縮 Web 服務(wù)器上的文件大小担钮，甚至可以將一些靜態(tài)文件壓縮到原始大小的 99％橱赠。
由于 JavaScript 被視為文本文件，因此可以通過用 gzip 壓縮來減少頁面加載所需的時(shí)間箫津。
使用 Node.js 對(duì)文件壓縮也是一個(gè)好主意狭姨。以下是進(jìn)行設(shè)置的方法：
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的幫助下宰啦，你可以找到并消除代碼中的重復(fù)元素。這些重復(fù)的元素也可以用歸檔字典中的小符號(hào)進(jìn)行替換饼拍。剩下的最終代碼將不會(huì)那么笨重赡模，并且完全針對(duì)性能進(jìn)行了優(yōu)化。
Be Aware of Code Density
意識(shí)到代碼密度
當(dāng)你的網(wǎng)站中包含大而密集的元素時(shí)只會(huì)減慢它的速度惕耕。像 Facebook 這樣的大型網(wǎng)站擁有超過 6000 萬行代碼纺裁。雖然你的站點(diǎn)沒有這么多代碼，但還是需要找到優(yōu)化代碼的方法司澎，以確保能夠快速加載欺缘。
不斷審查自己的代碼并對(duì)其進(jìn)行優(yōu)化是避免問題的唯一方法。從長遠(yuǎn)來看挤安，在代碼優(yōu)化方面投入的時(shí)間和精力肯定會(huì)得到回報(bào)谚殊。
處理太多文件請(qǐng)求
每次新用戶訪問時(shí)，你網(wǎng)站上的每個(gè) CSS 文件蛤铜、社交分享按鈕和 JavaScript 元素都會(huì)生成一個(gè)新的文件請(qǐng)求嫩絮。即使是最強(qiáng)大和最可靠的服務(wù)器也只能在處理這么多請(qǐng)求時(shí)開始減速。
你需要考慮的是刪除頁面上的某些文件請(qǐng)求围肥，而不是試圖弄清楚如何提高服務(wù)器的速度剿干。
放任此此問題會(huì)導(dǎo)致在吸引用戶訪問你網(wǎng)站時(shí)遇到很多問題。你的主要目標(biāo)應(yīng)該是盡一切可能加速你的網(wǎng)站穆刻，并讓人們輕松瀏覽它置尔。
避免使用太多插件
即使你使用 WordPress 網(wǎng)站，在頁面加載速度方面也可能會(huì)遇到問題氢伟。大多數(shù)企業(yè)主使用 WordPress 模板榜轿，因?yàn)樗梢耘c他們的新網(wǎng)站一起運(yùn)行。但是朵锣，你通常還需要使用許多不同的插件來使網(wǎng)站具有更多功能谬盐。
這些插件可能是有用的，但是有太多插件會(huì)產(chǎn)生問題诚些。如果有插件太多又試圖同時(shí)運(yùn)行飞傀，那么它將大大減慢你的網(wǎng)站速度。
客觀地看待正在使用的插件可以幫助你找出哪些插件是可以不用的诬烹。減少插件的數(shù)量將使你的 WordPress 網(wǎng)站更快助析。
適當(dāng)?shù)挠?CSS3 效果而不是 JavaScript
一些程序員沒有意識(shí)到 CSS 的新版本可以比以舊版本做得更多。在過去 CSS 1.0 和 2.0 需要大量的 JavaScript 輔助才能實(shí)現(xiàn)高級(jí)樣式效果椅您。但是用 CSS3 不僅可以為你提供更大的靈活性，還可以降低你的 CPU 使用率寡键。
下面是一些代碼掀泳，你可以用 CSS3 實(shí)現(xiàn)滑塊效果而無需使用 JavaScript：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Slider</title>
</head>
<body>
<base >
<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;
}
學(xué)習(xí)如何使用更新的工具將幫助你實(shí)現(xiàn)所追求的頁面加載速度雪隧。
定期更新內(nèi)容管理系統(tǒng)
大多數(shù)企業(yè)會(huì)使用提供內(nèi)容管理功能的網(wǎng)站平臺(tái)，比如 Wix 和 WordPress 這樣的平臺(tái)员舵，無需花費(fèi)大量時(shí)間和金錢脑沿。如果你用的是其中之一的話，則必須定期去更新它马僻。
