ColorWhistle重新设计-一个开发者的POV!

这个新版本的ColorWhistle网站实际上是我们的4th自从我们在2014年开始我们的网站。

我们之前网站的目标是基于市场需求。我们的营销团队负责网站发布博客、案例研究和创建登录页面。他们总是不得不依赖开发人员来创建登录页面和其他部分。因此,易用性是我们之前改进的主要目标。但在这次改造中,我们的主要目标是-性能。

阅读这个详细的案例研究,了解更多的过程,准备工作和结果是非常有希望的

项目详细信息

工业:信息技术服务
工具使用:WordPress,自定义主题,高级自定义字段专业
地区:印度

技术应用:WordPress, Php, jQuery

这个团队

项目协调员:1人
UI / UX设计师
开发人员:1

项目持续时间: 3个月

网站重新设计-计划,挑战和过程

正如你们所注意到的,我们的ColorWhistle网站已经进行了全新的设计。区别不仅仅在于设计。我们已经完全重新开发了整个网站,远离用户友好的Elementor。

在这个案例研究中,我们将详细讨论这个网站重新设计背后的思想过程,规划,挑战,背后的过程,以及我们如何在开发中实现它们。

我们学到了很多,自从我们开始这个网站改造主要是在性能指标和网站速度方面。

初始准备和目标

这个新版本的ColorWhistle网站实际上是我们的4th自从我们在2014年开始我们的网站。

我们之前网站的目标是基于市场需求。我们的营销团队负责网站发布博客、案例研究和创建登录页面。他们总是不得不依赖开发人员来创建登录页面和其他部分。因此,易用性是我们之前改进的主要目标。因此,我们选择了Elementor,因为它可以让营销团队在没有开发人员的帮助下轻松管理网站。

基于Elementor的网站开发的主要问题是性能。我们都知道页面构建器对网站速度和性能的影响。Elementor也不例外。当我们使用Elementor时,我们不得不依赖各种各样的插件来实现几乎每一个功能,这进一步影响了网站的速度和性能。

撇开这么多性能措施,如缓存,缩小,CDN,图像优化,有条件的资产加载等,我们无法提高我们的网站的性能。尤其是我们网站在谷歌页面速度的得分。

我们的谷歌页面速度在移动端是5分,在桌面端是45分,这绝对是令人担忧的。

页前速度桌面得分- 45
前页速度移动得分- 5

自从谷歌引入核心Web vital(专注于页面加载速度,元素交互性和视觉稳定性)以来,尽管尝试了各种方法,但要提高分数变得更加困难。

核心Web vital

在我们开始之前,我们想简单介绍一下这个核心Web vital。核心Web vital是关于页面加载速度,交互性和视觉稳定性。

最大含量涂料(LCP)

LCP主要是关于页面加载性能。简单来说,你的网站需要多长时间开始在视口中显示最大的元素。

首次输入延迟(FID)

FID是指网站对用户行为的交互性或响应性。简单来说,就是网站需要多长时间来响应用户的操作。

累积布局位移(CLS)

CLS是关于布局变化/布局转移。简单来说,就是改变文本位置,或者当你想点击其他东西时点击一个按钮。

总的来说,这一切看起来都很简单,但这就是获得领先和失去领先的区别。

重新设计背后的思考过程

网站速度之所以被谷歌视为SEO排名因素,主要是因为它对用户体验的影响,跳出率更低,转化率更好。

由于网站速度不佳,跳出率非常高,转化率日益下降。所以我们决定彻底改造网站,主要有两个目标。

1.通过出色的谷歌页面速度分数提高性能

2.便于营销团队在没有开发人员帮助的情况下使用

我们保持谷歌页面速度分数作为基准的主要原因是,我们都知道与GT Metrix, Pingom等相比,提高谷歌页面速度分数是多么具有挑战性。

此外,如果我们不能在没有开发人员的帮助下管理或更新网站,那么这个网站的重新设计是没有用的。因此,我们决定在没有开发人员帮助的情况下,不偏离网站易于由营销团队管理的基本要求(只需较少的编码知识)。

预见性和过程

我们决定与设计师、开发人员和营销人员组成的团队讨论目标、功能要求等,以确保我们都朝着同一个目标努力。单方面的决定无助于满足人们的期望。

