负责的JavaScript:第三部分

你已经做了所有你认为可以解决你网站的JavaScript问题的事情。你在网络平台上依靠在那里你可以.您回避的巴别塔发现更小的框架方案. 您将应用程序代码缩减为尽可能精简的形式。然而,事情还不够快。当网站不能像设计师和开发者所期望的那样运行时,我们不可避免地会自暴自弃:

文章如下

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

这些都是有效的调查,作为业绩困境的一部分源于我们自己的代码。然而,仅仅把责任归咎于我们自己,却让我们看不到一个不加掩饰的事实:我们的业绩问题中有相当大的冲击来自外部。

当第三轮崩溃的党#第2节

便利总是有代价的,而且网络是由我们对它的偏爱集体毁坏. 尤其是JavaScript的使用方式表明,无论我们(第一方)不想做什么,外包的趋势都在迅速增加。有时,这是一个必要的决定;它在许多情况下都具有完美的财务和运营意义。

但别搞错了,第三方JavaScript是决不便宜的. 这是一个魔鬼的讨价还价,供应商引诱你解决你的问题,但很方便地没有提醒你,你几乎没有控制的副作用,解决方案介绍。如果第三方提供商向其产品添加功能,首当其冲。如果他们改变了基础设施,会感受到它的影响。那些谁使用你的网站变得沮丧,他们是不会理会与难以忍受的用户体验拼杀。您可以减轻一些第三方的症状,但除非你删除解决方案,您能不能治愈疾病完全,而这并不总是可行的或可能的。

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

因方便而受阻#SECTION3

当我们今天谈论网络对不起国家,我们中的一些人很快指出开发人员便利性在促进问题。虽然我分享开发商的方便有伤害用户体验的趋势来看,他们不是唯一的一种方便,可以把网站变成呆滞,janky一塌糊涂。

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

每当出现不便,是时候讨论一下如何以一种全面的方式解决这个问题了。所以让我们来谈谈从一个更人性化的角度来处理这种情况是什么样子。

问题是疼痛#section4

第三方首先发挥作用的原因是痛苦。当组织中的决策者对某个问题感到足够痛苦时,他们会很人性化的东西,这是找到使这种痛苦最快的方法走开.

市场总是会找到办法来解决这些痛点,即使他们这样做的方式是不可持续的,甚至远程帮助。网络无障碍覆盖的第三方脚本旨趣自动修复可访问性问题,是最坏的罪犯中。首先,你餐桌的你的钱一个修复程序不修理什么. 然后,当“修复”损害了网站的可用性时,你会付出完全不同的代价。这并不是贬低某些第三方供应商提供的工具的有用性,而是说明第三方解决方案的采用是如何发生的,即使是那些客观上糟糕的解决方案

在Chrome DevTools的性能面板中,对flame图表中的长任务的描述。
一的Chrome的性能跟踪长期的任务由第三方的无障碍网页脚本覆盖拉开序幕。任务占据了主线程的大约600毫秒在2017年视网膜MacBook.

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

不管是什么样的催化剂,聚集你的同事,共同制定一个计划来解决和缓解你所面临的问题是值得的。

创建缓解计划#section5

一旦一个组织中的人抓住了第三方的解决方案,不管是多么不明智,你在强制改变课程时会遇到的困难将取决于该解决方案服务的迫切性。事实上,你不应该试图说服支持者他们的决定是错误的。这种努力几乎总是适得其反,会让人们感到受到攻击,对你告诉他们的话更加抵触。更糟糕的是,这些努力可能会导致人们完全停止倾听对方的意见,并且是差远了问题制定的温床。

松鸡,如果你一定要,因为我自己也经常做,但是把你的怨气放在一边,同情之中您同行制定缓解计划引导你的同事走向更好的结果。你的具体方法的局限性将取决于第三方自身和组织结构,但它的核心可能看起来像是下面的一系列问题。

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

还有,为什么选择了第三方解决方案的一个原因,而这个问题会帮助你苏斯出其通过的理由是否健全。请记住,有些时候所有必要的人是不是在房间里作出决定的时间。你可能会在你需要该决定的后果反应的位置,但这个问题的答案将引领你到一个自然跟进。

多久,我们打算使用该解决方案?#章第7

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

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

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

当第三方解决方案实施时必须当不是的时候成为联络点如果-出现问题。

我已经看到了当第三方脚本失控时会发生什么(太频繁了)。例如,当一个标签管理器或一个a/B测试框架的JavaScript增长缓慢而阴险,因为营销人员没有清理旧标签或完成a/B测试。正是由于这些原因,您的组织中的某个特定人员需要对您的站点上当前使用的第三方解决方案负责。这一责任在每一种情况下都会有所不同,但可能包括:

  • 第三方脚本的足迹的定期监测;
  • 维护,以确保第三方脚本不生长失控;
  • 偶尔召开会议讨论供应商与贵公司关系的未来;
  • 确定多个第三方之间的功能重叠,以及是否可以消除潜在的冗余;
  • 和正在进行的研究,尤其是识别可能是缓慢的第三方脚本更好的替代作用更快的替代品。

在这种情况下,责任的概念永远不应该是一项繁重、苛刻的义务,而应该是一种锻炼,鼓励同事保持清醒。因为没有正念,第三方脚本会对你的网站产生不良影响被忽视,直到它变成不能再被忽视的房间抱怨食人魔。指定第三方责任可以帮助防止这种情况发生。

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

