網(wǎng)站建設一個很重要的部分就是資源加載優(yōu)化。由于網(wǎng)站建設中網(wǎng)速低、帶寬低、延遲高、移動設備內(nèi)存小、處理器性能低等問題，往往需要優(yōu)化前端頁面的性能以滿足用戶對網(wǎng)頁加載的期望。前段時間做了相關方面的網(wǎng)站優(yōu)化，發(fā)現(xiàn)網(wǎng)上的中文教程比較少。我一步步跟著網(wǎng)站找問題解決，所以整理翻譯了一些有用的網(wǎng)頁。網(wǎng)頁加載時間受網(wǎng)絡速度影響。一般都是用瀏覽器模擬一個特定的網(wǎng)速進行測試，這樣優(yōu)化前的結果和優(yōu)化后的結果會有比較準確的對比。

1、減少請求數(shù)

文件資源壓縮：去除多余的空格、換行、縮進、注釋等不必要的字節(jié)，提高下載、解析、執(zhí)行速度。這種類型的在線工具有很多。合并文件：每個CSS和JS文件都是一次HTTP請求，將多個相關的文件適當合并成一個文件，減少HTTP請求的次數(shù)。解決加載速度問題，首先要減少網(wǎng)頁請求，比如css sprite、js/css壓縮、緩存、按需加載等。另一種方法是將資源放在不同的子域名下。比如將圖片資源與靜態(tài)資源分離，可以大大加快網(wǎng)頁的加載時間，但這種方式不適用于HTTP2連接。

2、充分利用緩存

使用緩存可以減少對服務器的請求次數(shù)，節(jié)省加載時間，所以所有的靜態(tài)資源都必須緩存在服務器端，盡量使用長緩存。長緩存資源的更新可以使用不同的時間戳進行更新。合理設置資源的過期時間，尤其是一些不需要改動的靜態(tài)資源，將緩存過期時間設置的長些。

3、壓縮

網(wǎng)站經(jīng)過壓縮后，將使搜索引擎抓取網(wǎng)站更加順暢，提升用戶體驗，更好地瀏覽網(wǎng)站內(nèi)容。 gzip整體網(wǎng)頁壓縮，目前很多虛擬主機都支持，不需要站長操作。網(wǎng)站Gzip壓縮后，網(wǎng)頁打開速度加快；網(wǎng)頁腳本資源的壓縮可以使用站長工具的js壓縮工具。壓縮網(wǎng)站上不重要的圖片，可以大大減少虛擬主機的空間，加快網(wǎng)頁的加載速度；減少資源大小不僅可以減少存儲空間，還可以在網(wǎng)絡傳輸文件時減少傳輸時間，加快網(wǎng)頁的顯示速度。因此，需要對HTML、CSS、JavaScript等資源的代碼進行壓縮。

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

首屏盡量保持在1秒以內(nèi)。對于屏幕上不用的資源，應該在用戶需要的時候加載（延遲加載、上拉滾動加載）；可感知和不可感知的負載。隨著越來越多的應用程序使用JavaScript技術在客戶端進行處理，JavaScript在瀏覽器中的性能已經(jīng)成為開發(fā)者面臨的最重要的問題。 JavaScript 的性能優(yōu)化由于JavaScript 的阻塞特性而變得復雜，這意味著瀏覽器在執(zhí)行JavaScript 代碼時，不能同時做其他事情，也就是其他事情會被阻塞。不管當前的JavaScript代碼是嵌入的還是外部鏈接文件中，頁面的下載和渲染都必須停下來等待腳本完成。 JavaScript 執(zhí)行時間越長，瀏覽器等待響應用戶輸入的時間就越長。

5、CDN加速

通過CDN加速是一種比較昂貴的優(yōu)化方法，所以這些把它放在所有優(yōu)化方法的末尾，但卻是一種非常有效的優(yōu)化方案。 CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。 CDN加速主要是對靜態(tài)資源進行加速，比如網(wǎng)站上傳的圖片、媒體，以及一些導入的Js、CSS等文件。 CDN加速需要依賴各個網(wǎng)絡節(jié)點。例如，100臺CDN服務器分布在全國各地。從上海訪問時，資源會從最近的節(jié)點返回。這是核心。 CDN服務器通過緩存或主動抓取主服務器的內(nèi)容來實現(xiàn)資源儲備。

如何優(yōu)化網(wǎng)站的加載，對于一款移動產(chǎn)品來說，功能無疑是非常重要的，但性能也是用戶體驗不可或缺的一部分。當用戶能在1-2秒內(nèi)打開一個手機頁面，看到信息的展示，或者開始下一步的操作時，用戶會覺得速度還是可以接受的；如果2-5秒后頁面可用，在這種狀態(tài)下，用戶的耐心會逐漸喪失；如果一個界面顯示時間超過5秒甚至更長，用戶基本無法忍受。可能有些用戶會注銷重新進入，但更多的用戶會直接放棄。對于網(wǎng)站開發(fā)者來說，提升用戶體驗是網(wǎng)站的核心價值，其中提升網(wǎng)站加載速度是最基本的用戶體驗。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！