• 2020-12-07

改善Web应用性能的最佳做法

无论我们是谈论相亲,参加工作面试,还是向天使投资人提出自己的商业计划,大多数时候都只有第一次留下深刻印象的机会。该规则不仅在各种人际关系中都适用,而且在数字业务中也适用。怎么说呢?您的应用程序的性能基本上等同于在线获得客户的第一印象。而且,由于影响用户体验会直接决定您的事业的成败,因此无论多么加大努力提高Web应用程序性能是合理的。


    您还记得上次您在餐厅用餐时的等待吗?还是您上一次在游乐园排队?(疫情之后我们确实都挺少了)我们敢打赌,这些都不是您经历过的最愉快的经历。很多人都没有继续等待网站或App加载的机会,用户的耐心越来越少,很多产品一开始就输在起跑线上。


    幸运的是,这种情况是可以解决。与往常一样,我们无法在这篇文章中为您提供一种立竿见影就可以神奇地消除产品所面临的所有性能障碍的解决方案。但是,我们可以为您提供一套改进Web应用程序性能的最佳实践,这些最佳实践在与您的需求仔细匹配后,必将使您的业务蓬勃发展。


为什么要关心Web应用程序的性能?


    首先,首先要说明的是,首先要说明Web性能优化对企业的长期成功有多么重要(顺便说一下,这是一项永无止境的工作)。


最佳用户体验降低了客户流失率


    “基于互联网创造的内容会成为像电视一样,成为巨大的金矿。” –还记得这是1996年比尔·盖茨的内容为王的预测吗?今天已经是0202年发生了翻天覆地变化,但是内容的巨大价值,尤其是在吸引客户和对客户有价值的定义,至今仍未改变。将服务与给定目标受众的需求相匹配的情况也是如此。但是,如果您的Web应用程序性能不令人满意,那么即使是最优化的内容和最相关的产品也无法实现。


    只看两个现实生活中的案例。阿里巴巴在其网站上工作时发现,加载所花费的每一秒钟,都会有10%的用户离开。另一方面,如果其购物页面花费了3秒钟以上的时间加载,则已经有53%的用户放弃了该页面。这种现象的解释很简单:随着周围刺激的不断增加,用户变得非常急躁,而我们在线上关心的只是即时满足感。根据Microsoft的速度专家说法,如果其速度仅比您的竞争对手慢250毫秒,您的用户就可能会访问竞争对手的网站。而且,如果您的应用中的视频在加载时停滞不前,则有80%的用户会点击离开,并且很可能永远不会回来!


    所有上述统计数据证明,完美的性能对于积极的用户体验至关重要。谈到用户更渴望选择流畅的Web应用程序!

Web应用性能可促进转化


    令人满意的Web应用性能驱动的用户保留对于提高转化率和收入至关重要。再次核实这一说法,让我们引用一些通过网站优化获利的真实案例:


   淘宝曾注意到,加载时间每增加1秒钟,转化率就会增加2%。而且,每提高100毫秒的性能,公司的收入就会增长1%。


    亚马逊试图将加载时间减少36%的尝试使新客户的转换量增长了27%,订单数量增加了10.5%。


    对于大部分的App来说,首页加载时间减少了100毫秒,导致转化率提高了1.11%。这意味着2016年的年收入增加了34亿。


    查看这些数字,您不禁会注意到业绩与利润之间的相互依存关系。如果您对网站速度会对您的业务产生什么影响感到好奇,可以使用Google的“PageSpeed Tools”(需要翻墙)来快速满足您的需求:该工具将评估您网站的当前性能,与竞争对手进行基准比较以及关联未来的改善以及潜在的收入增长。


我们如何衡量网络应用性能?


    既然我们已经充分意识到应用程序的平稳运行对于企业长期成功的重要性,那么我们可能会急着转向速度优化。但是,要提高Web应用程序性能并没有灵丹妙药。


    在下一段中,我们将看到可以采取许多步骤来提高Web应用程序的速度。可是,采用以下提到的解决方案之一会从根本上影响应用程序的其余方面。仅出于这个原因,我们建议您首先使用以下工具之一对Web应用进行全面的性能评估


Google的Lighthouse和Pagespeed工具

    前者是一种开源的自动网页审核工具。它生成的报告包括有关性能,PWA优化,可访问性,最佳实践和SEO的信息。后者是更精确的工具,因为它只专注于性能。与Lighthouse相对,Pagespeed Insights的分析不仅基于实验数据,而且还基于现场数据,这使根据不同设备和实际网络条件定制Web应用程序的性能变得更加容易,只是两者都可能需要翻墙。


