凑段耘辛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?urlhttps%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-renderer3. 接口后端服务其实没什么好说的就是做缓存就好了可以用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;}蕾姆live2d调整xx.model.json文件中的后缀{model: xx.moc.txt,}然后修改xx.moc为xx.moc.txt即可需要确保nginx有做text/plain的gzip压缩5. 七牛云的优化5.1 七牛云的图片瘦身可以在七牛云的 对象存储 - 空间管理 - 你自己的空间 - 多媒体样式 - 新建样式 中配置。我这里建议是打开图片瘦身输出格式为webp。需要注意修改以后右侧可以看到示例链接复制你图片的链接加上多出来的后缀即可访问。我这里访问后基本可以做到瘦身三四成的样子。放一下配置截图:image.png5.2 七牛云的gzip压缩截止到我写这篇文章的时候七牛云会默认开启gzip加速的类型有:text/plaintext/csstext/javascripttext/xmlapplication/x-javascriptapplication/jsonapplication/xmlapplication/xmlrssapplication/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/?hlzh_CN放一下截图:4790eaf60145dd91b3f147df0db582f0.png可以点击七仔的博客测试我的博客速度