WordPress网站访问慢解决方案(超详细图文教程)

简介: WordPress网站访问慢解决方案(超详细图文教程)

强烈推荐一个大神的人工智能的教程:http://www.captainai.net/zhanghan


前言


之前自己搭建一个WordPress个人网站:https://zhanghan.xin;最近发现访问比较慢,于是乎进行了排查,下面是优化的方案。

优化前:

  • 加载耗时:21秒+

优化后:

  • 加载耗时:250毫秒

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


解决方案流程图


  • 流程图


问题&解决方案&验证


  • 定位问题(加载一个CSS超时)


f95f4cb29b9ba04cd696cdbfd28494c2_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.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


20201014004657650.png


  • 查看当前WordPress使用主题(通过其他加载正常css可以看出当前使用bento主题)


2cad6779c3e461bd803a501998a2ca25_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 进入服务器WordPress程序及当前使用主题目录下
cd /www/wwwroot/zhanghan.xin/wp-content/themes/bento/


20201014003751572.png


  • 查找引用css的文件(在此以all.css为例,因为从F12结果可以看出all.css是本地加载)
find . | xargs grep -ril 'all.css'

20201014003939651.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


  • 修改代码从本地读取css文件

9ec2d035bb483487d6003bc1cb216775_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 将本地之前下载好的css.css上传到服务器当前主题文件目录下

20201014004526717.png


  • 验证


  • 再次访问网站,发现加载速度正常且样式加载正常


0b2d9981d5b74730e74f9685817a4b2d_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


总结


  • 遇到问题解决完后及时总结共享,一方面自己以后再遇到类似问题可以参考博文快速解决,另一方面为其他博友提供一种解决问题的思路和方案


  • 后续会写快速搭建个人网站及小程序系列博文

相关文章
|
1月前
|
域名解析 网络协议 数据安全/隐私保护
阿里云轻量应用服务器搭建WordPress个人博客教程
阿里云轻量应用服务器搭建WordPress个人博客教程
|
1月前
|
XML 搜索推荐 机器人
五个 WordPress 插件可提高网站参与度
五个 WordPress 插件可提高网站参与度
|
1月前
|
缓存 弹性计算 应用服务中间件
如何使用 Wordpress?托管, 网站, 插件, 缓存
如何使用 Wordpress?托管, 网站, 插件, 缓存
|
1月前
|
关系型数据库 MySQL 数据库连接
如何处理WordPress网站提示“建立数据库连接时出错”
如何处理WordPress网站提示“建立数据库连接时出错”
|
1月前
|
弹性计算 关系型数据库 MySQL
CentOS 7.x操作系统的ECS云服务器上搭建WordPress网站
CentOS 7.x操作系统的ECS云服务器上搭建WordPress网站
|
1月前
|
弹性计算 监控 安全
利用WordPress 模板建站,如果利用阿里云国际版获取网站高流量
利用WordPress 模板建站,如果利用阿里云国际版获取网站高流量
|
4月前
|
SEO
WordPress作品设计素材图片站资讯文章教程uigreat主题
WordPress作品设计素材图片站资讯文章教程uigreat主题
42 4
WordPress作品设计素材图片站资讯文章教程uigreat主题
|
4月前
|
弹性计算 关系型数据库 MySQL
使用资源编排 ROS 轻松部署单点网站——以 WordPress 为例
WordPress 是流行的开源CMS,阿里云的ROS(Resource Orchestration Service)提供模板化部署服务,简化云上环境如VPC、ECS、MySQL的创建。用户可通过ROS控制台选择模板一键部署WordPress,配置包括实例区、类型、系统盘及密码等参数。ROS模板定义了资源、参数和输出,自动处理依赖关系,实现云资源和应用的自动化部署。通过ROS,用户可以高效管理和更新整个资源栈,实现快速、可靠的云服务部署。
225 1
使用资源编排 ROS 轻松部署单点网站——以 WordPress 为例
|
4月前
|
弹性计算 负载均衡 关系型数据库
使用资源编排 ROS 轻松部署高可用架构网站——以 WordPress 为例
WordPress 是流行的开源 CMS,阿里云的资源编排服务 (ROS) 提供 IaC 功能,简化云上资源自动化部署,如创建 VPC、ECS、SLB、RDS 和弹性伸缩等。通过 ROS 模板(JSON/YAML),用户能快速部署高可用的 WordPress 环境,包括负载均衡、多可用区的 ECS 服务器集群、高可用 RDS 数据库等。模板定义了资源、参数和输出,用户在 ROS 控制台配置参数后一键部署。ROS 提升了部署效率,便于跨地域复制相同架构。
128 0
使用资源编排 ROS 轻松部署高可用架构网站——以 WordPress 为例
|
4月前
|
搜索推荐
wordpress网站添加一个临时维护功能
wordpress网站添加一个临时维护功能
51 3