始于设计 - 专于体验 - 合于沟通 - 久于转化 - 终于口碑 !      16年高端网站建设、跨境电商独立站定制开发、300+专业技术,设计团队、国家高新技术企业
JavaScript如何影响英文网站设计的加载速度

发布者:万邦     目录:英文网站设计     阅读数:18480

JavaScript对移动Web性能的影响是双重的。在这里,英文网站设计专家万邦将分析以下观点给外贸建设技术人员:

一,它是网页权重的第二大贡献者,背后的图像,从而增加下载时间; 另外两个,一旦下载,浏览器就需要运行脚本,这可能会拖延页面上其他(也许更重要的)资产的下载/呈现。

JavaScript(也称为脚本或JS)是使网页(和Web应用程序)工作的技术之一。HTML(超文本标记语言)控制网页的结构和内容; CSS(Cascade Styling Sheets)控制网站在不同设备上的外观; JavaScript使页面更具互动性和动态性。


脚本在网页上执行大量功能,例如加载广告,A / B测试,标签管理(个性化页面)或显示内联视频播放器。

在过去五年中,发送到移动设备的页面总重量翻了四番,达到2.2MB。尺寸很重要,因为通常,通过移动或固定网络发送的数据越多,页面将需要加载的时间越长。更多的数据,更多的秒钟盯着一个空的移动屏幕。

这表明,图像(其每个页面的总千字节(KB)或兆字节(MB))更多是主要的祸根。但事实并非如此。

JavaScript可能会比图像对页面性能有更大的影响。作为网页性能测试网站WebPageTest和Google软件工程师的创始人Patrick Meenan 解释说:

“脚本通常是一个(较大的)问题,因为除了下载大小外,实际执行脚本所需的时间,而图像真的只是因为下载大小而重要。例如,使用移动设备,即使下载完毕,运行脚本也可能需要几秒钟。“ 
这不是JavaScript本身就是问题,但它是如何实现的:脚本可以垄断浏览器活动,阻止其他内容的下载和呈现(显示)。

“在页面中引用脚本时,问题往往更加复杂。直到脚本被下载和执行之后,浏览器就不存在'阻止'脚本(而不是异步脚本)之后的内容。当通常情况下,脚本放在页面的开始处,这意味着在脚本下载并执行之前,该页面将是完全空白的。“
我们将在下面讨论阻塞,内联,同步(同步),异步(异步)和延迟脚本之间的差异以及如何解决JavaScript问题,但首先我们将介绍如何发现问题。

测试阻止JavaScript

如果您已使用Google PageSpeed Insights测试您的网页(请注意,您应该使用WebPageTest和PageSpeed Insights等工具定期测试您的移动网页),您可能看到以下警告:

!应修复:

消除渲染阻止JavaScript和CSS在三重内容

您的页面有8个阻止脚本资源和7个阻止CSS资源。这会导致渲染页面的延迟。

您的页面上的任何内容都不能在不等待加载下列资源的情况下呈现。尝试延迟或异步加载阻止资源,或直接在HTML中嵌入这些资源的关键部分。
屏幕截图显示BBC.com使用PageSpeed Insights进行测试(如文中详述)。

上述文字和图片均来自于BBC.com在2017年2月进行的Mobile PageSpeed Insights测试。

注意“折叠之上”仅指在移动设备上可见的网页部分,无需滚动,Google不会在页面的其余部分分析脚本。

根据Alexa的说法,英国广播公司是世界上最受欢迎的英语新闻网站,所以在上下文中我们也应该测试其他人在前四名。结果表明,另外两个出版商与JavaScript有类似的问题。(测试也突出了CSS问题,但这不是文章的重点):

BBC.com PageSpeed测试(8个阻止脚本; 7个阻止CSS资源)
NYTimes.com PageSpeed测试(0封闭脚本)
ESPN.com PageSpeed测试(2个阻止脚本; 3个阻止CSS资源)
CNN.com PageSpeed测试(6个阻止脚本; 2个阻止CSS资源)
五年来JavaScript使用量增长4倍

在过去五年中,平均手机页面上使用的JavaScript数量从2012年2月的101KB增加到2017年2月的387KB,翻了两番。请求次数(浏览器需要下载附加件的次数)的内容或代码)从不同的JavaScript文件已经从8增加到21。

来自HTTP Archive的下图显示了这一点。HTTP存档使用WebPageTest的数据每个月进行多次测试,并发布趋势和统计信息,这些都是您站点性能的基准。

图表显示了JavaScript在五年内的增长,从2012年2月的101KB增长到2017年2月的387KB。对于HTTP Archive监控的前100万个站点,JavaScript占页面重量的17.4%。在总共93个请求中,JavaScript也占21个(22.6%)。

对于某些网站,特别是在新闻领域,JavaScript的页面权重比标准版权大得多。

