建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

使用国外WordPress主题后网站访问慢优化加速解决教程

GG网络技术分享 2025-03-18 16:16 13


使用国外WordPress主题后网站访问慢优化加速解决教程插图

不少小伙伴在使用国外的WordPress主题后,发现要调用很多公共的静态资源,比如谷歌的字体,谷歌的CSS等,虽然效果很好看,但是却发现访问比较慢,于是乎进行了排查,下面是优化的方案。这里分享一下使用国外WordPress主题后网站访问慢优化加速解决教程。

优化前:

  • 加载耗时:21秒+

优化后:

  • 加载耗时:250毫秒

优化后访问速度提升84倍+

解决方案流程图

  • 流程图
使用国外WordPress主题后网站访问慢优化加速解决教程插图1

问题&解决方案&验证

  • 定位问题(加载一个CSS超时)
使用国外WordPress主题后网站访问慢优化加速解决教程插图2
  • 解决步骤
  • 下载访问超时的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
使用国外WordPress主题后网站访问慢优化加速解决教程插图3
使用国外WordPress主题后网站访问慢优化加速解决教程插图4
  • 查看当前WordPress使用主题(通过其他加载正常css可以看出当前使用bento主题)
使用国外WordPress主题后网站访问慢优化加速解决教程插图5
  • 进入服务器WordPress程序及当前使用主题目录下
cd /www/wwwroot/banzhuti.com/wp-content/themes/bento/
使用国外WordPress主题后网站访问慢优化加速解决教程插图6
  • 查找引用css的文件(在此以all.css为例,因为从F12结果可以看出all.css是本地加载)
find . | xargs grep -ril 'all.css'
使用国外WordPress主题后网站访问慢优化加速解决教程插图7
  • 查看functions.php内容,并定位到all.css位置,通过分析找出加载google的css代码
vim functions.php
使用国外WordPress主题后网站访问慢优化加速解决教程插图8
  • 修改代码从本地读取css文件
使用国外WordPress主题后网站访问慢优化加速解决教程插图9
  • 将本地之前下载好的css.css上传到服务器当前主题文件目录下
使用国外WordPress主题后网站访问慢优化加速解决教程插图10
  • 验证
  • 再次访问网站,发现加载速度正常且样式加载正常
使用国外WordPress主题后网站访问慢优化加速解决教程插图11

总结

其实就是国外的一些静态资源在国内访问不好的缘故,替换成本地或者国内的CDN就行了。以上就是分享的使用国外WordPress主题后网站访问慢优化加速解决教程。

标签:

提交需求或反馈

Demand feedback