只需三种手段,将传统的网站的性能提高 24%

时间:2022-09-23 18:23:03 | 浏览:679

对于技术人而言,性能优化是一个亘古不变的话题。而随着框架、语言、库等工具的不断演进,传统的优化手段是否仍然适用?在创新的环境之下,又有哪些较为捷径的优化手段?在本文中,作者将以一年前的网站为测试对象,尝试了最新的三种手段,有效地将网站性能提

对于技术人而言,性能优化是一个亘古不变的话题。而随着框架、语言、库等工具的不断演进,传统的优化手段是否仍然适用?在创新的环境之下,又有哪些较为捷径的优化手段?在本文中,作者将以一年前的网站为测试对象,尝试了最新的三种手段,有效地将网站性能提高了 24%,接下来,我们将一探究竟。

作者 | SwissGreg

译者 | 弯月,责编 | 屠敏

出品 | CSDN(ID:CSDNnews)

以下为译文:

上周末,我们提升了一年以前构建的一个网站的性能。

我们的这个网站是为瑞士的软件开发人员提供的求职平台,该网站的性能非常重要,原因有如下两个:

  1. 良好的用户体验:既包括网站的加载时间(以及与用户交互时间),也包括使用该网站时的快捷感。

  2. SEO:在很大程度上,我们的流量依赖于Google搜索,而且众所周知Google更加偏向性能出众的网站(Google甚至在搜索控制台中显示了速度报告)。

如果你在网上搜索“网站性能基础”,就会发现很多小技巧,例如:

  • 使用CDN(内容交付网络)提供能够缓存一段时间的静态文件。

  • 优化图像尺寸和格式。

  • 使用GZIP或Brotli压缩。

  • 减少非关键JS和CSS代码的大小。

我们实现了很多容易达成的目标。

另外,由于我们的主页基本上是一个可过滤的列表(用React编写),所以我们引入了react-window,可以一次只渲染10个列表项(而不是250个)。

上述技巧帮助我们极大地提高了性能,然而在查看了速度报告后,感觉我们还有进步的空间。

因此,我们开始研究更多不寻常的方式来提升网站的速度,最终我们取得了巨大的成功!这是本周的报告:

这份报告显示,网站的整体加载时间减少了24%!

那么,为了取得这样的成果,我们究竟做了哪些努力呢?

1. 针对JSON数据采用rel ="preload"

index.html文件中加入的这一行代码可以指示浏览器:在JavaScript调用AJAX/fetch请求JSON数据前,就应该获取这些数据。

当实际需要使用数据时,就可以从浏览器缓存中读取,而不必再次获取数据。这个技巧帮助我们节省了大约0.5秒的加载时间。

本来我们可以早点实现这个技巧,但是Chrome浏览器中曾经有一些问题导致重复下载。不过如今看来已经改好了。

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

在实现JSON预加载后,我们发现下载职位列表仍然是瓶颈(从服务器获取响应大约需要0.8秒)。因此,我们决定研究服务器端的缓存。首先,我们尝试了节点缓存,但是令人惊讶的是,获取时间并没有缩短。

值得一提的是/api/jobs端点是一个简单的getAll端点,因此没有改进的余地。

但是,我们决定更进一步,通过一个JS变量简单地构建自己的缓存。如下所示:

此处唯一没有列出的是POST /jobs端点,它会删除缓存(cachedJobs =undefined)。

如此简单的一段代码,就削减掉了0.4秒的加载时间!

3. 削减CSS和JS包的大小

最后我们查看了网页需要加载的CSS和JS包的大小。我们注意到"font-awesome"这个包的大小超过了70kb。

然而,我们仅使用了其中大约20%的图标。

我们是如何处理的?我们通过icomoon.io选择了需要使用的图标,并创建了自定义的精简图标包。

因此,节省了50kb!

以上三种不寻常的技巧帮助我们将网站的加载时间缩短了24%。甚至有报告显示,网站的加载时间降低了43%(降低至1-2秒)。

目前我们对这些提升感到非常满意。但是,我们相信我们可以做得更好!

如果你知道其他不寻常的技巧可以提供帮助,那么敬请在下方的评论中留言

原文
https://dev.to/swissgreg/how-we-improved-website-performance-by-24-with-3-unusual-changes-9ei

本文为 CSDN 翻译,转载请注明来源出处。

【End】

相关资讯

这15个免费好用的神级科研网站,从看文献到写文章都能用

工欲善其事,必先利其器。对于科研人来说,一个好用的科研工具,可以帮助我们在科研道路上大大提升工作效率,比如各种科研网站。读研三年,经过笔者的亲身体验,下面这些免费好用的科研网站,你一个都不能错过!(一)查找文献① PubMedPubMed

推荐5个超级厉害的网站,一个相当于几十个

1:大木虫学术导航http://www.4243.net/大木虫学术导航是一个功能非常强大的学术导航网站,它包含了1、文献下载神器、所有学术网站、科研基金汇总、各项专利查询、科研使用工具、文档搜索导航、国家组织机构、科研信息交流等网站。2:

互联网思维加码传统制茶,95后郑大学子回乡助信阳毛尖“破圈”丨非遗青春潮

为了挖掘新一代非遗人的精神,顶端新闻联合河南省非物质文化遗产保护中心,推出“非遗青春潮”系列策划,寻找一批青年非遗人,看他们如何练就非遗“手艺”,传承“守艺”之心。第三期的主角,是来自河南省信阳市的肖珺景(顶端号:肖珺景),看她如何将传统炒

企业网站建设的详细流程

网站是一家企业的名片,严格来讲,每一家正规的企业如要顺利开展业务,网站是必不可少的。市面上的网站建设信息铺天盖地,那么真正的企业网站建设流程是什么样的呢?下面,我就按照时间顺序来讲解一下正规的企业网站建设流程。普升网站建设公司企业网站建设流

网站建设的基本步骤

如何创建网站?网站建设包括域名注册查询、网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。创建网站并不是个简单的工作,需要网站策划人员、美术设计人员、WEB程序员等共同完成的一

赋能传统工艺,西凤酒“数字智酿”提速

时间进入2022年“下半场”,西凤酒在市场上动作频频。8月,西凤酒股份公司副总经理、营销公司总经理周艳花接连拜访西藏、山东、浙江等地的合作商。随之举行了“中国红·红西凤 凤香盛宴 红动中国”系列活动。在业界看来,这体现出西凤酒进一步强化布局

文玩界,传统的桃核真的就比金刚“低贱”么?

我有一串桃核手串,价格不贵,盘玩了很久,对它甚是喜欢。有一天,我遇到几个通过文玩结识的朋友,他们看了我的串,一直啧啧嘴,用惋惜的口气跟我说:盘的真好,只可惜是串桃核,要是金刚就值钱了。我听了心里很不舒服,为什么在多数人眼里,桃核总是要低金刚

友情链接

SEO域名抢注宝宝起名网妈妈知道币圈梧州六堡茶官网野生何首乌网水龙头品牌网紫燕食品股票河内旅游网南宁旅游网董氏起名神器捷克旅游网美赞臣奶粉评价网大健康项目网金鱼养殖论坛六盘水新闻头条网山西汾酒A股美津浓球杆免费素材网
网站快速建站-企业网站建设方案、网站制作公司、网页制作公司、网站开发、快速建站、阿里云智能建站、自助建站免费建站平台、一键建站系统、一键建站、一键建站工具、凡科建站、凡科建站平台、建站网站系统、免费seo在线优化、免费开源网站、免费个人网站制作、永久免费自助建站系统。
网站开发快速建站 22112.cn ©2022-2028版权所有