白话科普系列——网站靠什么提升加载速度?

随着生活节奏的不断加快,时间变得极其宝贵,等待页面加载的时间也随之缩短。这样一来如何留住客户变成了一项重要的考验。而减少页面加载等待时间,加快加载速度,就成了提高用户参与度S,提升业务可靠性的有效策略。

根据 Google 的一项研究,有 40% 的人放弃了某网站,是因为该网站的加载时间超过 3 秒,而页面加载时间增加1 秒,转化就相应减少了 7%。可见,互联网中的每一秒都至关重要。

那么如何提升网站速度呢?可以通过网页“压缩”也就减少网页体积来实现。至于要如何才能压缩网站,我们需要先了解两个算法, Gzip 和 Brotli 压缩算法。

Gzip 压缩算法

Gzip 基于 DEFLATE 算法,它是 LZ77 和霍夫曼编码的组合,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 Gzip 编码是一种用来改进 Web 应用程序性能的技术,它要求 Web 服务器和客户端(浏览器)必须共同支持 Gzip。而当下主流的浏览器,包括 IE6、IE7、IE8、IE9、FireFox、Google Chrome、Opera 等都已经开始支持 Gzip 压缩。可见 Gzip 的使用已经成为了互联网发展的必然趋势。

作为 Internet 上使用非常普遍的一种数据压缩格式,Gzip 对一般纯文本内容可压缩到原大小的 40%,这大大减少了网站文件中重复代码和空白的数量。它还可以提供 9 个压缩级别,可以方便使用者微调压缩量和压缩时间。

在用于提高 Web 应用程序的性能这一点上,Gzip 压缩一直是最受欢迎的。直到另一种压缩算法 Brotli 的出现,它成为了 Gzip 最大的竞争对手。

Brotli 压缩算法

Brotli 是 Google 在 2015 年 9 月推出的一种压缩算法,Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此与其他压缩算法相比,Brotli 有着更高的压缩效率。它通过变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩。

根据 Google 发布的研究报告,Brotli 压缩算法具有多个特点,最典型的是以下 3 个:

  • 针对常见的 Web 资源内容,Brotli 的性能相比 Gzip 提高了 17-25%;

  • 当 Brotli 压缩级别为 1 时,压缩率比 Gzip 压缩等级为 9(最高)时还要高;

  • 在处理不同 HTML 文档时,Brotli 依然能够提供非常高的压缩率

依靠着自身卓越的压缩性能,Brotli 自推出后就迅速开始占领压缩市场,从下图可以看到,除了 IE 和 Opera Mini 之外,几乎所有的主流浏览器都已支持 Brotli 算法。

浏览器支持情况

在压缩效率上 Brotli 毫无疑问的遥遥领先。那么我们是否可以无脑盲选 Brotli 呢,Gzip 是不是应该就此退出市场?

Brotli 比 Gzip 更好吗?

显然与 Gzip 相比,Brotli 压缩在研究中显示出了不俗的成果。,例如 Gzip 有 9 个压缩级别,而 Brotli 有 11 个。此外,Brotli 还使用一个预定义的 120 千字节字典,该字典包含超过 13000 个常用单词、短语和其他子字符串。这些因素都有效提高了 Brotli 的压缩率。根据 Certsimple 的研究,用 Brotli 压缩的 Javascript 文件比 Gzip 小 14%,HTML 文件比 Gzip 小 21%,CSS 文件比 Gzip 小 17%。

无论从哪方面看 Gzip 都已经被 Brotli 碾压,两者之间毫无对比的可能性,我们似乎也完全不需要考虑选择左边或者右边。

注意:图像不应该被 Gzip 或 Brotli 压缩,因为它们已经被压缩,再次压缩将使其尺寸变大。
诚然 Brotli 在压缩程度上有着绝对的优势,但是这些优势是用其他代价换来的。Brotli 压缩操作所花费的时间会随着压缩级别的增加而增加。简而言之,就是 Brotli 需要更多的计算能力,而大家都知道计算能力需求的增加代表着设备和软件设施的成本上涨。另外 Brotli 要求浏览器必须支持与 HTTPS 一起使用,这也是他相比在浏览器支持量上比 Gzip 少的原因。毕竟 Gzip 同时支持 HTTP 和 HTTPS。

