├── LICENSE ├── README.md └── nps-auto.sh /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 madlifer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 宝塔面板下使用 Nginx_Pagespeed给网站前端加速 2 | 3 | ## 引子: 4 | 这几天遇到一个网站优化问题，老板需求是给网站提速，但是我司网站后端采用的thinkphp3.1.1版本，并不支持任何缓存插件，所以php缓存可以排除。 5 | 6 | 想了想，想起来之前了解过的一个Nginx模块: PageSpeed,可以给给网站的前端进行加速,尤其适用于我司网站这种首页存在大量图片及沉余请求的情况. 7 | 8 | 参考了ngx_pagespeed官方提供的安装文档后，发现提供的自动安装脚本不适用于LNMP面板，宝塔面板，OneInStack等一键安装的LNMP环境。由于我司网站是通过宝塔面板进行搭建维护的，一开始很担心搞不定(怕重新编译后这些一键环境无法控制Nginx)，经过摸索后竟然发现，在宝塔上安装这个脚本比在LNMP面板上安装还要简单！ 9 | 10 | ## Nginx_PageSpeed模块介绍 11 | ngx_pagespeed 是谷歌开发的一个Nginx扩展模块，其实这个模块很早就开发出来了，但之前总有bug，一直处于beta版本，16年(疑)才有stable版本。 12 | 13 | ngx_pagespeed官网： [http://ngxpagespeed.com/](http://ngxpagespeed.com/) 14 | 项目Github主页： [https://github.com/pagespeed/ngx_pagespeed](https://github.com/pagespeed/ngx_pagespeed) 15 | GoogleDevelopers：[https://developers.google.com/speed/docs/mod_pagespeed](https://developers.google.com/speed/docs/mod_pagespeed/build_ngx_pagespeed_from_source) 16 | 17 | ### 主要功能 18 | 19 | `*`图像优化：剥离元数据、动态调整，重新压缩 20 | `*`CSS和JavaScript压缩、合并、级联、内联 21 | `*`小资源内联 22 | `*`推迟图像和JavaScript加载 23 | `*`对HTML重写、压缩空格、去除注释等 24 | `*`提升缓存周期 25 | `*`and so on... 26 | 27 | 28 | ## 模块的安装: 29 | 30 | ### 实验环境 31 | 32 | **操作系统:** Debian8 64位 33 | **管理面板:** 宝塔5.9免费版 34 | **环境: **nginx 1.14 编译安装 35 | 36 | ### 安装流程 37 | `*`**一.安装前准备** 38 | * 检查当前状态: 系统 & root权限 & GCC版本(>=4.8) 39 | * 更新yum/apt源 & 安装pagespeed所需依赖 40 | * 增加swap空间 （很多小内存VPS会出现内存不足导致的编译崩溃） 41 | 42 | `*`**二.下载模块** 43 | * 下载ngx_pagespeed模块 44 | * 下载psol(模块优化管理) 45 | 46 | `*`**三.安装模块** 47 | * 获取当前nginx配置文件 48 | * 在配置中添加ngx_pagespeed模块 49 | * make & make install 50 | 51 | `*`**四.验证模块** 52 | * 重启nginx(重载配置不行,必需重启) 53 | * 验证模块是否运行 54 | 55 | 基于以上手动安装过程，我写了个**自动化安装的shell**，可以通过一行命令进行安装: 56 | 57 | ```shell 58 | wget https://raw.githubusercontent.com/madlifer/ngx_pagespeed_auto/master/nps-auto.sh && bash nps-auto.sh 59 | ``` 60 | 61 | ## 模块的配置 62 | 由于采用的nginx版本为1.14，貌似不支持动态模块，所以不需要写入动态模块。直接在网站的nginx配置文档中 server段内粘贴所需要的功能命令，然后重载Nginx配置就可以了。 63 | 64 | ```TXT 65 | # 启用ngx_pagespeed 66 | pagespeed on; 67 | pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache; 68 | # 禁用CoreFilters 69 | pagespeed RewriteLevel PassThrough; 70 | # 启用压缩空白过滤器 71 | pagespeed EnableFilters collapse_whitespace; 72 | # 启用JavaScript库卸载 73 | pagespeed EnableFilters canonicalize_javascript_libraries; #谷歌被墙，并不确定这个设置有没有副作用 74 | # 把多个CSS文件合并成一个CSS文件 75 | pagespeed EnableFilters combine_css; 76 | # 把多个JavaScript文件合并成一个JavaScript文件 77 | pagespeed EnableFilters combine_javascript; 78 | # 删除带默认属性的标签 79 | pagespeed EnableFilters elide_attributes; 80 | # 改善资源的可缓存性 81 | pagespeed EnableFilters extend_cache; 82 | # 更换被导入文件的@import，精简CSS文件 83 | pagespeed EnableFilters flatten_css_imports; 84 | pagespeed CssFlattenMaxBytes 5120; 85 | # 延时加载客户端看不见的图片 86 | pagespeed EnableFilters lazyload_images; 87 | # 启用JavaScript缩小机制 88 | pagespeed EnableFilters rewrite_javascript; 89 | # 启用图片优化机制 90 | pagespeed EnableFilters rewrite_images; 91 | # 预解析DNS查询 92 | pagespeed EnableFilters insert_dns_prefetch; 93 | # 重写CSS，首先加载渲染页面的CSS规则 94 | pagespeed EnableFilters prioritize_critical_css; 95 | 96 | ``` 97 | -------------------------------------------------------------------------------- /nps-auto.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | Green_font="\033[32m" && Yellow_font="\033[33m" && Red_font="\033[31m" && Font_suffix="\033[0m" 3 | Info="${Green_font}[Info]${Font_suffix}" 4 | Error="${Red_font}[Error]${Font_suffix}" 5 | NGX_DIR=/www/server/nginx 6 | NPS_VESION=1.13.35.2-stable 7 | 8 | echo -e "${Green_font} 9 | #======================================= 10 | # Project: nps-auto 11 | # Platform: --Debian --Centos --Unbuntu 12 | # requirement: root gcc >= 4.8 bt.cn 13 | # Version: 0.0.1 14 | # Author: madlifer 15 | # Thanks: nanqinlang / zhangge.net 16 | # Copyright: www.modpagespeed.com 17 | #======================================= 18 | ${Font_suffix}" 19 | 20 | download_ngx_pagespeed(){ 21 | cd ${NGX_DIR}/src 22 | wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VESION}.zip 23 | unzip v${NPS_VESION}.zip 24 | rm v${NPS_VESION}.zip 25 | NPS_DIR=$(find . -name "*pagespeed-ngx-${NPS_VESION}" -type d) 26 | mv $NPS_DIR ngx_pagespeed 27 | cd ngx_pagespeed 28 | NPS_RELEASE_NUMBER=${NPS_VESION/beta/} 29 | NPS_RELEASE_NUMBER=${NPS_VESION/stable/} 30 | PSPL_URL=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}.tar.gz 31 | [ -e scripts/format_binary_url.sh ] 32 | PSPL_URL=$(scripts/format_binary_url.sh PSOL_BINARY_URL) 33 | wget ${PSPL_URL} 34 | tar -xzvf $(basename ${PSPL_URL}) 35 | rm $(basename ${PSPL_URL}) 36 | } 37 | 38 | install_ngx_pagespeed(){ 39 | cd ${NGX_DIR}/src 40 | NGX_CONF=`/usr/bin/nginx -V 2>&1 >/dev/null | grep 'configure' --color | awk -F':' '{print $2;}'` 41 | NGX_CONF="--add-module=${NGX_DIR}/src/ngx_pagespeed $NGX_CONF" 42 | ./configure $NGX_CONF 43 | make 44 | make install 45 | } 46 | 47 | check_system() { 48 | if grep -Eqii "CentOS" /etc/issue || grep -Eq "CentOS" /etc/*-release; then 49 | DISTRO='CentOS' 50 | PM='yum' 51 | elif grep -Eqi "Red Hat Enterprise Linux Server" /etc/issue || grep -Eq "Red Hat Enterprise Linux Server" /etc/*-release; then 52 | DISTRO='RHEL' 53 | PM='yum' 54 | elif grep -Eqi "Aliyun" /etc/issue || grep -Eq "Aliyun" /etc/*-release; then 55 | DISTRO='Aliyun' 56 | PM='yum' 57 | elif grep -Eqi "Debian" /etc/issue || grep -Eq "Debian" /etc/*-release; then 58 | DISTRO='Debian' 59 | PM='apt' 60 | elif grep -Eqi "Ubuntu" /etc/issue || grep -Eq "Ubuntu" /etc/*-release; then 61 | DISTRO='Ubuntu' 62 | PM='sudo' 63 | else 64 | DISTRO='unknow' 65 | fi 66 | } 67 | 68 | install_basic(){ 69 | case ${PM} in 70 | yum) 71 | yum -y install sudo 72 | yum -y update 73 | sudo yum -y install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel 74 | ;; 75 | apt) 76 | apt -y install sudo 77 | sudo apt -y update 78 | sudo apt-get -y install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev 79 | ;; 80 | sudo) 81 | sudo apt -y update 82 | sudo apt-get -y install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev 83 | ;; 84 | *) 85 | echo -e "${Error} 不支持您的系统 !" 86 | ;; 87 | esac 88 | echo -e "${Info} 模块依赖安装完成 !" 89 | } 90 | 91 | check_root(){ 92 | [[ "`id -u`" != "0" ]] && echo -e "${Error} 请先进入root账户 !" 93 | } 94 | 95 | check_gcc(){ 96 | gcc --version && echo -e "${Info} 请先确认gcc版本>=4.8! 输入任意按键来确认？" 97 | read aNum 98 | } 99 | 100 | restart_ngx(){ 101 | service nginx restart 102 | echo -e "${Info} 已重启Nginx!" 103 | } 104 | 105 | temp_swap_add(){ 106 | sudo dd if=/dev/zero of=/swapfile bs=64M count=16 107 | sudo mkswap /swapfile 108 | sudo swapon /swapfile 109 | echo -e "${Info} 临时增加Swap以解决编译中内存不足崩溃!" 110 | } 111 | 112 | temp_swap_del(){ 113 | sudo swapoff /swapfile 114 | sudo rm /swapfile 115 | echo -e "${Info} 删除临时增加的swap空间!" 116 | } 117 | 118 | setup(){ 119 | check_root 120 | check_system 121 | check_gcc 122 | install_basic 123 | temp_swap_add 124 | echo -e "${Info} 安装前配置已完成！!" 125 | } 126 | 127 | install(){ 128 | download_ngx_pagespeed 129 | install_ngx_pagespeed 130 | temp_swap_del 131 | restart_ngx 132 | echo -e "${Info} ngx_pagespeed 模块安装完成!" 133 | } 134 | 135 | status(){ 136 | NGX_CONF=`/usr/bin/nginx -V 2>&1 >/dev/null` 137 | echo $NGX_CONF | grep -q pagespeed 138 | if [ $? = 0 ]; then 139 | echo -e "${Info} Pagespeed正在运行 !" 140 | else 141 | echo -e "${Error} Pagespeed没有运行 !" 142 | fi 143 | } 144 | 145 | echo -e "${Info} 选择你要使用的功能: " 146 | echo -e "1.安装前配置\n2.进行安装\n3.检查运行状态\n" 147 | read -p "输入数字以选择:" function 148 | 149 | while [[ ! "${function}" =~ ^[1-4]$ ]] 150 | do 151 | echo -e "${Error} 无效输入" 152 | echo -e "${Info} 请重新选择" && read -p "输入数字以选择:" function 153 | done 154 | 155 | if [[ "${function}" == "1" ]]; then 156 | setup 157 | elif [[ "${function}" == "2" ]]; then 158 | install 159 | elif [[ "${function}" == "3" ]]; then 160 | status 161 | fi 162 | 163 | --------------------------------------------------------------------------------