发现nginx配置gzip,压缩css,不压缩js,原来是不压缩临界值,大于1000K的才压缩导致没有被gzip压缩。_html/css_WEB-ITnose
背景:发现并没有压缩,查来查去是这个配置有问题写成1000k了,也就是下面这些列表都不符合条件,不给gzip压缩,gzip_min_length 1k; 不压缩临界值,大于1K的才压缩,一般不用改,被修改成1000k了,于是没有压缩,查了老半天content-type,都写了,呵呵。
修改后,在这儿测试了一下,果然压缩了:
http://pagespeed.webkaka.com/youhua/gzip/
网址 http://www.justwinit.cn/template/trielegant/styles.css 的检测结果:
是否压缩 是
压缩类型 gzip
原文件大小 8704 字节
压缩后文件大小 4275 字节
压缩率 50.88%
图片是否需要启用GZip压缩?
无意间看到有网友提及,图片不用GZip压缩的。图片尽量不要使用gzip,因为gif,png等图片本身就是被压缩过的,
开启和关闭图片GZip压缩后,网页的总体积是不同的,令人惊讶的是开启图片GZip压缩后,网页总体积竟然变大了。而耗时也相应的增多了。
===========================================
1、Vim打开Nginx配置文件
vim /usr/local/nginx/conf/nginx.conf
2、找到如下一段,进行修改
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
3、解释一下
第1行:开启Gzip
第2行:不压缩临界值,大于1K的才压缩,一般不用改
第3行:buffer,就是,嗯,算了不解释了,不用改
第4行:用了反向代理的话,末端通信是HTTP/1.0,有需求的应该也不用看我这科普文了;有这句的话注释了就行了,默认是HTTP/1.1
第5行:压缩级别,1-10,数字越大压缩的越好,时间也越长,看心情随便改吧
第6行:进行压缩的文件类型,缺啥补啥就行了,JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式就行了
第7行:跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧
第8行:IE6对Gzip不怎么友好,不给它Gzip了
上面摘自:http://www.veryhuo.com/a/view/51706.html
http://www.webkaka.com/blog/archives/how-to-set-gzip-for-js-in-Nginx.html
https://segmentfault.com/q/1010000000585128
查询是否被zip压缩:
http://pagespeed.webkaka.com/youhua/gzip/
输入:
http://www.justwinit.cn/images/js/common.js?jsver=2.1.1.3626.3
=======================================
启用Gzip 可减少 54.2 KB 启用服务器Gzip,可以减少传输字节数。更多 -3分
未启用Gzip的资源有:
http://www.justwinit.cn/template/trielegant/styles.css (大小: 8.5 KB 预计可减少 5.9 KB )
http://www.justwinit.cn/images/js/common.js?jsver=2.1.1.3626.3 (大小: 20.3 KB 预计可减少 14.8 KB )
http://www.justwinit.cn/lang/zh-cn/jslang.js?jsver=2.1.1.3626.3 (大小: 3.7 KB 预计可减少 2.1 KB )
http://www.justwinit.cn/images/js/ajax.js?jsver=2.1.1.3626.3 (大小: 7.4 KB 预计可减少 6.0 KB )
http://www.justwinit.cn/images/js/swfobject.js?jsver=2.1.1.3626.3 (大小: 6.4 KB 预计可减少 4.2 KB )
http://www.justwinit.cn/images/css/SyntaxHighlighter.css (大小: 3.6 KB 预计可减少 2.5 KB )
http://justwinit.cn/favicon.jpg (大小: 1.9 KB 预计可减少 793 B )
http://js.users.51.la/4950674.js (大小: 1.9 KB 预计可减少 1.1 KB )
http://www.justwinit.cn/images/hl/shCore.js (大小: 9.5 KB 预计可减少 5.7 KB )
http://www.justwinit.cn/images/hl/shBrushPhp.js (大小: 3.7 KB 预计可减少 2.1 KB )
http://www.justwinit.cn/images/hl/shBrushJScript.js (大小: 937 B 预计可减少 437 B )
http://www.justwinit.cn/images/hl/shBrushJava.js (大小: 1.0 KB 预计可减少 494 B )
http://www.justwinit.cn/images/hl/shBrushSql.js (大小: 1.9 KB 预计可减少 964 B )
http://www.justwinit.cn/images/hl/shBrushCss.js (大小: 4.0 KB 预计可减少 2.2 KB )
http://www.justwinit.cn/images/hl/shBrushCpp.js (大小: 2.7 KB 预计可减少 1.4 KB )
http://www.justwinit.cn/images/hl/shBrushPython.js (大小: 4.7 KB 预计可减少 2.5 KB )
http://www.justwinit.cn/template/trielegant/images/logo_header.png (大小: 5.6 KB 预计可减少 237 B )
http://www.justwinit.cn/template/trielegant/images/long.gif (大小: 924 B 预计可减少 358 B )
http://justwinit.cn/template/trielegant/images/bridge-banner-eleven.jpg (大小: 18.9 KB 预计可减少 354 B )
http://icon.51.la/icon_0.gif (大小: 846 B 预计可减少 101 B )
http://eiv.baidu.com/hmt/icon/21.gif (大小: 1.1 KB 预计可减少 69 B )

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
