news/2024/2/29 2:04:51


原文出处:《Karolina Szczur: The State of the Web》

The Internet is growing exponentially, and so is the Web platform we create. Often though we fail to reflect on the greater picture of connectivity and contexts the audience of our work might find themselves in. Even a short glance at the state of the World Wide Web shows that we haven’t been building with empathy, situation variability awareness, let alone performance in mind.

So, what is the state of the Web today?

Only 46% of 7.4 billion people on this planet have access to the Internet. The average network speed caps at unimpressive 7Mb/s. More importantly, 93% of Internet users are going online through mobile devices — it becomes inexcusable to not cater to handhelds. Often data is more expensive than we’d assume — it could take anywhere from an hour to 13 hours to purchase 500MB packet (Germany versus Brazil; for more intriguing stats on connectivity head to Ben Schwarz’s Beyond the Bubble: The Real World Performance).

Our websites aren’t in a perfect shape either — the average site is the size of original Doom game (approx. 3 MB) (please note that for statistical accuracy medians should be used, read Ilya Grigorik’s excellent The “Average Page” is a myth. Median site size is currently at 1.4MB). Images can easily account for 1.7 MB of bandwidth and JavaScript averages at 400KB. This isn’t a problem specific to the Web platform only. Native applications aren’t better; remember that time you had to download 200 MB to get unspecified bug fixes?
而且,我们搭建的网站也并不完善——平均一个网站(计算首屏加载)的大小和国外经典桌面游戏Doom game1的大小差不多(大约3MB)(注意这里计算出的平均值,参考Ilya Grigorik’s excellent The “Average Page” is a myth,目前一般网站首屏加载大约要1.4MB),其中加载图片需要1.7MB,javascript需要400KB。不仅在pc端有这个问题,手机原生应用也好不到哪去,还记得你必须花200MB流量来更新app修复未知缺陷吗?

As technologists often we find ourselves in the position of privilege. With up-to-date, high-end laptops, phones and fast cable Internet connection, it becomes all to easy to forget this isn’t the case for everyone (actually, it’s true for very few).
If we’re building the web platform from the standpoint of privilege and lack of empathy, it results in exclusionary, subpar experiences.
How can we do better by designing and developing with performance in mind?


Optimising all assets
One of the most powerful, but under-utilised ways to significantly improve performance starts with understanding how the browser analyses and serves assets. It turns out that browsers are pretty great at discovering resources while parsing and determining their priority on the fly. Here’s where the critical request comes in.
A request is critical if it contains assets that are necessary to render the content within the users’ viewport.
For most sites, it’d be HTML, necessary CSS, a logo, a web font and maybe an image. It turns out that in many cases, dozens of other, irrelevant at the time assets are requested instead (JavaScript, tracking codes, ads, etc.). Luckily, we’re able to control this behaviour by carefully picking crucial resources and adjusting their priority.
要想显著地提升性能,最有效但也容易被忽视的方法就是了解浏览器如何解析资源。已被证明,浏览器善于查找资源并且解析后快速确定资源加载的优先级顺序。那么什么资源优先级高呢?这里有关于critical request的来源:

With <link rel='preload'> we’re able to manually force assets’ priority to High ensuring that desired content will be rendered on time. This technique can yield significant improvements in Time to Interactive metric, making optimal user experience possible.

Critical requests still seem like a black box for many, and the lack of shareable materials doesn’t help to change that. Fortunately, Ben Schwarz published an incredibly comprehensive and approachable article on the subject — The Critical Request. Additionally, check Addy’s Preload, Prefetch and Priorities in Chrome.
关键性请求对于大多数人来说似乎还是个盲区,可共享资源的缺乏也没有改变这一点。幸好,本·施瓦茨(Ben Schwarz)发表了一篇关于关键性请求的文章,文章非常全面且易懂。另外,Addy也有一篇文章《在Chrome中的预加载,预取和优先级》。


