你知道谷歌曾经因为页面加载比以前多了20秒而导致流量下降了5%吗？ 

你知道沃尔玛每提升一秒钟页面加载时间，转化率就提升2%吗？ 

以上两个例子足以说明为什么网页应用的性能对于经营成功的企业至关重要。 如今，在这个数字世界中，没有人愿意等待任何东西。我们希望任何应用的可访问性都尽可能快。如果你点击谷歌搜索结果，但几秒钟内没有加载，你就切换到其他选项。在各种组织中，开发应用时，许多开发人员和其他团队成员过于关注设计、内容和数字营销等大事，但他们常常忘记了网络性能的重要性。

用户一旦加载非常慢就会感到沮丧并离开网站。事实上，一项调查发现，40%的人会放弃加载超过3秒的网站。我们也在本博客开头举了两个重要例子。所以，网站的速度肯定会为你的产品、商品、服务以及品牌形象留下积极或负面的印象。优化你的网站以适应各种设备和网站流量非常重要。现在让我们更仔细地看看为什么网页表现对公司如此重要，以及它如何影响企业。

为什么网页速度优化很重要？

我们先假设你的网站速度并不重要......

你知道会发生什么吗？ 

根据Aberdeen Group的研究，页面加载时间每延迟一秒钟，结果是：

页面浏览量减少11%

客户满意度下降16%

转化率下降7%

为了吸引访客，让每隔一秒的销售都对网页应用有意义。加载速度更快的网站能带来更多流量，也带来更多收入。网站获得更好的用户互动、更高的转化率、更高的SEO排名，还有更多好处。 47%的消费者期望网站能在两秒或更短时间内加载，46%的用户不会重访表现不佳的网站。如果用户使用移动设备，可以离开网站，加载时间超过5秒。谷歌的工程师还发现，如果页面加载时间低于0.4秒，搜索结果会更短。

其中一项调查显示，79%的访客不太可能访问有性能问题的网站。此外，52%的购物者表示，更快的网站对网站忠诚度非常重要。 44%的人还表示会告诉朋友网站体验不佳。根据这项调查，你可以想象网站运行缓慢对业务糟糕的影响。

沃尔玛这家知名公司通过改善页面加载时间获得了好处。公司分享了以下数据：

每提升一秒页面加载时间，转化率提升2%。

每提升100毫秒，公司就能实现至多1%的增量收入增长。

Firefox的下载量增长了15.4%，即每年10万次，页面速度提升了2.2秒。

Pinterest将预期等待时间缩短了15%，使搜索引擎流量和注册量增加了40%。

BBC发现，每多加载一秒，他们就会流失10%的用户。

上述所有调查和示例都清楚地展示了更快网站带来的积极影响，以及网站速度较慢带来的负面影响。网站速度优化影响网站成功的关键因素......

转化：意味着让访客做你想让他们做的事。

可见性：指用户找到你网站的难易程度。换句话说，就是谷歌排名结果。谷歌对这个运行缓慢的网站进行了排名调整。排名还考虑了页面的移动版本。

可用性：如果网站表现良好，会带来更好的用户体验，从而带来更高的客户满意度。它还会影响忠实客户的数量。

网站性能优化的技巧与方法

网页应用的性能取决于很多因素。有很多方法和技巧可以让你的网站更快运行。你需要在网页应用的客户端和服务器端同时使用技术。让我们来讨论一些优化你网站的主要技巧或步骤......

1. 缓存与内容分发网络

将网站托管在单一服务器上会增加网站加载时间。每个用户都必须在同一台服务器上发起请求，处理每个请求都需要时间。网站流量过大，页面加载时间更长。而且当用户距离服务器较远时，加载时间会增加，因为信息传输距离更远。解决这个问题的办法是使用CDN。基本上，CDN是服务器上一个地理分布的集群，你可以在这里传输加载互联网内容所需的所有资源，包括HTML页面、JavaScript文件、样式表、图片和视频。CDN将所有这些文件缓存到离用户更近的服务器上，减轻网站的沉重负载，并提升应用速度。

2. 更小化HTTP请求

如果你的网站发出大量HTTP请求，网页加载时间会更长。据雅虎称，网页80%的加载时间都用来下载页面的不同部分，比如图片、样式表和脚本。当访客想访问你网站上的这些元素时，需要更多的HTTP请求，并且渲染页面需要很长时间。

首先，使用 Chrome开发者（左下角）工具中的网络标签，确定有多少HTTP请求。你可以用一些技巧减少请求数量，比如......

不要使用不必要的插件、图片、JavaScript和CSS

把你的资产打包在一起。把JavaScript文件合并成一个，CSS文件也做同样的作。

除非必要，否则不要使用第三方框架

使用精灵图。你可以用精灵在一次请求中传递多张图片。通过使用 CSS 中的背景-位置属性，你可以引用单个图片。

压缩你的HTML、CSS和JavaScript文件。压缩功能是消除文件中不必要的字符。有多种方法和工具可以压缩这些文件，如WillPeavy、JavaScript Minifier或Grunt工具。

3. 减少重定向

