提高您的网络性能并不总是很麻烦。从这四个需要对站点代码进行最少编辑的快速修复开始。
我们都知道速度就是金钱。
更快的网站可以更好地转换,从而提高收入。
尽管速度对底线有直接影响,但获得实施性能改进的建议有时可能具有挑战性,因为它通常涉及编辑可能影响网站结构完整性的遗留代码。
在提高 JavaScript 性能方面尤其如此。
虽然 JavaScript 的灵活性使其在编写函数时易于使用,但同样的灵活性(作为一种动态且松散类型的语言)使其维护起来更具挑战性。
客户和开发人员经常提出的请求之一是通过易用性和所需资源(由于开发时间的限制)来优先考虑性能改进。
这可能很难确定,特别是如果您不是开发人员并且您没有站点后端代码的完整视图。
我通过根据我理解需要对站点代码进行最少编辑的活动来排序我的列表来解决这个问题。
在本文中,我将重点介绍我最常出现的四个快速修复。
1. 删除第三方工具、小部件和 Web 技术
大多数网站依赖第三方技术进行跟踪、监控、客户支持(聊天功能)等等。
第三方技术的挑战在于,它通常使用您无法控制的代码在您的站点上执行,因此无法提高其性能。
页面上加载的第三方脚本数量可能会降低页面性能,因为这些脚本来自不同的域。
要理解这一点,您首先需要了解访问网页时会发生什么。
访问网页时,浏览器会查找所有需要 DNS(域名系统)查找的资源。
然后,浏览器必须等到查找完成才能开始下载页面。
此事件依赖于源服务器快速响应。
当服务器响应时,代码必须被浏览器读取和理解,然后提供给您。
尽管此事件可能需要几毫秒,但将其乘以浏览器必须执行的查找,然后包括来自任何正在查找的域的缓慢服务器响应时间,这些毫秒会增加到几秒。
这里的问题是为什么在不需要的时候携带自重?
作为审计的一部分,我总是会查看网站上使用的第三方技术的数量。
最简单的方法是使用诸如BuiltWith和Wappalyzer 之类的技术查找工具 (可以使用其他几种工具,包括付费和免费)。
当您需要做出保留或删除的简单决定时,这些工具很有用。
但是,如果该技术仍在使用中,并且您需要评估保留它的好处与它对站点负载的影响,那么您最好使用Page Speed Insight Tool和Lighthouse等诊断工具来突出性能影响.
如果您更倾向于技术,您可以使用 Chrome 开发工具 Block Network Request Blocking 功能来查看在未加载特定脚本或资源时页面加载的速度。
另一个可视化加载活动的好工具是webpagetest.org 的RequestMap。
此报告使用 Chrome 请求数据为您提供按字节传输的资产大小的直观表示。
在向对编码一无所知的 C 级人员展示外部技术的影响时,我会使用它。
站点越旧,找到不再使用的外部代码的机会就越大。
我已经发现:
- 不再使用的聊天框脚本。
- 不同版本的 cookie 同意小部件。
- 来自不再使用的软件的广告跟踪像素。
- 而且——最糟糕的是——在 CSS 按钮可以使用的情况下,使用外部小部件作为社交分享按钮。
这些脚本很容易摆脱,因为它不会影响站点上其余代码的整体完整性。
或者,如果您需要保留这些脚本,请将支持的尽可能多的脚本移至 Google 标记管理器 (GTM) 或您使用的任何标记管理器,以减少浏览器执行的 DNS 查找次数。
定期查看标签管理器脚本以删除不必要的脚本。
您还可以使用 GTM 中的窗口加载触发器来延迟在访问者登陆页面后立即加载不需要的脚本,直到页面完全加载。
2.实现DNS Prefetching & Preconnect
DNS prefetch 和 preconnect 是可用于加速 DNS 查找的浏览器资源提示。
浏览器通常会等到需要某个资源后才尝试请求该资源的来源。
在请求该资源时,整个页面的加载将暂停,直到它被解决。
DNS 预取是一种在需要之前调用非关键资源来源的方法,通过让浏览器领先一步来加快查找时间。
您可以预取将显示在页面底部的第三方小部件,例如聊天框、社交分享按钮、调查小部件等。
<link rel="dns-prefetch" href="//example.com">
预连接也用于建立早期连接,但应该用于对页面负载至关重要的资源,例如内容交付网络上托管的资产、网络字体等。
3. 尽可能使用单个 JQuery 库
一些第三方脚本带有 jQuery 库。
用外行的话来说,jQuery 是一个 JavaScript 库,它简化了JavaScript 特性的使用。
大多数现代网站都有某种形式的 JavaScript,因此它已经在网站上加载了一个 jQuery 版本。
当您只需要一个时,在您的站点上提取该库的两个版本是一种资源浪费。
加载外部脚本时,始终要求一个不加载其 jQuery 版本的版本。
然后,您的开发人员可以将脚本设置为使用您网站上正在加载的全局版本。
不要忘记测试您正在加载的脚本是否与您网站上的 jQuery 版本兼容。
使用 Chrome 开发工具 JavaScript 控制台窗口来查看您的站点上正在加载的 jQuery 版本。
键入 Ctrl + Shift + J 打开控制台,然后键入console.log(jQuery().jquery); 在命令行中。
Yellow Lab Tools有一个简单的界面来检查 jQuery 版本。
减少加载 jQuery 文件影响的其他方法包括使用最新版本和通过Google 的托管库提供 jQuery 。
4.删除旧浏览器支持的冗余CSS说明
站点越旧,攻击计数越高。
删除多余的 CSS 指令,如旧浏览器支持(IE 修复)和旧前缀很容易,因为它通常是一个单独的代码块。
许多工具会突出显示网站上未使用的 CSS。
但是,Yellow Lab Tools 无需逐行查看代码以获取 olds 前缀和浏览器支持,而是为您提供了一个易于理解的列表,您可以让您的开发人员完成工作。
确保您查看您的跟踪工具,以查看仍在使用这些旧浏览器的访问者数量,以及如果这些数字保证您继续提供支持。
综上所述
有许多令人惊叹的技术可以改善我们定位和跟踪网站访问者的方式。
虽然速度始终是一个主要问题,但为用户提供最佳体验始终是重中之重。
定期审核您的外部脚本将帮助您以最有效的方式为访问者提供最佳体验。