减少网页加载时间的6个技巧【10bet】

来源:http://www.chinese-glasses.com 作者:Web前端 人气:200 发布时间:2020-03-16
摘要:时间: 2019-11-19阅读: 89标签: 网站 本文针对 SwissDev Jobs网站的优化实践,介绍我们是如何把网站加载时间减少24%的。上周,我们有机会对 SwissDev Jobs 网站性能进行了微调。 引用来源:CS

时间: 2019-11-19阅读: 89标签: 网站

10bet 1

本文针对 SwissDev Jobs 网站的优化实践,介绍我们是如何把网站加载时间减少24% 的。上周,我们有机会对 SwissDev Jobs 网站性能进行了微调。

引用来源:CSDN公众号原文:6 Ways to Decrease Your Web Page Load Time作者 | Jeffrey Walker翻译 | Vincent在Web世界中,速度才是最重要的。本文介绍了何使用6个简单的Web性能技巧来提高网页的加载速度。根据安伯丁集团的一份研究结果显示,页面加载时间如果延迟了1秒,那么页面浏览量就会减少11%,客户满意度会下降16%,转化率下降7%。亚马逊的研究结果也证明了这一点,他们的报告结果显示,只要网站的速度每提高100毫秒,就会增加1%的收益。还可以引用很多其它的例子,但所有的例子都很清晰的揭示了同一个很简单的道理,那就是网页加载时间是金钱。这就是为什么企业和个人都需要竭尽所能来减少网页加载时间。记住,时间就是金钱——从字面上来说,时间往往就取决于那几微秒。这里有6种技巧来可以帮助你大大减少网页加载时间,随之而来的转化率也会相应增加。如何提高网站速度1. 优化图片统计数据显示,如果网站在3秒钟之内还没有加载成功,那么大多数用户都会选择关闭。由于图片在Web页面的可下载字节空间中占大多数,所以如果能够成功的对图片进行优化,那么Web页面的下载时间也会大大的减少。确保图片正确优化的最佳方法之一是采用正确的大小和格式(JPEG、GIF或PNG)。目标是在不牺牲质量的情况下尽可能减少文件的大小,现在Web上有许多工具可以帮助解决这个问题。2. 试试内容分发网络(CDN)内容分发网络的价值在于它可以获取网站的静态文件,如CSS文件、图片和JavaScript文件,并通过与用户的物理位置更接近的Web服务器来分发这些文件。较短的距离就代表更快的加载时间。CDN的一些代表性的例子有AWS CloudFront、Fastly或Cloudflare。CDN的另一个好处是,通过减少带宽,用户还可以降低由于流量而导致的停机时间中断的风险。无论从哪个方面来看,使用CDN带来的都是双赢的结果。3. 缓存缓存是一种用于临时存储Web页面以减少带宽和提高性能的机制。当访问者到达站点时,站点会提供一个缓存的版本,除非在最后一次缓存中发生了变化。这节省了服务器的时间,并且使事情变得更快。启用浏览器缓存将使重复访问者更快、更快捷。4. 压缩Gzip是一个用于文件压缩的软件应用程序,它就像将你的网站放入一个zip文件中。现在大多数服务器和客户机都支持gzip。当一个兼容gzip的浏览器请求某个资源时,服务器可以在将响应发送到浏览器之前压缩响应。这可以显著减少网站上的时间延迟。5. 保持代码轻巧重要的是尽可能缩小代码的数量,这意味着将HTML、JavaScript和CSS代码库压缩到更少的文件中,以优化它们的运行方式。例如,如果移动站点有5个JavaScript文件,浏览器将会发出5个单独的HTTP请求来获取它们。为了避免阻塞和等待时间,另一种方法是缩小并将这5个文件合并成一个精简的文件。6. 复核虚拟主机另一个减少网站页面加载时间的简单方法是与你的主机提供商核实一下你的包是什么类型的。共享的主机帐户通常包括与其他数十家公司共享服务器空间,这些公司的网站速度受到使用服务器的人数的影响。如果是这种情况,那么可能是时候考虑一个专用服务器,该服务器只供你一个人占用。

之所以要提升 SwissDevJobs.ch 网站性能,主要是有两方面原因:

良好的用户体验——即加载时间更短(且互动性更好)和使用时的愉悦感 ;

SEO—— 我们的流量严重依赖谷歌搜索,而且你也许知道谷歌比较青睐性能良好的网站(谷歌甚至在搜索控制台中引入了速度报告)。

当搜索“website performance basics”时,你会得到许多操作建议,例如:

静态资源使用 CDN 并配置合理的缓存时间;

优化图片尺寸和格式;

使用 Gzip 或 Brotli 压缩;

10bet,减少非关键的 JS 和 CSS 代码的大小。

针对以上这些建议,我们进行了部分改进。另外,由于我们的主页面基本上是一个可过滤的列表(用 React 编写的),我们引入了react-window 来每次渲染 10 个列表项,而不是 250 个。

所有这些都帮助我们极大地提升了网站性能,但从速度报告来看,我们还可以做得更好。

因此我们开始深挖更多不寻常的方法来让网站变得更快... 现在看来,我们非常成功!下面是这周的报告:

这个报告显示,完整的加载时间减少了 24%!

我们是如何做到这一点的呢?

1针对 JSON 数据使用 rel="preload"

这条在 index.html 文件中的简单代码向浏览器表明:它应该在这个资源被来自 JavaScript 的 AJAX 或 Fetch 调用实际请求前获取。

当需要获取数据时,它会从浏览器缓存中读取而不是重新获取。这帮助我们减少了大约 0.5s 的加载时间。

我们很早就想实现这一点了,但是过去在 Chrome 浏览器中一直有问题而导致重复下载两次。而现在它可以正常生效了。

2在服务端实现超简单的缓存

在实现了 JSON 预加载后,我们发现职位列表的下载仍然是瓶颈所在(等待 0.8s 从服务器获得响应)。因此,我们决定从服务端缓存入手。

首先,我们尝试了 node-cache,但令人吃惊的是,它并没有优化获取时间。

值得一提的是,/api/jobs 接口是一个简单的 GetAll 接口,因此没有太多的优化空间。

本文由10bet发布于Web前端,转载请注明出处:减少网页加载时间的6个技巧【10bet】

关键词:

上一篇:10bet值得关注的 Vue.js开源项目

下一篇:没有了

最火资讯