为了移动和删除页面或消除链接断裂的问题，你可能使用重定向，但这些重定向会产生更多HTTP请求，从而影响性能。重定向（301,302）会拖慢页面速度，导致网站性能下降。首先，你应该用像Screaming Frog这样的工具检测所有重定向，然后找出哪些在你的网站上是不必要的。去除不必要的重定向，只保留重要的重定向。

4. 启用压缩

据谷歌称，网络世界每天因未压缩的网络内容浪费了99年的人类生命。文件越大，页面加载速度越慢。缩小文件大小是提升页面速度的好方法，所以一定要尽量压缩文件。它减少了HTTP请求，有助于提升网站运行速度。

GZIP是压缩文件有效且常用的技术。它对不同类型的文件表现良好。你可以在服务器层面启用GZIP，并在发送到浏览器前压缩网页、CSS和JavaScript。基本上，它是一个软件应用，允许你在文件中找到相似的字符串或代码实例，然后暂时用更短的字符替换。在用户端，浏览器解压文件并显示原始内容。你可以用 URL GZIP 压缩测试来检查你的网站是否启用了 GZIP。

如果你的网站在 Wordpress 上，可以使用 WP-rocket 或 W3 Total Cache 插件来启用 GZIP 压缩。

启用GZIP压缩的比较好的方式是在Apache或Nginx的服务器层面。

注意：请勿将图片、PDF或其他二进制数据进行GZIP。这些已经压缩了，只会浪费CPU资源。

另一个选择：你也可以用 Brotli 进行压缩，这虽然比较新，但正在市场上越来越受欢迎。

5. 缓存

当用户访问网站时，这些元素会被存储在称为缓存的临时硬盘存储中。下次同一个人访问同一页面时，可以加载页面，无需再向服务器发送 HTTP 请求。这个过程加载页面更快。缓存基本上是将当前网站版本存储在主机上，并一直展示这个版本，直到网站更新。对于缓存页面，无需每次都发送数据库请求。

设置网站缓存取决于你网站运行的平台。如果说到Wordpress，你可以用W3 Total Cache插件轻松启用缓存。你可以通过进入浏览器缓存>“通用设置”，勾选“启用”选项来启用浏览器缓存。对于VPS和专用服务器，你可以通过通用设置启用对象缓存，以加快网站动态元素的运行速度。对于共享主机来说，缓存并不是比较好的选择。对于静态HTML网站，你可以在.htaccess文件中启用缓存。

6. 优化数据库

数据库对网页应用的性能也有巨大影响。 CMS充满了复杂的插件，增加了网页的数据库规模和加载时间。禁用数据库中不需要的插件。WordPress CMS存储帖子、评论、页面以及其他形式的文本和加密数据，这些数据占用大量存储空间。数据库随着时间推移会变得拥挤，开始收集垃圾数据，比如垃圾邮件队列中的评论、未批准的评论、帖子修改、被丢弃的帖子和页面。清除所有这些垃圾数据和无用内容。限制、禁用和删除帖子的修订。不同的CMS有不同的优化技术。对于Wordpress，你可以考虑WP-Optimize。

7. 优化HTML、CSS和JavaScript

脚本总是放在下面。将 JavaScript 属性置于 HTML 文档的 head 标签或顶部附近，会阻挡 HTML 和 CSS 元素的加载过程。为了更好地表现，尽量身体标签关闭前放置。你也可以尝试异步/延迟属性。

通过将所有资源放到外部文件中来使用缓存。这包括跟踪脚本、内联样式等片段，脚本每次请求HTML时都会被下载。

减少DOM元素的数量。

把样式表放在HTML文档顶部。另外，减少选择器的复杂度，用额外的类代替。避免更改CSS中的布局（宽度、高度或左右布局变化）。

使用Chrome开发者工具中的覆盖标签，识别我们真正需要的代码。红色部分高亮的代码不会立即执行。这意味着你可以推迟，等装载完成后再申请。

8. 优化图像

无论是谈论公司标志，还是需要向客户展示产品，图片在网站建设中都扮演着重要角色。一项调查发现，66%的客户希望在购买产品前至少看到3张照片，因此对电商公司来说，图片是至关重要的部分。它会增加用户参与度，但这些文件通常是大文件，因此也会减慢网页的速度。接下来是什么？压缩图像。你可以使用 Compressor.io、JPEGmini、Kraken、WP Smush（针对WordPress）、TinyPNG等工具来压缩图片而不影响画质。你也可以结合使用Optimus和一个API，该API专注于无损和有损图像压缩的结合。

使用HTML响应式图片和属性。它会根据用户显示属性调整图像大小。

当质量优先且上传前不需要修改图像时，使用JPG。动画视觉效果用GIF。对于图标、标志、插图、标识和文本，请使用PNG格式。

当你在网站上展示图片时，尽量让它们的自然大小与最终显示尺寸相匹配。如果图片的更大宽度永远不会超过300像素，那么你的尺寸也不应该超过<>像素。将图片裁剪到合适的尺寸，并使用浏览器调整大小功能，通过设置固定宽度和自动高度指令，使图片响应式。

结论

我们已经讨论了8种技巧，但仍有一些技巧你应该掌握，以提升网页的性能。你可以通过选择合适的托管服务、优化字体、使用预取技术（链接预取、DNS 预取、预渲染）、简约框架、热链接保护以及缩短到头一个字节的时间来提升网站性能。