AI 智能摘要
比如谷歌的字体,谷歌的CSS等,虽然效果很好看,但是却发现访问比较慢,于是乎进行了排查,下面是优化的方案。这里搬主题分享一下使用国外WordPress主题后网站访问慢优化加速解决教程。
![图片[1]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/06/20230628225131580.jpg)
不少小伙伴在使用国外的WordPress主题后,发现要调用很多公共的静态资源,比如谷歌的字体,谷歌的CSS等,虽然效果很好看,但是却发现访问比较慢,于是乎进行了排查,下面是优化的方案。这里搬主题分享一下使用国外WordPress主题后网站访问慢优化加速解决教程。
优化前:
- 加载耗时:21秒+
优化后:
- 加载耗时:250毫秒
优化后访问速度提升84倍+
解决方案流程图
- 流程图
![image 图片[2]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015205630.png)
问题&解决方案&验证
- 定位问题(加载一个CSS超时)
![f95f4cb29b9ba04cd696cdbfd28494c2_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png 图片[3]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015210544.png)
- 解决步骤
- 下载访问超时的CSS(Google浏览器中F12中可以找到加载CSS地址)并保存到本地(用可以连上google网络)
https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C700%2C400italic%7COpen+Sans%3A400%2C700%2C400italic%7CMontserrat%3A400%2C700&subset=cyrillic%2Clatin%2Clatin-ext%2Cgreek-ext
![6fb2e287b931389a07a8a8f84255ed1f_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png 图片[4]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015217943.png)
![20201014004657650.png 图片[5]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015222741.png)
- 查看当前WordPress使用主题(通过其他加载正常css可以看出当前使用bento主题)
![2cad6779c3e461bd803a501998a2ca25_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png 图片[6]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015228793.png)
- 进入服务器WordPress程序及当前使用主题目录下
cd /www/wwwroot/banzhuti.com/wp-content/themes/bento/
![20201014003751572.png 图片[7]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015233848.png)
- 查找引用css的文件(在此以all.css为例,因为从F12结果可以看出all.css是本地加载)
find . | xargs grep -ril 'all.css'
![20201014003939651.png 图片[8]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015238992.png)
- 查看functions.php内容,并定位到all.css位置,通过分析找出加载google的css代码
vim functions.php
![96a1744665023cd3bb9968424074dda6_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png 图片[9]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015243990.png)
- 修改代码从本地读取css文件
![9ec2d035bb483487d6003bc1cb216775_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png 图片[10]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015249381.png)
- 将本地之前下载好的css.css上传到服务器当前主题文件目录下
![20201014004526717.png 图片[11]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015254730.png)
- 验证
- 再次访问网站,发现加载速度正常且样式加载正常
![0b2d9981d5b74730e74f9685817a4b2d_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png 图片[12]-使用国外WordPress主题后网站访问慢优化加速解决教程-搬主题](https://cdn.banzhuti.com/2023/09/20230912015258946.png)
总结
其实就是国外的一些静态资源在国内访问不好的缘故,替换成本地或者国内的CDN就行了。以上就是搬主题分享的使用国外WordPress主题后网站访问慢优化加速解决教程。
© 版权声明
THE END























暂无评论内容