General performance checklist

  1. Cache aggressively
  2. Enable compression
  3. Prioritise critical assets
  4. Use content delivery networks


  1. 积极地使用缓存
  2. 使用压缩
  3. 优先加载关键性请求
  4. 使用内容传送网络CDN


Optimising images
Images often account for most of a web page’s transferred payload, which is why imagery optimisation can yield the biggest performance improvements. There are many existing strategies and tools to aid us in removing extra bytes, but the first question to ask is: “Is this image essential to convey the message and effect I’m after?”. If it’s possible to eliminate it, not only we’re saving bandwidth, but also requests.

In some cases, similar results can be achieved with different technologies. CSS has a range of properties for art direction, such as shadows, gradients, animations or shapes allowing us to swap assets for appropriately styled DOM elements.


Choosing the right format
If it’s not possible to remove an asset, it’s important to determine what format will be appropriate. The initial choice falls between vector and raster graphics:

Vector: resolution independent, usually significantly smaller in size. Perfect for logos, iconography and simple assets comprising of basic shapes (lines, polygons, circles and points).
Raster: offers much more detailed results. Ideal for photographs.

After making this decision, there are a fair bit of formats to choose from: JPEG, GIF, PNG–8, PNG–24, or newest formats such as WEBP or JPEG-XR. With such an abundance of options, how do we ensure we’re picking the right one? Here’s a basic way of finding the best format to go with:

  • JPEG: imagery with many colours (e.g. photos)
  • PNG–8: imagery with a few colours
  • PNG–24: imagery with partial transparency
  • GIF: animated imagery
    决定好之后,我们可以选择几种格式:JPEG, GIF, PNG–8, PNG–24,或最新格式,如WEBP或JPEG-XR。有了这么多的选择,我们如何确保我们选择了合适的格式?这是找到最佳格式的基本方法:
  • JPEG:具有多种颜色的图像(例如照片)
  • PNG-8:具有几种颜色的图像
  • PNG-24:具有部分透明度的图像
  • GIF: 动图

Photoshop can optimise each of these on export through various settings such as decreasing quality, reducing noise or number of colours. Ensure that designers are aware of performance practices and can prepare the right type of asset with the right optimisation presets. If you’d like to know more how to develop images, head to Lara Hogan’s invaluable Designing for Performance.
Photoshop可以通过各种设置,例如降低画质,降低噪点或减少颜色数量来优化图片。确保设计师了解性能实践,并可以使用正确的优化方式来提供恰当格式的资源。如果您想了解如何优化图片,请前往Lara Hogan’s invaluable Designing for Performance。


Experimenting with new formats
There are a few newer players in the spectrum of image formats, namely WebP, JPEG 2000 and JPEG-XR. All of them are developed by browser vendors: WebP by Google, JPEG 2000 by Apple and JPEG-XR by Microsoft.
图像格式有几个较新的玩家,即WebP,JPEG 2000和JPEG-XR。所有这些都是由浏览器供应商开发的:Google的WebP,Apple的JPEG 2000和Microsoft的JPEG-XR。

WebP is easily the most popular contender, supporting both lossless and lossy compression, which makes it incredibly versatile. Lossless WebP is 26% smaller than PNGs and 25–34% smaller than JPGs. With 74% browser support it can safely be used with fallback, introducing up to 1/3 savings in transferred bytes. JPGs and PNGs can be converted to WebP in Photoshop and other image processing apps as well as through command line interfaces (brew install webp).
WebP是最受欢迎的竞争者,支持无损和失真压缩,这使得它非常通用。无损WebP比PNG小26%,比JPG小25-34%。有了74%的浏览器支持,它可以安全地用于回退,最多可节省1/3的传输字节。JPG和PNG图片可以在Photoshop或其他图像处理应用程序以及命令行界面(brew install webp)中转换为WebP。

If you’d like to explore (minor) visual differences between these formats I recommend this nifty demo on Github.


