【51CTO.com快譯】眾所周知，沒(méi)有人會(huì)喜歡在超市里排隊(duì)結(jié)賬，也沒(méi)有人愿意在餐廳里排隊(duì)等號(hào)。其實(shí)，網(wǎng)站的訪客也是如此，他們不喜歡那些加載和響應(yīng)速度緩慢的網(wǎng)站。他們甚至?xí)ㄟ^(guò)減少訪問(wèn)次數(shù)、以及相互告誡來(lái)表達(dá)自己的不滿。

根據(jù)Aberdeen Group的一項(xiàng)研究表明(https://wpostats.com/tags/page%20views/)：如果某個(gè)網(wǎng)站的加載時(shí)間多延遲一秒，那么就會(huì)導(dǎo)致：

• 瀏覽次數(shù)減少11%。
• 訪客的滿意度降低16%。
• 購(gòu)買轉(zhuǎn)換率減少7%。

根據(jù)上述的數(shù)字我們不難看出：緩慢的加載頁(yè)面不但會(huì)影響網(wǎng)站本身的性能，而且難以留存用戶的數(shù)量、以及他們?cè)诖送Ａ舻臅r(shí)長(zhǎng)。實(shí)際上，64%的在線購(gòu)物者如果發(fā)現(xiàn)其目標(biāo)網(wǎng)站響應(yīng)過(guò)慢的話，就會(huì)毫不猶豫地“扭頭便走”，轉(zhuǎn)投其他的網(wǎng)站。

不過(guò)可喜的是，您不必為了優(yōu)化自己的網(wǎng)站性能，而去修煉成為高級(jí)碼農(nóng)。通過(guò)參考如下五種方法，您也能在提高網(wǎng)站加載速度的基礎(chǔ)上，成功實(shí)現(xiàn)付費(fèi)用戶的轉(zhuǎn)化，以及品牌認(rèn)可度的提升。

1.使用各種緩存插件

讓我們先考慮一下在大量用戶訪問(wèn)某個(gè)目標(biāo)網(wǎng)站時(shí)，其后臺(tái)會(huì)發(fā)生什么：

• 瀏覽器通過(guò)地址欄搜索訪問(wèn)Web站點(diǎn)。
• 目標(biāo)站點(diǎn)通過(guò)特定的PHP代碼與網(wǎng)站主機(jī)進(jìn)行通信。
• 網(wǎng)站主機(jī)向后臺(tái)存儲(chǔ)了網(wǎng)站所有、或部分內(nèi)容的主數(shù)據(jù)庫(kù)發(fā)出請(qǐng)求。
• 在收到請(qǐng)求之后，數(shù)據(jù)庫(kù)將其編譯為可讀的HTML頁(yè)面，然后發(fā)回網(wǎng)站主機(jī)，并最終呈現(xiàn)給用戶。

有經(jīng)驗(yàn)的讀者一定會(huì)發(fā)現(xiàn)，在該過(guò)程中，最消耗時(shí)間、最可能降低網(wǎng)站訪問(wèn)速度的步驟是：在主數(shù)據(jù)庫(kù)處檢索訪問(wèn)請(qǐng)求。此處正好需要緩存插件來(lái)派上用場(chǎng)。

為了減少網(wǎng)站的加載時(shí)間。這些插件省去了每一次在用戶訪問(wèn)時(shí)重復(fù)使用PHP技術(shù)，動(dòng)態(tài)地構(gòu)建頁(yè)面。它們通過(guò)創(chuàng)建不變的、或是靜態(tài)的HTML文件，并將其保存下來(lái)，以備將來(lái)使用。顯然，此過(guò)程不但減少了服務(wù)器的負(fù)載，而且最大程度地降低了對(duì)于帶寬的使用。與此同時(shí)，它們還有助于防止信息在中繼過(guò)程中可能出現(xiàn)的延遲。有統(tǒng)計(jì)表明：網(wǎng)站如果能夠合理地使用緩存插件，其頁(yè)面的加載時(shí)間能夠減少22%到58%。

