[原创]博客的加载速度和大小的优化、优化再优化-编程技术-看雪安全社区

> # 博客的加载速度和大小的优化、优化再优化

## 0. 前言

最近对博客的加载速度和各种文件体积进行了优化，特此记录一下

可以点击<a href="elink@f33K9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6%4N6%4N6Q4x3X3g2T1j5h3u0&6y4$3u0D9L8$3N6Q4x3X3g2U0L8$3#2Q4x3V1k6A6L8X3c8W2P5q4)9J5k6h3S2@1L8h3H3`.">七仔的博客</a>测试我的博客速度

## 1. 基础

### 1.1 图片加载优化

1. 对于非文章类的大图片先进行一遍压缩，使用各种压缩网站就可以

2. 然后对于各种图片最好都转换为为webp格式，相对于传统格式能降低大小大概四成左右

### 1.2 gzip压缩

gzip是针对文本类型进行压缩的，例如html、js、css、txt等格式，可以在nginx处打开

```conf
http {
    gzip  on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript text/css;
}
```

## 2. 首屏渲染

Vue类型的博客的内容是通过实时加载去渲染的，如果蜘蛛只获取了html而没有去加载js的话实际是没有内容的。有几种解决方案。

1. 将vue渲染成静态文件，每次增加新文章都重新渲染一遍，然后上传到服务器上。优点是加载快，但是调整插件什么的比较麻烦。

2. 实时判断爬虫然后进行服务器端渲染。

我这里主要讲一下服务端渲染。首先是nginx判断爬虫:

```conf
http {
    
    ...

server {

...

location ... {
            
            if ($http_user_agent ~* "Sogou web spider|BingPreview|baidu|Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider|qihoobot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|Sogou web spider|soso|sogou|yahoo|sohu-search|yodao|robozilla|msnbot|MJ12bot|NHN|Twiceler|FeedDemon|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft URL Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports Bot|YYSpider|DigExt|YisouSpider|HttpClient|MJ12bot|heritrix|EasouSpider|LinkpadBot|Googlebot|Ezooms") {
                proxy_pass  http://xxx.xxx.xxx.xxx:3000?url=https%3A%2F%2Fwww.xxxxxxxx.com${document_uri}$is_args$query_string;
            }
        }
    }
}
```

逻辑就是通过请求的User-Agent判断是否是爬虫，如果是爬虫就调用一个端口为3000的服务将路径转发给它让它加载完返回加载后（js会渲染完成）的html。

至于这个端口为3000的服务，我是用了一个docker安装的镜像为zenato/puppeteer-renderer的容器，对外端口为3000，作用就是进行服务端渲染。

docker运行语句:

```sh
docker run -d --name puppeteer-renderer -p 3000:3000 zenato/puppeteer-renderer:latest
```

zenato/puppeteer-renderer的开源地址：<a href="elink@4e1K9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6Y4K9i4c8Z5N6h3u0Q4x3X3g2U0L8$3#2Q4x3V1k6*7k6h3&6S2N6r3!0Q4x3V1k6H3N6i4m8H3k6i4c8W2k6i4u0Q4x3X3c8J5k6h3&6V1k6i4u0W2M7R3`.`.">566K9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6Y4K9i4c8Z5N6h3u0Q4x3X3g2U0L8$3#2Q4x3V1k6*7k6h3&6S2N6r3!0Q4x3V1k6H3N6i4m8H3k6i4c8W2k6i4u0Q4x3X3c8J5k6h3&6V1k6i4u0W2M7R3`.`.</a>

## 3. 接口

后端服务其实没什么好说的，就是做缓存就好了，可以用Redis。另外一般返回格式为json，所以最好在nginx处加上json格式的gzip。

```conf
http {
    ...
    gzip_types text/plain application/javascript text/css application/json;
}
```

## 4. Live2d的优化

对于live2d，基础的js和css的优化就不说了，顺便提一下live2d的图片因为要拼接起来，所以很大，记得也要压缩

这里主要说一下moc格式，moc这个是用来存live2d模型的，我这里会达到三百多k，非常占资源，其实moc是可以进行gzip压缩的，压缩后我这里会降低到一百多k，不到一半，moc进行gzip压缩有我这里有两种方案：

1. 对nginx进行配置，再增加一个针对moc的gzip压缩