Optimising with tools and algorithms
Even using incredibly efficient image formats doesn’t warrant skipping post-processing optimisation. This step is crucial.

If you’ve chosen SVGs, which are usually relatively small in size, they too have to be compressed. SVGO is a command line tool that can swiftly optimise SVGs through stripping unnecessary metadata. Alternatively, use SVGOMG by Jake Archibald if you prefer a web interface or are limited by your operating system. Because SVG is an XML-based format, it can also be subject to GZIP compression on the server side.
如果你选择了通常尺寸相对较小的SVG,那么也需要被压缩。SVGO是一个命令行工具,可以通过剥离不必要的元数据来快速优化SVG。或者,如果你喜欢Web界面或受操作系统的限制,请使用Jake Archibald的SVGOMG。因为SVG是基于XML的格式,它也可以在服务器端进行GZIP压缩。

ImageOptim is an excellent choice for most of the other image types. Comprising of pngcrush, pngquant, MozJPEG, Google Zopfli and more, it bundles a bunch of great tools in a comprehensive, Open Source package. Available as a Mac OS app, command line interface and Sketch plugin, ImageOptim can be easily implemented into an existing workflow. For those on Linux or Windows, most of the CLIs ImageOptim relies on can be used on your platform.
ImageOptim是大多数其他图像类型的绝佳选择。包括pngcrush,pngquant,MozJPEG,Google Zopfli等,它在一个开源包中捆绑了一堆很棒的工具。作为Mac OS应用程序,命令行界面和Sketch插件,ImageOptim可以轻松地应用到现有的工作流程中。对于那些在Linux或Windows上,大多数ImageOptim的CLI也可以使用。

If you’re inclined to try emerging encoders, earlier this year, Google released Guetzli — an Open Source algorithm stemming from their learnings with WebP and Zopfli. Guetzli is supposed to produce up to 35% smaller JPEGs than any other available method of compression. The only downside: slow processing times (a minute of CPU per megapixel).
如果你想尝试新兴的编码器,Google今年早些时候发布了Guetzli - 源自WebP和Zopfli的开源算法。 Guetzli应该比任何其他可用的压缩方法产生比35%更小的JPEG。唯一的缺点:处理时间慢(CPU每百万像素一分钟)。

When choosing tools make sure they produce desired results and fit into teams’ workflow. Ideally, automate the process of optimisation, so no imagery slips through the cracks unoptimised.


Responsible and responsive imagery
A decade ago we might have gotten away with one resolution to serve all, but the landscape of ever-changing, responsive web is very different today. That’s why we have to take extra care in implementing visual resources we’ve so carefully optimised and ensuring they cater for the variety of viewports and devices. Fortunately, thanks to Responsive Images Community Group we’re perfectly equipped to do so with picture element and srcset attribute (both have 85%+ support).
十年前,我们可能已经抛弃了一次性解决所有问题的观念,如今的不断发展的响应式网络更需如此。这就是为什么我们在渲染我们精心优化过的视觉资源时必须特别小心,并确保它们适应各种视口和设备。幸运的是,感谢Responsive Images社区小组,我们完全可以使用图片元素和srcset属性(都有85%+支持)。


The srcset attribute
Srcset works best in the resolution switching scenario—when we want to display imagery based on users’ screen density and size. Based on a set of predefined rules in srcset and sizes attributes the browser will pick the best image to serve accordingly to the viewport. This technique can bring great bandwidth and request savings, especially for the mobile audience.
Srcset在分辨率切换方案中效果最佳 - 当我们要根据用户的屏幕分辨率和大小显示图像时。基于srcset和size属性中的一组预定义规则,浏览器将选择最佳图像,以便相应地提供给视口。这种技术可以带来很大的带宽,需谨慎使用,特别是针对移动用户。

An example of srcset usage


The picture element
Picture element and the media attribute are designed to make art direction easy. By providing different sources for varying conditions (tested via media-queries), we’re able always able to keep the most important elements of imagery in the spotlight, no matter the resolution.