WebPageTest


    不要被第一印象所迷惑:尽管它的界面让人感觉过时,但WebPageTest是运行简单和高级速度测试的强大工具。根据官方网站的说法,作为对Web应用程序性能的深入分析的一部分,WebPageTest提供了“诊断信息,包括资源加载瀑布图,Page Speed优化检查以及改进建议”。最重要的是,该工具允许在考虑各种位置,浏览器和设备的情况下测试性能,而且它也是完全开源的。



(开源地址 https://github./WPO-Foundation/webpagetest)


    Pingdom比WebPageTest简单,并且拥有清晰的用户界面,它是一种免费的网站速度测试工具,适合技术含量较低的用户。它提供了用于分析指标的综合汇总表,深入的瀑布图,并允许从7个不同位置运行测试-所有这些都保持高度的用户友好性。(https://tools.pingdom.com/)


最相关的网络应用性能指标


    快速浏览上述每种工具生成的报告就足够了,看看有多少因素实际上影响了任何应用程序的速度。为了帮助您理解这个复杂的问题,让我们现在集中讨论一些最流行的Web应用程序性能指标。


首字节的时间


    让我们从输入url到接收到第一个字节开始的时间,这是一个响应性指标,可以定义为浏览器从服务器接收信息的第一个字节所需的时间。推荐标准低于200毫秒,尽管只有2%的网站证明能做到这一点。还值得注意的是,根据定义,如果到第一个字节的时间长于一秒,我们就无法快速内容渲染(下面会详细介绍)。


渲染时间


    图形图像的渲染都是所有以用户为中心的感知性能重要指标,或者简而言之,这些指标是指用户的实际体验。前者说明第一个像素出现在屏幕上需要多长时间,并告知访问者内容即将加载。首先,有说服力的渲染说明了在DOM中定义的任何内容(无论是图像还是文本)呈现之前经过了多少时间。另一方面,后者显示了何时完整加载整个网站内容,并准备好为用户提供有意义的信息。


首次绘制


    正如Google所建议的那样,本质上有两种方法可以改善第一个绘制指标:缩短下载资源所需的时间以及减少会阻碍浏览器呈现DOM内容的工作。


速度指数


    速度指数是另一个指标,涉及用户体验,尤其是访问者看到的内容和访问时间。速度指数被定义为显示以上折叠内容在屏幕上显示的速度的指示器,它不仅对Web连接的质量敏感,而且对视口的大小敏感,这使其在优化Web应用程序以进行变化时非常宝贵。屏幕尺寸。尽管Google建议速度指数不超过4.3秒,但根据Backlinko的研究,截至2019年,台式机和手机的平均速度指数得分分别为4.782秒和11.455秒。


互动时间


    本文讨论的第三个以人为中心的度量标准是交互时间:一种指示器,用于衡量页面完全交互之前经过了多少时间,这表示发生了第一个内容丰富的绘画,为大多数可见元素注册了事件处理程序,并且网站做出了响应在不到50毫秒的时间内完成用户操作(例如按下按钮)。建议的互动时间不超过5.2秒,并且通过优化JavaScript可以降低您的应用得分。一个真实的例子就是TTI可以对您的业务产生巨大影响的例子是Pinterest,该公司将分数从23秒降低到5.6秒,使用户参与度提高了60%。


如何提高Web应用程序的性能?


    由于您已经知道Web应用程序的性能可以决定业务的成败,在确定产品的速度是否令人满意时应考虑哪些指标,因此我们准备从理论转向实践。在本文的以下部分中,我们将向您介绍与速度相关的问题以及可以在应用程序的客户端或服务器端实现的实际解决方案。由于这两个方面不断相互影响,让我们从在前端和后端都可以使用的提示和技巧开始。


发现瓶颈


    我们已经确定,在尝试优化Web应用程序性能时,您要做的第一件事就是找出导致应用程序运行缓慢的问题和瓶颈。当我们说没有适当的工具这样做几乎是不可能的任务时,您可以信任我们。


    就发现客户端的瓶颈而言,我们已经讨论了一些不需要广泛技术知识的简单解决方案,例如,Web浏览器附带的内置开发人员工具。例如,如果您想快速确定您的Web应用程序是否经过了优化,或者其速度受到抑制,则只需转到Google Developers工具中的“插件”标签,然后运行Lighthouse审核即可。


    另一方面,如果您是一位技术娴熟的CTO,我们建议您尝试使用webpack-bundle-analyzer。对于使用webpack配置的应用程序,此特定工具会生成一个交互式图形,显示您的应用程序内容。使用此信息,您可以更进一步地缩小包的大小和优化性能。


    当要确定后端的瓶颈时,工具的选择将与项目中使用的框架相对应。例如,如果您选择的框架是Django,则Django Debug Toolbar会派上用场。它显示许多不同的指标,例如加载页面所需的时间或有关已执行的SQL查询的信息,这意味着使用该指标,您可以准确查看执行了什么以及多少次查询以加载页面或资源以及所需的时间。执行它们。换句话说,Django Debug Toolbar公开了多余或缓慢的查询,从而使您有机会重构代码。


浏览器和服务器端缓存


    让我们从许多用户已经熟悉的缓存类型开始:浏览器缓存,这是一种将网站资源(例如图像或CSS文件)存储在本地计算机上一定时间的方法。用户首次访问网站时,其浏览器会下载正确显示内容所需的所有文件。这样的文件可以保存在浏览器缓存中,并在以后用于减少HTTP请求。


    服务器端缓存与浏览器缓存的不同之处在于,它不将内容存储在用户的计算机上,而是存储在网站的服务器上。如果实施这种类型的缓存,则只有第一个访问您的网站的人从原始服务器请求内容,而所有后续用户都从同一缓存中获得数据,这减轻了服务器的负担,从而缩短了页面加载时间。


    至于特定的后端解决方案,让我们再次以Django为例。该框架非常灵活,允许仅缓存整个动态网站,其选定的片段或特定的视图。在Django中设置缓存时,您不必忘记的一个步骤就是指向数据所在的位置,即数据库,文件系统或内存。Redis是在基于Django的Web应用程序中使用的内存中缓存解决方案的一个示例,由于在RAM中存储了数据并促进了数据访问,Redis具有出色的高性能。


在前端提高应用程序速度的方法


    在客户端,提高Web应用程序性能归结为减少页面加载时间。但是要小心–实现缩短装载时间的目标绝非野餐。相反,它要求采取一系列深思熟虑的行动,我们在下面将介绍其中最有效的行动。


    为了赢得胜利,您不仅需要明智地选择武器,还需要利用它们来发挥自己的优势。在这方面,构建高性能的Web应用程序就像老式的决斗一样:工欲善其事必先利其器。


    市场上最流行的三种前端框架是React,Angular和Vue。除了速度之外,还值得考虑框架的大小。毕竟,文件越小,我们下载速度越快。


静态与服务器渲染


    向用户交付内容并呈现页面的方法因技术而异。为了获得最佳性能,您应该考虑提供静态网站,这意味着将纯HTML直接提供给浏览器。在这种情况下,加载时不执行任何代码,加载页面仅涉及下载index.html文件。如果您决定构建一个静态站点(顺便说一句,在速度和性能上确实很有优势),我们建议您试用基于React的开源框架Gatsby.js。


    但是,有时候,您无法预测访问者可以提出的所有请求,或者响应会根据用户而改变,在这种情况下,您根本无法承受静态的内容。如果您仍然关心性能但需要动态管理内容,请考虑使用支持服务器端呈现的框架,例如Next.js。关于服务器渲染的事情是,它还提供了页面的HTML文件,可以随时渲染。但是,当Next.js在node.js服务器上运行时,对页面内容的每个新请求都将触发一个新的呈现过程,以便您可以从API中获取新数据。


第三方库的大小


    想象一下,您的用户的互联网连接真的很差,从而每一个数据点都不同。在这种情况下,减少加载时间肯定会帮助您获得更高的转换率。请记住,在向项目中添加新的NPM或Yarn包时,应记住它们对Web应用程序大小的影响。为了简化此任务,最好使用捆绑分析器,该捆绑分析器可让您跟踪依赖项。


延迟加载


    您可能已经听说过有关图像和视频的延迟加载。但是,现在让我们更深入地讨论该主题,并从代码拆分的角度来看一下延迟加载。两者如何连接?这很简单:如果将代码分成较小的部分,则很可能是稍后考虑延迟加载这些捆绑包的想法。


    代码拆分是将整个应用程序拆分为称为模块的较小块的能力,这些模块相互连接。这种做法会减少首次访问时下载的主捆绑包的大小。但是,当人们需要不在主捆绑包中的模块的功能时会发生什么呢?


    那时,懒加载作为解决方案可帮助节省数据和时间。但是,您可能会问,立即加载不需要的模块有什么意义?这样做可以让您稍后在更合适的时间(例如,当用户需要时)加载这些资源或者代码包。由于延迟加载,您仍然可以访问它们的功能,但是您无需在应用初始化时加载这些模块,可以帮助减少加载时间。就特定的延迟加载技术而言,使用IntersectionObserver跟踪下一步应下载的元素以及按路线拆分模块非常流行,其中仅当用户浏览到特定位置时才获取所需的模块。


优化内容以提高加载速度


    既然我们在介绍延迟加载时提到了资源,那么不说一两个字就优化视觉内容也很可惜。首先,请确保使用正确的格式。当然,PNG确实可以确保高质量,但是,这是以尺寸为代价的,并且可能会发现JPEG尽管不够详细,但对您来说足够了。如果要上载徽标或图标,请考虑使用矢量SVG格式,该格式可确保在所有分辨率下详细呈现几何形状,同时保持轻巧。而且,如果您需要动画,比起沉重的GIF,循环播放视频可能是更好的选择,还有一种新兴的图像压缩格式是webp格式,这是谷歌最先提倡的一种压缩无损图像格式,包括我们现在看到的微信图文,也基本采用。


    在优化资源以提高加载速度时要记住的另一件事是提供缩放图像。如果您的Web应用以800 x 600像素显示视觉内容,则上传的图片没有意义的十倍,因为无论如何它都会缩小尺寸,同时仍然很沉重。反过来,这又将我们带入了另一种与性能相关的实践:无损和有损压缩。前者压缩一些像素数据,从而保持上传图像的高质量并传达更多细节;另一方面,后者消除了选择的像素数据。虽然有损转换听起来像是一种非常激进的做法,但当与无损转换保持平衡时,对于用户而言并不一定会引起人们的注意。


    优化资源以提高Web应用程序性能时可能会派上用场的工具是Gzip,它是一种数据压缩程序,可以即时压缩和解压缩所有类型的文件,从纯文本到详细图像甚至音频文件。


减少API调用


    最后但并非最不重要的一点是,在讨论如何在前端提高Web应用程序性能时,我们还需要提及使API调用最小化。想象一下,发出三个不同的请求来获取所有必要的数据以完成您的数据视图。这似乎不是最有效的运行方式,对吗?在这种情况下,请考虑使用GraphQL(一种查询语言,用于使用为数据定义的类型系统执行查询)。与RESTful不同,GraphQL可以在单个请求中获取所有数据,而不会像RESTful API那样过度获取数据。一天结束时,API调用次数越少,应用程序的速度就越高。


改善后端Web应用性能的提示和技巧


    现在我们已经介绍了客户端性能优化技术,现在是时候讨论后端了,而且后端是任何应用程序的心脏。


优化代码


    一旦确定了关键对SQL数据库进行的缓慢且冗余的查询,就可以应对优化代码的挑战。与前端一样,后端工具和技术的最终选择将取决于产品所基于的服务器端技术堆栈。在本段中,我们将以Django为例。


    说到Django,您可能有兴趣了解它与另一个著名的Python框架Flask的区别。在Django中,查询是延迟进行的,这意味着直到在代码中对查询结果进行评估后,框架才真正对数据库运行查询。尽管这种方法有其优点,但它也会引起一些性能问题,尤其是当我们谈论使用数据库中的外键和多对多关系时。


    一个常见的问题是从数据库中获取一个对象,然后通过循环访问它们的相关对象来访问它们。这会为每次迭代创建一个新的SQL查询以获取相关对象,结果可能导致成千上万的额外不必要的查询,从而降低了整个应用程序的速度。您可以分两步克服此障碍。首先,当使用外键获取对象时,可以使用select_related方法将查询数量减至仅一个,并缓存结果。其次,采用prefetch_related许多一对多的关系,会给你两个查询,其结果将与Python的帮助,而不是数据库连接。


加快数据搜索


    从SQL数据库中检索数据的方式是服务器端性能的另一个关键因素,尤其是在数据集又大又复杂或者您想要畅快地执行全文搜索时(在这种情况下,就是使用搜索)诸如Elasticsearch之类的引擎可能是您成功的关键。


    Elasticsearch是于2010年首次发布的基于Apache Lucene的分布式搜索和分析引擎。尽管它本身不是数据库,但可以与SQL数据库一起使用,以加快从中检索数据的地方对大量数据的搜索,过滤和排序,改善SQL数据库可能很慢的事实。


    由于Web应用程序性能主题与Web应用程序可伸缩性主题密切相关,因此我们还需要提及Elasticsearch旨在支持水平可伸缩性。使用它,您可以继续添加更多节点,以使增加的数据量不会降低应用程序的性能。如果您对Elasticsearch处理索引大小,集群大小和吞吐量变化的方式感到好奇,可以在网上搜索有关该主题的更多信息。


总结


    如您所见,提高Web应用程序性能是一项复杂而长期的任务,而完全优化也绝不是一蹴而就的事情。您有更好的经验或者建议也欢迎留言,让我们一起加快应用程序的速度。最重要的是,不要停止分析我们的Web应用性能并测试各种假设,因为优化是一个永无止境的过程!


  • 上一篇:免费增值的三个规则

  • 下一篇:出色的产品体验的主要要素