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月前
|
安全
SiteGround如何设置WordPress网站自动更新
iteGround Autoupdate功能会自动帮我们更新在他们这里托管的所有WordPress网站,这样做是为了保证网站安全,并且让它们一直保持最新状态。他们会根据我们选择的设置自动更新不同版本的WordPress,包括主要版本和次要版本。在每次自动更新之前,他们都会为我们的网站做一个完整的备份,这样如果有什么问题,我们可以轻松地恢复到之前的状态。在本文中,我们将介绍如何在SiteGround中设置WordPress网站自动更新。
37 0
SiteGround如何设置WordPress网站自动更新
|
3月前
WordPress网站更换域名后如何重新激活elementor
本文讲解WordPress网站更换域名后如何重新激活elementor。首先你需要在WordPress后台elementor下点击Disconnect断开原elementor连接,然后登录elementor官网,在后台解除原网站授权;接着在WordPress后台重新连接并激活elementor。
65 2
WordPress网站更换域名后如何重新激活elementor
|
3月前
给WordPress网站增加一个带时间的led广告牌
给WordPress网站增加一个带时间的led广告牌
33 3
|
1月前
|
关系型数据库 MySQL Apache
怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?
怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?
|
3月前
|
域名解析 弹性计算 数据安全/隐私保护
阿里云ECS免费搭建WordPress个人博客网站
阿里云ECS免费搭建WordPress个人博客网站
464 2
阿里云ECS免费搭建WordPress个人博客网站
|
1月前
|
关系型数据库 MySQL PHP
wordpress博客系统详细安装部署教程
wordpress博客系统详细安装部署教程
wordpress博客系统详细安装部署教程
|
1月前
|
域名解析 存储 网络安全
WordPress外贸建站教程
这篇WordPress外贸建站教程是以实操形式写给没有任何建站基础的新手,不管你是不是技术小白,都可以轻松学会如何使用WordPress来自己建立一个实用的外贸网站,而不需要深入了解复杂的代码编程。梳理了WordPress外贸建站主要步骤,从最初的成本分析开始,然后逐步介绍域名选择和注册、虚拟主机选择、建站程序安装等关键步骤。
105 1
|
2月前
|
存储 XML 前端开发
信息收集 -- WordPress网站
信息收集 -- WordPress网站
27 0
|
2月前
|
关系型数据库 MySQL 数据库连接
百度搜索:蓝易云【使用docker部署Wordpress教程】
这就是使用Docker部署WordPress的简洁步骤。祝你顺利完成部署!
49 5
|
3月前
|
数据库 数据安全/隐私保护 SEO
如何像我这样创建一个酷炫且能赚钱的网站(使用宝塔安装WordPress搭建子比主题)
如何像我这样创建一个酷炫且能赚钱的网站(使用宝塔安装WordPress搭建子比主题)
47 0
如何像我这样创建一个酷炫且能赚钱的网站(使用宝塔安装WordPress搭建子比主题)