2.選擇VPS托管

對(duì)于資金不夠雄厚的企業(yè)而言，網(wǎng)站性能不佳有時(shí)候源于選購(gòu)了過(guò)于廉價(jià)的Web主機(jī)。托管機(jī)構(gòu)通常會(huì)提供一個(gè)共享式的服務(wù)器，這些企業(yè)的網(wǎng)站與其他許多各種類型的網(wǎng)站魚(yú)龍混雜在一起，因此用戶對(duì)該網(wǎng)站的訪問(wèn)請(qǐng)求必須參與資源的“排隊(duì)”。

此時(shí)，企業(yè)就需要重新考慮是否應(yīng)該選購(gòu)更為可靠的、由虛擬專用服務(wù)器(virtual private server，VPS)所提供的托管服務(wù)了。具體請(qǐng)參見(jiàn)：vps-hosting" _fcksavedurl="https://dzone.com/articles/the-benefits-of-vps-hosting">https://dzone.com/articles/the-benefits-of-vps-hosting。總的說(shuō)來(lái)，VPS托管能夠?yàn)樘嵘W(wǎng)站頁(yè)面加載的速度帶來(lái)如下好處：

專用資源

• 防止其他站點(diǎn)消耗本網(wǎng)站的CPU、以及內(nèi)存等既有資源。
• 提供專有的服務(wù)器資源與性能，而不再使用共享的方式。
• 能夠靈活且按需地優(yōu)化資源，提供更多的CPU與內(nèi)存處理能力，進(jìn)而能夠更快地受理與執(zhí)行大量的請(qǐng)求。

本地資源

• 將數(shù)據(jù)資源直接保存在Web服務(wù)器上，而不再像共享托管的模式那樣，必須將資源轉(zhuǎn)存到另一臺(tái)服務(wù)器上。
• 提高網(wǎng)站的本地調(diào)用性能。
• 實(shí)時(shí)獲取快捷的硬盤(pán)性能。
• 相比標(biāo)準(zhǔn)的磁盤(pán)驅(qū)動(dòng)器而言，固態(tài)硬盤(pán)(或SSD)加載文件的速度更快。

可見(jiàn)，如果您的網(wǎng)站體積較大、且占用的資源較多，那么請(qǐng)升級(jí)當(dāng)前的托管計(jì)劃，以獲取更好的頁(yè)面性能。當(dāng)然，在選購(gòu)VPS主機(jī)之前，請(qǐng)務(wù)必先閱讀相關(guān)社區(qū)的認(rèn)證用戶對(duì)于該平臺(tái)的評(píng)論，考量它是否真的能夠允許大量用戶，在不影響性能的情況下，同時(shí)瀏覽托管網(wǎng)站。

3.減少HTTP請(qǐng)求

雅虎曾研究發(fā)現(xiàn)：普通網(wǎng)站的80%加載時(shí)間，通常被浪費(fèi)在下載各種腳本、樣式表和圖像等方面。每一項(xiàng)元素都會(huì)發(fā)出的不同的HTTP請(qǐng)求，因此如果頁(yè)面上的組件過(guò)多，那么呈現(xiàn)頁(yè)面所需的時(shí)間必定會(huì)較長(zhǎng)。

不過(guò)，在減少此類請(qǐng)求之前，我們有必要先具體了解本站點(diǎn)到底產(chǎn)生了那些HTTP請(qǐng)求。我們可以采用如下方式建立一個(gè)參考基準(zhǔn)。

