凯恩集团的客户有30个网站,涵盖各种酒店、酒吧、餐厅和水疗中心。这些多个网站有一个父网站称为-凯恩集合与超级管理员登录。所有其他子网站可以从这个网站使用超级管理员登录凭据进行管理。
项目详细信息
工业:热情好客
工具使用:WPRocket, GTMetrix
地区:联合王国
技术应用:WordPress CMS Multisite, Twig - PHP模板引擎,木材-主题生成器,ACF
这个团队
项目经理:1人
开发人员:1
项目时间:4个月
客户的需求
由于客户的网站速度较慢——平均加载时间为5.82秒,性能为76%,他们找到我们进行网站速度优化和性能优化。除此之外,他们还提出了一些对网站维护工作的依赖。
客户决定在web开发人员的支持下提高所有30个网站的速度、性能和加载时间。在寻找合作机构时,他们检查了我们ColorWhistle网站在GTMetrix中的速度,并查看了分数,他们找到了我们。
在速度优化之前-检查表
优化实时网站的速度是一个敏感的问题。因此,在ColorWhistle,在进行与速度相关的活动时,我们会遵循一个清单。这将确保我们不会错过任何东西。
1.测试速度
客户为他们的酒店、餐厅、水疗中心等建立了30个网站。在所有这些多个站点中,有一个是父站点-凯恩集合.他们使用超级管理员登录凭证管理这个父网站的其他子网站。
超级管理员是具有专用用户名和密码的管理员类型。它极大地帮助管理多个站点。无需为所有网站创建单独的用户名和密码,您可以从单个用户名访问它们。
我们从客户那里得到了凭据,并对所有网站进行了快速速度测试。下图显示了在执行速度优化技术之前网站的平均GTMetrix等级、性能和加载时间状态。
2.进行备份和截图
在致力于提高速度时,备份是一个至关重要的步骤。对于普通的单个站点,我们使用一体机WP迁移插件,我们尝试使用相同的。
不幸的是,该插件不支持多个网站。所以,我们手动登录了MyAdmin门户网站并备份了所有网站的数据库。
然后登陆每个网站的cPanel,备份网站文件。现有的网站有一个文件管理器,里面有所有的数据库。我们下载了这些文件,并将它们导出到扩展名为“.dev”的新文件管理器中。
除此之外,我们还截图了所有30个网站的所有关键页面。这有助于我们检查和比较前后的状态。我们在本地目录中创建了一个文件夹,并保存了所有具有正确名称的截图。
3.创建演示版本
由于这是快速实现,我们不能在活动站点上工作,也不能在维护模式下推迟站点。那么,我们做了什么?我们构建了一个演示环境并克隆了所有的网站。
我们保留了‘/dev’的url。我们确保所有网站和页面都遵循同样的原则。此外,确认所有的演示网站工作类似于当前网站没有任何遗漏。
为了避免没有适当扩展名的url被算作活跃站点的严重问题,我们使用更好的搜索替换插件。
4.升级WordPress和插件
过时的版本也会使网站变慢。在演示和现场站点上,我们发现WordPress和插件的版本都过时了。我们在现场和演示站点上都更新了最新版本。
在更新插件之后,我们检查了它是否运行良好或是否遇到了任何问题。为此,我们做了一些表单提交测试,并检查电子邮件是否正确发送。在演示版本和现场版本中,一切都运行正常。
我们做了什么?
手动速度优化工作
1.优化图像
平均而言,网站图库中图片的最佳大小可以在200KB以下,因为当图片大小较高时,会对网站加载时间产生很大影响。由于我们的客户是一个酒店项目,网站上的图片太多了。
我们已经熟悉了一个图像优化插件,叫做smu.在我们之前的项目中,在激活它之后,我们看到了积极的结果,所以选择了同样的方法。
在不损害质量的情况下,插件有助于压缩图像的高度和宽度。此外,这个插件是启用延迟加载的一个很好的选项。当延迟加载被激活时,文本内容加载很快。稍后,加载图像。当文本加载时,网站将加载正确,它不会等待图像加载。
所以,我们决定添加新的WordPress插件专门用于图像优化。
2.优化数据库
如果一个网站需要快速加载,那么它的数据库也必须进行优化。表单提交、用户详细信息、表格、字段以及网站上的每一个大小细节都将存储在数据库中。
我们对数据库进行了彻底的审计,删除了所有不需要的表单提交、表、字段等。为此,我们安装了一个名为WPOptimize.只需在插件设置中点击几下,我们就能在几分钟内优化数据库。
3.清理缓存
缓存是一个严重影响网站性能的主要问题。为了清除所有缓存,我们正在为多个站点寻找一个理想的插件解决方案。我们之前的经验帮助我们选择了正确的插件,也就是,AutoOptimize.
4.禁用不需要的脚本和CSS文件
不需要的CSS文件和Java脚本是什么,例如,如果“请求报价表单”被添加到“联系我们”页面。为了使表单工作,将添加某些编码脚本。相同的脚本将在包括主页在内的所有页面上复制。这在任何方面都是不必要的,反而会降低站点的性能。
另一方面,手动禁用代码部分将是乏味的,所以我们提出了一个替代插件选项。WordPress插件资产清理帮助我们摆脱所有不需要的脚本和CSS文件。
5.移除不必要的插件
任何困难的任务都可以通过安装插件来完成。由于插件可以满足不同的目的,web开发人员通常会下载大量的插件。同时,更多的插件也会破坏网站的性能。
当我们对所有网站进行全面审计时,我们发现某些插件是毫无目的的。因此,我们从列表中删除了未使用的插件。
6.实现HTTP2
在更新HTTP2后,启用它可以使网站加载更快。由于客户专门找我们进行速度优化,我们计划为所有30个网站激活HTTP2。
为此,我们登录到中心站点的相应cPanel中,并启用HTTP2 Server Push机制。以前,客户端使用HTTP扩展。
手机反应
当我们处理与速度相关的任务时,我们发现一些站点面临响应性问题。为了解决这些问题,我们学习了树枝模板引擎,并在移动视图和固定视图中重新访问了设计的样式和布局。我们为移动响应做了什么?
- 优化了移动视图的切换菜单
- 改变了背景颜色与文本的对比
服务器优化
通常,当服务器加载了更多的文件和数据时,它会使网站加载变慢。我们检查客户的网站服务器有更多的文件,所以计划删除不需要的文件。结果,我们能够从服务器中删除108 GB的数据。
修复Bug
当我们评估网站时,我们发现了一些bug并修复了它们。
- cookie的弹出窗口应该只出现一次,当用户点击“接受”时,它不应该再次弹出。但在这里,即使点击“接受”,弹出窗口显示。我们通过添加基于cookie的弹出功能修复了这个错误。
- 在Timber主题中,当发出某些请求时,不同的功能都可以工作。我们解决了
- 由于CDN被禁用,Revolution Slider不能正常工作。所以,我们启用了CDN
- 两个表单不能在一个页面上工作,因此删除了表单并添加了一个按钮。当用户单击按钮时,它将触发对标题书now表单的请求
手动速度优化-结果
在手动优化了所有30个网站的速度后,有几个网站的速度有了预期的提高,但不幸的是,很少有网站的加载速度比以前慢。
为了解决这个问题,我们安装了WPRocket插件。因此,我们能够看到改进。
这是一个付费插件。最初,客户还没有准备好支付这个价格。当我们向他们解释它的好处时,他们被说服了。
WPRocket是最适合速度优化的插件。这一个可以取代所有其他插件,因为它可以自己处理所有与速度相关的任务。
我们将新的WordPress插件添加到父网站。它自动被安装在所有其他的子网站。但是,我们面临的问题是,当我们在父站点上配置一个设置选项时,它没有反映到其他站点上。
我们必须为所有站点手动配置。这是我们面临的唯一问题,但我们仍然做到了。我们根据需要配置了设置。我们删除了之前安装的其他不必要的插件。
最终结果
在完成质量检查后,我们测量了所有30个网站的速度。And, the client was happy with the improvement. This was the overall GTMetrix performance rate and load time.
- 绩效从76%提高到84%
- 加载时间从5.82秒降低到2.50秒
- 整体绩效提升8%
- 在总体加载时间内获得43%的增强率
在ColorWhistle,我们对网站速度优化工作有深入的了解和经验。所以,做这个项目对我们来说似乎并没有太大的压力。但对我们来说新颖的是,多个站点都有SuperAdmin面板。
对我们的团队来说,这又是一次愉快的学习经历。