Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google 的 Pagespeed 的工作原理:提升你的分数和搜索引擎排名 #6153

Merged
merged 10 commits into from
Jul 23, 2019
Merged

Google 的 Pagespeed 的工作原理:提升你的分数和搜索引擎排名 #6153

merged 10 commits into from
Jul 23, 2019

Conversation

Jerry-FD
Copy link
Contributor

@Jerry-FD Jerry-FD commented Jul 16, 2019

译文翻译完成,resolve #6122

@Endone
Copy link

Endone commented Jul 17, 2019

@fanyijihua 校对认领

@fanyijihua
Copy link
Collaborator

@Endone 好的呢 🍺

Copy link

@Endone Endone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提了部分修改建议和翻译想法
@Jerry-FD 麻烦再看一下


![](https://calibreapp.com/blog/uploads/how-google-pagespeed-works/1.png)

In this article, we uncover how PageSpeed calculates it’s critical speed score.
通过这篇文章,我们将揭开 PageSpeed 那严格的计算页面速度分的面纱。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[那严格的计算页面速度分的面纱。]
=>
[最为重要的计算页面速度评分的方法。]


It’s no secret that speed has become a crucial factor in increasing revenue and lowering abandonment rates. Now that Google uses page speed as a ranking factor, many organisations have become laser-focused on performance.
毫无疑问,页面的加载速度已经变成了提升页面收益和降低流失率的关键性因素。由于 Google 已经使用页面的加载速度作为影响其搜索排名的因素,现在更多的企业和组织都把目光聚焦在提升页面性能上了。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[页面的加载速度已经变成了提升页面收益和降低流失率的关键性因素。由于 Google 已经使用页面的加载速度作为影响其搜索排名的因素]
=>
[页面的加载速度已经成了提升页面收益和降低流失率的关键性因素。由于 Google 已经将页面的加载速度列入影响其搜索排名的因素]

* In March, [indexing became based on the mobile version of a page](https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html), rather than desktop.
* [In July, the SEO ranking algorithm](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html) was updated to include page speed as a ranking factor for both mobile pages [and ads.](https://developers.google.com/web/updates/2018/07/search-ads-speed#the_mobile_speed_score_for_ads_landing_pages)
* 三月,[搜索结果排名以移动端版本的页面为基础](https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html),取代之前的桌面端版本。
* [七月,SEO 排名算法](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html) 更新为,增加页面的加载速度作为影响其搜索排名的因素,包括移动端页面[和广告。](https://developers.google.com/web/updates/2018/07/search-ads-speed#the_mobile_speed_score_for_ads_landing_pages)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[更新为,增加页面的加载速度作为影响其搜索排名的因素]
=>
[进行了更新,其将页面的加载速度加入到影响搜索排名的因素里]


Google wrote:
Google 道:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[道]
=>
[写道]


To understand how these changes affect us from a performance perspective, we need to grasp the underlying technology. [PageSpeed 5.0](https://developers.google.com/speed/docs/insights/release_notes) is a complete overhaul of previous editions. It’s now being powered by Lighthouse and [CrUX](https://developers.google.com/web/updates/2017/12/crux) (Chrome User Experience Report).
为了搞清楚这些变化,从页面性能的角度给我们带来了什么影响,我们需要掌握这些基础知识。[PageSpeed 5.0](https://developers.google.com/speed/docs/insights/release_notes) 是之前的一个完整的修订版。现在由 Lighthouse [CrUX](https://developers.google.com/web/updates/2017/12/crux) 提供技术支持(Chrome 用户体验报告部)。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[为了搞清楚这些变化,从页面性能的角度给我们带来了什么影响]
=>
[为了从页面性能的角度搞清楚这些变化给我们带来了什么影响]

* 检查并移除对你的用户来说并不需要的 polyfills
* 搞清楚每一个第三方 JavaScript 库所花费的时间。 使用 [webpack-bundle-analyser](https://www.npmjs.com/package/webpack-bundle-analyzer) 或者 [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) 来可视化分析他们的大小。
* 现代 JavaScript 工具(比如 webpack)可以把大的 JavaScript 应用分解成许多小的 bundles,随着用户的浏览而动态加载。这就是所谓的 [code splitting](https://webpack.js.org/guides/code-splitting/) 这会 **极大地优化 TTI.**
* [Service workers 会缓存解析和编译后所得的字节码](https://v8.dev/blog/code-caching-for-devs)。如果善加利用这个特性,用户只需花费一次解析和编译代码带来的时间损耗,在那之后结果就会被缓存优化。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[在那之后结果就会被缓存优化]
=>
[在那之后的结果就会被缓存优化]


To successfully uncover significant differences in user experience, we suggest using a performance monitoring system (like [Calibre](https://calibreapp.com/)!) that allows for testing a minimum of two devices; a fast desktop and a low-mid range mobile phone.
为了较好的展示用户体验的差异性,我们建议使用监控系统(比如 [Calibre](https://calibreapp.com/)!) 它可以测试两个设备的最小值;一个较快的桌面端设备和一个中等速度的移动端设备。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[(比如 Calibre!) 它可以测试两个设备的最小值;一个较快的桌面端设备和一个中等速度的移动端设备]
=>
[(比如 Calibre!),它可以测试页面在两个不同设备上的最小评分,例如一个较快的桌面端设备和一个中等速度的移动端设备]

这句也不太好翻译,译者再斟酌斟酌


An excellent substitute for using a real device is to use Chrome DevTools hardware emulation mode. We’ve written an extensive [performance profiling guide](https://calibreapp.com/blog/react-performance-profiling-optimization/) to help you get started with runtime performance.
作为使用真实设备测试的一个优秀替代方案,是使用 Chrome DevTools 的硬件仿真模块,我们写了一个详细的[性能剖析指南](https://calibreapp.com/blog/react-performance-profiling-optimization/)来帮你开始分析运行时的性能。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[作为使用真实设备测试的一个优秀替代方案,是使用 Chrome DevTools 的硬件仿真模块,我们写了一个详细的性能剖析指南来帮你开始分析运行时的性能]
=>
[Chrome DevTools 的硬件仿真模块可以很好的替代真实设备来进行测试,我们写了一个详细的性能剖析指南来帮你学习分析运行时的性能]


[Continuous performance monitoring](https://calibreapp.com/features) is essential to ensuring speed improvements last, and teams get instantly notified when regressions happen. Manual testing introduces unexpected variability in results and makes testing from different regions as well as on various devices nearly impossible without a dedicated lab environment.
[连续的性能监控](https://calibreapp.com/features) 是保证速度优化的最后的要素,当页面完成回归的时候团队会立刻知晓。人为的测试会对结果引入大量的不可预期的变量,在不同区域、不同设备上的测试在没有专业的实验室环境下几乎是不可能完成的。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[最后的要素]
去掉的


To avoid losing positioning, ensure you’re using an up-to-date performance suite to track key pages (pssst, we built [Calibre](https://calibreapp.com/blog/release-notes-lighthouse-4/) to be your performance companion. It has Lighthouse built-in. Hundreds of teams from around the globe are using it every day).
为了避免减低排名,确保你正在使用最新的性能分析套件来跟踪你的关键页面(哈,我们打造了 [Calibre](https://calibreapp.com/blog/release-notes-lighthouse-4/) 来做你的性能提升伙伴。他以 Lighthouse 为基础。每天都有很多来自全球的团队在使用它)。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[为了避免减低排名]
=>
[为了避免排名下降]

修改校对
Copy link
Contributor Author

@Jerry-FD Jerry-FD left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

多谢指导,已经针对修改意见做了调整
@Endone


Lighthouse will apply a 0 – 100 scoring model to each of these metrics. This process works by obtaining mobile 75th and 95th percentiles from [HTTP Archive](https://httparchive.org/), then applying a `log normal` function.
Lighthouse 会针对这些指标运用一个 0 – 100 的分数模型。 这个过程会收集手机 75% 和 90% 的 [HTTP 档案](https://httparchive.org/),之后使用 `普通的 log` 函数记录。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

学习了


In the future, this may also be enhanced by the inclusion of user-observed data from the Chrome User Experience Report dataset.
在未来,这些权重能还包含由 Chrome 用户体验报告资料组提交的用户可见数据。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在未来,这些权重参考了自于 Chrome 用户体验报告的用户观测数据考虑在内之后,还可能会被进一步优化


Where possible, remove unused JavaScript code or focus on only delivering a script that will be run by the current page. That might mean removing old polyfills or replacing third-party libraries with smaller, more modern alternatives.
尽可能地,移除无用的 JavaScript 代码,或者只传输当前页面会执行的代码。移除老的 polyfills 或者用更小的、更新的第三方库作为替代。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

专业名词 polyfills 不用译,用于类似于 api 垫片

@weberpan
Copy link
Contributor

@fanyijihua 校对认领

@fanyijihua
Copy link
Collaborator

@weberpan 妥妥哒 🍻

Copy link
Contributor

@weberpan weberpan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fanyijihua 校对完成。翻译的质量挺不错,比较流畅,不拘泥于具体单词。但有些技术细节翻译得不太到位哈


![](https://calibreapp.com/blog/uploads/how-google-pagespeed-works/1.png)

In this article, we uncover how PageSpeed calculates it’s critical speed score.
通过这篇文章,我们将揭开 PageSpeed 最为重要的计算页面速度评分的方法。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最为重要的计算页面速度评分的方法
=>
最为重要的页面速度评分的计算方法

* In March, [indexing became based on the mobile version of a page](https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html), rather than desktop.
* [In July, the SEO ranking algorithm](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html) was updated to include page speed as a ranking factor for both mobile pages [and ads.](https://developers.google.com/web/updates/2018/07/search-ads-speed#the_mobile_speed_score_for_ads_landing_pages)
* 三月,[搜索结果排名以移动端版本的页面为基础](https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html),取代之前的桌面端版本。
* [七月,SEO 排名算法](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html)更新为,增加页面的加载速度作为影响其搜索排名的因素,包括移动端页面[和广告。](https://developers.google.com/web/updates/2018/07/search-ads-speed#the_mobile_speed_score_for_ads_landing_pages)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

包括移动端页面[和广告。]
=》
如移动端页面排名[和广告排名。]

结合下文,这样翻译会更容易理解


> Faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings.
> 更快的加载速度不仅仅会提升我们的体验;最近的数据显示,提升页面的加载速度也会降低操作成本。和我们一样,用户也很重视速度 — 这就是我们决定将页面的速度这一因素,加入计算搜索排名的原因。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

和我们一样,用户也很重视速度
=》
比如我们的 Google,我们的用户就很重视速度


> Faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings.
> 更快的加载速度不仅仅会提升我们的体验;最近的数据显示,提升页面的加载速度也会降低操作成本。和我们一样,用户也很重视速度 — 这就是我们决定将页面的速度这一因素,加入计算搜索排名的原因。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这就是我们决定将页面的速度这一因素,加入计算搜索排名的原因
=》
这就是我们决定将页面速度这一要素加入搜索排名计算的原因


To understand how these changes affect us from a performance perspective, we need to grasp the underlying technology. [PageSpeed 5.0](https://developers.google.com/speed/docs/insights/release_notes) is a complete overhaul of previous editions. It’s now being powered by Lighthouse and [CrUX](https://developers.google.com/web/updates/2017/12/crux) (Chrome User Experience Report).
为了从页面性能的角度搞清楚这些变化给我们带来了什么影响,我们需要掌握这些基础知识。[PageSpeed 5.0](https://developers.google.com/speed/docs/insights/release_notes) 是之前的一个完整的修订版。现在由 Lighthouse [CrUX](https://developers.google.com/web/updates/2017/12/crux) 提供技术支持(Chrome 用户体验报告部)。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

掌握这些基础知识
=》
掌握些基础知识


If you aren’t already preloading your fonts or optimising for critical requests, that is an excellent place to start a performance journey. Our article, [The Critical Request](https://calibreapp.com/blog/critical-request/), explains in great detail how the browser fetches and renders critical resources used to render your pages.
如果你还没有预加载你的字体或者优化那些可优化的请求,那从这里入手会是一些很好的切入点。我们的文章,[可优化的请求](https://calibreapp.com/blog/critical-request/),详细说明了浏览器针对你的页面是如何发起请求以及渲染可优化资源的。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果你还没有预加载你的字体或者优化那些可优化的请求
=》
如果你还没有对字体进行预加载或者优化那些关键请求

这里应该翻译成关键请求,比如从后台拉取首屏要用到的数据的请求,就最好提前加载。下同


Google’s newly updated search console, Lighthouse and PageSpeed Insights are a great way to get initial visibility into the performance of your pages but fall short for teams who need to continuously track and improve the performance of their pages.
Google 最近更新了搜索控制台,Lighthouse PageSpeed Insights 针对你的页面的首屏的性能分析有独到之处,但是对于那些需要持续跟踪页面来提升页面性能的团队来说,就显得捉襟见肘了。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Google 最近更新了搜索控制台,Lighthouse 和 PageSpeed Insights 针对你的页面的首屏的性能分析有独到之处
=》
Google 最近更新的搜索控制台、Lighthouse 和 PageSpeed Insights 都对你分析页面的首屏性能有独到之处


[Continuous performance monitoring](https://calibreapp.com/features) is essential to ensuring speed improvements last, and teams get instantly notified when regressions happen. Manual testing introduces unexpected variability in results and makes testing from different regions as well as on various devices nearly impossible without a dedicated lab environment.
[连续的性能监控](https://calibreapp.com/features) 可以保证速度优化,当页面完成回归的时候团队会立刻知晓。人为的测试会对结果引入大量的不可预期的变量,在不同区域、不同设备上的测试在没有专业的实验室环境下几乎是不可能完成的。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

连续的性能监控
=》
持续的性能监控


[Continuous performance monitoring](https://calibreapp.com/features) is essential to ensuring speed improvements last, and teams get instantly notified when regressions happen. Manual testing introduces unexpected variability in results and makes testing from different regions as well as on various devices nearly impossible without a dedicated lab environment.
[连续的性能监控](https://calibreapp.com/features) 可以保证速度优化,当页面完成回归的时候团队会立刻知晓。人为的测试会对结果引入大量的不可预期的变量,在不同区域、不同设备上的测试在没有专业的实验室环境下几乎是不可能完成的。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

当页面完成回归的时候团队会立刻知晓
=》
当页面又变差的时候团队也会立刻知晓

regression,退化,回归(到优化前的性能差的样子)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

修改完成了哈,多谢提出的宝贵意见


### Related Articles
### 相关文章

* [About Time to Interactive](https://calibreapp.com/blog/time-to-interactive/)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这几篇文章的标题可以考虑翻译下 ^-^

@weberpan
Copy link
Contributor

@Jerry-FD 提了点意见,供参考哈

@leviding leviding added enhancement 等待译者修改 and removed 正在校对 labels Jul 20, 2019
@leviding
Copy link
Member

@Jerry-FD 有空可以修改啦

修改校对
@Jerry-FD
Copy link
Contributor Author

@leviding 修改校对完成了

@leviding leviding added 标注 待管理员 Review and removed enhancement 等待译者修改 labels Jul 21, 2019
Copy link
Member

@leviding leviding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

小问题注意下

> * 原文作者:[Ben Schwarz](https://calibreapp.com/blog/author/ben-schwarz)
> * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接:[https://github.com/xitu/gold-miner/blob/master/TODO1/how-pagespeed-works.md](https://github.com/xitu/gold-miner/blob/master/TODO1/how-pagespeed-works.md)
> * 译者:
> * 译者:[Jerry-FD](https://github.com/Jerry-FD/)
> * 校对者:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

请添加校对者信息


Lighthouse will apply a 0 – 100 scoring model to each of these metrics. This process works by obtaining mobile 75th and 95th percentiles from [HTTP Archive](https://httparchive.org/), then applying a `log normal` function.
Lighthouse 会针对这些指标运用一个 0 – 100 的分数模型。 这个过程会收集移动端第 75 和第 90 百分位的 [HTTP 档案](https://httparchive.org/),然后输入到 `对数正太分布` 函数(校对者注:这样的话只要性能数据低于25%的线上移动端页面,也就是排位在75%以下,都给0分,而只要比95%的移动端页面得分高,就的满分)。。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Lighthouse 会针对这些指标运用一个 0 – 100 的分数模型。 这个过程会收集移动端第 75 和第 90 百分位的 [HTTP 档案](https://httparchive.org/),然后输入到 `对数正太分布` 函数(校对者注:这样的话只要性能数据低于25%的线上移动端页面,也就是排位在75%以下,都给0分,而只要比95%的移动端页面得分高,就的满分)
Lighthouse 会针对这些指标运用一个 0 – 100 的分数模型。 这个过程会收集移动端第 75 和第 90 百分位的 [HTTP 档案](https://httparchive.org/),然后输入到 `对数正太分布` 函数(校对者注:这样的话只要性能数据低于 25% 的线上移动端页面,也就是排位在 75% 以下,都给 0 分,而只要比 95% 的移动端页面得分高,就的满分)。


You may be wondering how the weighting of each metric affects the overall performance score. The Lighthouse team [have created a useful Google Spreadsheet calculator](https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0) explaining this process:
你可能想知道究竟这每一个指标的权重是如何影响整体得分的。 Lighthouse 团队[打造了一款实用的 Google 电子表格计算器](https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0)来阐述具体的细节:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
你可能想知道究竟这每一个指标的权重是如何影响整体得分的。 Lighthouse 团队[打造了一款实用的 Google 电子表格计算器](https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0)来阐述具体的细节:
你可能想知道究竟这每一个指标的权重是如何影响整体得分的。Lighthouse 团队[打造了一款实用的 Google 电子表格计算器](https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0)来阐述具体的细节:


Using the example above, if we change (time to) interactive from 5 seconds to 17 seconds (the global average mobile TTI), our score drops to 56% (aka 56 out of 100).
使用上面的例子,如果我们把可交互时间从 5 秒 变为 17 秒 (全球移动端平均 TTI), 我们的分数会降低到 56% (也就是100分之中的56分)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
使用上面的例子,如果我们把可交互时间从 5 秒 变为 17 秒 (全球移动端平均 TTI), 我们的分数会降低到 56% (也就是100分之中的56分)。
使用上面的例子,如果我们把可交互时间从 5 秒 变为 17 秒 (全球移动端平均 TTI),我们的分数会降低到 56% (也就是 100 分之中的 56 分)。

* Modern JavaScript tooling (like Webpack) can break-up large JavaScript applications into a series of small bundles that are automatically loaded as a user navigates. This approach is known as [code splitting](https://webpack.js.org/guides/code-splitting/) and is **extremely effective in improving TTI.**
* [Service workers will cache the bytecode result of a parsed + compiled script](https://v8.dev/blog/code-caching-for-devs). If you’re able to make use of this, visitors will pay a one-time performance cost for parse and compilation, after that it’ll be mitigated by cache.
* 检查并移除对你的用户来说并不需要的 polyfills。
* 搞清楚每一个第三方 JavaScript 库所花费的时间。 使用 [webpack-bundle-analyser](https://www.npmjs.com/package/webpack-bundle-analyzer) 或者 [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) 来可视化分析他们的大小。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* 搞清楚每一个第三方 JavaScript 库所花费的时间。 使用 [webpack-bundle-analyser](https://www.npmjs.com/package/webpack-bundle-analyzer) 或者 [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) 来可视化分析他们的大小。
* 搞清楚每一个第三方 JavaScript 库所花费的时间。使用 [webpack-bundle-analyser](https://www.npmjs.com/package/webpack-bundle-analyzer) 或者 [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) 来可视化分析他们的大小。

* [Service workers will cache the bytecode result of a parsed + compiled script](https://v8.dev/blog/code-caching-for-devs). If you’re able to make use of this, visitors will pay a one-time performance cost for parse and compilation, after that it’ll be mitigated by cache.
* 检查并移除对你的用户来说并不需要的 polyfills。
* 搞清楚每一个第三方 JavaScript 库所花费的时间。 使用 [webpack-bundle-analyser](https://www.npmjs.com/package/webpack-bundle-analyzer) 或者 [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) 来可视化分析他们的大小。
* 现代 JavaScript 工具(比如 webpack)可以把大的 JavaScript 应用分解成许多小的 bundles,随着用户的浏览而动态加载。这就是所谓的 [code splitting](https://webpack.js.org/guides/code-splitting/),它会**极大地优化 TTI.**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* 现代 JavaScript 工具(比如 webpack)可以把大的 JavaScript 应用分解成许多小的 bundles,随着用户的浏览而动态加载。这就是所谓的 [code splitting](https://webpack.js.org/guides/code-splitting/),它会**极大地优化 TTI.**
* 现代 JavaScript 工具(比如 webpack)可以把大的 JavaScript 应用分解成许多小的 bundles,随着用户的浏览而动态加载。这就是所谓的 [code splitting](https://webpack.js.org/guides/code-splitting/),它会**极大地优化 TTI**


To successfully uncover significant differences in user experience, we suggest using a performance monitoring system (like [Calibre](https://calibreapp.com/)!) that allows for testing a minimum of two devices; a fast desktop and a low-mid range mobile phone.
为了较好的展示用户体验的差异性,我们建议使用监控系统(比如 [Calibre](https://calibreapp.com/)!) ,它可以测试页面在两个不同设备上的最小评分;一个较快的桌面端设备和一个中等速度的移动端设备。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
为了较好的展示用户体验的差异性,我们建议使用监控系统(比如 [Calibre](https://calibreapp.com/)!) ,它可以测试页面在两个不同设备上的最小评分;一个较快的桌面端设备和一个中等速度的移动端设备。
为了较好的展示用户体验的差异性,我们建议使用监控系统(比如 [Calibre](https://calibreapp.com/),它可以测试页面在两个不同设备上的最小评分;一个较快的桌面端设备和一个中等速度的移动端设备。


## What about the other metrics?
## 其他的指标呢?
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## 其他的指标呢?
## 其他的指标呢

@leviding leviding added enhancement 等待译者修改 and removed 标注 待管理员 Review labels Jul 21, 2019
修改完毕
@Jerry-FD
Copy link
Contributor Author

@leviding 修改完毕哈

@leviding leviding added 标注 待管理员 Review and removed enhancement 等待译者修改 labels Jul 23, 2019
@leviding leviding merged commit e278786 into xitu:master Jul 23, 2019
@leviding
Copy link
Member

@Jerry-FD 已经 merge 啦~ 快快麻溜发布到 掘金,然后在本 PR 下回复文章链接,方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏,你也可以投稿哈,推荐使用一个好用的插件
专栏地址:https://zhuanlan.zhihu.com/juejinfanyi

@leviding leviding added 翻译完成 and removed 标注 待管理员 Review labels Jul 23, 2019
@Jerry-FD
Copy link
Contributor Author

pingren pushed a commit to pingren/gold-miner that referenced this pull request Jul 31, 2019
* 翻译部分

翻译部分

* 翻译部分

翻译部分

* 翻译部分

翻译部分

* 完成翻译

完成翻译

* 修改译者

修改译者

* 修改校对

修改校对

* 修改校对

修改校对

* 修改完毕

修改完毕
pingren pushed a commit to pingren/gold-miner that referenced this pull request Jul 31, 2019
pingren pushed a commit to pingren/gold-miner that referenced this pull request Jul 31, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Google 的 Pagespeed 的工作原理:提升你的分数和搜索引擎排名
5 participants