我们写下优先级,开始讨论我们想要在网站上使用的每一个元素的优缺点,然后做出决定。

设计

一切都是从这里开始的。由于性能是这次网站改造的核心目标,我们与设计师进行了多次扩展会议,以在整个设计阶段遵循某些规则和指导方针。

在设计网站时,我们决定遵循以下原则。

  • 标题和内容使用单一字体,而不是使用不同的字体。
  • 使用尽可能少的字体重量变量。
  • 在第一个折叠部分避免沉重/花哨的元素。
  • 避免过于花哨的动画。

设计师团队有一个具有挑战性的时间设计这个网站,因为他们必须考虑这么多额外的东西,而不失去创意过程。但这对我们内部来说是一种新的学习,这让我们有信心,即使有这些额外的因素,我们也可以提供高质量和精彩的设计。

这里有一些我们的新设计。

homepage-colorwhistle-first-few-folds
我们新主页的前几层。访问主页以获得完整的设计。
奖状页
我们的奖状页面

发展

我们与设计团队和营销团队的讨论帮助我们理解了需求和他们的优先级。

尽管Elementor提供了大量的选项,对用户非常友好,但营销人员并没有真正使用大多数功能。这让我们有信心摆脱页面构建器(Elementor),并相信我们可以构建用户友好型和性能友好型的东西。

以下是我们在开发阶段决定遵循的内容:

  • 使用ACF Pro来开发网站,以替代基于页面构建器的方法
  • 开发可重用组件(部分或块),使营销人员更容易管理网站,并轻松创建登录页面
  • 在后端创建拖放功能来重新排列部分的位置
  • 在后台提供控件来控制容器宽度,内容颜色,内容位置和背景颜色等。
  • 发展全球业务
  • 避免使用3理查德·道金斯尽可能多的聚会图书馆
  • 不要使用Font Awesome库
  • 在必要的时候使用SVG图标,而不是使用字体
  • 尽量避免使用插件
  • 不要包含任何对网站没有用处的元素
  • 升级到更好的WP托管服务器
  • 遵循并坚持这个过程,即使它很小,也不要偏离它

简要介绍开发过程

我们决定将托管从Siteground托管改为WP Engine Managed WordPress托管。从积极的方面开始,我们直接在新设置的WPE服务器中开始开发,这样我们就可以在开发阶段本身开始使用高端托管服务器的好处。

当我们决定使用ACF Pro作为页面构建器方法的替代方案时,我们必须构建一些易于管理的东西,但也为营销人员管理网站提供了必要的选项。我们总是必须在这两者之间取得平衡,因为这对实现项目目标至关重要。

为此,我们决定使用ACF的Flexible Content模块。这使我们能够开发可重用的拖放组件。这些块可以在网站的任何地方使用,解决各种问题。

此外,我们使用ACF选项页面开发了全局部分,这为我们提供了存储跨页页出现的常见或全局布局的灵活性,如页脚元素,页眉元素,新闻订阅,感词等。我们将这些全局部分转换为短代码,可以在任何页面中作为正常的灵活内容块调用。

可重用组件是一个更好的开始,我们的下一个挑战是提供后端控件来改变容器宽度、内容颜色、内容对齐和背景颜色等。我们利用ACF字段,如Text, Dropdown等来提供这些后端控件,最终证明这是一个很好的功能添加,进一步减少了开发人员的依赖性在很大程度上。

当我们使用ACF Flexible内容模块为页面构建可重用的模块时,我们想到了探索古腾堡,并将其用于其他模块,如Posts,案例研究,电子书等,因为这是WordPress的未来。

由于这些可重用组件带来的附加价值,我们决定构建尽可能多的可重用古腾堡块。这样就很容易在博客、案例研究和电子书模块之间创建这样的设计或布局。

很少有意识的决定

我们避免使用3理查德·道金斯尽可能多的聚会图书馆。对于悬停动画,我们只是添加了我们需要的必要代码,而不是包括有许多效果的整个库。通过这样做,我们减少了对服务器的请求。

我们使用svg图像,而不是使用字体很棒的图标库,这有助于我们减少服务器请求。

所有这些看起来都是小事,但在性能上下文中,它增加了更多的价值。

除此之外,我们还遵循了所有帮助我们在谷歌页面速度中获得更好分数的标准程序,如为图像设置alt标签,使用优化的图像,根据容器大小以正确的宽高比加载图像等。

