—般說來 WordPress 網站製作前端指網站業務邏輯之前的部分,包括瀏覽器載入、網站檢視模型、圖片服務、 CDN 服務等,主要最佳化手段有最佳化瀏覽器訪問、使用反向代理、 CDN 等。
1. 減少 http 請求
HTTP 協議是無狀態的應用層協議,意味著每次 HTTP 請求都需要建立通訊鏈路、進行資料傳輸,而在站群伺服器端,每個 HTTP 都需要啟動獨立的執行緒去處理。這些通訊和服務的開銷都很昂貴,減少 HTTP 請求的數目可有效提高訪問效能。
減少 HTTP 的主要手段是合併 CSS 、合併 JavaScript 、合併圖片。將瀏覽器一次訪問需要的 JavaScript 、 CSS 合併成一個檔案,這樣瀏覽器就只需要一次請求。圖片也可以合併,多張圖片合併成一張,如果每張圖片都有不同的超連結,可透過 CSS 偏移響應滑鼠點選操作,構造不同的 URL 。
2. 使用瀏覽器快照
對一個網站而言,CSS 、 JavaScript 、 Logo 、圖示這些靜態資原始檔更新的頻率都比較低,而這些檔案又幾乎是每次 HTTP 請求都需要的,如果將這些檔案快照在瀏覽器中,可以極好地改善效能。透過設定 HTTP 頭中 Cache-Control 和 Expires 的屬性,可設定瀏覽器快照,快照時間可以是數天,甚至是幾個月。
在某些時候,靜態資原始檔變化需要及時應用到客戶端瀏覽器,這種情況,可透過改變檔名實現,即更新 JavaScript 檔案並不是更新 JavaScript 檔案內容,而是生成一個新的 JS 檔案並更新 HTML 檔案中的引用。
使用瀏覽器快照策略的網站在更新靜態資源時,應採用批次更新的方法,比如需要瞬時響應:網站的高效能架構更新 10 個圖示檔案,不宜把 10 個檔案一次全部更新,而是應一個檔案一個檔案逐步更新,並有一定的間隔時間,以免多使用者瀏覽器突然大量快照失效,集中更新快照,造成站群伺服器負載驟增、網路堵塞的情況。
3. 啟用壓縮
在站群伺服器端對檔案進行壓縮,在瀏覽器端對檔案解壓縮,可有效減少通訊傳輸的資料 M 。文字檔案的壓縮效率可達 80% 以上,因此 HTML 、 CSS 、 JavaScript 檔案啟用 GZip 壓縮可達到較好的效果。但是壓縮對站群伺服器和瀏覽器產生一定的壓力,在通訊頻寬良好,而站群伺服器資源不足的情況下要權衡考慮。
4. CSS 放在頁面最上面、 JavaScript 放在頁面最下面
瀏覽器會在下載完全部 CSS 之後才對整個頁面進行渲染,因此最好的做法是將 CSS 放在頁面最上面,讓瀏覽器儘快下載 CSS 。 JavaScript 則相反,瀏覽器在載入 JavaScript 後立即執行,有可能會阻塞整個頁面,造成頁面顯示緩慢,因此 JavaScript 最好放在頁面。但如果頁面解析時就需要用到 JavaScript, 這時放在底部就不合適了。
5. 減少 Cookie 傳輸
一方面,Cookie 包含在每次請求和響應中,太大的 Cookie 會嚴重影響資料傳輸,因此哪些資料需要寫入 Cookie 需要慎重考慮,儘量減少 Cookie 中傳輸的資料景。另一方面,對於某些靜態資源的訪問,如 CSS 、 Script 等,傳送 Cookie 沒有意義,可以考慮靜態資源使用獨立域名訪問,避免請求靜態資源時傳送 Cookie,減少 Cookie 傳輸的次數。
6 CDN 加速
CDN( Content Distribute Network,內容分發網路)的本質仍然是一個快照,而且將資料快照在離多使用者最近的地方,使多使用者以最快速度獲取資料,即所謂網路訪問第一跳,。
由於 CDN 部署在網路運營商的機房,這些運營商又是終端多使用者的網路服務提供商,因此多使用者請求路由的第一跳就到達了 CDN 站群伺服器,當 CDN 中存在瀏覽器請求的資源時,從 CDN 直接返回給瀏覽器,最短路徑返回響應,加快多使用者訪問速度,減少資料中心負載壓力。