一边是压缩效果奇佳但是可能会因为浏览器的不支持而导致用户无法访问网站,另一边则是浏览器支持但是压缩效果降低用户加载网页时间依然略长,一个两难的抉择出现在了网站运营者面前。有机灵的小伙伴可能会说:“也不是所有用户都能使用 HTTPS,但是不是有功能判断么?难道压缩算法就不能整一个这种自动判断?让能使用 Brotli 的使用 Brotli,不能的使用 Gzip。”

bingo!华生,你发现了盲点。让我们愉快地掏出又拍云一站式减流量秘籍之智能压缩!

又拍云秘籍——智能压缩

又拍云智能压缩功能旨在为网站减少了流量开支,减少资源加载时间,让终端用户的体验更上一层楼。它同时支持 Gzip 和 Brotli 压缩算法,可同时开启,也可开启其中一种。开启该功能,可对静态文件类型进行压缩,有效减少用户传输内容大小,加速分发效果。为了配置的灵活性,“智能压缩”功能支持压缩等级(1 到 5)的设置。两种压缩算法的压缩等级默认为 1,等级越高,压缩率越大。考虑到压缩等级越高,压缩速度会降低,实际生产环境,建议压缩等级控制在 3 以内,具体请以线上环境实测为准进行自主设置。

当用户在后台同时开启 Gzip 和 Brotli 压缩时,后台会自行判断浏览器是否支持 Brotli 来选择进行哪种压缩。

那么这个浏览器自行判断是怎么操作的呢?

其实支持 Brotli 的浏览器会在接受编码请求标头中发送“ br”和“ gzip”(例如:Accept-Encoding: gzip, deflate, br)。如果 Web 服务器上启用了 Brotli,则用户将获取到 Brotli 压缩格式的响应。

这样就能有效避免选择 A 还是选择 B 的烦恼,你可以两者都拥有,在提升用户浏览体验的同时降低你的 CDN 流量。

当然对于“如果浏览器同时支持 Gzip 和 Brotli 会不会出现两次压缩,或者选择错误”的问题,又拍云也考虑到了哦。当客户端同时支持 Gzip 和 Brotli 算法的情况下,Brotli 的优先级高于 Gzip。

这么方便的功能,只需要登陆 CDN 控制台,进入 「性能优化」配置页面,找到「智能压缩」配置项,点击【管理】按钮,进入如下配置界面:

配置好压缩等级就可以愉快使用了。

开启智能压缩前

开启智能压缩后

除了智能压缩,又拍云还提供了一系列“省带宽,压成本”的绝招,包括 Webp 自适应、H.265 自适应、码率适配限速、窄带高清 等等,从编码技术、网络架构等角度出发,结合又拍云的产品成果,为大家节省流量,降低成本。有兴趣可以随时联系我们了解哦!

相关推荐

3 分钟了解 NVIDIA 新出的 H200

英伟达在 2023 年全球超算大会上发布了备受瞩目的新一代 AI 芯片——H200 Tensor Core GPU。相较于上一代产品 H100,H200 在性能上实现了近一倍的提升,内存容量翻倍,带宽也显著增加……

github_36774378的博客 2380

深入了解浮点运算——CPU 和 GPU 算力是如何计算的

算力最基本的计量单位是 FLOPS,英文 Floating-point Operations Per Second,即每秒执行的浮点运算次数。浮点运算其实就是带小数的加减乘除运算。

github_36774378的博客 5104

加速计算,为何会成为 AI 时代的计算力“新宠”

加速计算是指使用专用硬件来执行某些类型的计算,其效率要比仅使用通用中央处理器(CPU)高。利用图形处理单元(GPU)、专用集成电路(ASIC)(包括张量处理单元(TPU))和现场可编程逻辑门阵列(FPGA)等设备的强大功能,以更高的速度执行计算,从而加速计算过程,一般我们也将这些设备称之为加速器。这些加速器尤其适用于可被分解为较小并行任务的项目,如高性能计算 (HPC)、深度学习、机器学习、人工智能和大数据分析。通过将指定类型的工作分派到这些专用加速计算硬件上,大大提高了系统的性能和效率。

