Web前端性能优化
找到Web
专注于w3c标准,先定一个小目标,日更一篇,近期主要关于前端性能优化方面
展开
-
页面视觉稳定性之优化CLS
最常见的影响CLS的分数的有:未指定尺寸的图片未指定尺寸的广告、嵌入元素、iframe动态插入内容自定义字体(引发FOIT/FOUT)在更新DOM之前等待网络响应的操作未指定尺寸的图片总而言之:在 <img> 和 <video 标签上始终加上 width 和 height 属性。或者,使用 CSS aspect ratio boxes 来占据空间。这种方法可以确保在图片加载过程中,浏览器可以分配足够的空间。历史在web的早期,开发者会给 <img> 标签.原创 2020-08-30 23:52:54 · 1819 阅读 · 0 评论 -
页面视觉稳定性之CLS
你是否曾经在线读一篇文章的时候,页面上突然发生了一些改变?没有任何警告,文字移动了,你不知道读到那里了。或者更糟糕的,你准备点一个链接或者按钮,但就在你手指触摸到屏幕的前一秒,链接移动了,你点到了其他地方。大部分情况,这些体验只会引起你的反感,但有时候,会对你造成无法挽回的伤害。如上图,当你想要点击灰色按钮的时候,突然出现了一个提示,你将点击到蓝色按钮。预料之外的页面内容的移动经常发生,因为资源的异步加载,或者dom元素的动态添加。罪魁祸首有可能是未知尺寸的图片或者视频,或者字体文件(比默认字体大原创 2020-08-23 23:06:13 · 721 阅读 · 0 评论 -
交互响应性能之优化FID
由于 FID 需要一个真实用户的交互,所以无法用实验数据测试。为了在实验数据下预测 FID,通常会用 TBT(Total Blocking Time),具体这个指标后面文章会介绍。他们测量的内容不同,但改善 TBT 通常也能改善 FID。一个糟糕的 FID 主要原因是JS执行过长,优化JS的解析、编译、执行可以直接降低 FID。过长的JS执行当JS执行过程中,浏览器无法响应用户交互,因为主线程被占用,为了改善这点,可以:分解长任务优化页面,为交互准备使用 Web Worker减少JS执行原创 2020-08-18 00:00:13 · 843 阅读 · 0 评论 -
交互响应性能之FID
众所周知,第一印象很重要,不仅是在与人交流上,在构建web体验的时候也是如此。在web上,一个好的第一印象是决定用户去留的关键。那么问题来了,怎样才能留下好的第一印象,怎样测试你的网站给用户留下的第一印象?在web上,第一印象也分很多方面:站点设计、视觉体验、速度和响应。很难用API去测试一个网站的设计和视觉,但却可以测试速度和响应。测试你的站点给用户的第一印象加载多快,可以通过 FCP 的指标。但在屏幕上绘制像素仅仅是这个故事的一部分,同样重要的,还有你的网站对用户的交互响应有多快。FID(Fi原创 2020-08-13 00:25:21 · 951 阅读 · 0 评论 -
页面加载性能之优化LCP
影响LCP的四个因素如下:较慢的服务器响应时间渲染阻塞的js和css较慢的资源加载时间客户端渲染较慢的服务器响应时间浏览器获取文档的时间越长,用户看到页面的时间也会越长。较快的服务器响应时间,可以直接改善每一个页面加载相关的指标,包括LCP。可以使用 TTFB(Time to First Byte) 来测试服务器响应时间,你可以通过以下手段来优化 TTFB 这个指标。优化服务器使用CDN缓存资源html页面优先使用缓存提前建立第三方连接优化服务器你是否在服务器上运行一些昂原创 2020-08-10 00:23:30 · 2843 阅读 · 0 评论 -
页面加载性能之LCP
LCP (Largest Contentful Paint) 是一个以用户为中心的性能指标,可以测试用户感知到的页面加载速度,因为当页面主要内容可能加载完成的时候,它记录下了这个时间点。一个快速的LCP,可以让用户感受到这个页面的可用性。以往,对开发者而言,要测试一个页面主要内容加载并呈现给用户的速度是一个很大的挑战。旧指标,像 load 和 DOMContentLoaded 并不是很好,因为它不一定跟用户屏幕上看到的内容相对应。然而新的以用户为中心的指标,比如 FCP (First Contentfu原创 2020-08-08 23:48:10 · 2775 阅读 · 1 评论 -
页面加载性能之Web Vitals
Web Vitals是Google的一项重大举措,旨在为质量信号提供统一的指导,这对于在Web上提供出色的用户体验来说很重要。网站的开发者需要了解自己的网站给用户带来的体验,但不一定要成为性能优化的专家。Web Vitals旨在简化流程,并帮助网站开发者聚焦在核心性能指标上,也称为Core Web Vitals。Core Web VitalsCore Web Vitals是Web Vitals的一个子集,适用于所有网页,应该被所有开发者去进行测量,也将在所有Google提供的工具中浮现。每一个Core原创 2020-08-03 22:50:04 · 12751 阅读 · 0 评论 -
页面加载性能之常见的性能指标
我们已经知道性能的重要性,但当我们讨论性能的时候,让一个网页变得跟快,具体是指哪些?事实上性能是相对的:一个网站可能一个用户感觉很快,但对其他用户感觉很慢两个网站的loading结束时间是一样的,但其中一个你感觉比另一个要快一个网站加载的很快,但页面长时间不可交互所以在讨论性能的时候,精确的、可量化的指标很重要。虽然说某一个指标可能是客观的,可量化的,但对我们实际去评价性能可能没什么帮助。定义指标以往,开发者都通过 load 事件来衡量性能。load 是页面生命周期中的明确的时刻,但这个原创 2020-08-02 22:53:06 · 2025 阅读 · 0 评论 -
页面加载性能之禁用document.write
如果你在控制台看到了以下信息,那么这篇文章对你而言应该会有帮助:(index):34 A Parser-blocking, cross-origin script,https://paul.kinlan.me/ad-inject.js, is invoked via document.write().This may be blocked by the browser if the device has poor network connectivity.对于现在的web的开发者而言,docume原创 2020-07-30 22:41:06 · 1524 阅读 · 0 评论 -
页面加载性能之SPOF
SPOF的简单示例只是在页面上添加一个脚本或者一个样式,也许就会让大部分用户无法正常使用。比起考虑CSS错误或者JS报错的情况,核心问题在于如果这个新添加的资源文件超时,会发生什么?有了这个线索,我们可以构建一个测试用例:<html><head><script src="http://www.snippet.com/main.js" type="text/javascript"> </script></head><body&g原创 2020-07-30 00:06:49 · 318 阅读 · 0 评论 -
页面加载性能之PRPL模式
PRPL是一种让网页加载变得可交互、更快速的模式,包含以下四个:Push (或者 preload): 给用户推送最重要的资源Render: 尽快的渲染最初始的路由Pre-cache: 提前缓存剩余的资源Lazy load: 懒加载其他路由或者次要资源本文我们将学习这些技术的综合运用,当然也可以单独使用。预加载重要资源 (Preload)Preload 是一个声明性质的fetch request,告知浏览器要尽可能快的请求到该资源。可以通过以下方式预加载重要资源,使用 <link>原创 2020-07-27 23:05:19 · 625 阅读 · 0 评论 -
页面加载性能之video替换GIF
当我们的网站需要一张动态图的时候,大部分人脑海中第一印象是GIF,当然也有会想到CSS3,通过设置逐帧动画来实现,不过这样的动画在用户的眼里还是不够流畅,所以一般开发还是会选择GIF,但GIF本身过大,如下图:这是加载性能的其中一项,我们可以简单几个步骤就能让性能得到很大的提升,通过将GIF转换成video,就能省去很大的带宽。首先是检测Lighthouse 是我们的最常用的检测手段,如果你的页面出现了这类GIF,检测报告会告知你建议的优化项,如下:创建MPEG格式video有不少方法可以将G原创 2020-07-25 21:41:24 · 392 阅读 · 0 评论 -
页面加载性能之WebP在项目中的应用
项目中的静态图片,一般有两种使用方式:HTML中的 <img> 标签CSS中的 background-image 属性尽可能的使用CSS的方式去加载图片,当然如果你依赖图片本身的宽高等比缩放的特性,还是使HTML的方式。框架本文将以vue-cli 3.0脚手架搭建的项目为例。转换工具我们选择的是 Imagemin,版本选择6.1.0,因为7.0.0之后的版本在windows上有兼容性问题,目前还未修复。npm install imagemin@6.1.0 --save-dev原创 2020-07-25 01:00:03 · 447 阅读 · 0 评论 -
页面加载性能之使用图片CDN
什么是图片CDN?与传统CDN的区别在于,它是专门为图片做优化的,通常包含缩放、格式转换等。你可以把它看成是一个API,通过传入尺寸、质量、格式等参数,获取到对应的图片内容。这也使得我们在使用上非常方便,适用于多种不同的场景。图片CDN不同于构建脚本,它不需要提前创建出多种不同格式的图片。和构建脚本相比,图片CDN更适合大量的图片场景,而非固定数量的图片,比如你的站点是为摄影爱好者服务,用户上传的图片,就可以使用图片CDN了。图片CDN的通用URL格式不同的图片CDN会有不同的URL格式,但其基本转载 2020-07-23 23:13:54 · 4013 阅读 · 0 评论 -
页面加载性能之使用正确的图片尺寸
我们总是会忘记缩小图片尺寸,直接应用到项目中。这种图片看上去很正常,但实际上既浪费了用户的流量,也影响了页面性能。找出不正确尺寸的图片Lighthouse是首选,执行一下Performance Audit,根据结果可以找到需要调整尺寸的图片列表。确定正确的图片尺寸此处提供了2种策略:上策和下策。两者都能提升性能,上策需要多花时间去理解和实施,但带来的体验和性能的提升是非常明显的。下策则是可以很快实施的方案。稍微了解下CSS的单位CSS给HTML元素的尺寸定义了两类单位:绝对单位: 在所有设备转载 2020-07-22 23:14:15 · 410 阅读 · 0 评论 -
页面加载性能之使用WebP图片
为什么选择webp图片?WebP比同等质量的JPEG和PNG都要小,一般能减少25%-35%的文件大小,能有效的提升加载性能。YouTube自从使用WebP之后,页面加载速度提升了10%Facebook自从使用WebP之后,JPEG的存储减小了25%-35%,PNG的存储减小了80%WebP是一种绝佳的方式来替代JPEG、PNG和GIF。而且WebP同时支持无损和有损压缩。无损压缩保证质量不降低,有损压缩则可以极大减少文件体积,但相应的质量会降低。把图片转换成WebP一般有两种方式:cweb转载 2020-07-22 00:02:25 · 994 阅读 · 0 评论 -
页面加载性能之选择正确的图片格式
首先要问一个问题,加载这一张图片是不是达到了你追求的效果?好的设计往往是追求简单,保持最好的性能。对于一个要加载很多资源的页面来说,如果能去掉一个图片资源,对性能的提升是很直观的。当然,有的图片胜过千言万语,是否使用图片还是取决于你自己。然后你要考虑的是,现有的技术是不是可以用更高效的方式满足你的要求。CSS效果(如阴影、渐变),以及CSS动画,是否可以创造出你想要的效果,用以取代图片。优点是:放大无损,体积小。自定义字体 可以让你使用一些很漂亮的字体,同时还能支持选中、搜索、改变字体大小,可用性更转载 2020-07-20 22:55:25 · 315 阅读 · 0 评论 -
页面加载性能之Lie-Fi
当你的设备处于有网络的情况下,访问网页、打开App都很顺畅,可以随时获取到你想要的信息。但有时候你还是会处于断网的状态,为了让App或者网站能在离线状态下使用,我们经常会把一些数据存在设备本地,这样用户依然可以体验良好。介于 online 和 offline 之间,有这么一种状态: Lie-Fi。Lie-Fi 中文可以翻译成欺骗性网络,你的设备确实连上了无线网,但你依然不能打开网页,相信不少开发者被自己的领导这样吐槽过:“我们网站怎么打不开了,我wifi都连着呢”。试想一下你的领导现在处于办公室的封闭转载 2020-07-19 22:31:15 · 216 阅读 · 1 评论 -
页面加载性能之感知真实世界
虽然我们可以通过开发者工具以及lighthouse等工具来查看网站的加载情况,并按之前我们说的那些方案做好了优化,但真正用户打开是否真的如预期一般快,我们不得而知。一直以来我们都以实验室数据为测试的依据,这些不能代表现场数据,即真实用户的体验。RUM(Real User Monitoring)因此而诞生。RUM依赖于浏览器提供的API来搜集真实用户的性能数据,主要包含2个标准文档,Navigation Timing API 和 Resource Timing API,这两个API都是基于 High Res转载 2020-07-18 23:52:20 · 598 阅读 · 0 评论 -
页面加载性能之HTTP缓存
当用户访问一个站点的时候,所有的资源都必须有一个来源。所有的文本、图片、样式、脚本等资源都必须被浏览器接收到才能展现和执行。开发者可以给浏览器提供选择,选择是从哪里获取这些资源,这样可以极大地提升页面加载速度。页面第一次加载完之后,浏览器把这些资源存在了 HTTP Cache 中。第二次打开这个页面的时候,浏览器会优先从硬盘中查找这些资源的缓存,比从服务器去下载要更快一些。虽然HTTP缓存是由 Internet Engineering Task Force (IETF) specifications 定转载 2020-07-17 22:47:28 · 250 阅读 · 0 评论 -
页面加载性能之HTTP请求
文本内容、图片内容的优化都是基于本身大小的,但有一个更基础的方案可以实施,就是减少这些资源的下载频率。减少资源个数,就可以减少HTTP请求个数。合并文本资源每个文件都需要发起一个HTTP请求,每个请求会消耗一定的时间,合并这些文件就能提升页面的加载速度。CSS比较特殊,是层叠样式,同一个选择器不会报错和抛出异常,而是能正常运行,后者覆盖前者。但有时候这个会跟我们预期不一致,所以建议给一些特别的样式加特定的类名。如下:h2 { font-size: 1em; color: #000080; } /*转载 2020-07-16 21:24:48 · 226 阅读 · 0 评论 -
页面加载性能之图片内容
图片占了网站大概60%-85%的一个带宽,本文档主要解决图片加载的耗时问题。移除不必要的图片首先要考虑的是,如果没有这个图片,是否会影响用户体验?如果不影响,放后续加载。如果图片既不是为了衬托文本,也不是为了给用户带来视觉上的体验,对用户而言并非有意义的信息,则移除。最快的图片加载,就是不去加载它。选择更优的图片类型PNG用来展示有透明度的图片。JPG用来展示一般的图片。GIP用来展示动画图片。一般选择更小的JPG。移出图片摘要信息(Metadata)一般手机或者数码相机拍摄的图片,都转载 2020-07-15 22:16:18 · 6781 阅读 · 0 评论 -
页面加载性能之文本内容
文本内容主要包含:HTML,CSS,JavaScript。在web页面里,每个字符都是要从服务器获取的,本文档主要讲述如何提升文本内容的加载速度。分离开发和线上环境如果你为了减小资源大小采取了一些措施,而影响到可读性,一定要记住当你直接修改线上代码的时候,之后可能无法理解当初为什么这么改。所以经常性,我们会把开发和线上两个环境分离,开发环境是可读性良好的代码,线上则是采取了优化措施之后的可读性差的代码。缩小代码体积一个简单有效的方法就是移出多余的空格和不必要的字符,虽然我们读起来会吃力,但浏览器转载 2020-07-15 22:15:04 · 198 阅读 · 0 评论 -
页面加载性能之如何测试打开速度
真实世界性能是多变的,考虑到用户的设备、网络连接等其他因素。举个例子,你在办公室有线网络打开一个网页,和在咖啡店用wifi打开一个网页,体验肯定不一样。实验数据(Lab Data)开发过程中,我们拿来测试的一些数据,可复现,可调式,但不能测出真实世界的瓶颈,也不能跟KPI挂钩,需要时刻提醒自己用户可能在4G或者更差的网络条件下打开。现场数据(Field Data)也被称为RUM(Real User Monitoring),可以测出真实用户的体验,跟KPI也是紧密相关,但却很难调试。工具Ligh转载 2020-07-15 22:13:54 · 2023 阅读 · 0 评论 -
页面加载性能之序章
随着web渐渐演变成一种Web App的平台,其中大部分App都从桌面延伸到了移动端。考虑到平台、网络和设备硬件的不同,用户更期望能够更快的打开App。当下,有不少有效的技术方案来提升页面的打开速度。以前我们开发的很多功能强大的站点,在移动端打开可能很慢。对用户来说,不能使用这些站点很抓狂。对开发来说,也将面临失去这部分用户。目标开发者有一些术语,TTI(Time To Interactivity)和FMP(First Meaningful Paint)。这些术语都是为了让性能这个指标变得可量化,而转载 2020-07-14 22:28:10 · 119 阅读 · 0 评论 -
前端性能优化 - 用RAIL模型分析性能
RAIL是一个以用户为中心的性能模型,它把用户的体验拆分成几个关键点(例如,tap,scroll,load),并且帮你定义好了每一个的性能指标。有以下四个方面:ResponseAnimationIdleLoad聚焦用户以下是用户对性能延迟的感知:延迟时间用户感知0-16ms很流畅0-100ms基本流畅100-1000ms感觉到网站上有一些加载任务1000ms or more失去耐心了10000ms or more直接离开,不会再访问转载 2020-07-14 09:06:28 · 534 阅读 · 0 评论