当前位置: 主页 > SEO >

写给运维的前端优化方案

起因:作为公司唯一一个开发,管理的杂事有很多,往往忽略了优化性能这方面的问题,虽然有gulp,webpack这些自动化工具,但还是感觉不足,原因很简单,就是维护删改的时候,都要去重新打包一次,在上传到服务器上,花费的时间成本还是挺多的,现在的想法是,直接在服务器上面改,既不影响代码的可读性,又能提升用户的访问速度,这就是ngx_pagespeed:主要是减小体积、减少请求、合理布置页面原素等,再具体些就是,开启 Gzip 压缩、合并 css 文件、合并 js 文件、长链接、减少 DNS 查询、使用 cookie-free 域名、js 放页面最下面、指定缓存时间、ETag、延迟加载、异步加载……


PageSpeed:

ngx_pagespeed是Nginx的一个扩展模块,主要的功能是针对前端页面而进行服务端的优化,对于前端设计人员来说,可以省去优化css,js以及图片的过程.ngx_pagespeed对nginx自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。

主要功能如下:

就是优化,只要你的想的到的都包含了,比方说压缩,合并,雪碧图,jpg转换成webp的格式的,还有就是webp对浏览器的兼容等等,简直就是一个优化的全家桶,这里不说太详细,本文重点是在于部署环节,具体可以到官网查看

谷歌pagespeed插件官网

PageSpeed性能工具

部署配置:

在做部署配置之前,先介绍一下我的环境配置,我采用的是CentOS系统搭建的lnmp的环境,自带有gcc-c++,但是版本较低,官网需求是:gcc≥4.8或者clang≥3.3,所以要进行系统升级,关于配置,请阅读gcc模块更新

如果你是初步安装,直接输入命令安装即可。

RedHat,CentOS或Fedora

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip

Ubuntu or Debian

sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip

不够详细,可前往官方文档:here

下载与安装pagespeed包

#[查看最新版本请到官网自己查看发行说明 ]
#我用的是1.12.34.2稳定版本
wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.12.34.2-stable.zip
unzip v1.12.34.2-stable.zip
cd ngx_pagespeed-1.12.34.2-stable/
#新的预编译 PSOL 包和 ngx_PageSpeed 的下载是
# 
wget https://dl.google.com/dl/page-speed/psol/1.12.34.2-x64.tar.gz
tar -zxvf 1.12.34.2-x64.tar.gz

官网说要下载nginx最新版,但公司的服务器配置都不到半年,所以就不做更新了,如果你想更新,可以到官网文档更新;

nginx version: nginx/1.12.0

pagespeed添加到nginx安装目录下的configure加上这句话

  1.获取参数:

nginx -V

  2.将整段参数复制下来,并在后尾加上这句话即可

#后尾是下载包存放路径 
--add-module=../ngx_pagespeed-1.12.34.2-stable
#自己完整的写法 
./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=../openssl-1.0.2k --with-pcre=../pcre-8.40 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=../ngx_pagespeed-1.12.34.2-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

  3.编译

make

  4.编译安装分两种,一种是平滑升级,另一种是简单除暴。

    A.简单除暴一键安装

make install

    B.平滑升级

#备份XXX版本的程序,如果不成功可以还原旧版本
mv /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx1.8.1
#复制新生成的程序到执行目录中
cp objs/nginx /usr/local/nginx/sbin/nginx
#检测一下新版本的是否正常
 /usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
#正常的话就开始对nginx做平滑升级了,关闭旧版本程序的进程,启动新版本进程,互相做接替
kill -USR2 `cat /var/run/nginx.pid`
kill -WINCH `cat /var/run/nginx.pid.oldbin`
kill -HUP `cat /var/run/nginx.pid.oldbin` 
kill -QUIT `cat /var/run/nginx.pid.oldbin`


ngx_pagespeed的配置

#创建一个文件夹,存放缓存文件,并赋予www权限
/dev/shm/ngx_pagespeed_cache
#我的配置文件是在 /usr/local/nginx/conf/vhost 的目录进行编辑服务器的conf文件,
####----------pagespeed配置------------####
# on 启用,off 关闭
pagespeed on;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;
# 相对URL
#pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By LiNPX";

# 开启 https
#pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/dev/shm/ngx_pagespeed_cache";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤WordPress的/wp-admin/目录(可选配置,可参考使用)
#pagespeed Disallow "*/wp-admin/*";
#pagespeed Disallow "*/wp-login.php*";
# 过滤typecho的/admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/admin/*";

# 移除不必要的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;
#将不透明的图片png转入成jpeg
pagespeed EnableFilters convert_png_to_jpeg;
#将jpg转换成webp
pagespeed EnableFilters convert_jpeg_to_webp;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
# 图片预加载
pagespeed EnableFilters inline_preview_images;
# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;
# 图片延迟加载
pagespeed EnableFilters lazyload_images;
# 雪碧图片,图标很多的时候很有用
#pagespeed EnableFilters sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;

# 不能删
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; }

以上是我的配置,相关的可查阅pagespeed参数文档

[日志信息]

该日志于 2017-11-24 14:29 由 陈文超 发表在 陈文超前端博客 网站下,你除了可以发表评论外,还可以转载 “写给运维的前端优化方案” 日志到你的网站或博客,但是请保留源地址及作者信息,谢谢!!    (尊重他人劳动,你我共同努力)

Copyright © 2015-2018 陈文超博客 保留所有权利 琼ICP备15003229号| 托管于阿里云 · 博客稳定运行 | 网站地图 |

返回顶部