github_36774378的博客 1072

NVIDIA RTX4090,你能用它做什么?

如果女生选择给男生送礼,我相信一块 RTX4090 就足以让他高兴得死去活来。RTX4090 到底是何方神圣?它凭什么赢得所有男生的“芳心”?

github_36774378的博客 2353

3 分钟看完 NVIDIA GPU 架构及演进

近期随着 AI 市场的爆发式增长,作为 AI 背后技术的核心之一 GPU(图形处理器)的价格也水涨船高。GPU 在人工智能中发挥着巨大的重要,特别是在计算和数据处理方面。目前生产 GPU 主流厂商其实并不多,主要就是 NVIDIA、AMD、Intel、高通等厂家。本文将主要聊聊 NVIDIA GPU 的核心架构及架构演进。

github_36774378的博客 1983

聊聊 GPU 产品选型那些事

随着人工智能的飞速崛起,随之而来的是算力需求的指数级增加,CPU 已经不足以满足深度学习、大模型计算等场景的海量数据处理需求。GPU 作为一种强大的计算工具,无论是高性能计算、图形渲染还是机器学习领域,在各个领域展现出了巨大的潜力和应用前景。说起 GPU,绕不过的当然是 NVIDIA 这个公司了,现在市面上火热的 A100/A800、H100 等 GPU 全是他家的产品。但当你有业务需求或者个人需求,想要采购 GPU 的时候,你会发现各个型号的 GPU 令你眼花缭乱。

github_36774378的博客 985

巅峰对决:英伟达 V100、A100/800、H100/800 GPU 对比

近期,不论是国外的 ChatGPT,还是国内诸多的大模型,让 AIGC 的市场一片爆火。而在 AIGC 的种种智能表现背后,均来自于堪称天文数字的算力支持。以 ChatGPT 为例,据微软高管透露,为 ChatGPT 提供算力支持的 AI 超级计算机,是微软在 2019 年投资 10 亿美元建造一台大型顶尖超级计算机,配备了数万个 NVIDIA A100 GPU,还配备了 60 多个数据中心总共部署了几十万个 NVIDIA GPU 辅助。

github_36774378的博客 1万+

InfiniBand 的前世今生

今年,以 ChatGPT 为代表的 AI 大模型强势崛起,而 ChatGPT 所使用的网络,正是 InfiniBand,这也让 InfiniBand 大火了起来。那么,到底什么是 InfiniBand 呢?下面,我们就来带你深入了解 InfiniBand。

github_36774378的博客 865

揭秘神秘的字符串匹配工具——正则表达式

每个正则表达式都有一个有限自动机(也称为状态机),它接受表达式指定的语言,并使用 Thompson 构造算法将正则表达式转化为一个与之等价的非确定有限状态自动机(NFA)。同时,对于每个有限自动机来说,还有一个描述该自动机所接受语言的正则表达式。该表达式可以通过克莱恩算法或高斯消元法生成。正则表达式的一个著名应用是文本编辑器中的搜索和替换功能,计算机先驱 Ken Thompson( UNIX 操作系统的开发者之一)首先在 20 世纪 60 年代的面向行编辑器 QED 中实现了该功能。

github_36774378的博客 382

深入了解 GPU 互联技术——NVLINK

随着人工智能和图形处理需求的不断增长,多 GPU 并行计算已成为一种趋势。对于多 GPU 系统而言,一个关键的挑战是如何实现 GPU 之间的高速数据传输和协同工作。然而,传统的 PCIe 总线由于带宽限制和延迟问题,已无法满足 GPU 之间通信的需求。为了解决这个问题,NVIDIA 于 2018 年推出了 NVLINK,以提高 GPU 之间的通信效率。

github_36774378的博客 3874

各快 100 倍?4G、5G、6G 相差这么多吗

