我们是怎样将网站加载时间减少 24% 的?

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

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

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

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

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

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

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

  • 优化图片尺寸和格式;

  • 使用 Gzip 或 Brotli 压缩;

  • 减少非关键的 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 接口,因此没有太多的优化空间。

于是,我们决定使用一个 JS 变量来构建自己的简易缓存。它看起来如下:


这里唯一没有显示的是 post /jobs 接口,这个接口删除了所有的缓存(cachedJobs = undefined)。

就这么简单!又减少了 0.4s 的加载时间!


3 移除不必要的字体

最后动手的是我们加载的 CSS 和 JS 打包文件的大小。我们注意到,非必要的 font-awesome 文件超过 70KB。

同时,我们可能只使用其中 20% 的图标。

如何解决这个问题的呢?我们使用 icomoon.io 来选择使用的图标,然后创建我们瘦身过的图标包。

结果呢?节省了 50KB!

这 3 项不寻常的改动帮助我们将网站的加载时间加速了24%。或者,如其它一些报告显示的,加速了 43%(达到了 1.2s)。

我们对这些改动很满意。但是,我们相信仍然有优化的空间。

如果你有不寻常的技术可以帮助我们——请告知我们!


4 加分点

在应用上述优化之后,我们注意到瓶颈仍然是获取 /api/jobs 接口以及下载初始 HTML 的时间。其原因是,初始 HTML 以及这个 API 是由位于欧洲的一个单点服务器提供的。

我们寻找可行的解决方案,然后决定采用将一切都缓存在服务器层级的方案。

使用 Cloudflare,默认只有静态资源会被缓存。但是,通过增加一个简单的页面规则,就可以启用缓存任何页面或资源的功能:


这使得我们的网站可以直接由 Cloudflare 的 CDN 提供服务,甚至不需要访问服务器。

结果呢?

在世界各地的加载时间减少了 50%!

现在,你可能对缓存初始 HTML 和动态 API 的想法将信将疑,但请考虑:首先,我们的接口不会频繁改动——每天批量添加一次新的职位;其次,我们在改动发生时,在程序中清除了缓存。

这使得我们可以在不到 1 秒的时间内将 SwissDev Jobs 服务到世界各地!


5 作者介绍

SwissGreg,白天是程序员,晚上是独立黑客——SwissDevJobs.ch。

原文链接:https://hackernoon.com/how-we-improved-our-website-loading-time-by-24percent-with-3-unusual-changes-uv1l361d

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6937

网站做宣传的香港云服务器优势分析

网站是企业互联网宣传的平台,一直被很多企业关注。 每个人都在寻找使网站内容布局更具吸引力的方法,但忽略了重要问题。 如果您的站点空间不足,客户往往无法打开该站点。 这样的网站不会引人注目

什么是网站劫持?

百度搜索流量事件是网站劫持的其中一种表现。网站劫持还会导致以下问题:用户输入正常网址跳转到其它地址,导致用户无法正常访问,网站流量受损;通过泛域名解析生成大量子域名共同指向其它地址,跳转到非法网站,造成网站权重降低;

个人网站如何实现盈利?

其实还有很多,关键在于你如何利用手边的资源了,不过不下大本,甭想赚多,说不定赚的连饭钱都不够,很多个人网站都是开了关,关了开,每年都有成堆的网站倒闭关站,都是不赚钱,没内容,坚持不下来。

网站中内链和外链的区别是什么?

网站内链就是本网站内部页面之间的链接。最通俗的说法是自己在自己的网站上添 加链接,就是在同一网站域名下的各内容页面间的互相链接。外链就是指在别的网站导入自己网站的链接。

互联网上有多少个网站?

在短短的十来年中,网站数量已从Internet上的9,200万增加到超过10亿。互联网不再仅仅是寻找信息或休闲娱乐的场所,也不只是一种工作工具,互联网就是金钱,是社会的变革。

值得收藏的配色网站

Material Palette是一款提供Material Design配色的线上工具,它的用法很简单,你只要找出想要搭配的两种颜色,它就会显示出两种颜色搭配在一起的效果预览,并提供你较深或较浅的颜色选项

网站主题和内容的三个类型

网站主题和内容应该是最先要考虑的。这决定了你后面很多的事情和选择及操作。我大致将其分为三个类型:

20个Web前端开发工程师必看的国外网站

Codewars 提供了大量由他们自己的社区提交和编辑的编程挑战,在这里,你可以使用多种编程语言像打游戏升级一样进行挑战。CodeFights 提供了一组编程挑战,在这里,你可以在在线编辑器中进行挑战。

网站建设重要吗,企业建设网站的作用是什么?

企业对网站建设这事,都是非常平常的事,因为在互联网时代,企业想在互联网上获得品牌曝光,与用户,那么网站就是最好的方法,所以企业都会建设一两个网站来达到在互联网曝光与获取用户的方法

网站打不开的原因有那些呢?

网络21世纪不可缺少的东西。相信大家都碰到过网站打不开的事,那么打不开的原因有那些呢,有该怎么去解决呢?笔者来告诉你。软件多少、稳定和软件的正确配置,都会影响到服务器环境

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广