松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › 性能优化 › 只需三种手段,将传统的网站的性能提高 24%

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

迦娜王
1年前性能优化
261 0 0

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

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

作者 | SwissGreg

译者 | 弯月,责编 | 屠敏

出品 | CSDN(ID:CSDNnews)

以下为译文:

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

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

  1. 良好的用户体验:既包括网站的加载时间(以及与用户交互时间),也包括使用该网站时的快捷感。
  2. SEO:在很大程度上,我们的流量依赖于Google搜索,而且众所周知Google更加偏向性能出众的网站(Google甚至在搜索控制台中显示了速度报告)。

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

  • 使用CDN(内容交付网络)提供能够缓存一段时间的静态文件。
  • 优化图像尺寸和格式。
  • 使用GZIP或Brotli压缩。
  • 减少非关键JS和CSS代码的大小。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

此处唯一没有列出的是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

网站性能优化
0
不给队友拖后腿!团队开发中Git最佳实践
上一篇
推荐 11 个好用的 JS 动画库
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
2月前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
2月前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
2月前
新手必看的前端项目去中心化和模块化思想
2月前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
炫技,从 12.67s 到 1.06s 的网站性能优化实战
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
233 喜欢
  • 0
  • 0
  • Top