下面的图片比较了通过HTTP存档(2017年2月15日)测试的BBC.com的平均站点的内容类型的细分:

首先要注意的是,BBC页面大小是如何令人印象深刻:609KB v 2225KB。
第二件要注意的是BBC图像的组合大小有多小:70KB v 1501KB。
要注意的第三件事是脚本比例如何:页面大小的458KB或75.2%。
要注意的第四件事情(下图未显示)是BBC总共88个请求中的39个(44.3%)是脚本。
两个饼图将平均移动网站的内容细分与BBC进行比较。 英国广播公司网页的大部分比例是脚本。

比较四大英文新闻网站的测试结果时,BBC比对手要小得多。这是一个三分之一到一半的大小,减少了两到三倍的JavaScript。

BBC.com通过HTTP存档测试:脚本458KB(75.2%)的总数据为609KB; 共有167个请求中的39个JS请求(44.3%)。
NYTimes.com HTTP存档测试:脚本1511KB(51%)的总数据2953KB; 总共167个请求中有73个JS请求(43.7%)。(“纽约时报”纽约时报在mobile.nytimes.com上有一个专用的移动网站,它不会被HTTP Archive列​​出,可能会产生不同的结果。)
ESPN.com HTTP存档测试:脚本共有1803KB(65.7%)的总数据; 共有106个请求中有50个JS请求(47.2%)。
CNN.com HTTP存档测试:脚本1484KB(68%)的总数据2182KB; 总共210个请求中有67个JS请求(31.9%)。
移动页面速度有什么影响?

那么BBC网站的加载速度要比所有的竞争对手要快吗?

在2017年2月15日,HTTP存档记录了以下加载时间:

BBC.com:18.3秒
NYTimes.com:27.4秒
ESPN.com:8.8秒
CNN.com:31.5秒
因此,BBC在移动设备上的加载速度比CNN和纽约时报的速度要快,但比ESPN更大。

这就是两个网站在移动设备上的样子。(幻灯片是WebPageTest最具视觉吸引力的功能之一,任何非技术人员都很容易理解)。每帧代表1秒。当HTTP存档测试发生时,BBC.com移动访问者在9秒钟内没有看到任何内容,而ESPN访问者在4秒钟内没有看到任何内容。该图像显示BBC.com和ESPN.com主页在移动设备上加载的两个胶卷。

一些网站可能会比另一个网站更快,例如服务器响应时间,使用内容传送网络(CDN),广告网络的影响,包含第三方数据(在新闻站点上常见),或者测试的时间和地点(在这种情况下为美国加州)。

然而,所有其他事情是相等的,JavaScript可能是一个促成因素。(抱怨赌注的道歉)。如上所述,BBC.com确实收到了比其他新闻站点更多的阻止脚本的警告。

减少对JavaScript的依赖

JavaScript经常用于执行不能(轻松地)用HTML或CSS完成的任务。由于W3C逐渐将这些功能添加到HTML或CSS标准中,并且由浏览器实现,所以不再需要JavaScript补丁,因为HTML / CSS可能会更有效率。一个很好的例子是响应图像。

NCC集团网络绩效顾问Alex Painter:

“通常来说,值得坚持逐步增强的原则 - 提供一个无需JavaScript的网站,并仅使用脚本,仅用于无法以其他方式完成的额外功能。

“使用JavaScript来渲染内容可能是昂贵的 - 加载和执行需要时间。所以,例如,如果您可以使用HTML和CSS来实现相同的结果,那通常会更快。

 “例如,对于响应式图像,您可以在CSS中使用媒体查询,并在HTML中使用图片/ srcset来为视口提供正确的图像,而不依赖JavaScript。
选择异步和延迟JavaScript的阻止和内联脚本

JavaScript可以在网页上实现,包括:
封锁脚本是同步的,这意味着它们必须立即处理,而不是其他任何事情。默认情况下,所有JavaScript都是解析器阻止。由于浏览器不知道该脚本将对该页面执行什么操作,因此一旦满足请求(在HTML文件中)即可下载JavaScript文件,它将停止构建网页,直到该文件下载为止,并且不会继续执行。

内联脚本也会停止页面构建,但是由于它们包含在HTML中,因此不需要单独下载。然而,内联脚本太大或太多会导致HTML文件的初始下载延迟和延迟。
异步脚本允许浏览器在下载JavaScript文件时继续解析(分析代码和构建网页)。在HTML中包括async属性告诉浏览器它不需要将所有内容置于保持状态。
延期JavaScript - 告诉浏览器离开JS文件的执行,直到完成英文网站设计的构建,这表示为defer属性。

上一篇:

下一篇: 如何做好英文网站设计?

签约 精毅集团官网
高端品牌外贸网站设计 - 万邦 03 月签约