Make sure to read Jason Grigsby’s Responsive Images 101 guide for a thorough explanation of both approaches.

务必阅读Jason Grigsby的Responsive Images 101指南,以便彻底理解这两种方法。


Delivery with image CDNs
The last step of our journey to performant visuals is delivery. All assets can benefit from using a content delivery network, but there are specific tools targeting imagery, such as Cloudinary or imgx. The benefit of using those services goes further than reducing traffic on your servers and significantly decreasing response latency.

CDNs can take out a lot of complexity from serving responsive, optimised assets on image-heavy sites. The offerings differ (and so does the pricing) but most handle resizing, cropping and determining which format is best to serve to your customers based on devices and browsers. Even more than that — they compress, detect pixel density, watermark, recognise faces and allow post-processing. With these powerful features and ability to append parameters to URLs serving user-centric imagery becomes a breeze.
CDN在图像重磅的网站上响应和优化资源会加重复杂度。资源不同(花费也是如此),但是大多数处理器可以根据设备和浏览器调整合适的大小,裁剪并确定最合适的格式。而且 - 它们可以进行压缩,检测像素密度,水印,识别面部并允许后处理。借助这些强大的功能和将参数附加到以用户为中心的图像的URL的功能变得轻而易举。

Image performance checklist

  1. Choose the right format
  2. Use vector wherever possible
  3. Reduce the quality if change is unnoticeable
  4. Experiment with new formats
  5. Optimise with tools and algorithms
  6. Learn about srcset and picture
  7. Use an image CDN


  1. 选择正确的格式
  2. 尽可能使用矢量
  3. 如果变化不明显,则降低画质
  4. 尝试新格式
  5. 用工具和算法进行图片优化
  6. 了解srcset和图片元素
  7. 图片放到CDN


Optimising web fonts
The ability to use custom fonts is an incredibly powerful design tool. But with power comes a lot of responsibility. With whooping 68% of websites leveraging web fonts this type of asset is one of the biggest performance offenders (easily averaging 100KB, depending on the number of variants and typefaces).

Even when weight isn’t the most major issue, Flash of Invisible Text (FOIT) is. FOIT occurs when web fonts are still loading or failed to be fetched, which results in an empty page and thus, inaccessible content. It might be worth it to carefully examine whether we need web fonts in the first place. If so, there are a few strategies to help us mitigate the negative effect on performance.


Choosing the right format
There are four web font formats: EOT, TTF, WOFF and more recent WOFF2. TTF and WOFF are most widely adopted, boasting over 90% browser support. Depending on the support you’re targeting it’s most likely safe to serve WOFF2 and fall back to WOFF for older browsers. The advantage of using WOFF2 is a set of custom preprocessing and compression algorithms (like Brotli) resulting in approx. 30% file-size reduction and improved parsing capabilities.
有四种网络字体格式:EOT,TTF,WOFF和近期的WOFF2。 TTF和WOFF被广泛采用,拥有超过90%的浏览器支持。根据你的项目,尽可能稳定地支持WOFF2,并在旧版浏览器上使用WOFF。使用WOFF2的优点是其有一套定制的预处理和压缩算法(如Brotli),能缩小大约30%的文件大小和提升解析功能。

When defining the sources of web fonts in @font-face use the format() hint to specify which format should be utilised.

If you’re using Google Fonts or Typekit to serve your fonts, both of these tools have implemented a few strategies to mitigate their performance footprint. Typekit now serves all kits asynchronously, preventing FOIT as well as allows for extended cache period of 10 days for their JavaScript kit code (instead of default 10 minutes). Google Fonts automatically serves the smallest file, based on the capabilities of the users’ device.
如果你使用Google Fonts或Typekit来作为字体,这两种字体都实施了一些策略来减轻其性能消耗。 Typekit现在可以异步地为所有工具包提供服务,保护FOIT以及允许其JavaScript代码延长10天的缓存时间(而不是默认10分钟)。 Google Fonts可以根据用户设备的性能自动提供最小的文件。


