建站系列之如何启用 Nginx PageSpeed|Google|模块来优化网站

tengxunyun cera

最近在研究如何提升网站访问速度,发现一个神奇的网站:PageSpeed Insights,这是谷歌专门为站长查看网页优化程度而开发的工具:

通过该工具可以看到我们的网站还有多少优化空间,并且相应给出了优化建议,从建议中发现了其推荐的针对 Nginx 的 ngx_pagespeed 模块和针对 Aapche 的 mod_pagespeed 模块,介绍为:

Pagespeed 可以自动优化网页和关联资源(CSS,JavaScript,图片),缩短网页的加载时间,而无需修改现有内容或工作流程,实现加快网站的的速度。

  • 图片:剥离元数据、动态调整;
  • CSS:压缩、合并、级联、小资源内联;
  • JavaScript:

接下来我们就安装这个模块看看优化效果如何。以下操作基于宝塔平台,同样适用于LNMP 等平台,区别于操作目录而已。

下载源码

确认运行库是否安装完整:

# yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel -y
# gcc --version      //要求大于 4.8
gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-28)
Copyright (C) 2015 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

进入 Nginx 源码目录下载:

# cd /www/server/nginx/src/src/
# wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.zip
# unzip v1.13.35.2-stable.zip && rm -rf v1.13.35.2-stable.zip
# cd incubator-pagespeed-ngx-1.13.35.2-stable/
# wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
# tar zxf 1.13.35.2-x64.tar.gz
# rm -rf 1.13.35.2-x64.tar.gz
# cd ../../

注:1.13.35.2 是版本号,在这里 可以看到。
psol 下载地址在 1.12.34 后发生变动了,如果是这版本之前,下载地址是:
https://dl.google.com/dl/page-speed/psol/版本号.tar.gz
例如::https://dl.google.com/dl/page-speed/psol/1.12.33.2.tar.gz
这个版本之后则是:
https://dl.google.com/dl/page-speed/psol/版本号-x系统位数.tar.gz
例如:https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz

重新编译

通过 nginx -V 获得原先的编译参数:

# nginx -V
configure arguments: --user=www --group=www --prefix=/www/server/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-stream --with-stream_ssl_module --with-ipv6 --with-http_sub_module --with-http_flv_module --with-http_addition_module --with-http_realip_module --with-http_mp4_module --with-ld-opt=-Wl,-E --add-module=./src/ngx_brotli

在原先编译参数基础上,尾巴添加 --add-module=./src/incubator-pagespeed-ngx-1.13.35.2-stable 重新编译

# ./configure --user=www --group=www --prefix=/www/server/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-stream --with-stream_ssl_module --with-ipv6 --with-http_sub_module --with-http_flv_module --with-http_addition_module --with-http_realip_module --with-http_mp4_module --with-ld-opt=-Wl,-E --add-module=./src/ngx_brotli --add-module=./src/incubator-pagespeed-ngx-1.13.35.2-stable
......
# service nginx stop
# make && make install
......

配置启用

PageSpeed 会产生缓存文件,因此开启配置缓存文件夹,文件夹位置随意,这里我放在 /www/server/nginx/pagespeed_temp:

# mkdir /www/server/nginx/pagespeed_temp
# chown -R www:www /www/server/nginx/pagespeed_temp/

由于每个站点情况不一样,故在每个站点(server{})分别启用(全局 [http{}] 估计也是可以的),参数及含义如下:

# vim /server/nginx/conf/vhost/xxx.ooo.conf
server {
......
pagespeed on;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
pagespeed DisableRewriteOnNoTransform off;
# 相对URL
pagespeed PreserveUrlRelativity on;
# X-Header 值,用于判断是否生效
pagespeed XHeaderValue "Powered By VirCloud, LLC.";
# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/www/server/nginx/pagespeed_temp/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤 WordPress 的后台(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 移除不必要的url前缀,开启可能会导致某些自动加载功能失效
#pagespeed EnableFilters trim_urls;
# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;
# 移除 html 注释
pagespeed EnableFilters remove_comments;
# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;
# 压缩CSS
pagespeed EnableFilters rewrite_css;
# 合并CSS
pagespeed EnableFilters combine_css;
# 重写CSS,优化加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;
# google字体直接写入html 目的是减少浏览器请求和DNS查询
pagespeed EnableFilters inline_google_font_css;
# 压缩js
pagespeed EnableFilters rewrite_javascript;
# 合并js
pagespeed EnableFilters combine_javascript;
# 优化内嵌样式属性
pagespeed EnableFilters rewrite_style_attributes;
# 压缩图片
pagespeed EnableFilters rewrite_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
# 图片预加载
pagespeed EnableFilters inline_preview_images;
# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;
# 图片延迟加载
pagespeed EnableFilters lazyload_images;
# 延迟加载替换图片,可以下载到本机然后替换引号里的链接
pagespeed LazyloadImagesBlankUrl "https://www.gstatic.com/psa/static/1.gif";
# 雪碧图片,图标很多的时候很有用
pagespeed EnableFilters sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;

# 将 meta 转换为 header 
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
......
}
......
# nginx -t
nginx: the configuration file /www/server/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /www/server/nginx/conf/nginx.conf test is successful
# service nginx start

