负责的JavaScript:第三部分

你已经做了所有你认为可以解决网站JavaScript问题的事情。你在可能的情况下依靠网络平台。你回避巴别塔找到更小的框架替代品。您削成您的应用程序代码到最精简的形式成为可能。然而,事情只是不够快。如果网站不履行的方式,我们的设计师和开发人员希望他们能,我们不可避免地打开自己:

文章接着下面

“什么是我们不能做什么?”“我们能做些什么,我们所编写的代码?”“我们的架构的哪些部分是没有我们?”

这些查询都是有效的,它们都是性能问题的一部分源自我们自己的代码。然而,把责任完全归咎于我们自己,会让我们看不到一个不加粉饰的事实:我们的性能问题有相当一部分是来自外部的。

当第三轮崩溃的党# section2

方便总是要付出代价的网络被我们对它的集体偏好所破坏。JavaScript中,尤其是采用在暗示一个快速增长的趋势,外包什么,那就是我们(第一方)不想做的一种方式。有时,这是一个必要的决定;这使得在许多情况下,完善的金融和操作感。

但是,毫无疑问,第三方JavaScript从来没有。这是一个魔鬼交易商那里勾引你与你的问题的解决方案,但方便不提醒你,你没有什么可过的副作用,解决方案引入了无法控制的。如果一个第三方供应商增加了功能,以他们的产品,首当其冲。如果他们改变了基础设施,会感受到它的影响。那些谁使用你的网站变得沮丧,他们是不会理会与难以忍受的用户体验拼杀。您可以减轻一些第三方的症状,但除非你删除解决方案,您能不能治愈疾病完全,而这并不总是可行的或可能的。

在这一期的负责任的JavaScript,我们将采取比少技术方法前一篇文章。我们将更多地谈论第三方的人性一面。然后,我们将介绍一些技术途径,了解如何解决这个问题。

通过方便受阻# section3

当我们谈到今天网络的糟糕状态时,我们中的一些人很快就指出开发商的方便导致了这个问题。虽然我同意开发者的便利性有损害用户体验的倾向,但这并不是唯一的便利性,它会使网站变得呆滞、混乱。

操作的便利性可能成为一种非常棘手的技术债务的前兆。当我们不能独自解决一个普遍的问题时,这些便利就是我们所能得到的。它们代表了在缺乏架构灵活性和/或足够的开发资源的情况下解决问题的第三方解决方案。

每当出现不便,是有讨论围绕着如何解决它的方式,是全面的时间。所以,让我们来谈谈它是什么样子应付那种情况下,从一个更人性化的角度。

问题是疼痛#第四单元

究其原因第三方开始发挥作用,首先是疼痛。当组织中的决策者已经感觉到围绕一定的问题有足够的痛苦,他们会做非常人性化的东西,就是要找到最快的方法让自己痛苦消失

市场总会找到解决这些痛点的方法,即使它们这样做的方式是不可持续的,甚至有一点帮助。Web可访问性覆盖——声称自动修复可访问性问题的第三方脚本——是最糟糕的错误之一。首先,你把钱花在一个不需要的修复修复任何东西。然后你支付一种完全不同的价格时“修复”危害您的网站的可用性。这不是熨平板抹黑的工具,一些第三方供应商提供的实用性,而是为了说明采用第三方解决方案是如何发生的,即使是那些客观可怕

从在Chrome DevTools性能面板火焰图表中一项艰巨的任务的描述。
铬的性能痕迹长期的任务由第三方的无障碍网页脚本覆盖拉开序幕。任务占据了主线程的大约600毫秒在2017年视网膜苹果笔记本电脑

所以,当供应商卷起,并承诺解决我们遇到的非常痛苦的问题,有一个很好的机会,有人会蚕食。如果某人是足够高的层次,他们会发挥别人向下的压力,购买 - 如果不是在决策过程完全绕开他们。相反,当那些在沟槽的压力下,缺乏足够的资源来创造必要的功能本身也发生采用第三方解决方案。

无论催化剂是什么,把你的同事召集起来,共同制定一个计划来应对和缓解你所面临的问题是有好处的。

创建缓解计划# section5

一旦人们在一个组织已经锁定到一个第三方的解决方案,但是不明智的,你会迫使课程变化将取决于迫切需要该解决方案供应遇到的困难。事实上,你不应该试图说服解决方案的支持者,他们的决定是错误的。这些努力几乎总是适得其反,能使人感到攻击和你告诉他们什么更能抵抗。更糟的是,这些努力可以创造恶语相向,人们停止倾听彼此完全和是滋生更严重问题的温床。

如果你必须——就像我自己经常做的那样——把你的不满放在一边,并且拿出一个缓解计划引导你的同事向更好的结果。你的具体做法的角落和缝隙将取决于第三方自己和组织的结构,但它的骨头可能看起来像下面的一系列问题。

什么问题呢这种解决方案的地址?# section6