如果你能制定一个缓解计划,让每个人都参与进来,那么确保负责任地使用第三方解决方案的工作就可以开始了。对你来说幸运的是,实际的技术工作要比和人争吵容易得多。所以,如果你做到了这一点,你所需要的就是时间和坚持。

只装必要的东西#section10

这看起来很明显,但只加载必要的内容。从我看到的未使用的第一方JavaScript加载量来看,更不用说第三方JavaScript的它显然是一个问题。这就像试图通过馅杂波进入厕所清洁你的房子。不管他们是否会实际需要,它的情况并不少见每一个页面上加载第三方脚本,因此请参阅您的联系点找出哪些页面需要哪些第三方脚本。

例如,我以前的一个客户在多个品牌网站上使用了一个流行的第三方工具来获取给定产品的零售商列表。它显示了明显的价值,但该脚本只需要在网站的产品详细信息页面上。实际上,它经常被加载一切第页。从不属于该脚本的页面中剔除该脚本会显著提高非产品页面的性能,这表面上减少了转换路径上的摩擦。

弄清楚哪些页面需要哪些第三方脚本需要您做一些非技术性的工作。实际上,你必须从办公桌上站起来,与负责第三方解决方案的人交谈。这对我来说是非常困难的工作,但是当真诚的合作发生的时候是值得的,好的结果是实现结果。

自行托管第三方脚本#section11

这个建议是不以任何舒展的秘密。我也摸不着它在本系列的前一部分中,但每次都需要在屋顶大声喊叫:你应该自托管尽可能多的第三方资源尽可能的。这是否可行取决于所讨论的第三方脚本。

它是一些框架你抢夺谷歌的托管库,cdnjs,或其他类似的供应商?自主机吸盘马上.

卡斯帕发现了一种自托管其Optimizely脚本并大大减少了他们的麻烦开始渲染时间。这确实让人明白了一点,即第三方资源的一个主要损害是,它们仅仅存在于其他服务器上是我们遇到的最糟糕的性能瓶颈之一。

如果您希望自托管一个分析解决方案或类似类型的脚本,那么要自托管它会遇到更高的困难。您可能会发现有些第三方脚本根本无法自行托管,但这并不意味着不值得费心去发现。如果发现第三方脚本不能选择自托管,不要担心。您可以尝试其他缓解措施。

屏蔽跨源连接的延迟#section12

如果不能自行托管第三方脚本,那么接下来最好的做法是预连接到托管它们的服务器。WebPageTest的连接视图非常出色地向您展示了站点从哪些服务器收集资源,以及与这些服务器建立连接所涉及的延迟。

WebPageTest的连接视图,可视化涉及的所有服务于特定网页内容的瀑布图中的服务器延迟的屏幕截图。
WebPageTest的连接视图显示所有从负载在不同的服务器上一个页面请求的资源。

Preconnections是有效的,因为它们在浏览器发现第三方服务器之前建立连接。解析HTML需要时间,而且解析器经常被样式表和其他脚本阻塞。如果您不能自行托管第三方脚本,那么预连接就非常有意义。

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

预加载资源一开始听起来很美妙直到你考虑可能适得其反作为安迪·戴维斯指出。如果您不熟悉预加载,则它类似于预连接,但指示浏览器以比通常快得多的速度获取特定资源会更进一步。

预加载的缺点是,虽然它对于确保资源尽快加载非常有用,但它会更改该资源的发现顺序。每当我们这样做时,我们都会含蓄地说其他资源不太重要,包括对呈现甚至核心功能至关重要的资源。

可以肯定的是,大多数第三方代码对站点功能的重要性不如您自己的代码。也就是说,如果你必须预加载第三方资源,确保只对页面呈现至关重要的第三方脚本执行此操作。

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

延迟加载非必需的第三方脚本#section14

最好的请求是不要请求. 如果您有不需要立即加载的第三方脚本,请考虑使用交叉口观察员.下面是它可能是什么样子,以懒散地加载类似Facebook的按钮当它滚动到视口中时:

让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测试、整合第三方解决方案、消除不再需要的任何问题,以及应用上面讨论的编码技术。此外,您还需要与您的团队合作,在周期性的基础上解决此技术债务。这类工作不可能是自动化的,所以是的,你需要全力以赴,与实际的人进行面对面的、同步的对话。

如果您已经习惯于在某个时间间隔安排“清理sprint”,那么是您解决与性能相关的技术债务的时间和空间,无论它是否涉及第三方或第一方代码。有一段时间可以进行功能开发,但这段时间不应该包含您的全部工作时间。只关注特性开发的开发商店注定会被不可避免的技术债务完全消耗掉。

因此,这将成为过去,在这一系列的第四个也是最后我们将讨论这意味着什么做的过程中的情况下负责任地使用JavaScript的辛勤工作。其中,我们将探讨如何才能让你的网站为大家更快,更容易,因此更便于使用的旗帜下团结你的组织,无处不在。

没意见

有话要说吗?

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

更多来自ALA

要做的工作

“设计价值”,由吉姆Kalbach的书作业的节选做剧本,创造一个就业机会驱动的路线图和使用工作的故事来解决特定的设计问题给出了建议。

betway必威app

语音驱动许多我们可用性测试方法的内容挑战。普雷斯顿所以把他们变成为介质本身的机会和优势。
内容

跨文化设计

在这段来自跨文化设计的节选中,塞翁戈·阿克佩姆讨论了当你希望接触到全球受众时必须考虑的版式设计的许多方面。
设计