網站性能優化指南

分享一下我作的網站性能指南

因爲小說網站首頁加載了大量圖片，以及單頁面應用首次加載須要緩存js和css，本就緩慢，致使個人站點在PageSpeedInsights得分賊低，僅有51分。

1. 優化不可缺乏
   
2. 而且迫在眉睫

思路

1. nginx開啓gzip（已實現）

#開啓此壓縮能顯著提高web加載速度，建議開啓。不足之處在於會增長服務端CPU開銷。 
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript application/json;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";

1. 靜態資源如圖片，單獨存儲到OSS上（已實現）
   因爲本人服務器1核2g，帶寬僅1Mbps，這是硬傷，故而將小說網站的書籍封面圖和橫幅圖等經過後端託管到OSS上，訪問速度更佳
2. 圖片格式處理（已實現）
   JPEG 2000、JPEG XR、WEBP等格式能有效下降圖片大小，節省用戶下載時間。
   以阿里雲OSS爲例，調用圖像處理域名規則
   域名/sample.jpg?x-oss-process=style/stylename
   在頁面須要加載大量圖片時，有效提升頁面加載速度
3. 靜態資源緩存（已實現）
   優化首屏加載後的用戶體驗。給這些不須要常常更新的靜態資源設置響應頭
   Cache-Control="max-age: 7776000"，#三個月不去請求服務器，直接使用本地緩存
4. CDN加速（已實現）
   不一樣地區節點緩存源站資源，當終端用戶請求訪問和獲取這些資源時，無需回源，自動調用CDN節點上已經緩存的資源。 目前七月小說網前端已全面啓用阿里雲CDN加速。
   注意須得從新在控制檯設置智能壓縮（gzip）和緩存策略。
5. 圖片Lazy Load（已實現）
   瀏覽器視窗看不見的地方實現懶加載，節省首次請求數。
6. 縮短服務端首字節響應時間（TTFB）（已實現）
   如七月小說網數據庫處理：給CONTENT表內的CHAPTER_ID加索引，閱讀頁速度提高。
7. 減小重定向、減少DOM節點數量等

最後結果

實測F12 首屏加載Load從5s平均降低到1s，使用緩存從1.5s降低到0.38s，效果顯著。
PageSpeedInsights跑分從51上升到71