选择第三方解决方案是有原因的,这个问题将帮助您弄清楚采用它的基本原理是否合理。请记住,有些时候做决定的人并不都在房间里。你可能不得不对那个决定的后果做出反应,但这个问题的答案会让你自然而然地跟进。

我们打算使用该解决方案多长时间?# section7

这个问题将帮助您确定解决方案的保质期。它是以绷带的形式引入的吗?目的是一旦潜在的问题得到解决,就将其移除,例如在可访问性覆盖的情况下?还是需要更长期的,比如A/B测试套件提供的数据?另一种可能是,解决方案永远不能被有效地删除,因为它服务于一个关键的目的,就像分析脚本的情况一样。这就像在一个游泳池扔床垫扔进去很容易,但要把它拖出来几乎是不可能的。

在任何情况下,你可以不知道,如果第三方脚本是在这里留下来,如果你不问。事实上,如果你找到解决的办法是暂时的,可以形成一个计划,一旦解决了潜在的问题已经解决,最终从网站上删除它。

谁是接触点,如果出现问题?# section8

当第三方解决方案投入到位,有人必须是接触的,用于当-不点如果问题出现。

我所看到的情况(过于频繁),当第三方脚本变得失控。例如,当一个标签管理器或A / B测试框架的JavaScript慢慢不知不觉地增长,因为营销人员不清除旧标签或完成的A / B测试。它是正是这些原因,责任,需要在您的企业目前正在使用连接到一个特定的人对第三方的解决方案在您的网站。什么责任意味将在任何情况下有所不同,但可能包括:

  • 定期监控第三方脚本的占用空间;
  • 维护以确保第三方脚本不会失控;
  • 偶尔召开会议,讨论供应商与您组织的未来关系;
  • 的多个第三方之间的功能重叠的标识,以及如果潜在冗余可被移除;
  • 和正在进行的研究,尤其是识别可能是缓慢的第三方脚本更好的替代作用更快的替代品。

在这方面责任的想法不应该是你与枷锁你的队友繁重的,严厉的义务,而是在你的同事鼓励正念练习。因为没有正念,第三方脚本是在你的网站不良影响被忽视,直到它成为房间里一个抱怨的怪物,不能再被忽视。将责任分配给第三方可以帮助防止这种情况的发生。

确保负责使用第三方解决方案# section9

如果你可以把一个缓解计划,并得到大家在船上,确保负责任地使用第三方解决方案的工作就可以开始。幸运的是,实际的技术工作会比试图缠斗的人更容易。所以,如果你走到今天这一步,一切将需要得到的结果是时间和毅力。

仅加载什么是必需的# section10

这似乎是显而易见的,但只加载必要的内容。从我看到的未使用的第一方JavaScript加载的数量来判断——更不用说了第三方javascript——这显然是个问题。这就像试图通过把杂物塞进衣橱来清洁你的房子。不管是否真的需要它们,在每个页面上加载第三方脚本都是很常见的,所以请参考您的联系人,以确定哪些页面需要哪些第三方脚本。

举个例子,我以前的一个客户使用多个品牌网站流行的第三方工具来获得零售商的名单给定产品。它表明明确的价值,但脚本只需要的是一个网站的商品详细页上。在现实中,它经常被装上每一个页。剔除从那里不属于非产品页面,这表面上是减少了转换路径上的摩擦显著性能提升网页此脚本。

弄清楚哪些页面需要哪些第三方脚本需要你做一些毫无技术性的工作。实际上,你必须站起来,与被指派负责第三方解决方案的人交谈。这对我来说是非常困难的工作,但当真诚的合作发生时,它是有回报的,好的结果是实现结果。

自托管的第三方脚本# section11

无论如何,这个建议都不是秘密。我甚至提到了它在本系列的前一篇文章,但它需要从每一个机会屋顶喊:你应该自营主机作为许多第三方资源越好。这是否可行取决于所讨论的第三方脚本。

你是从某个框架中抓取的吗谷歌的托管库,cdnjs,或其他类似的供应商?自主机吸盘现在

Casper找到了一种自我托管最佳脚本的方法而显著减少其开始渲染时间为他们的麻烦。这真的开车回家的一点是第三方资源的重大损害的事实是,他们在其他服务器上唯一的作用是我们遇到的最严重的性能瓶颈之一。

如果你想要自主托管一个分析解决方案或类似的脚本,那么要实现自主托管就会有更高的难度。您可能会发现一些第三方脚本无法自我托管,但这并不意味着不值得费心去查找。如果您发现第三方脚本不适合自托管,也不必担心。您还可以尝试其他缓解措施。

屏蔽跨源连接的延迟# section12

如果你不能自托管的第三方脚本,未来最好的事情就是要PRECONNECT服务器主机它们。WebPageTest的连接视图不会显示你的,以及参与建立他们连接的延迟哪些服务器网站云集的资源了出色的工作。

WebPageTest的连接视图的屏幕截图,它以瀑布图的形式显示了为给定页面提供内容的所有服务器所涉及的延迟。
WebPageTest的连接视图显示了加载期间页面请求资源的所有不同服务器。

