前言消费者越来越依赖移动设备访问内容和服务，这比以往任何时候都更加苛刻。当他们权衡您网站上的体验时，他们不仅将您与竞争对手进行比较，还会在使用您的应用程序后对其进行评级。但是很多网站给用户带来的体验并不是很好，导致潜在客户的流失。因此，性能是留住用户的关键。Pinterest将感知等待时间减少了40%，从而使搜索引擎流量和注册量增加了15%。原文（外文）：https://medium.com/pinterest-engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7COOK将平均页面加载时间减少了850毫秒，从而提高了7%的转化率并减少了跳出率提高了7%，每个会话的页面增加了10%。BBC发现，他们的网站加载时间每增加一秒，就会失去10%的用户。原文（国外）：https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale当AutoAnything将页面加载时间减半时，他们的销售额增加了12%到13%。原文：https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/RetailerFurnitureVillage审核了他们的网站速度并针对问题制定了解决方案他们发现页面加载时间减少了20%，转化率增加了10%。就用户体验而言，速度至关重要。一项消费者研究表明，对移动速度延迟的压力反应类似于看恐怖电影或解决数学问题，比在零售结账处排队等候压力更大！目前，4G在全球范围内主导移动网络，因此我们预计您的大多数用户将在4G网络上访问您的页面。因此，我们不得不假设每个网络请求平均花费100毫秒。基于这样的假设，我们现在不妨倒过来思考一下。如果我们仔细分析浏览器和服务器之间的典型通信过程，我们可以发现网络本身消耗了300毫秒的时间：一次DNS查找（将主机名（如baidu.com）解析为IP地址），网络往返（执行TCP握手）和可选的TLS连接。所以，我们只剩下700毫秒了。要在1秒内提供和呈现ATF内容，让用户尽快开始与网页进行交互，我们需要了解这几个核心点：服务器必须在200毫秒内渲染出相应的内容。传输时间后服务器返回初始HTML所花费的时间。由于我们剩下的时间不多了，这个时间应该保持在最低限度：最好保持在200毫秒以下，而且越少越好！重定向的数量应保持在最低限度额外的HTTP重定向可能会增加一两次额外的网络往返（如果再次需要DNS查找，则为两次），这在4G网络上可能会导致数百毫秒的额外延迟。因此，我们需要尽可能减少重定向，理想情况下完全消除重定向。避免重定向到“m”。尽可能使用URL。应尽量减少首次呈现内容所需的网络往返次数。由于TCP评估连接健康状况的方式（即TCP慢启动），新的TCP连接不能立即使用客户端和服务器之间的全部可用带宽。因此，在新连接的第一次往返中，服务器最多只能发送10个TCP数据包（约14KB），然后必须等待客户端确认收到这些数据，然后再增加拥塞窗口并继续发送更多数据。另请注意，10个数据包(IW10)的限制来自TCP标准的最新更新：我们应确保我们的服务器是最新的以利用此更新。否则，这个限制可能会减少到3-4个数据包！鉴于TCP的这种行为，我们希望最大限度地减少传输必要数据以完成页面首次呈现所需的网络往返次数。理想情况下，ATF内容应小于98KB，以便浏览器能够在3次网络往返后显示页面内容，从而为服务器响应延迟和客户端渲染留出足够的时间预算。避免在首屏内容中包含外部JavaScript和CSS，这会阻止内容呈现浏览器必须先解析网页，然后才能将其呈现给用户。如果浏览器在解析过程中遇到非异步或阻止渲染的外部脚本，则必须停止解析并下载相应的资源。因此，用于呈现首屏内容的JavaScript和CSS应该嵌入到网页中，用于向网页添加JavaScript或CSS以获得附加功能的JavaScript或CSS应该在ATF内容完成呈现后开始加载。由于移动速度和页面复杂性，请留出时间进行浏览器布局和渲染（200毫秒）。我们至少需要200毫秒的浏览器开销。优化JavaScript执行和渲染时间在项目中如何优化相信那些常见的优化方式，比如CDN，或者优化代码，使用浏览器http缓存等老生常谈，大家都不陌生。在这里我给大家介绍一些不同的东西，希望能给大家带来更多的了解，提高网站的性能。选择正确的图像格式图像格式通常分为矢量和光栅两种类型，它们的行为不同，尤其是在放大后。矢量格式非常适合由简单几何形状（如徽标、文本或图标）组成的图像。它们在每个分辨率和缩放设置下都能提供清晰的结果，使其成为高分辨率屏幕和在不同尺寸下显示相同效果的理想格式。然而，当场景很复杂时（例如，照片），矢量格式就显得力不从心了。例如，在这种情况下，SVG可能具有过高的标记，并且输出可能仍然不“真实”。因此，您需要使用光栅图像格式，例如PNG、JPEG、WebP或AVIF。光栅图像不具有相同的分辨率或缩放属性——当您放大光栅图像时，您会看到锯齿状和模糊的图形。因此，我们需要以不同的分辨率保存多个版本的光栅图像，以便为用户提供最佳体验。不同的光栅图像格式支持不同的特性：用视频GIF代替动画不知道大家有没有在开发工具中查看过GIF，可能会觉得很大。因此，通过将大型GIF转换为视频，您可以节省大量用户带宽。可以看到gif本来是3.7M，转成mp4格式后是551K，转成webm后只有341K。图像出现在视图中时开始加载如果您以前编写过延迟加载代码，则可能是通过使用事件处理程序（如scroll或resize）来完成的。虽然这种方法在主流浏览器上效果最好，但现代浏览器提供了一种性能更高、效率更高的方法来通过IntersectionObserverAPI检查元素可见性。我们使用JavaScript来检查它们是否在视口中。如果在视口中，它们的src（有时是srcset）属性会填充指向所需图像内容的URL。document.addEventListener("DOMContentLoaded",function(){varlazyImages=[].slice.call(document.querySelectorAll("img.lazy"));if(窗口中的"IntersectionObserver"){letlazyImageObserver=newIntersectionObserver(function(entries,observer){entries.forEach(function(entry){if(entry.isIntersecting){letlazyImage=entry.target;lazyImage.src=lazyImage.dataset.src;lazyImage.srcset=lazyImage.dataset.srcset;lazyImage.classList.remove("lazy");lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(函数(lazyImage){lazyImageObserver.observe(lazyImage);});}else{//可能退回到这里的事件处理程序}});以上就是img标签的懒加载方式。如果使用CSSbackground-image属性（以及其他属性）做延迟加载，当视频出现在viewstartloading时和上面一样延迟加载video元素，与image一样延迟加载，只是video需要遍历所有的子源元素并改变它们的数据-src属性到src属性。完成后，您需要通过调用元素的load方法来触发视频的加载，之后媒体将根据autoplay属性自动开始播放。对于不自动播放的视频，需要在//此方法仅推荐用于小型媒体文件（小于5MB）。优化第三方JavaScript第三方JavaScript，通常指的是嵌入在您网站中的脚本，可以提供强大的功能，但它们也会影响隐私、安全和页面行为——它们会对性能产生特别大的影响。例如：触发额外的网络请求拉入未优化的图片和视频HTTP缓存不足，导致频繁获取Web资源服务器资源压缩不足不同第三方嵌入引入的框架和库的多个实例这是不可避免的，但有些事情你可以做的是尽量减少不利影响：在选择第三方资源时，选择那些提供最少代码量同时仍提供您需要的功能的第三方资源延迟加载第三方脚本不要使用来自两个不同Provider的相同功能的资源。就像两个标签管理器或两个选择器。定期审核并删除多余的第三方脚本。自托管第三方脚本。基于网络质量的自适应加载网站可能是一种非常不同的体验，具体取决于网络条件。当使用快速网络时，事情通常很顺利，但当在网络受限且连接不稳定的情况下在旅途中使用笔记本电脑时，情况就不同了。有几种方法可以改善用户体验：根据用户的网络在提供高清和低分辨率内容之间切换。确定是否预加载资源。当用户连接速度慢时推迟上传和下载。如果网络质量不足以加载应用程序和使用功能，请启用离线模式。我们可以通过浏览器提供的Api来实现：这是它的用法说明：然后配合navigator.connection.addEventListener('change',doSomethingOnChange);实现自适应。如何测试网页速度？Lighthouse可以通过获取URL并对该页面运行一系列审核来生成有关页面执行情况的报告。有多种方法可以运行Lighthouse，包括从ChromeDevTools安装插件来审核页面。PageSpeedInsights提供有关页面的实验和真实场景的数据。它使用Lighthouse来收集和分析有关页面的实验数据，而真实的现场数据是基于ChromeUXReport数据收集。Chrome开发者工具是直接内置于GoogleChrome浏览器中的网络开发者工具。允许分析页面运行时，识别和调试性能。建立公司绩效文化公司内的所有部门通常都依靠网站来转换用户，无论是为了创收还是其他目的。但这是一个严酷的事实：如果网页加载时间太长，人们就不会留下来查看它们，无论它们多么漂亮。所以我们需要在公司建立产品性能文化。这里有一些建议供参考：优化网站资产开发者可以使用各种媒体优化技术来加快媒体加载速度。UI可以创建有助于将页面重量保持在商定水平以下的图像。并研究开发团队如何通过资源压缩、响应图像、图像大小调整、延迟加载、缓存和服务器优化等各种资源优化技术更快地加载显示资源。跟踪您网站上的哪些页面具有最长的加载时间和最高的页面权限准备一份列表，列出哪些页面高于其自身的权限级别并进行改进。为设计师准备一个性能预算，例如：在Lighthouse评分低于设定阈值（eg<96/100)不允许合并拉取请求优化和简化业务与站点速度相关的一个常见误解是，这完全是开发团队的责任。现实情况是，一个快速的网站需要多个部门协同工作。定期跟踪提升速度带来的转化，及时完善参考链接：https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetchhttps://web.dev/fast/#prioritize-resourceshttps://developers.google.com/speed/docs/insights/mobile