二狗子今天晚上有点 emo,为什么呢?原来是二狗子心心念很久的一个手游上线了,二狗子兴冲冲地下载了 40 多分钟,终于下载完了游戏。结果打开游戏一看,发现游戏内部的更新写着预计 30 分钟完成更新。这就把二狗子搞得 emo 了。二狗子突然发现自己的室友已经在这款游戏的新手村大杀四方了。“你怎么这么快?”二狗子问。“我用手机流量下载的,5G,当然快。”室友都没看二狗子一眼,沉浸在自己的游戏世界里。5G 真的有这么快吗?好学的二狗子就让游戏保持着后台更新,在网上冲浪学习下知识充实自己。

github_36774378的博客 468

为什么大家都在用 WebP?

WebP 是谷歌在 2010 年提出的一种新型的图片格式,放到现在来讲,已经不算是“新”技术了,毕竟已经有了更新的 JPEG XL 和 AVIF。但是在日常工作中,大家时常会碰到保存下来的图片的后缀是 .webp。那么 WebP 到底有什么魔力,让越来越多的网站“抛弃”常用的 PNG、JPG 而青睐它呢?

github_36774378的博客 958

从驾考科目二到自动驾驶,聊聊 GPU 为什么对自动驾驶很重要

这些数据包含前车和本车的距离,左右两边的道路指示标志,周围汽车的距离,前方道路指示标志,红绿灯信号,马路边行人,非机动车等信息等,大量的图像和视频信息被转换成电脑能处理的二进制信息,这就需要 CPU 和 GPU 的共同加持才能完成安全稳定的自动驾驶工作。

github_36774378的博客 361

聊透 GPU 通信技术——GPU Direct、NVLink、RDMA

AI 技术对算力的需求是非常庞大的,虽然 GPU 的计算能力在持续提升,但是对于 AI 来说,单卡的计算能力就算再强,也是有极限的,这就需要多 GPU 组合。而 GPU 多卡的组合,主要分为单个服务器多张 GPU 卡和多个服务器,每个服务器多张卡这两种情况,无论是单机多卡还是多机多卡,GPU 之间需要有超强的通信支持。

github_36774378的博客 2569

这个 AI 机器人会怼人,它是怎么做到的?

人工智能可以定义为计算机科学的一个分支,其目标是创造与人类智力相当的技术。但智力到底是什么?如何利用技术来复制智力?这个疑问并不存在单一的理解,目前已经有了许多理论和方法来回答这些问题。人工智能的实现方式主要有两种:一种是基于规则的人工智能,通过预先编写的规则和逻辑来实现特定的任务;另一种是基于机器学习的人工智能,通过让计算机从数据中学习和优化算法,来实现特定的任务。

github_36774378的博客 717

如何评估计算机的算力:从 CPU 到 GPU 的演变

这就是 CPU 和 GPU 在计算能力上的区别,这是由它们的架构决定的,CPU 可以执行任何程序,而 GPU转为多任务而生,并发能力强。当然,上面的两张图并不是说 GPU 比 CPU 厉害,事实上,CPU 和 GPU 各自具有不同的特点和优势,选择哪种设备取决于具体的应用场景和需求。其中,CPU(中央处理器)和 GPU(图形处理器)是计算机中最为核心的两个组件,它们的算力和性能对于计算机的整体性能具有决定性的影响。CPU 是计算机的核心组件之一,它的主要功能是执行指令、控制计算机的运行和处理数据等任务。

github_36774378的博客 2390

浅谈 Linux 下 vim 的使用

底线模式的进入方法为:在命令模式下按":“键,Vim 窗口的左下方会出现一个”:"符号,这时就可以输入相关的指令进行操作了。在此模式下可以使用上、下、左、右键或者k、j、h、l键进行光标的移动,还可以对文件内容进行复制、粘贴、替换、删除等操作。当编辑完成,就可以按 Esc 退出插入模式,进入到命令模式。p : 黏贴,此命令是在命令模式下,按照上面的命令复制后,然后光标移动到想要复制的位置,然后按 p 黏贴。直接到某行:在底线模式下直接输入数字就可以到想到的行,如果输入的数字比文档的行数多就会到最后一行。

github_36774378的博客 1311

如何高效实现 MySQL 与 elasticsearch 的数据同步

MySQL 自身简单、高效、可靠,是又拍云内部使用最广泛的数据库。但是当数据量达到一定程度的时候,对整个 MySQL 的操作会变得非常迟缓。而公司内部 robin/logs 表的数据量已经达到 800w,后续又有全文检索的需求。这个需求直接在 MySQL 上实施是难以做到的。