```conf
http {
    ...
    gzip_types text/plain application/javascript text/css application/json text/x-moc;
}
```

![蕾姆live2d](upload/attach/202510/662680_PJ587VATN6CMWZ6.png)

2. 调整xx.model.json文件中的后缀

```json
{
	"model": "xx.moc.txt",
}
```

然后修改xx.moc为xx.moc.txt即可（需要确保nginx有做text/plain的gzip压缩）

## 5. 七牛云的优化

### 5.1 七牛云的图片瘦身

可以在七牛云的 对象存储 -> 空间管理 -> 你自己的空间 -> 多媒体样式 -> 新建样式 中配置。

我这里建议是打开图片瘦身+输出格式为webp。需要注意修改以后右侧可以看到示例链接，复制你图片的链接加上多出来的后缀即可访问。我这里访问后基本可以做到瘦身三四成的样子。

放一下配置截图:

![image.png](upload/attach/202510/662680_RB7DB5XS2Q6GWJS.png)

### 5.2 七牛云的gzip压缩

截止到我写这篇文章的时候，七牛云会默认开启gzip加速的类型有:

```text
text/plain
text/css
text/javascript
text/xml
application/x-javascript
application/json
application/xml
application/xml+rss
application/javascript
```

来源: <a href="elink@bdbK9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6V1k6i4k6W2L8r3!0H3k6i4u0Q4x3X3g2I4K9h3&6A6N6g2)9J5k6h3y4G2L8g2)9J5c8X3k6#2M7$3W2G2L8W2)9J5c8U0p5#2y4K6q4Q4x3V1k6K6k6i4k6W2L8W2)9J5k6r3&6A6N6i4W2#2L8W2)9J5k6s2y4#2M7s2m8G2M7Y4c8Q4x3X3c8X3L8%4u0Q4x3X3c8@1k6i4S2@1i4K6u0V1k6X3W2D9k6g2)9J5k6r3c8G2N6$3&6D9L8$3q4V1i4K6u0V1L8%4m8@1K9h3#2A6P5X3q4@1K9h3!0F1">897K9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6V1k6i4k6W2L8r3!0H3k6i4u0Q4x3X3g2I4K9h3&6A6N6g2)9J5k6h3y4G2L8g2)9J5c8X3k6#2M7$3W2G2L8W2)9J5c8U0p5#2y4K6q4Q4x3V1k6K6k6i4k6W2L8W2)9J5k6r3&6A6N6i4W2#2L8W2)9J5k6s2y4#2M7s2m8G2M7Y4c8Q4x3X3c8X3L8%4u0Q4x3X3c8@1k6i4S2@1i4K6u0V1k6X3W2D9k6g2)9J5k6r3c8G2N6$3&6D9L8$3q4V1i4K6u0V1L8%4m8@1K9h3#2A6P5X3q4@1K9h3!0F1</a>

不能进行自定义，所以对于上面的live2d的moc文件最好调整为txt格式进行gzip压缩

## 6. 工具

我这里用了谷歌的 PageSpeed Insights 进行分析，分析还是很全的。

PageSpeed Insights: <a href="elink@2b6K9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6H3j5h3N6W2M7%4m8W2k6h3c8Q4x3X3g2%4k6h3u0Q4x3X3g2V1k6i4k6Q4x3V1k6Q4x3@1k6Z5L8q4)9K6c8s2A6Z5i4K6g2X3b7@1^5`.">336K9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6H3j5h3N6W2M7%4m8W2k6h3c8Q4x3X3g2%4k6h3u0Q4x3X3g2V1k6i4k6Q4x3V1k6Q4x3@1k6Z5L8q4)9K6c8s2A6Z5i4K6g2X3b7@1^5`.</a>

放一下截图:

![4790eaf60145dd91b3f147df0db582f0.png](upload/attach/202510/662680_USHA3MXSVF6NVCG.png)

可以点击<a href="elink@e8dK9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6%4N6%4N6Q4x3X3g2T1j5h3u0&6y4$3u0D9L8$3N6Q4x3X3g2U0L8$3#2Q4x3V1k6A6L8X3c8W2P5q4)9J5k6h3S2@1L8h3H3`.">七仔的博客</a>测试我的博客速度

冰与火的战歌：Windows内核攻防实战高级班！从零到实战，融合AI与Windows内核攻防全技术栈，打造具备自动化能力的内核开发高手。

#开发技巧