Audit font selection
No matter whether self-hosting or not, the number of typefaces, font weights and styles will significantly affect your performance budgets.

Ideally, we can get away with one typeface featuring normal and bold stylistic variants. If you’re not sure how to make font selection choices refer to Lara Hogan’s Weighing Aesthetics and Performance.
理想情况下,我们可以避免使用正常或加粗格式上变体的字体。如果不确定如何选择字体,请参考Lara Hogan的衡量美与性能。


Use Unicode-range subsetting
Unicode-range subsetting allows splitting large fonts into smaller sets. It’s a relatively advanced strategy but might bring significant savings especially when targeting Asian languages (did you know Chinese fonts average at 20,000 glyphs?). The first step is to limit the font to the necessary language set, such as Latin, Greek or Cyrillic. If a web font is required only for logotype usage, it’s worth it to use Unicode-range descriptor to pick specific characters.

The Filament Group released an Open Source command-line utility, glyph hanger that can generate a list of necessary glyphs based on files or URLs. Alternatively, the web-based Font Squirrel Web Font Generator offers advanced subsetting and optimisation options. If using Google Fonts or Typekit choosing a language subset is built into the typeface picker interface, making basic subsetting easier.
Filament团队发布了一个开源命令行工具,可以根据文件或URL生成必需字形列表。或者,基于Web的Font Squirrel和Font Generator提供的高级字集和优化选项。如果在字体选择器界面中内置了Google Fonts或Typekit,则使用基本字集更容易。


Establish a font loading strategy
Fonts are render-blocking — because the browser has to build both the DOM and CSSOM first; web fonts won’t be downloaded before they’re used in a CSS selector that matches an existing node. This behaviour significantly delays text rendering, often causing the Flash of Invisible Text (FOIT) mentioned before. FOIT is even more pronounced on slower networks and mobile devices.
由于浏览器必须首先构建DOM和CSSOM,之后再渲染字体;在解析到应用了web fonts的CSS选择器之前,不会下载web fonts。这种行为有明显的延迟文本现象,特别是前面提到的Flash隐藏文本(FOIT)。在较慢的网络和移动设备上,FOIT延迟更加明显。

Implementing a font loading strategy prevents users from not being able to access your content. Often, opting for Flash of Unstyled Text (FOUT) is the easiest and most effective solution.
实施字体加载策略可防止用户无法访问您的内容。通常,选择Flash的Unstyled Text(FOUT)是最简单和最有效的解决方案。

font-display is a new CSS property providing a non-JavaScript reliant solution. Unfortunately, it has partial support (Chrome and Opera only) and is currently under development in Firefox and WebKit. Still, it can and should be used in combination with other font loading mechanisms.

font-display property in action

Luckily, Typekit’s Web Font Loader and Bram Stein’s Font Face Observer can help manage font loading behaviour. Additionally, Zach Leatherman, an expert on web font performance, published A Comprehensive Guide to Font Loading Strategies which will aid in choosing the right approach for your project.
幸运的是,Typekit的Web Font Loader和Bram Stein的Font Face Observer可以帮助管理字体加载行为。此外,网页字体性能专家Zach Leatherman发布了“字体加载策略综合指南”,这将有助于为你的项目对web fonts的选择。

Web font performance checklist

  1. Chose the right format
  2. Audit the font selection
  3. Use Unicode-range subsetting
  4. Establish a font loading strategy


  1. 选择正确的格式
  2. 斟酌字体选择
  3. 使用Unicode格式的字集
  4. 建立一个字体加载策略
  5. 使用font-display属性


Optimising JavaScript
At the moment, the average size of JavaScript bundle is 446 KB, which already makes it second biggest type of an asset size-wise (following images).
目前,JavaScript软件包的平均大小为446 KB,占用资源的比例已经达到第二(仅次于图片)。

