您当前的位置:首页 > 电脑百科 > 站长技术 > 服务器

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

时间:2019-11-22 11:46:47  来源:  作者:

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

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



Tags:网站   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
随着互联网的普及及技术的改革,现在所有的考试从注册报名,考务文件查询,准考证下载打印、考试成绩查询和各种的信息的发布都是在网上发布的。以下这几个网站,是所有考证人都必须...【详细内容】
2021-12-24  Tags: 网站  点击:(5)  评论:(0)  加入收藏
不会写文章?写文案没灵感,不知道写什么?【网创智慧库】分享给你15个文案高手都在用的高质量文案素材网站,记得收藏保存! 今日热榜今日热榜是一个综合各大平台的热门实时话题排行...【详细内容】
2021-12-24  Tags: 网站  点击:(11)  评论:(0)  加入收藏
对于一些文章页面来说,想要得到提升页面进行整体质量度,除了优化研究文章主体主要内容之外,调用相关分析文章也是企业优化的重点。那么我们具体怎么调用相关文章呢,星宇SEO今天...【详细内容】
2021-12-22  Tags: 网站  点击:(6)  评论:(0)  加入收藏
前言传统的 DDOS 防御通常使用“硬抗”的方式,导致开销很大,而且有时效果并不好。例如使用 DNS 切换故障 IP 的方案,由于域名会受到缓存等因素的影响通常有分钟级延时,前端难以...【详细内容】
2021-12-21  Tags: 网站  点击:(19)  评论:(0)  加入收藏
在最近的一波攻击中,黑客利用多个插件中未修补的漏洞攻击了 160 万个 WordPress 网站。 易受攻击的插件对 WordPress 网站产生了的巨大攻击数据。 Wordfence 最近发现 WordPr...【详细内容】
2021-12-16  Tags: 网站  点击:(9)  评论:(0)  加入收藏
今年以来,国家网信办针对一些粉丝量大、关注度高的网站平台“头部账号”法纪意识淡薄,滥用网上影响力,传播错误导向内容,污染网络生态等突出问题,会同相关部门,指导各地网信办,要求...【详细内容】
2021-12-16  Tags: 网站  点击:(8)  评论:(0)  加入收藏
经常和大家分享PPT技巧,不知道大家有没有进步?今天直接来个重磅分享。你知道,一些大厂的路演、发布会PPT的设计师,平时浏览什么设计网站吗? 作为PPT设计师,平时也会看一些创意设计...【详细内容】
2021-12-15  Tags: 网站  点击:(21)  评论:(0)  加入收藏
据BleepingComputer消息,亚马逊在12月8日宣布,将关闭其运营了25年的全球网站排名系统“Alexa.com”。Alexa.com是亚马逊的子公司,以全球排名系统而闻名,该系统通过分析来自其合...【详细内容】
2021-12-15  Tags: 网站  点击:(7)  评论:(0)  加入收藏
一、背景介绍DirBuster是用来探测web服务器上的目录和隐藏文件的。因为DirBuster是采用java编写的,所以运行前要安装上java的环境。 来看一下基本的使用: ①:TargetURL下输入要...【详细内容】
2021-12-07  Tags: 网站  点击:(28)  评论:(0)  加入收藏
最近发现B2B的海外推广貌似是一个挺大的缺口,很多厂长或老板不了解独立站的流量构成和玩法,无论是自然流量还是付费流量。也衍生了很多培训(咦,这是不是我副业的好机会?)所以这次...【详细内容】
2021-11-11  Tags: 网站  点击:(32)  评论:(0)  加入收藏
▌简易百科推荐
阿里云镜像源地址及安装网站地址https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b111kK44P更新源之前把之前的国外的镜像先备份一下 切换到yumcd...【详细内容】
2021-12-27  干程序那些事    Tags:CentOS7镜像   点击:(1)  评论:(0)  加入收藏
前言在实现TCP长连接功能中,客户端断线重连是一个很常见的问题,当我们使用netty实现断线重连时,是否考虑过如下几个问题: 如何监听到客户端和服务端连接断开 ? 如何实现断线后重...【详细内容】
2021-12-24  程序猿阿嘴  CSDN  Tags:Netty   点击:(12)  评论:(0)  加入收藏
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  有云转晴    Tags:chrome   点击:(7)  评论:(0)  加入收藏
一. HTTP gzip压缩,概述 request header中声明Accept-Encoding : gzip,告知服务器客户端接受gzip的数据 response body,同时加入以下header:Content-Encoding: gzip:表明bo...【详细内容】
2021-12-22  java乐园    Tags:gzip压缩   点击:(9)  评论:(0)  加入收藏
yum -y install gcc automake autoconf libtool makeadduser testpasswd testmkdir /tmp/exploitln -s /usr/bin/ping /tmp/exploit/targetexec 3< /tmp/exploit/targetls -...【详细内容】
2021-12-22  SofM    Tags:Centos7   点击:(7)  评论:(0)  加入收藏
Windows操作系统和Linux操作系统有何区别?Windows操作系统:需支付版权费用,(华为云已购买正版版权,在华为云购买云服务器的用户安装系统时无需额外付费),界面化的操作系统对用户使...【详细内容】
2021-12-21  卷毛琴姨    Tags:云服务器   点击:(6)  评论:(0)  加入收藏
参考资料:Hive3.1.2安装指南_厦大数据库实验室博客Hive学习(一) 安装 环境:CentOS 7 + Hadoop3.2 + Hive3.1 - 一个人、一座城 - 博客园1.安装hive1.1下载地址hive镜像路径 ht...【详细内容】
2021-12-20  zebra-08    Tags:Hive   点击:(9)  评论:(0)  加入收藏
以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过。1、设置复杂密码服务器设置大写、小写、特殊字符、数字...【详细内容】
2021-12-20  网安人    Tags:服务器   点击:(7)  评论:(0)  加入收藏
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  mdong    Tags:Nginx   点击:(7)  评论:(0)  加入收藏
转自: https://kermsite.com/p/wt-ssh/由于格式问题,部分链接、表格可能会失效,若失效请访问原文密码登录 以及 通过密钥实现免密码登录Dec 15, 2021阅读时长: 6 分钟简介Windo...【详细内容】
2021-12-17  LaLiLi    Tags:SSH连接   点击:(16)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条