网站性能优化指南

时间:2021-11-27 06:00:43

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

由于小说网站首页加载了大量图片,以及单页面应用首次加载需要缓存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

网站性能优化指南

网站性能优化指南