我们都知道,所有在桌面中需要的部分并不一定要在移动屏幕上也有。只是在手机屏幕上隐藏这些部分永远不会有任何好处,因为这些代码仍然会加载在DOM中,即使它是不可见的。因此,我们决定使用WordPress的is_wp_mobile()函数在桌面上加载这些部分。

我们在开始开发之前决定的一件主要事情是不依赖缓存或性能插件来增加或提高页面速度分数。所以我们专注于开发过程中的每一个方面,这将最终导致更好的页面速度分数,然后使用这些性能插件作为次要选择。

从开发阶段开始,我们就开始使用Smush插件,因为它有助于图像优化和惰性加载图像。

职位发展

一旦我们完全完成开发,我们在谷歌页面速度测试我们的网站,结果是压倒性的。我们的桌面90+,手机60+。这是我们在谷歌页面速度分数方面的最佳结果。并不是说这些分数是在没有任何性能改进插件的帮助下取得的。所以我们很有信心,在性能插件的帮助下,我们将能够提高性能并获得更高的分数。

在完成开发后,我们向我们的内容团队和营销团队提供了详细的KT关于网站的工作流程以及如何管理新构建的框架。我们向我们的内容和营销团队发布了测试版,开始内容更新工作。

我们知道这种转变对于营销团队来说可能有点困难,因为他们正在从Elementor转向自定义构建的框架。但令我们惊讶的是,他们发现很容易适应这个系统,他们能够很容易地在我们KT共享的资源的帮助下进行内容更新。

在完成内容更新工作后,我们在各种设备上进行了多个级别的测试,以确保一切都为发布做好了准备。

我们推出了网站到我们的www.icfc-ag.com域名,然后我们添加了必要的营销补充,如谷歌标签管理器脚本,Hubspot跟踪脚本等。由于这些脚本是第三方资源,它们对谷歌的页面速度评分产生了巨大的影响,在桌面端评分突然下降到80+,在移动端评分下降到50+。

之后-谷歌页面速度-桌面分数- 99

WordPress速度改进

我们决定在我们的网站上使用WP引擎缓存机制,而不使用任何插件进行缓存。

大多数性能审计是基于网站的第一折叠,这是可见的视口。所以我们确保在第一次折叠中一切都是完美的,我们没有在第一次折叠中加载任何沉重或花哨的元素,以确保我们有一个不错的分数。

此外,当我们开始开发过程时,我们就专注于性能,我们能够通过谷歌页面速度报告中的许多审计,即使没有明确地处理它们。

我们开始在谷歌页速度报告中报告的点上工作,这影响了我们的分数。这个性能改进阶段对我们来说是一个巨大的学习,因为我们从一个更好的角度来理解事情。

我们发现,很多插件文件和其他库都是在前台页面调用的,而这些地方并不需要它们。所以我们决定卖掉不需要的。

在做了大量的研究之后,我们决定使用Asset Clean Up Pro插件作为基本性能增强插件。这个插件的主要特点是有条件地加载或卸载网站中的资产。这个插件提供了各种选项来控制加载在我们网站上的每一个资产。

我们以以下方式使用这个插件:

  • 我们做了一些站点范围的卸载,比如禁用站点范围内的表情符号,禁用工具栏隐藏的Dashicons,禁用页面上的Gutenberg CSS块库,因为我们只在帖子上使用Gutenberg,案例研究和电子书模块
  • HTML源代码清理
  • 有条件地加载特定页面所需的CSS和JS文件。例如,我们只在有滑块或旋转模块的页面上加载滑块JS和CSS文件
  • 根据使用情况有条件加载插件。例如,我们只在使用表单的页面上加载Contact Form 7, Captcha Plugin文件。
  • 优化CSS和JS使用缩小,组合和推迟选项。
  • 优化谷歌字体预加载,预连接和字体显示选项。

这个插件在提高性能方面做了奇迹。基本设置正确后,在这个插件的帮助下很容易提高性能。

通过有条件地从WP核心、插件、主题加载CSS、JS文件,我们可以在很大程度上提高分数和性能。但我们需要确定我们在做什么。我们不能在不知道它是怎么做的情况下,简单地打开特征来获得更好的分数。这可能会破坏网站。所以,我们在打开/关闭每一个选项之前都做了彻底的研究。

