欧易

欧易(OKX)

国内用户最喜爱的合约交易所

火币

火币(HTX )

全球知名的比特币交易所

币安

币安(Binance)

全球用户最多的交易所

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

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

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

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

相关资讯

提高网站权重方法网站推广SEO优化网站关键词排名

网站优化买链接,SEO网站优化买外链。链接是长期优质的 没有做不上去的关键词,您无需到处购买链接 质量高:所有站点都是运营中的站点,非站群,垃圾站! 网站SEO优化买链接就来!(爱链接)http://520ipe.cnSEO在优化网站时,常

优化网站都做什么?如何优化网站?怎么样做优化网站工作?

小匠每次在朋友圈发主营业务“优化网站、网站建设、seo优化、软件开发”的时候,都会有朋友咨询小匠如何优化网站。随着越来越多的朋友对网站如何优化地重视,使得小匠感觉到,应该写一篇文章来简单的谈一下如何优化网站了。小匠将从网站自身因素、网站的浏

网站优化怎么做,如何通过网站SEO优化让网站排名

网站页面如何人搜索引擎收录以及有排名,都是每个公司非常重视的一个问题,那么该怎么做好网站优化,通过网站SEO优化技术让网站收录起来并获得排名呢,掌握网站SEO优化技巧,才能够提供好的内容让用户与搜索引擎喜爱,这样网站才会显得重要,以下内容就

成都网站推广|网站推广如何引流?如何使网站推广更有效?

网站推广如何引流?如何使网站推广更有效?  网站推广引流是所有企业都可能面临的重大问题,也是运营中最重要的问题之一。因为只有在网站上有足够的流量的情况下,才能实现产品的转换,才能实现企业的发展。  那么,在互联网竞争越来越激烈的几天里,网站

妥妥网站建设:网站制作网站策划怎么做

在网站建设之前,企业需要经过一个规划阶段才能开始后续工作,否则很容易失败。一个好的网站制作策划不仅需要有效展示企业的相关信息,还需要及时满足用户的需求,丰富用户体验。如果企业网站想要满足这些要求,需要遵循以下三条建议。 1、做好市场调研

衡水老白干高质发展之路:传承千年文化基于传统更优于传统

人民网-酒业频道千年传承百年香醅,独创小麦中温制曲法,地缸发酵小灶精酿……河北衡水老白干千年文化传承与企业高质量发展之路有何奥秘?11月13日至14日,“乘风破浪 高质前行——全国百家媒体走进衡水老白干”活动在河北衡水老白干酒厂举行,全国百

叶檀:一家传统服装企业深耕传统行业却找到了国际化时代的正确姿势

丨导 读没有不好的行业,只有不思进取的企业。都说传统行业难做,不知何时起,服装、玩具等中国制造成了“低端”和“廉价”的代名词。但是,优秀的品牌通过标准化管理、供应链整合,以及品牌建设等,寻找成本最低、消费者最多的地方,这才是深耕传统行业的正

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

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

免费的seo网站如何通过网站SEO排名优化

 对做SEO优化排名的人来说,网站有个好的标题相当是个富二代,一出生就已有优势。那么如何选择“出身”,就是每个站长需要做的事了。关于一个新站来说网站架构和关键词规划影响着网站整体运作,推行带链接有效进步收录,优化大到网站整体规划,小到能够从

如何利用SEO的所有知识提升网站排名-利用免费插件更效率提升网站

SEO 的意思是“搜索引擎优化”。如果您为自己的内容感到自豪并认为它会极大地帮助他人,那么您可以确定您的内容会在 搜索引擎上 上获得排名。你必须知道和相信的一件事是你不能用捷径欺骗搜索引擎。最终,您的网站将受到处罚并失去您在 搜索引擎 上的

网站地图在线生成-支持任意网站地图生成

网站地图在线生成,什么是网站地图。网站地图的作用是什么,很多网站的链接比较多层次也比较深。搜索引擎是很难爬取到你的网站的。为了给搜索引擎指路,增加网站重要的内容收录。不同的搜索引擎有不同的网站地图格式,今天给大家分享一款免费的网站地图生成器

网站建设运营之网站seo流程

网站建设只要和网站运营结合在以前的时候这个动作的价值性才能有效的体现出来,网站建设就像是制造一个枪支一样,而网站的运营就像是这个大杀器中的弹药一样,对于一个没有弹药的枪支来说是没有杀伤力的,对于一个不能运营的网站来说,即便建设出来也有没有任

网站作为互联网产品如何平衡艺术与商业,网站设计需要掌握哪些思维?

相信网站视觉设计的重要性大家应该都清楚,对于访客来说,网站的框架、交互逻辑等这些都是其次的,访客首先感受到的是网站的视觉设计,同时通过视觉也能够直观地表达出我们所要传递的价值。因此,我们在建设网站时,一方面需要确保网站的视觉效果足够优秀,另

日媒:黑客组织KillNet攻击日政府网站第二天,东京和大阪地铁网站也瘫了

来源:环球网 【环球网报道 记者 张晓雅】在日媒发现“亲俄罗斯”的黑客组织KillNet 6日宣布对日本政府网站实施网络攻击后,共同社最新消息称,东京地铁公司和大阪地铁公司的网站也于当地时间7日晚无法访问,“这似乎是日本遭受网络攻击的第二天

网站建设费用,网站建设多少钱?

网站建设多少钱,对于大多数有网站建设需求的用户来说,是十分想了解的问题,但实际上,网站建设费用根本没有一个定数,因为有太多因素制约,因此,我们要通过下文来阐述,网站建设费用,网站建设多少钱这个问题:1.功能性要求首先你对网站功能性有什么要求

友情链接

网址导航 SEO域名抢注宝宝起名网妈妈知道币圈桂林交友婚恋网渔具网郭富城歌迷网智能门锁品牌网丽家宝贝母婴莫斯科旅游网南方航空股票泰勒梅球杆早教加盟网太阳镜品牌网董氏起名神器刘三姐故里景区生肖虎运势网纹绣知识网西藏旅游网
网站快速建站-企业网站建设方案、网站制作公司、网页制作公司、网站开发、快速建站、阿里云智能建站、自助建站免费建站平台、一键建站系统、一键建站、一键建站工具、凡科建站、凡科建站平台、建站网站系统、免费seo在线优化、免费开源网站、免费个人网站制作、永久免费自助建站系统。
网站开发快速建站 22112.cn ©2022-2028版权所有