共计 6706 个字符,预计需要花费 17 分钟才能阅读完成。
引子:
这几天遇到一个网站优化问题,老板需求是给网站提速,但是我司网站后端采用的thinkphp3.1.1版本,并不支持任何缓存插件,所以php缓存可以排除。
想了想,想起来之前了解过的一个Nginx模块: PageSpeed,可以给给网站的前端进行加速,尤其适用于我司网站这种首页存在大量图片及沉余请求的情况.(注:网站先后经历了两个后端程序员的删改,结构嵌套复杂,并且CSS/JS乱写,已经惨不忍睹。)
参考了ngx_pagespeed官方提供的安装文档后,发现提供的自动安装脚本不适用于LNMP面板,宝塔面板,OneInStack等一键安装的LNMP环境。由于我司网站是通过宝塔面板进行搭建维护的,一开始很担心搞不定(怕重新编译后这些一键环境无法控制Nginx),经过摸索后竟然发现,在宝塔上安装这个脚本比在LNMP面板上安装还要简单!
Nginx_PageSpeed模块介绍
ngx_pagespeed 是谷歌开发的一个Nginx扩展模块,其实这个模块很早就开发出来了,但之前总有bug,一直处于beta版本,16年(疑)才有stable版本。
ngx_pagespeed官网: http://ngxpagespeed.com/
项目Github主页: https://github.com/pagespeed/ngx_pagespeed
GoogleDevelopers:https://developers.google.com/speed/docs/mod_pagespeed
主要功能
*图像优化:剥离元数据、动态调整,重新压缩
*CSS和JavaScript压缩、合并、级联、内联
*小资源内联
*推迟图像和JavaScript加载
*对HTML重写、压缩空格、去除注释等
*提升缓存周期
*and so on…
模块的安装:
实验环境
操作系统: Debian8 64位
管理面板: 宝塔5.9免费版
环境: nginx 1.14 编译安装
安装流程
*一.安装前准备
-
检查当前状态: 系统 & root权限 & GCC版本(>=4.8)
-
更新yum/apt源 & 安装pagespeed所需依赖
-
增加swap空间 (很多小内存VPS会出现内存不足导致的编译崩溃)
*二.下载模块
-
下载ngx_pagespeed模块
-
下载psol(模块优化管理)
*三.安装模块
-
获取当前nginx配置文件
-
在配置中添加ngx_pagespeed模块
-
make & make install
*四.验证模块
-
重启nginx(重载配置不行,必需重启)
-
验证模块是否运行
基于以上手动安装过程,我写了个自动化安装的shell,可以通过一行命令进行安装:
wget https://raw.githubusercontent.com/madlifer/ngx_pagespeed_auto/master/nps-auto.sh && bash nps-auto.sh
模块的配置
由于采用的nginx版本为1.14,貌似不支持动态模块,所以不需要写入动态模块。直接在网站的nginx配置文档中 server段内粘贴所需要的功能命令,然后重载Nginx配置就可以了。
# 启用ngx_pagespeed pagespeed on; pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache; # 禁用CoreFilters pagespeed RewriteLevel PassThrough; # 启用压缩空白过滤器 pagespeed EnableFilters collapse_whitespace; # 启用JavaScript库卸载 pagespeed EnableFilters canonicalize_javascript_libraries; #谷歌被墙,并不确定这个设置有没有副作用 # 把多个CSS文件合并成一个CSS文件 pagespeed EnableFilters combine_css; # 把多个JavaScript文件合并成一个JavaScript文件 pagespeed EnableFilters combine_javascript; # 删除带默认属性的标签 pagespeed EnableFilters elide_attributes; # 改善资源的可缓存性 pagespeed EnableFilters extend_cache; # 更换被导入文件的@import,精简CSS文件 pagespeed EnableFilters flatten_css_imports; pagespeed CssFlattenMaxBytes 5120; # 延时加载客户端看不见的图片 pagespeed EnableFilters lazyload_images; # 启用JavaScript缩小机制 pagespeed EnableFilters rewrite_javascript; # 启用图片优化机制 pagespeed EnableFilters rewrite_images; # 预解析DNS查询 pagespeed EnableFilters insert_dns_prefetch; # 重写CSS,首先加载渲染页面的CSS规则 pagespeed EnableFilters prioritize_critical_css;
NPS_AUTO脚本源码
shell代码并不成熟,欢迎各位dalao斧正:
项目地址: https://github.com/madlifer/ngx_pagespeed_auto
#!/bin/bashGreen_font="\033[32m" && Yellow_font="\033[33m" && Red_font="\033[31m" && Font_suffix="\033[0m" Info="${Green_font}[Info]${Font_suffix}" Error="${Red_font}[Error]${Font_suffix}" NGX_DIR=/www/server/nginx NPS_VESION=1.13.35.2-stable echo -e "${Green_font}#=======================================# Project: nps-auto# Platform: --Debian --Centos --Unbuntu# requirement: root gcc >= 4.8 bt.cn# Version: 0.0.1# Author: madlifer# Blog: Https://Madevo.Net# Thanks: nanqinlang / zhangge.net# Copyright: www.modpagespeed.com#=======================================${Font_suffix}"download_ngx_pagespeed(){ cd ${NGX_DIR}/src wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VESION}.zip unzip v${NPS_VESION}.zip rm v${NPS_VESION}.zip NPS_DIR=$(find . -name "*pagespeed-ngx-${NPS_VESION}" -type d) mv $NPS_DIR ngx_pagespeed cd ngx_pagespeed NPS_RELEASE_NUMBER=${NPS_VESION/beta/} NPS_RELEASE_NUMBER=${NPS_VESION/stable/} PSPL_URL=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}.tar.gz [ -e scripts/format_binary_url.sh ] PSPL_URL=$(scripts/format_binary_url.sh PSOL_BINARY_URL) wget ${PSPL_URL} tar -xzvf $(basename ${PSPL_URL}) rm $(basename ${PSPL_URL}) } install_ngx_pagespeed(){ cd ${NGX_DIR}/src NGX_CONF=`/usr/bin/nginx -V 2>&1 >/dev/null | grep 'configure' --color | awk -F':' '{print $2;}'` NGX_CONF="--add-module=${NGX_DIR}/src/ngx_pagespeed $NGX_CONF" ./configure $NGX_CONF make make install } check_system() { if grep -Eqii "CentOS" /etc/issue || grep -Eq "CentOS" /etc/*-release; then DISTRO='CentOS' PM='yum' elif grep -Eqi "Red Hat Enterprise Linux Server" /etc/issue || grep -Eq "Red Hat Enterprise Linux Server" /etc/*-release; then DISTRO='RHEL' PM='yum' elif grep -Eqi "Aliyun" /etc/issue || grep -Eq "Aliyun" /etc/*-release; then DISTRO='Aliyun' PM='yum' elif grep -Eqi "Debian" /etc/issue || grep -Eq "Debian" /etc/*-release; then DISTRO='Debian' PM='apt' elif grep -Eqi "Ubuntu" /etc/issue || grep -Eq "Ubuntu" /etc/*-release; then DISTRO='Ubuntu' PM='sudo' else DISTRO='unknow' fi } install_basic(){ case ${PM} in yum) yum -y install sudo yum -y update sudo yum -y install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel ;; apt) apt -y install sudo sudo apt -y update sudo apt-get -y install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev ;; sudo) sudo apt -y update sudo apt-get -y install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev ;; *) echo -e "${Error} 不支持您的系统 !" ;; esac echo -e "${Info} 模块依赖安装完成 !" } check_root(){ [[ "`id -u`" != "0" ]] && echo -e "${Error} 请先进入root账户 !" } check_gcc(){ gcc --version && echo -e "${Info} 请先确认gcc版本>=4.8! 输入任意按键来确认?" read aNum } restart_ngx(){ service nginx restart echo -e "${Info} 已重启Nginx!" } temp_swap_add(){ sudo dd if=/dev/zero of=/swapfile bs=64M count=16 sudo mkswap /swapfile sudo swapon /swapfile echo -e "${Info} 临时增加Swap以解决编译中内存不足崩溃!" } temp_swap_del(){ sudo swapoff /swapfile sudo rm /swapfile echo -e "${Info} 删除临时增加的swap空间!" } setup(){ check_root check_system check_gcc install_basic temp_swap_add echo -e "${Info} 安装前配置已完成!!" } install(){ download_ngx_pagespeed install_ngx_pagespeed temp_swap_del restart_ngx echo -e "${Info} ngx_pagespeed 模块安装完成!" } status(){ NGX_CONF=`/usr/bin/nginx -V 2>&1 >/dev/null` echo $NGX_CONF | grep -q pagespeed if [ $? = 0 ]; then echo -e "${Info} Pagespeed正在运行 !" else echo -e "${Error} Pagespeed没有运行 !" fi } echo -e "${Info} 选择你要使用的功能: " echo -e "1.安装前配置\n2.进行安装\n3.检查运行状态\n" read -p "输入数字以选择:" function while [[ ! "${function}" =~ ^[1-4]$ ]] do echo -e "${Error} 无效输入" echo -e "${Info} 请重新选择" && read -p "输入数字以选择:" function done if [[ "${function}" == "1" ]]; then setup elif [[ "${function}" == "2" ]]; then install elif [[ "${function}" == "3" ]]; then status fi