我们都知道,使用第三方库会影响页面速度得分。所以,我们决定在我们的服务器上本地加载字体,而不是我们使用的谷歌字体。但是当我们在本地加载字体时,它在谷歌页面速度报告中的“巨大的网络有效负载”中受到影响,因为字体文件大小有点大。所以,我们决定坚持使用谷歌字体与“预连接”和“预加载”选项。

我们想要改进的另一件事是谷歌标签管理器脚本的使用。因为它经常在谷歌页面速度报告的每个点下出现。所以我们使用了“CAOS”插件,它帮助我们在本地托管谷歌分析。

除了这些面向插件的修复,我们还做了谷歌页面速度报告中建议的许多其他修复。

"图像元素具有明确的宽度和高度"这是最难的部分,对我们来说是一次很好的学习经历。谷歌希望每个图像都有宽度和高度指定内联,以避免意外的布局偏移,从而导致谷歌页面速度报告中的累积布局偏移(CLS)。但是设置内联宽度和高度在这个现代时代没有帮助,因为我们需要在无数的设备和屏幕尺寸中解决这个问题。因此,显式地提供宽度和高度是行不通的。我们花了无数个小时做研究,想过各种方法来通过考试,但我们没有成功。最后我们破解了这个问题,找到了绕过这个指标的解决方案。我们通过向没有“px”或“%”后缀的图像添加宽度和高度属性来解决这个问题。简单地说,我们只需要在width和height属性中添加数字。

尽管这个修复对分数没有任何重大影响,但我们很满意能学到一些新东西并修复这个问题。

之后-谷歌页面速度-移动得分- 89

结果——锦上添花

如前所述,我们开始重新设计这个网站有两个主要目标:非开发人员的易用性和优秀的谷歌页面速度分数。我们实现了这两个目标。

在GTMetrix中获得“A”级,性能100%,结构96%,并通过了所有核心web重要指标。
在谷歌页面速度中,我们在桌面中获得了99%的性能,并通过了所有核心web重要指标。
在谷歌页面速度方面,我们获得了89%的移动性能,并通过了几乎所有核心web重要指标。
  • 易于使用的自定义构建框架,为营销人员管理网站,无需开发人员的帮助。
  • 在性能和网站速度方面,为参与这个项目的每个人获得了广泛的知识。
  • 我们对在WordPress开发中取得如此高的分数充满信心。
  • 全新的设计,提升用户体验,吸引更多用户。
  • 大幅下降的反弹率和优秀的转化率。
后- GTMetrix得分- 100%性能

学习和收获

网站速度优化不是在开发后或发布期间就能完成的。它甚至在开始设计之前就开始了,甚至在网站上线之后还在继续。这是一个持续的过程。

这主要取决于我们在网站设计方面所做的决定,以及我们想要包含在网站中的元素。

如果我们将其分解成数字,关于目标,功能和优先级的初始讨论将占10%,20%用于设计,开发涉及50%,其余20%基于营销活动。

但是如果我们不能控制最初的30%(计划- 10% +设计- 20%),那么即使你在剩下的70%中一切都正确,我们也无法产生结果。因为,整个过程都取决于你设定的初始基础。

通俗地说,我们都必须理解和接受,网站速度并不是完全基于开发方法或编码标准。这是设计师、程序员和营销人员的共同努力。

就我个人而言,我学到的是,如果你能以正确的心态和清晰的计划开始一个项目,尽管你遇到各种各样的逆境,你总会找到方法来完成它!

拉杰夫
关于作者- Rajeev

Rajeev是一名WordPress开发人员,有7年以上的经验,在旅游、教育、房地产和电子商务等各个行业建立网站,性能和网站加载速度是核心目标。他还热衷于基于api的网站开发,因为他相信这可以使企业以创造性的方式超越。工作之余,他也是费德勒的粉丝,梦想有一天能在中心球场观看费德勒的比赛,他喜欢在业余时间打羽毛球!

准备开始了吗?

让我们来创作你的下一个数字故事

我们的专业认证- ColorWhistle
转到顶部
关闭弹出

大家一起说

    当然可以,请留下您的详细信息,我们的代表将很高兴给您回电!

    例:无名氏

    例:美国

    更多细节,加速这个过程:)

    Baidu
    map