網(wǎng)站建設(shè)的一個(gè)重要部分是資源的加載優(yōu)化。由于網(wǎng)絡(luò)速度低、帶寬低、延遲高、移動(dòng)設(shè)備內(nèi)存小、處理器性能低等原因，網(wǎng)站建設(shè)往往需要優(yōu)化前端頁(yè)面的性能，以滿足用戶對(duì)網(wǎng)頁(yè)加載的期望。前一段時(shí)間，我在相關(guān)領(lǐng)域做了一些網(wǎng)站優(yōu)化。我發(fā)現(xiàn)網(wǎng)站上的中文教程相對(duì)較少。我一步步把他們看下來，尋找需要解決的問題。因此，我整理并翻譯了一些有用的網(wǎng)站。網(wǎng)頁(yè)的加載時(shí)間受網(wǎng)絡(luò)速度的影響。通常，瀏覽器用于模擬特定的網(wǎng)絡(luò)速度進(jìn)行測(cè)試，以便在優(yōu)化前和優(yōu)化后的結(jié)果之間進(jìn)行更準(zhǔn)確的比較。

1.減少請(qǐng)求的數(shù)量

文件資源壓縮：刪除不必要的字節(jié)，如多余的空格、換行符、縮進(jìn)、注釋等。提高下載、解析和執(zhí)行速度。有許多這種類型的在線工具。合并文件：每個(gè)CSS和JS文件都是一個(gè)HTTP請(qǐng)求，相關(guān)的多個(gè)文件被適當(dāng)?shù)睾喜⒌揭粋€(gè)文件中，以減少HTTP請(qǐng)求的數(shù)量。為了解決加載速度的問題，首先要做的是減少對(duì)網(wǎng)頁(yè)的請(qǐng)求，如css  sprite、js/css壓縮、緩存和按需加載。還有另一種方法可以將資源放在不同的子域下。例如，從靜態(tài)資源中分離圖片資源可以大大加快網(wǎng)頁(yè)加載時(shí)間，但是這種方法不適用于HTTP2連接。

2.充分利用緩存

使用緩存可以減少對(duì)服務(wù)器的請(qǐng)求數(shù)量并節(jié)省加載時(shí)間，因此所有靜態(tài)資源都應(yīng)該在服務(wù)器端設(shè)置緩存并盡可能使用長(zhǎng)緩存。長(zhǎng)緩存資源的更新可以用不同的時(shí)間戳來更新。合理設(shè)置資源的到期時(shí)間，特別是對(duì)于一些不需要改變的靜態(tài)資源，將緩存的到期時(shí)間設(shè)置得更長(zhǎng)。

3.壓縮

網(wǎng)站壓縮后，將使搜索引擎更順暢地抓取網(wǎng)站，提高用戶體驗(yàn)，從而更好地瀏覽網(wǎng)站內(nèi)容。Gzip網(wǎng)頁(yè)是作為一個(gè)整體壓縮的，目前被許多虛擬主機(jī)支持，不需要網(wǎng)站管理員操作。網(wǎng)站Gzip壓縮后，網(wǎng)頁(yè)的打開速度加快；對(duì)于網(wǎng)頁(yè)腳本資源的壓縮，可以使用網(wǎng)站管理員工具的js壓縮工具。建議網(wǎng)站不要有太多的js文件，這些文件對(duì)于搜索引擎來說很難閱讀。網(wǎng)站圖像壓縮是對(duì)網(wǎng)站不重要的圖像進(jìn)行壓縮，可以大大減少虛擬主機(jī)的空間，加快網(wǎng)頁(yè)的加載速度；在網(wǎng)絡(luò)上傳輸文件時(shí)，減少資源的大小不僅可以減少存儲(chǔ)空間，還可以減少傳輸時(shí)間，加快網(wǎng)頁(yè)顯示速度。因此，有必要壓縮HTML、CSS、JavaScript等資源。

4.優(yōu)化JavaScript加載性能

第一個(gè)屏應(yīng)控制在1秒內(nèi)。未用于等效屏幕的資源應(yīng)在用戶需要時(shí)加載(延遲加載、上下滾動(dòng)加載)；感知和不可感知的負(fù)載。隨著越來越多的應(yīng)用程序使用JavaScript技術(shù)在客戶端進(jìn)行處理，JavaScript在瀏覽器中的性能成為開發(fā)人員面臨的更重要的問題。JavaScript的阻塞特性使JavaScript性能優(yōu)化變得復(fù)雜，也就是說，當(dāng)瀏覽器執(zhí)行JavaScript代碼時(shí)，它不能同時(shí)做其他事情，也就是說，其他事情將被阻塞。無論當(dāng)前的JavaScript代碼是嵌入的還是在外部鏈文件中，頁(yè)面的下載和呈現(xiàn)都必須停止，并等待腳本執(zhí)行完成。JavaScript執(zhí)行過程花費(fèi)的時(shí)間越長(zhǎng)，瀏覽器等待響應(yīng)用戶輸入的時(shí)間就越長(zhǎng)。

5.CDN加速

通過CDN加速是一種成本相對(duì)較高的優(yōu)化方法，因此這些優(yōu)化方法將其置于所有優(yōu)化方法的末尾，但它是一種非常有效的優(yōu)化方案。CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。CDN加速主要是為了加速靜態(tài)資源，比如網(wǎng)站上上傳的圖片和媒體，以及一些導(dǎo)入的Js、css等文件。CDN加速需要依賴各種網(wǎng)絡(luò)節(jié)點(diǎn)，例如，100個(gè)CDN服務(wù)器分布在全國(guó)各地。當(dāng)從上海訪問時(shí)，資源將從更近的節(jié)點(diǎn)返回，該節(jié)點(diǎn)是核心。CDN服務(wù)器通過緩存或主動(dòng)抓取主服務(wù)器的內(nèi)容來存儲(chǔ)資源。

對(duì)于移動(dòng)產(chǎn)品來說，如何優(yōu)化網(wǎng)站的負(fù)載無疑非常重要，但性能也是用戶體驗(yàn)中不可或缺的一部分。當(dāng)用戶可以在1 ~ 2秒內(nèi)打開手機(jī)頁(yè)面并看到信息顯示，或者可以開始下一步操作時(shí)，用戶會(huì)覺得速度還是可以接受的。如果頁(yè)面在2 ~ 5秒后變得可用，用戶的耐心將逐漸喪失。如果一個(gè)界面不能顯示超過5秒甚至更長(zhǎng)時(shí)間，用戶基本上是無法忍受的。也許有些用戶會(huì)退出并重新進(jìn)入，但更多的用戶會(huì)放棄直接使用它。對(duì)于網(wǎng)站開發(fā)者來說，提高用戶體驗(yàn)是網(wǎng)站的核心價(jià)值，而提高網(wǎng)站的加載速度是更基本的用戶體驗(yàn)。