• 在Google Chrome的菜單中，依次點(diǎn)擊更多工具->開(kāi)發(fā)者工具。
• 在目標(biāo)頁(yè)面上需要分析的區(qū)域，右擊并選擇“檢查”。
• 在右半部分的側(cè)邊欄中，點(diǎn)擊“網(wǎng)絡(luò)”菜單。如果沒(méi)有看到右側(cè)欄的話，請(qǐng)拖曳鼠標(biāo)以展開(kāi)。
• 在“名稱”列中仔細(xì)查看每一個(gè)文件。通過(guò)參閱右邊的“大小”和“時(shí)間”列，以獲悉每個(gè)文件的體積，以及加載所需的時(shí)長(zhǎng)。
• 在左下角處，您可以查看到本網(wǎng)站該區(qū)域發(fā)出了多少請(qǐng)求。(如下圖所示)

通過(guò)梳理相關(guān)文件，我們既可以刪除那些不需要的文件，又能夠按需合并部分文件。此外，由于某些無(wú)效的斷鏈接會(huì)通過(guò)創(chuàng)建替代性的HTTP請(qǐng)求，來(lái)降低網(wǎng)站的響應(yīng)速度，因此我們需要修復(fù)此類鏈接，以減少請(qǐng)求的整體數(shù)量。

4.使用外部平臺(tái)來(lái)承載視頻

生動(dòng)有趣的視頻顯然會(huì)讓您的網(wǎng)站增色不少，但是視頻文件本身也可能拖慢網(wǎng)站的加載速度。請(qǐng)注意如下三個(gè)方面：

• 切勿通過(guò)WordPress編輯器、或文件傳輸協(xié)議(FTP)，將視頻直接上傳到自己的網(wǎng)站。它們會(huì)占用您有限的服務(wù)器存儲(chǔ)空間。
• 從用戶體驗(yàn)的角度來(lái)說(shuō)，與其在帶寬有限的服務(wù)器上播放可能出現(xiàn)停滯和延遲的視頻，不如根本去掉。
• 請(qǐng)將視頻上傳到“愛(ài)、優(yōu)、騰”之類的第三方專業(yè)平臺(tái)，然后將其鏈接嵌入自己的網(wǎng)站。

總之，通過(guò)借助穩(wěn)定、高速的外部視頻平臺(tái)，您不但可以節(jié)省服務(wù)器上的空間，還能夠提高播放時(shí)的用戶體驗(yàn)。

5.優(yōu)化CSS的交付

CSS負(fù)責(zé)管理頁(yè)面上的各類樣式需求。通常Web站點(diǎn)會(huì)通過(guò)如下方式來(lái)獲悉相關(guān)的信息：

• 在頁(yè)面呈現(xiàn)之前，事先加載外部文件。如下代碼展示了當(dāng)外部CSS被加載到HTML頭部時(shí)的樣子：

CSS 

<!—Your styles –> 
<link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css />  

• 將內(nèi)聯(lián)的CSS嵌套在頁(yè)面的HTML中。此舉的好處在于：
  • 將所有的CSS都放在外部樣式表中，以避免在HTML代碼中包含過(guò)多的CSS，從而保障了代碼的簡(jiǎn)潔，并避免出現(xiàn)重復(fù)性的代碼。
  • 通過(guò)設(shè)置單一的外部樣式表，可避免產(chǎn)生針對(duì)多種樣式表的HTTP請(qǐng)求數(shù)量。如果需要，我們可以將它們進(jìn)行合并。
  • 在為HTML添加新的引用、并刪除舊的文件時(shí)候，我們可以復(fù)制每個(gè)CSS文件的內(nèi)容，并粘貼到單一的主CSS文件之中。

總之，單一的CSS文件可以有效地減少來(lái)自用戶瀏覽器的請(qǐng)求數(shù)量，并縮減頁(yè)面的執(zhí)行時(shí)間。當(dāng)然，為了安全起見(jiàn)，請(qǐng)留意CSS可能出現(xiàn)的渲染阻止(render-blocking)等問(wèn)題。

原文標(biāo)題：5 Things Your Website Needs for Faster Performance in 2020，作者：Joydeep Bhattacharya

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】