网站性能优化指南

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

因为小说网站首页加载了大量图片，以及单页面应用首次加载须要缓存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