更多参数参考:《PageSpeed Documentation》

访问验证

以上我们已经成功启用 PageSpeed 模块,接下来我们验证一下:

回应标头:

启用前:

# curl -I https://www.vircloud.net
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 12 Jul 2018 06:51:19 GMT
Content-Type: text/html
Content-Length: 8257
Last-Modified: Wed, 27 Jun 2018 12:15:29 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: "5b337fe1-2041"
Strict-Transport-Security: max-age=15552000; includeSubdomains; preload
X-Xss-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Accept-Ranges: bytes

启用后

# curl -I https://www.vircloud.net
HTTP/1.1 200 OK
Server: nginx
Content-Type: text/html
Connection: keep-alive
Vary: Accept-Encoding
Strict-Transport-Security: max-age=15552000; includeSubdomains; preload
X-Xss-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Date: Thu, 12 Jul 2018 07:09:07 GMT
X-Page-Speed: Powered By VirCloud, LLC.
Cache-Control: max-age=0, no-cache

可以看到响应头包含了 X-Page-Speed: Powered By VirCloud, LLC. 字样,而 X-Page-Speed 正是 PageSpeed 启用标志,可见已成功启用,那么效果如何呢?

访问同一页面:

启用前:

 

启用后:

 

页面压缩几乎不变(可能是之前启用过 Brotli 压缩算法),但是加载时间缩减可以说是非常明显了

名词解释:

  • DOMContentLoaded:浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是像是 和样式表等外部资源可能并没有下载完毕。
  • Load:浏览器已经加载了所有的资源(图像,样式表等)。

cera aliyun tengxunyun cloudiplc

相关推荐

使用Searx搭建一个私人的搜索引擎平台|可展现Google|Bing等70多种搜索网站的搜索结果

手动安装 项目地址:https://github.com/asciimoo/searx 1、安装pip #CentOS 6.x 32位 rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm yum install -y python-pip #CentOS 6.x 64位 rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm yum install -y python-pip #CentOS 7.x yum install -y epel-release yum install -y python-pip #如果CentOS 7安装出现No package python-pip available,可以用以下命令进行安装 wget https://bootstrap.pypa.io/get-pip.py python get-pip.py #Debian/Ubuntu系统 apt-get -y update apt-get -y install python-pip 2、安装git #Debian/Ubuntu系统 apt-get -y install …

Google推出在线图片压缩工具Squoosh|压缩效率媲美TinyPNG

谷歌 Chrome 实验室刚刚推出了一款名叫 Squoosh 的在线图片压缩工具,不仅支持图片在线压缩,而且可以同步转换图片格式。这是继TinyPNG之后,市面上又一款功能强大的在线图片压缩工具。国内不用搭梯子就可以访问。 访问地址:https://squoosh.app/ 网站速度优化一直是我比较关注的一件事,首当其冲的就是网站图片的优化。在此之前,我一直使用TinyPNG优化网站图片。因为界面整洁、操作简单、速度快、压缩率也高。 即使市面上各种在线压缩工具林林种种,TinyPNG的口碑一直稳坐在线图片压缩工具的头把交椅,没有中文界面,也依然阻挡不住国人对它的热爱。 刚刚谷歌推出的在线图片压缩工具Squoosh,是最有望撼动TinyPNG武林盟主的地位的。实际体验了一下,感觉效率和速度已经不逊色于TinyPNG了。下面是我上传压缩的一张图片,原文件大小1.09M左右,压缩后只有349K,压缩率达到68%。 通过拖动页面的滑块,可以对比压缩前后的效果,实际观测,几乎看不出图片压缩前后的变化,Squoosh在不损失太多图像质量的前提下,有效地减小了文件的体积。 功能特点 相对于TinyPNG对部分高级功能收费,Squoosh直接开源了所有功能。这里就将一些关键功能汇总一下,感兴趣的朋友可以自己体验一下。 1、Squoosh开创性的加入了转图片格式的功能,就是说图片压缩和格式转换可以同时完成。只需要在压缩前右侧选择想要的压缩后的图片格式即可。支持JPG、PNG和WebP等图片格式。 2、无损压缩所见即所得,拖动界面滑块可以即时对比压缩前后的效果。 3、Squoosh支持目录上传压缩和拖拽上传压缩,压缩完成后点击右下角的下载按钮即可下载到本地。 4、Squoosh可以在Chrome以外的浏览器上使用,而且国内可以直接访问,不用搭梯子。 除此之外,还可以直接调整图片尺寸、颜色数量、图片质量,甚至包含调整通道、优化霍夫曼表等高级功能。

