files/zh-cn/learn/performance/web_performance_basics/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

---
title: Web performance basics
slug: learn/Performance/Web_Performance_Basics
translation_of: Learn/Performance/Web_Performance_Basics
---
<p>有很多的<a href="https://developers.google.com/web/fundamentals/performance/why-performance-matters/">理由</a>告诉你为什么你的网站需要尽可能好的性能。下面是关于最佳实践，工具，API以及链接的简明介绍，它为每个主题提供了更多的信息。意识到对用户来说什么是真正重要的也至关重要，他可能不是绝对意义上的时间而是<a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/perceived_performance">用户感知的时间</a>。</p>

<h4 id="最佳实践">最佳实践</h4>

<ul>
 <li>从学习浏览器的<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">关键渲染路径</a>开始。了解这些会帮助你通晓如何提升浏览器的性能。</li>
 <li>使用<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">resource hints</a>例如<code>rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload</code></li>
 <li>压缩Js代码至<a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">最小</a>。只为当前页面加载需要使用到的js代码</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance">CSS</a>性能因素 </li>
 <li>在你的服务器（或者CDN）上使用 <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/HTTP2">HTTP/2</a>协议</li>
 <li> 使用CDN托管静态资源，这样可以显著减少加载时间</li>
 <li> 使用<a href="https://www.gnu.org/software/gzip/" rel="nofollow noopener">gzip</a>, <a href="https://github.com/google/brotli" rel="nofollow noopener">Brotli</a> 或者 <a href="https://github.com/google/zopfli" rel="nofollow noopener">Zopfli</a>压缩您的资源</li>
 <li> 图片优化（如果可以，尽可能使用css动画或者svg）</li>
 <li> 在超出应用视口范围的部分使用懒加载，如果你这么做了，为SEO制定一个后备计划（例如为bot traffic 渲染整个页面）</li>
</ul>

<h4 id="工具">工具</h4>

<ul>
 <li>学习使用<a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Firefox Dev Tools</a>来分析您的网站。</li>
 <li><a href="https://developers.google.com/speed/docs/insights/v5/about">Pagespeed Insights</a> 可以分析您的页面并且给出一些通用的建议来提升网站性能。</li>
 <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> 可以给您一份有关您网站的包括性能，SEO和可访问性等多个方面的详细分类。</li>
 <li>使用 <a href="http://webpagetest.org/">Webpagetest.org</a>检测页面在不同真实设备类型和地点时候的速度。trics.</li>
 <li>定义一个 绩效预算<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Performance_budget"> </a>（<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Performance_budget">performance budget</a>）。</li>
</ul>

<h4 id="APIs">APIs</h4>

<ul>
 <li>收集用户指标通过 <a href="https://github.com/akamai/boomerang">https://github.com/akamai/boomerang</a> 。</li>
 <li>或者通过<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/performance">window.performance.timing</a> 直接收集。</li>
</ul>

<h4 id="不该做的事（坏的实践）">不该做的事（坏的实践）</h4>

<ul>
 <li>  将任何东西都下载下来</li>
 <li>  使用未经压缩的媒体文件</li>
</ul>