What we might not realise is that there’s a much more sinister performance bottleneck hidden behind our beloved JavaScript.


Monitor how much JavaScript is delivered
Optimising delivery is only one step in combating web page bloat. After JavaScript is downloaded, it has to be parsed, compiled and run by the browser. A quick look at a few popular sites and it becomes obvious that gzipped JS becomes at least three times bigger after unpacking. Effectively, we are sending giant blobs of code down the wire.

Parse times for 1MB of JavaScript on different devices. Image courtesy of Addy Osmani and his JavaScript Start-up Performance article.
在不同的设备上多次解析1MB的JavaScript。图片由Addy Osmani和他的JavaScript Start-up Performance文章提供。

Analysing parse and compile times becomes crucial to understanding when apps are ready to be interacted with. These timings vary significantly based the hardware capabilities of users’ device. Parse and compile can easily be 2–5x times higher on lower end mobiles. Addy’s research confirms that on an average phone an app will take 16 seconds to reach an interactive state, compared to 8 seconds on a desktop. It’s crucial to analyse these metrics, and fortunately, we can do so through Chrome DevTools.
apps在解析和编译后是否可用,分析其中的耗时至关重要。所耗时间因用户设备的硬件功能而异。在低端手机解析和编译比高端手机上慢2-5倍。Addy的研究证实,在一般手机上,一个应用程序将需要16秒才能正常使用,而在桌面上为8秒。分析这些指标至关重要,幸运的是,我们可以通过Chrome DevTools来实现。

Investigating parse and compile in Chrome Dev Tools

Make sure to read Addy Osmani’s detailed write-up on JavaScript Start-up Performance.
请务必阅读Addy Osmani对JavaScript性能优化的详细说明。


Get rid of unnecessary dependencies
The way modern package managers work can easily obscure the number and the size of dependencies. webpack-bundle-analyzer and Bundle Buddy are great, visual tools helping identify code duplication, biggest performance offenders and outdated, unnecessary dependencies.
现代软件包管理器的工作方式可以轻而易举地掩盖依赖包的数量和大小。webpack-bundle-analyzer和Bundle Buddy是很好的可视化工具,帮助识别重复代码,最大的性能阻碍和过时的、不必要的依赖。

Webpack bundle analyzer in action.
使用中的Webpack bundle analyzer

We can make imported package cost even more visible with Import Cost extension in VS Code and Atom.
通过导入VS Code和Atom中的扩展,我们可以使包引入成本更加明显。

Import Code VS Code extension.


Implement code splitting
Whenever possible, we should only serve the necessary assets to create the desired user experience. Sending a full bundle.js file to the user, including code handling interactions they might never see is less than optimal (imagine downloading JavaScript handling an entire app when visiting a landing page). Similarly, we shouldn’t be universally serving code targeting specific browsers or user agents.

Webpack, one of the most popular module bundlers, comes with code splitting support. Most straightforward code splitting can be implemented per page (home.js for a landing page, contact.js for a contact page, etc.), but Webpack offers few advanced strategies like dynamic imports or lazy loading that might be worth looking into as well.


Consider framework alternatives
JavaScript front-end frameworks are constantly on the rise. According to the State of JavaScript 2016 survey React is the most popular option. Carefully auditing architecture choices though might show that you’d be better off with a much more lightweight alternative such as Preact (note that Preact isn’t trying to be a full React reimplementation, just a highly performant, less featured virtual DOM library). Similarly, we can swap bigger libraries for smaller altrnatives — moment.js for date-fns (or in particular case of moment.js remove unused locales).
JavaScript前端框架不断增加。根据2016年对JavaScript的调查,React是最受欢迎的选择。仔细考虑架构选择,虽然你可能会使用更为轻量级的替代方案(例如Preact)(请注意,Preact不会是一个完整的React重新实现,只是一个高性能,功能较差的虚拟DOM库)。类似地,我们可以用较小的库来替代 - 例如用于date-fns的moment.js(或者是删除moment.js未使用的部分)。