谷歌浏览器 Google Chrome v69.0.3497.100 集成 GreenChrome 6.5.6|Flash 31.0.0.108

谷歌浏览器Chrome是一款可让您更快速、轻松且安全地使用网络的浏览器,它的设计超级简洁,使用起来更加方便。Google 浏览器Chrome的特点是简洁、快速。Google Chrome支持多标签浏览,每个标签页面都在独立的“沙箱”内运行,在提高安全性的同时,一个标签页面的崩溃也不会导致其他标签页面被关闭。 Chrome问题专区:http://product.pconline.com.cn/itbk/software/chrome/ Google浏览器Chrome的特点是简洁、快速。Google Chrome支持多标签浏览,每个标签页面都在独立的“沙箱”内运行,在提高安全性的同时,一个标签页面的崩溃也不会导致其他标签页面被关闭。此外,Google Chrome基于更强大的JavaScript V8引擎,这是当前Web浏览器所无法实现的。 Google Chrome 63稳定版发布:优化Blink引擎 修复37处安全漏洞 Chrome 63的Blink网页浏览器引擎部署了类似于DOM, CSS, HTML, MediaStream, JavaScript, bindings, fonts, network, storage和sensor等诸多优化,本次更新同样还重新设计了chrome://flags页面,提升了Google Chrome的使用体验。 Chrome 63同时新增支持“display: minimal-ui”功能,允许网页开发者为用户显示类似于Chrome自定义选项卡的UI。同样,Google还新增了全新的快捷方式,以便于用户查看网站证书,并修复了一些安全漏洞。 更新日志 http://googlechromereleases.blogspot.com/ 官网 http://www.google.com/chrome 官方下载(最新版本) (32位)https://dl.google.com/release2/chrome/ANvfz-b0Yjau_69.0.3497.100/69.0.3497.100_chrome_installer.exe (64位)https://dl.google.com/release2/chrome/AM4yMAx_dXd__69.0.3497.100/69.0.3497.100_chrome_installer.exe 官方下载(最后一个支持XP的版本) (32位)https://dl.google.com/release2/h8vnfiy7pvn3lxy9…/49.0.2623.112_chrome_installer.exe 官方下载(便携版) http://portableapps.com/apps/internet/google_chrome_portable 网盘下载(69.0.3497.81 绿色便携版) http://pan.baidu.com/s/1c2agJM4#cxw9 密码:cxw9 说明:绿色便携版精简多余语言包 + GreenChrome + Adobe Flash Player 已打地区相容性补丁。 从v42开始,默认不再加载NPAPi插件,请地址栏输入:chrome://plugins,开启插件!

Google 發布 Chrome 68|HTTP 網站全面標記為不安全

Google 在 7 月 24 日發布了 Chrome 瀏覽器的更新 Chrome 68,更新後將會把所有未加密的網站列為「不安全」的網站。 這項改變將適用於所有的 HTTP 網站,全都都會在網址列上顯示「不安全」的字樣,HTTPS 網站則不會有任何的影響。這項從 2 月就公布的措施是 Google 推動網路加密的一環,其實從 2016 年開始 Chrome 就對未加密的登入頁面設置警告圖示,而現在則更進一步擴及所有 HTTP 網站。Chrome 的安全產品經理 Emily Schechter 在部落格宣布這項變革時,將其稱為「Chrome 安全的里程碑」。 HTTPS 是一種網路加密的方式,可以保護用戶和網站之間的連線。如果沒有這種加密保護的話,網站很容易受到監控或惡意軟體的攻擊。從 2014 年以來,Google 就讓 HTTPS 的網站在搜尋排名中排得更前面,這也是各家網站負責人願意為網站提供加密保護的重要原因。除了從 Chrome 著手之外,Google 也贊助了 HTTPS 加密標準的研究。現在這樣的加密已經日漸普及,根據 Google 的 HTTPS 統計顯示,3 年前的 2015 年 7 月美國 Chrome 用戶載入的網頁只有 47% 有經過加密,如今已經成長到 84%。 …

微信扫一扫,分享到朋友圈

建站系列之如何启用 Nginx PageSpeed|Google|模块来优化网站