跳到主要内容

Docusaurus 个人博客的性能优化

· 阅读需 6 分钟
哈希肯

本篇文章记录 通过多种优化手段 提高本网站的性能表现, 加快访问速度

经过优化后的网站加载速度获得显著提升


未优化时的加载状态​



1. 优化 CDN​

CDN资源的选择​


uikit.min.css体积(kb)加载时间(ms)
默认方式2975580
Staticfile CDN3055


sweetalert2.min.css体积(kb)加载时间(ms)
默认方式21114
Staticfile CDN4.941


sweetalert2.min.js体积(kb)加载时间(ms)
默认方式43.61080
Staticfile CDN14.963



博客切换 CDN的性能优化​

提示

加载时间 从 15.74秒 优化到 5.04

提升 68%



2. 消除渲染阻塞资源​

Docusaurus script脚本设置 defer文档​

docusaurus.config.js
module.exports = {
  scripts: [
    {
      src: "https://cdn.staticfile.org/sweetalert2/11.7.5/sweetalert2.min.js",
      async: true,
    },
  ],
};

查看首页 HTML

<script
  src="https://cdn.staticfile.org/sweetalert2/11.7.5/sweetalert2.min.js"
  defer="defer"
></script>


3. 图片资源优化​

图片优化工具-Google Squoosh​



4. 开启 Brotli 压缩​

Brotli 介绍​

Brotli 是一种新的数据压缩算法，由 Google 开发，旨在提供更高的压缩比率和更快的解压速度

Brotli 算法使用了现代的压缩技术，包括预测编码、上下文建模和 Huffman 编码等，可以达到比传统压缩算法 (如 gzip) 更高的压缩比率和更快的解压速度

Brotli 算法在 HTTP 协议中被广泛应用，可以用于压缩 HTTP 响应内容, 从而减少网络传输的数据量, 提高网络传输的效率和性能

Brotli 算法相对于传统的 gzip 压缩算法，可以获得更高的压缩比率，通常可以达到 20% 到 30% 的数据压缩率提升



我们可以看到 Brotli 与常用的压缩算法 bzip2、gzip、lzma2 对比，压缩比上有明显的优势


我们看到 Brotli 的解压缩速度与 Gzip 非常相似，但是远远超出 bzip2 和 lzma2


Brotli 算法和其他算法的性能比较：



配置 Brotli的 Nginx镜像​

可直接使用 别人已配置完成的 Nginx镜像

为 Docker 中的 Nginx 启用 Brotli 压缩算法

docker pull ghcr.io/zvonimirsun/nginx:stable-alpine-brotli


Nginx的配置​

在 nginx.conf 开头添加

load_module /usr/lib/nginx/modules/ngx_http_brotli_filter_module.so;
load_module /usr/lib/nginx/modules/ngx_http_brotli_static_module.so;

在 http 部分中添加以启用, gzip 和 Brotli 可以共存

http {
  ...

  # brotli
  brotli on;
  brotli_comp_level 6;
  brotli_buffers 16 8k;
  brotli_min_length 20;
  brotli_types
    application/atom+xml
    application/geo+json
    application/javascript
    application/x-javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rdf+xml
    application/rss+xml
    application/vnd.ms-fontobject
    application/wasm
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/eot
    font/otf
    font/ttf
    image/bmp
    image/svg+xml
    text/cache-manifest
    text/calendar
    text/css
    text/javascript
    text/markdown
    text/plain
    text/xml
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
}

验证 是否开启 Brotli



5. 开启 HTTPS 与 HTTP/2​

HTTP/2 协议要求使用加密传输，因此依赖于 HTTPS 或者其他加密传输协议，例如 TLS

HTTP/2 协议的设计目标之一是提高网络传输的安全性，避免传统的 HTTP 协议中存在的安全漏洞和隐私问题, 因此要求使用加密传输来保护通信内容的机密性和完整性

所以首先 需要配置 HTTPS


使用 Traefik 配置 HTTPS​

因配置 通配符SSL证书只支持 DNS验证方式, 所以需要在 Traefik中使用 acme-dns来解决这个问题

参考: Traefik 2 Request Multiple domain and Wildcard SSL certificates

需要在服务器供应商 DNS解析添加 DNS CNAME记录 _acme-challenge.yourdomain


证书签发下来就可以使用 HTTPS了

验证方式​

验证 HTTP/2 支持

HTTP2.Pro





测试其网页性能的工具​

Gtmetrix



参考链接​