Preconnections是有效的,因为它们在浏览器发现它们之前建立了到第三方服务器的连接。解析HTML需要时间,而且解析器经常被样式表和其他脚本阻止。在无法自主托管第三方脚本的地方,预置连接非常有用。

也许不要预装第三方脚本# section13

预加载资源是的,听起来美妙,在这些事情之一第一,直到你认为它可能会适得其反,因为安迪•戴维斯指出。如果你不熟悉预加载,它类似于preconnecting但指示浏览器更快远远比它通常会取一个特定的资源更进了一步。

预加载的缺点是,虽然它非常有利于确保资源尽快加载,但它改变了资源的发现顺序。每当我们这样做时,我们都在含蓄地说,其他资源不那么重要——包括对渲染乃至核心功能至关重要的资源。

这可能是一个安全的赌注,大部分的第三方代码是不是您的网站的功能你自己的代码是至关重要的。也就是说,如果你必须预加载第三方资源,确保只对页面呈现至关重要的第三方脚本进行预加载。

如果你发现自己在你的网站的初始渲染取决于第三方脚本的位置,请参阅您的缓解计划,看看你可以做,以消除或减轻它的依赖性是什么。根据第三方的核心功能是从不会到会的,因为你放弃了很多控制别人谁可能没有考虑您的最佳利益的好位置。

延迟加载不必要的第三方脚本# section14

最好的请求就是没有请求。如果你有一个并不需要马上被加载第三方脚本,可以考虑与延迟加载它路口观察。这是它看起来的样子延迟加载一个Facebook Like按钮当它的滚动到视口:

让loadedFbScript = FALSE;常量intersectionListener =新IntersectionObserver(项=> {entries.forEach(进入=> {如果((entry.isIntersecting || entry.intersectionRatio)&& loadedFbScript){常量scriptEl =使用document.createElement( “脚本”);!scriptEl.defer= TRUE; scriptEl.crossOrigin = “匿名”; scriptEl.src = “https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0”; scriptEl.onload =()=> {loadedFbScript = TRUE;}; document.body.append(scriptEl);}});});intersectionListener.observe(document.querySelector( “FB-等。”));

在上面的代码片段中,我们首先设置一个变量来跟踪我们是否加载了Facebook SDK JavaScript。在那之后,一个IntersectionListener被创建检查所观察到的元素是否是Facebook的SDK在视口中,以及是否已被加载。如果SDK的JavaScript尚未加载,它的一个引用注入DOM,这将揭开序幕它的请求。

您不可能延迟加载每个第三方脚本。他们中的一些人只是需要在页面加载时完成他们的工作,否则就不能延迟。不管怎样,做一些检查工作,看看是否可以延迟加载至少一些第三方JavaScript。

其中一个共同关注的问题,我从同事听见我建议延迟加载第三方脚本是怎么能延缓任何交互的第三方提供。这是一个合理的担忧,因为当你延迟加载任何东西,一个明显的延迟可以作为资源负载发生。你可以解决这个问题在一定程度上与资源预取。这与我们前面讨论过的预加载不同。预抓取消耗了相当数量的数据,是的,但是预抓取资源被赋予较低的优先级,并且不太可能与关键资源争夺带宽。

停留在问题的顶部# section15

密切关注您的第三方JavaScript需要近乎高度警觉的专注力。当您认识到技术债务的糟糕表现时,您会很自然地进入一种意识状态,在这种状态下,您会像认识和处理其他类型的技术债务一样认识和处理它。

停留在第三方的顶部重构 - 一种,需要你定期执行任务,如清理标签管理器和A / B测试,整合第三方解决方案,消除了任何不再需要,并应用编码技术如上所述。此外,你需要工作,与您的团队来解决周期性基础上,该技术的债务。这种工作不能自动化,所以是的,你需要屈服下来,并有脸对脸,用实际的人同步对话。

如果你已经在安排“清理冲刺”的习惯上的一些间隔,则是您解决与性能相关的技术债务的时间和空间,而不管它是否涉及第三方代码或第一方代码。有一段时间用于特性开发,但这段时间不应该包含您的全部工作时间。只关注功能开发的开发团队注定会被不可避免的技术债务所消耗。

因此,在本系列的第4部分也是最后一部分中,我们将讨论在进程上下文中负责地使用JavaScript的艰苦工作意味着什么。在这篇文章中,我们将探讨如何将您的组织联合起来,以使您的网站更快、更容易访问,从而使每个人在任何地方都更可用。

没意见

有话要说?

我们已经关闭了评论,但是你可以看到在我们这样做之前人们都说了些什么。

从阿拉巴马州

Webwaste

在从万维网废物此摘录,格里麦戈文检查臃肿网站和不必要的资产对环境的影响。
行业

连接点

在从创意文化的摘录,贾斯汀的Dauer走在我们通过多种方式,其中组织的文化和设计工作,它并发挥彼此的关闭。