0. 前言
最近對博客的加載速度和各種文件體積進行了優化，特此記錄一下
可以點擊七仔的博客測試我的博客速度
1. 基礎
1.1 圖片加載優化
- 對於非文章類的大圖片先進行一遍壓縮，使用各種壓縮網站就可以
- 然後對於各種圖片最好都轉換為為webp格式，相對於傳統格式能降低大小大概四成左右
1.2 gzip壓縮
gzip是針對文本類型進行壓縮的，例如html、js、css、txt等格式，可以在nginx處打開
http {
gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_types text/plain application/javascript text/css;
}
2. 首屏渲染
Vue類型的博客的內容是通過實時加載去渲染的，如果蜘蛛只獲取了html而沒有去加載js的話實際是沒有內容的。有幾種解決方案。
- 將vue渲染成靜態文件，每次增加新文章都重新渲染一遍，然後上傳到服務器上。優點是加載快，但是調整插件什麼的比較麻煩。
- 實時判斷爬蟲然後進行服務器端渲染。
我這裏主要講一下服務端渲染。首先是nginx判斷爬蟲:
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運行語句:
docker run -d --name puppeteer-renderer -p 3000:3000 zenato/puppeteer-renderer:latestzenato/puppeteer-renderer的開源地址：https://github.com/zenato/puppeteer-renderer
3. 接口
後端服務其實沒什麼好説的，就是做緩存就好了，可以用Redis。另外一般返回格式為json，所以最好在nginx處加上json格式的gzip。
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壓縮有我這裏有兩種方案：
- 對nginx進行配置，再增加一個針對moc的gzip壓縮
http {
...
gzip_types text/plain application/javascript text/css application/json text/x-moc;
}
- 調整xx.model.json文件中的後綴
{
"model": "xx.moc.txt",
}然後修改xx.moc為xx.moc.txt即可（需要確保nginx有做text/plain的gzip壓縮）
5. 七牛雲的優化
5.1 七牛雲的圖片瘦身
可以在七牛雲的 對象存儲 -> 空間管理 -> 你自己的空間 -> 多媒體樣式 -> 新建樣式 中配置。
我這裏建議是打開圖片瘦身+輸出格式為webp。需要注意修改以後右側可以看到示例鏈接，複製你圖片的鏈接加上多出來的後綴即可訪問。我這裏訪問後基本可以做到瘦身三四成的樣子。
放一下配置截圖:
5.2 七牛雲的gzip壓縮
截止到我寫這篇文章的時候，七牛雲會默認開啓gzip加速的類型有:
text/plain
text/css
text/javascript
text/xml
application/x-javascript
application/json
application/xml
application/xml+rss
application/javascript來源: https://developer.qiniu.com/fusion/1571/seven-niuyun-support-for-text-file-download-optimization
不能進行自定義，所以對於上面的live2d的moc文件最好調整為txt格式進行gzip壓縮
6. 工具
我這裏用了谷歌的 PageSpeed Insights 進行分析，分析還是很全的。
PageSpeed Insights: https://pagespeed.web.dev/?hl=zh_CN
放一下截圖:
可以點擊七仔的博客測試我的博客速度