github_36774378的博客 724

国密证书 VS 传统 SSL 证书,到底区别在哪?

国密算法,即国家商用密码算法。是我国自主研发创新的一套数据加密处理系列算法。从 SM1-SM4 分别实现了对称、非对称、摘要等算法功能。尤其适用于嵌入式物联网等相关领域,完成身份认证和数据加解密等功能。

github_36774378的博客 1310

又拍云邵海杨 - 25年Linux老兵,聊聊运维的“术”与“道”

邵海杨,从1998年开始使用Linux至今快25年了,资深Linux系统运维/架构师,DevOps八荣八耻倡导者,喜欢交流分享,活跃于社区,一直积极投身于开源活动的组织和传播。

github_36774378的博客 745

从 AI 绘画到 ChatGPT,聊聊生成式 AI

无论是 AI 绘画,还是现在风靡全球的 ChatGPT,它们都属于 AI 的一个分支——生成式AI(Generative AI)。相较于传统的 AI 模型,生成式 AI 是一种特定类型的 AI,它专注于创建新内容。

github_36774378的博客 5755

从 B 站出发,用 Chrome devTools performance 分析页面如何渲染

页面是如何渲染的?从 Chrome 的性能工具开始,具体看看一个页面是如何进行渲染的,以及进行页面优化时需要关注哪些指标。

github_36774378的博客 1136

【白话科普】聊聊网络架构变革的关键——SDN

SDN 即软件定义网络,它描述了一种网络架构,可以使用软件对单个硬件组件进行集中、智能的管理和控制,使用 OpenFlow 等开放协议允许访问网络设备,如交换机、路由器或防火墙等。

github_36774378的博客 1838

二狗子翻车了,只因上了这个网站……

通过 fetch API 或 XMLHttpRequest 等方式发起的 HTTP 请求,必须要遵守同源策略 ,那什么是同源策略呢?为什么这个策略会导致我们的信息在浏览器上被盗用。

github_36774378的博客 659

一文读懂 Kubernetes 存储设计

在 Docker 的设计中,容器内的文件是临时存放的,通过在 docker run 启动容器时,使用 --volume/-v 参数来指定挂载卷,将容器内部的路径挂载到主机,来保证即便容器被删除,保存到主机路径中的数据也仍然存在。

github_36774378的博客 545

从实战出发,聊聊缓存数据库一致性

在云服务中,缓存是极其重要的一点。所谓缓存,其实是一个高速数据存储层。本文主要介绍更新数据库成功后,更新缓存和删除缓存这两个操作的区别和改进方案。

github_36774378的博客 584

当谈论 React hook,我们究竟说的是什么?

React hook是什么,所谓 React hook,就是增强函数组件能力特性的钩子,把不同的特性「钩」进纯函数。React hook 的由来,其实也可以看作是前端技术不断演进的结果。

github_36774378的博客 589

视频网站节约 30% 成本的秘密在这里

今年,爱奇艺宣布2022年第一季度首次实现季度盈利,长视频行业发展十几年来,一直深陷亏损旋涡。爱奇艺的首次实现季度盈利,也意味着降本增效将成为视频平台的发展方向。

github_36774378的博客 965

【白话科普】从“熊猫烧香”聊聊计算机病毒

到底什么是计算机病毒呢?它是什么途径传播的,又会带来哪些危害,我们又该如何在日常使用电脑中防止感染病毒呢?

github_36774378的博客 1642

【实操日记】使用 PyQt5 设计下载远程服务器日志文件程序

PyQt5 是一套 Python 绑定 Digia Qt5 应用的框架,是最强大的 GUI 库之一,使用 PyQt5 我们能够很容易的开发桌面应用,我们如何用 PyQt5 设计一个下载服务器指定日期日志文件的程序。

github_36774378的博客 1117
上一篇: 微服务架构下 CI/CD 如何落地
下一篇: 服务器标配 SSH 协议,你了解多少?
又拍云 UPYUN
又拍云 UPYUN 又拍云官方账号 又拍云官方账号
博客等级 码龄10年 153粉丝 174原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值