Before starting a new project, it’s worthwhile to determine what kind of features are necessary and pick the most performant framework for your needs and goals. Sometimes that might mean opting for writing more vanilla JavaScript instead.

JavaScript performance checklist

  1. Monitor how much JavaScript is delivered
  2. Get rid of unnecessary dependencies
  3. Implement code splitting
  4. Consider framework alternatives


  1. 监控JavaScript的传输
  2. 避免不必要的依赖
  3. 代码拆分
  4. 框架选择的考虑


Tracking performance and the road forward
We’ve talked about several strategies that in most cases will yield positive changes to the user experience of products we’re building. Performance can be a tricky beast though, and it’s necessary to track the long-term results of our tweaks.


User-centric performance metrics
Great performance metrics aim to be as close to portraying user experience as possible. Long established onLoad, onContentLoaded or SpeedIndex tell us very little about how soon sites can be interacted with. When focusing only on the delivery of assets, it’s not easy to quantify perceived performance. Fortunately, there are a few timings that paint quite a comprehensive picture of how soon content is both visible and interactive.


Those metrics are First Paint, First Meaningful Paint, Visually Complete and Time to Interactive.

  • First Paint: the browser changed from a white screen to the first visual change.
  • First Meaningful Paint: text, images and major items are viewable.
  • Visually Complete: all content in the viewport is visible.
  • Time to Interactive: all content in the viewport is visible and ready to interact with (no major main thread JavaScript activity).
  • 第一次绘制:浏览器从白色屏幕到第一次视觉变化。
  • 第一次有意义的绘制:文字,图像和主要模块可见。
  • 视觉完整:视窗中的所有内容都可见。
  • 互动时间:视窗中的所有内容都是可见的,可以随时进行交互(没有主要的JavaScript线程活动)。

These timings directly correspond to what the users see therefore make excellent candidates for tracking. If possible, record all, otherwise pick one or two to have a better understanding of perceived performance. It’s worth keeping an eye on other metrics as well, especially the number of bytes (optimised and unpacked) we’re sending.


Setting performance budgets
All of these figures might quickly become confusing and cumbersome to understand. Without actionable goals and targets, it’s easy to lose track of what we’re trying to achieve. A good few years ago Tim Kadlec wrote about the concept of performance budgets.
所有这些数字可能会很快会使理解变得混乱和麻烦。没有可操作的目标和场景,很容易偏离我们正在实现的内容。几年前,Tim Kadlec写了关于性能预算的概念。

Unfortunately, there’s no magical formula for setting them. Often performance budgets boil down to competitive analysis and product goals, which are unique to each business.

When setting budgets, it’s important to aim for a noticeable difference, which usually equals to at least 20% improvement. Experiment and iterate on your budgets, leveraging Lara Hogan’s Approach New Designs with a Performance Budget as a reference.
设定预算时,重要的是要达到明显的效果,通常至少改善20%。实践和迭代您的预算,利用Lara Hogan新设计的方法,作为性能预算参考。

Try out Performance Budget Calculator or Browser Calories Chrome extension to aid in creating budgets.


Continuous monitoring
Monitoring performance shouldn’t be manual. There are quite a few powerful tools offering comprehensive reporting.

Google Lighthouse is an Open Source project auditing performance, accessibility, progressive web apps, and more. It’s possible to use Lighthouse in the command line or as just recently, directly in Chrome Developer Tools.
Google Lighthouse是一个审核性能,可访问性,渐进式网络应用程序等的开源项目。可以在命令行中或直接在Chrome Developer Tools中使用Lighthouse。

Lighthouse performing a performance audit.

For continuous tracking opt-in for Calibre that offers performance budgets, device emulation, distributed monitoring and many other features that are impossible to get without carefully building your own performance suite.

