网站性能提升

简介: 【7月更文挑战第31天】

使用gzip 压缩提升网站性能
一、介绍
网站开发到一定程度,可能css文件或js文件会越来越大,因为有可能加载了很多的插件。这个时候如果能把这些文件压缩一下就好了。

nginx就支持这种功能,它可以把静态文件压缩好之后再传给浏览器。浏览器也要支持这种功能,只要浏览器的请求头带上Accept-Encoding: gzip就可以了。假如有一个文件叫application.css,那nginx就会使用gzip模块把这个文件压缩,然后传给浏览器,浏览器再解压缩成原来的css文件,就能读取了。

所有的这一切都需要nginx已经有编译过ngx_http_gzip_module这个模块。这个模块能对需要的静态文件压缩大小,比如图片,css,javascript,html等。压缩是需要消耗CPU,但能提高传缩的速度,因为传缩量少了许多,从而节省带宽。

二、 使用
使用之前先来查看一下是否编译了ngx_http_gzip_module这个模块。

sudo nginx -V
1
如果输出--with-ngx_http_gzip_module,说明已经编译了。

三、配置nginx的gzip
http {
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
server {
location ~ ^/assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上面最重要的是http中gzip on;还有gzip_types这两行,是一定要写的。其他的gzip_vary等都是一些配置,可以不写。

然后在需要压缩的静态资源那里加上下面三行。

gzip_static on;
expires max;
add_header Cache-Control public;
1
2
3
改了配置用sudo nginx -s reload重新加载生效。

四、测试
1、测试可以使用浏览器,比如chrome,只要用开发者的network功能查看两次资源的大小就好了。

2、或者使用curl工具也可以。

~/codes/rails365 (master) $ curl -I -H "Accept-Encoding: gzip" http://www.rails365.net/assets/application-7166fb1597da14300423c6a60c281a45f24573b249eafe0fd84b5c261db1d3a5.js
HTTP/1.1 200 OK
Server: nginx/1.8.0
Date: Tue, 20 Oct 2015 10:44:52 GMT
Content-Type: application/x-javascript
Last-Modified: Tue, 20 Oct 2015 09:36:44 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"56260b2c-22b41"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Cache-Control: public
Content-Encoding: gzip
1
2
3
4
5
6
7
8
9
10
11
12
13
只要返回Content-Encoding: gzip说明成功的。

相关文章
|
7月前
|
缓存 前端开发 JavaScript
如何优化前端性能提升用户体验
在Web应用中,前端性能是影响用户体验和转化率的关键因素之一。本文将介绍一些优化前端性能的方法,包括减少HTTP请求、使用缓存、压缩代码等。
ly~
|
2月前
|
缓存 中间件 数据库
FileRun 的性能如何?
FileRun 的性能受网络环境、硬件配置等因素影响。在网络和硬件条件优越的情况下,文件传输速度快,系统响应迅速,资源占用低。面对大量文件或高并发访问,需注意资源分配与系统优化,以维持稳定性和可扩展性。支持插件扩展,可与第三方应用集成,提升文件管理效率。
ly~
61 3
|
7月前
|
缓存 安全 前端开发
5分钟,我把网站性能优化了3倍
5分钟,我把网站性能优化了3倍
|
JSON 数据库 数据格式
性能和可测试性的选择
性能和可测试性的选择
|
缓存 前端开发 Java
是什么让一段20行代码的性能提升了10倍
性能优化显而易见的好处是能够节约机器资源。如果一个有2000台服务器的应用,整体性能提升了10%,理论上来说,就相当于节省了200台的机器。除了节省机器资源外,性能好的应用相对于性能差的应用,在应对流量突增时更不容易达到机器的性能瓶颈,在同样流量场景下进行机器扩容时,也只需要更少的机器,从而能够更快的完成扩容、应急操作。所以,性能好的应用相对于性能差的应用在稳定性方面也更胜一筹。
是什么让一段20行代码的性能提升了10倍
|
算法
HIMA F8621A 用于需要高带宽和低噪声性能
HIMA F8621A 用于需要高带宽和低噪声性能
HIMA F8621A 用于需要高带宽和低噪声性能
|
存储 缓存 前端开发
如何提高网站的性能
网站的性能是影响用户体验和转化率的关键因素之一。本文将介绍一些优化网站性能的方法和技巧,包括减少HTTP请求、使用CDN、压缩和合并文件、使用浏览器缓存和优化图片等。
150 0
EMQ
|
缓存 运维 Kubernetes
5.0 版本持续优化:ExProto 吞吐性能提升
九月,EMQX 5.0保持稳定更新,目前已发布5.0.8版本,企业版4.3&4.4发布最新维护版本。云服务方面,EMQX Cloud新增1000连接规格的专业版部署。
EMQ
265 0
5.0 版本持续优化:ExProto 吞吐性能提升
|
Dubbo 算法 NoSQL
记一次提升18倍的性能优化
最近负责的一个自研的 Dubbo 注册中心经常收到 CPU 使用率的告警,于是进行了一波优化,效果还不错,于是打算分享下思考、优化过程,希望对大家有一些帮助。 自研 Dubbo 注册中心是个什么东西,我画个简图大家稍微感受一下就好,看不懂也没关系,不影响后续的理解。
261 0
记一次提升18倍的性能优化
|
存储 Web App开发 缓存
使用ServiceWorker提高性能
service worker 是一种在独立的处理线程上执行后台任务的 worker,允许用户拦截网络请求并有条件地将其存储在称为 CacheStorage API 的特殊缓存中,此类缓存不同于本地浏览器缓存,因为它允许在用户脱机的情况下从缓存中提供数据,还可以提高页面的性能。其工作原理建议阅读《ServiceWorker工作原理、生命周期和使用场景》
459 0