Comprehensive performance tracking in Calibre.

Wherever you’re tracking, make sure to make the data transparent and accessible to the entire team, or in smaller organisations, the whole business.

Performance is a shared responsibility, which spans further than developer teams — we’re all accountable for the user experience we’re creating, no matter role or title.

It’s incredibly important to advocate for speed and establish collaboration processes to catch possible bottlenecks as early as product decisions or design phases.


Building performance awareness and empathy
Caring about performance isn’t only a business goal (but if you need to sell it through sales statistics do so with PWA Stats). It’s about fundamental empathy and putting the best interest of the users first.

As technologists, it’s our responsibility not to hijack attention and time people could be happily spending elsewhere. Our objective is to build tools that are conscious of time and human focus.

Advocating for performance awareness should be everyone’s goal. Let’s build a better, more mindful future for all of us with performance and empathy in mind.







水力冲孔数值模拟前景_吴国霈 等:气田地面系统应急联锁工况数值模拟研究...

点击标题下「蓝色字体」&#xff0c;关注我们本文刊载于《石油与天然气化工》2020年第49卷第3期。引用本文&#xff1a;吴国霈,计维安,伍坤一,林宇,蒋巍. 气田地面系统应急联锁工况数值模拟研究[J]. 石油与天然气化工, 2020, 49(3): 115-120, 134.气田地面系统应急联锁工况数值…

mv 无法进行跨设备的移动_一种基于DSSM模型的跨领域深度推荐模型

本周阅读论文《A Multi-View Deep Learning Approach for Cross Domain User Modeling in Recommendation Systems》。这是基于DSSM匹配模型的一种跨领域构建用户模型的推荐算法&#xff08;简称MV-DNN&#xff09;。该方法采用大量特征编码用户&#xff0c;利用DSSM模型的匹配…


30.在页式存储管理系统中&#xff0c;采用某些页面置换算法&#xff0c;会出现Belady异常现象&#xff0c;即进程的缺页次数会随着分配给该进程的页框个数的增加而增加。下列算法中&#xff0c;可能出现Belady异常现象的是Ⅰ.LRU算法 Ⅱ.FIFO算法 Ⅲ.OPT算法A.仅ⅡB.仅ⅠⅡC.仅…


希望iOS设备进入某个区域发出通知&#xff0c;那么这种区域监测的功能也被称为临近警告。所谓临近警告的示意图如图9.6所示。 图9.6临近警告的示意图 用户设备不断地临近指定固定点&#xff0c;当与该固定点的距离小于指定范围时&#xff0c;系统可以触发相应的处理。用户设备离…

fpga驱动oled iic显示代码_arduino学习笔记之OLED液晶屏

01前期准备1.arduino UNO开发板2.OLED 显示屏3.导线若干4.取模软件02引脚接线OLED 显示屏有四个引脚&#xff0c;分别是&#xff1a;SDA(数据线) SCK(时钟线) VDD(3.3V) GND在UNO开发板上I2C接口&#xff0c;SDA对应D4&#xff0c;SCK对应D5在MEGA2560开发板上I2C接口,SDA对应D…



实现Operations Manager 2012 R2单一部署

单一服务器管理组方案结合了可在Windows Server 2012 或 Windows Server 2012 R2 操作系统&#xff08;作为 Active Directory 域中的成员服务器运行&#xff09;的单一实例上共存的所有管理组角色。此实例可位于专用硬件上或虚拟计算机上。 可以将操作控制台部署到单一服务器以…

使用angular4和asp.net core 2 web api做个练习项目(四)

第一部分: http://www.cnblogs.com/cgzl/p/7755801.html 第二部分: http://www.cnblogs.com/cgzl/p/7763397.html 第三部分: http://www.cnblogs.com/cgzl/p/7768147.html 后台代码: https://github.com/solenovex/asp.net-core-2.0-web-api-boilerplate 前台代码: https://git…