IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    部署nginx前端优化模块ngx_pagespeed

    root发表于 2013-05-08 11:46:34
    love 0

    ngx_pagespeed

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

    图像优化:剥离元数据、动态调整,重新压缩
    CSS和JavaScript压缩、合并、级联、内联
    小资源内联
    推迟图像和JavaScript加载
    对HTML重写、压缩空格、去除注释等
    提升缓存周期

    提示:ngx_pagespeed模块目前仍处于开发阶段,功能上与mod_pagespeed相比稍有欠缺。但开源的力量不可小觑,Github上针对ngx_pagespeed Bugs的反馈更新很频繁,基本上都能很快得到解决,使用前务必考虑这点,不建议部署在生产环境。另,系统内GCC版本必须大于4.2。

    ngx_pagespeed更新频率较高,建议及时更新到最新版本,而且最好先部署在本地环境中,经过一番测试稳定后再上线生产环境。主要测试方法参考这里:https://github.com/pagespeed/ngx_pagespeed/wiki/Testing

    编译nginx和ngx_pagespeed,务必查看官方的材料:
    ngx_pagespeed官方 http://ngxpagespeed.com/
    Github https://github.com/pagespeed/ngx_pagespeed
    Google Developers https://developers.google.com/speed/docs/mod_pagespeed/build_ngx_pagespeed_from_source
    这里环境为nginx 1.9.6 和pagespeed 1.10.33.2,步骤如下:

    # git clone git://github.com/pagespeed/ngx_pagespeed.git
    # cd ngx_pagespeed/
    # wget -c https://dl.google.com/dl/page-speed/psol/1.10.33.2.tar.gz
    # rm -rf psol
    # tar -zxvf 1.10.33.2.tar.gz # expands to psol/
    # ./scripts/pagespeed_libraries_generator.sh > /usr/local/nginx/conf/pagespeed_libraries.conf

    然后重新编译nginx,首先查看线上使用的编译参数,然后追加ngx_pagespeed模块进去,编译后覆盖到原来nginx的sbin路径,然后重启一下nginx就可以了。

    # nginx version: nginx/1.9.6
    built by gcc 4.8.3 20140911 (Red Hat 4.8.3-9) (GCC)
    built with OpenSSL 1.0.2d 9 Jul 2015
    TLS SNI support enabled
    configure arguments: --user=www --group=www --prefix=/usr/local/nginx --sbin-path=/usr/sbin/nginx --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-file-aio --with-ipv6 --with-http_geoip_module --with-zlib=/usr/local/src/zlib-1.2.8 --with-openssl-opt=no-krb5 --with-openssl=/usr/local/src/openssl-1.0.2d --with-threads --with-http_v2_module --with-http_ssl_module --with-http_realip_module --with-http_sub_module --with-http_xslt_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_stub_status_module --with-http_addition_module --with-http_image_filter_module --with-http_secure_link_module --with-http_flv_module --with-http_mp4_module --with-google_perftools_module --with-mail --with-mail_ssl_module --with-http_degradation_module --with-libatomic --add-module=/usr/local/src/ngx_pagespeed --with-pcre=/usr/local/src/pcre-8.37 --with-pcre-jit --with-ld-opt=-lrt --with-debug
    # make # 只make,接下来不需要make install
    # mv /usr/sbin/nginx /usr/sbin/nginx.old # 备份原来的执行文件
    # cp objs/nginx /usr/sbin/nginx # 复制刚刚编译好的执行文件
    # /usr/sbin/nginx -t # 测试配置文件
    nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
    nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

    测试通过,然后进行平滑升级nginx,首先发送USR2信号给nginx,然后再优雅退出旧的进程。

    # kill -USR2 `cat /var/run/nginx.pid`
    # kill -QUIT `cat /var/run/nginx.pid.oldbin`

    另外32位系统编译时,需要在./configure 后面加上–with-cc-opt=’-DLINUX=2 -D_REENTRANT -D_LARGEFILE64_SOURCE -march=i686 -pthread’ 。强烈建议在64位系统下使用ngx_pagespeed模块,64位系统并不会比32位系统使用更多内存。

    安装ngx_pagespeed后第一件事情就去看Google官方帮助文件,必须了解清楚模块的运作和相应过滤器的功能,个人建议是不用开这么多过滤。还要记得打开日志记录以便于查看运行产生的错误,一般在nginx.conf的error处指定日志输出路径(如:error_log /var/log/nginx/error.log info;),nginx启动后在终端中查看日志输出。在你所打开的任何一个过滤器(EnableFilters)后,建议都做这个步骤检查pagespeed是否出错。

    个人使用时发现默认的配置会和nginx的rewrite系统有一些不兼容的情况,特别是开启了lazyload_images rewrite_css rewrite_images rewrite_javascript之类的,那么html源码里面出现的ngx_pagespeed_static url地址一访问就会出现404 not found的错误,或者直接rewrite到index.php,那么你需要做一件事:在ngx_pagespeed公用配置里面添加一行,如下红字部分。重点:Discuz论坛不要开启lazyload_images这个过滤器,否则会出现不能显示帖子内的图片附件。

    #  Ensure requests for pagespeed optimized resources go to the pagespeed
    #  handler and no extraneous headers get set.
    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_global_statistics { allow 127.0.0.1; deny all; }
    location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
    location /pagespeed_console { allow 127.0.0.1; deny all; }
    if ($request_uri ~ "(ngx_pagespeed_([^.]+)/(.*)?)") { break; }

    添加之后无需更改原有网站的rewrite规则,即可正常使用。

    本站开启了ngx_pagespeed,然后用几个前端测试工具进行测试,在PageSpeed测试环节,本站得到了93分。测试结果可以点击下列地址查看:http://gtmetrix.com/reports/blog.icodex.org/jmELNaSS
    http://www.webpagetest.org/result/130510_X8_4Z8/

    PageSpeed Insights

    总结:经过朋友和自己的多番测试,nginx部署安装前端优化模块ngx_pagespeed还是非常有必要的。
    ——————————————————– 分割线——————————————————–

    附本站所在服务器上的配置文件片段:

    0. nginx编译参数部分

    [icodex@srv0 ~]$ sudo nginx -V
    nginx version: nginx/1.9.6
    built by gcc 4.8.3 20140911 (Red Hat 4.8.3-9) (GCC)
    built with OpenSSL 1.0.2d 9 Jul 2015
    TLS SNI support enabled
    configure arguments: --user=www --group=www --prefix=/usr/local/nginx --sbin-path=/usr/sbin/nginx --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-file-aio --with-ipv6 --with-http_geoip_module --with-zlib=/usr/local/src/zlib-1.2.8 --with-openssl-opt=no-krb5 --with-openssl=/usr/local/src/openssl-1.0.2d --with-threads --with-http_v2_module --with-http_ssl_module --with-http_realip_module --with-http_sub_module --with-http_xslt_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_stub_status_module --with-http_addition_module --with-http_image_filter_module --with-http_secure_link_module --with-http_flv_module --with-http_mp4_module --with-google_perftools_module --with-mail --with-mail_ssl_module --with-http_degradation_module --with-libatomic --add-module=/usr/local/src/ngx_pagespeed --with-pcre=/usr/local/src/pcre-8.37 --with-pcre-jit --with-ld-opt=-lrt --with-debug

    1. /usr/local/nginx/conf/pagespeed.conf

     pagespeed UseNativeFetcher on;
     pagespeed FetcherTimeoutMs 300;
     resolver 8.8.4.4 8.8.8.8 valid=300s;
     resolver_timeout 10s;
     pagespeed Disallow "*.php*";
     pagespeed Allow "*";
     pagespeed RewriteDeadlinePerFlushMs 100;
     pagespeed ImplicitCacheTtlMs 300;
     pagespeed InPlaceRewriteDeadlineMs 30;
     pagespeed FetchWithGzip on;
     pagespeed ForceCaching on;
     pagespeed FetchHttps enable;
     pagespeed FetchHttps enable,allow_self_signed;
     pagespeed ReportUnloadTime on;
    
     pagespeed FileCachePath /var/cache/pagespeed;
     pagespeed FileCacheSizeKb 102400;
     pagespeed FileCacheCleanIntervalMs 3600000;
     pagespeed FileCacheInodeLimit 500000;
    
     pagespeed LRUCacheKbPerProcess 8192;
     pagespeed LRUCacheByteLimit 16384;
     pagespeed BlockingRewriteKey psatest;
    
     pagespeed DefaultSharedMemoryCacheKB 50000;
     pagespeed CreateSharedMemoryMetadataCache "/var/cache/pagespeed" 51200;
    
     #Rewriting Level
     pagespeed RewriteLevel CoreFilters;
     #The default level is CoreFilters. The core set of filters contains:
     #add_head,combine_css,combine_javascript,convert_meta_tags,extend_cache,fallback_rewrite_css_urls,flatten_css_imports,inline_css,inline_import_to_link,inline_javascript,rewrite_css,rewrite_images,rewrite_javascript,rewrite_style_attributes_with_url;
     pagespeed EnableFilters in_place_optimize_for_browser,combine_heads,insert_ga,trim_urls,collapse_whitespace,remove_comments,remove_quotes,insert_dns_prefetch,make_google_analytics_async,make_show_ads_async;
     pagespeed EnableFilters add_instrumentation,pedantic,elide_attributes,decode_rewritten_urls,rewrite_domains;
     pagespeed EnableFilters inline_google_font_css,rewrite_javascript_external,rewrite_javascript_inline,;
     pagespeed EnableFilters move_css_above_scripts,move_css_to_head,outline_css,prioritize_critical_css,rewrite_style_attributes;
     #pagespeed EnableFilters defer_javascript;
     pagespeed EnableFilters outline_javascript,include_js_source_maps;
     pagespeed EnableFilters canonicalize_javascript_libraries,inline_google_font_css;
     pagespeed EnableFilters inline_preview_images;
     pagespeed EnableFilters lazyload_images;
     pagespeed EnableFilters responsive_images,resize_images,resize_rendered_image_dimensions,resize_mobile_images,sprite_images,recompress_images;
     pagespeed EnableFilters convert_gif_to_png,convert_jpeg_to_progressive,convert_png_to_jpeg,convert_jpeg_to_webp,convert_to_webp_animated,convert_to_webp_lossless,jpeg_subsampling,recompress_jpeg,recompress_png,recompress_webp,strip_image_color_profile,strip_image_meta_data;
     pagespeed EnableFilters resize_rendered_image_dimensions,dedup_inlined_images,insert_image_dimensions;
     pagespeed EnableFilters local_storage_cache,extend_cache_css,extend_cache_images,extend_cache_scripts,extend_cache_pdfs;
    
     pagespeed InPlaceResourceOptimization on;
     pagespeed CombineAcrossPaths off;
    
     pagespeed CssFlattenMaxBytes 102400;
     pagespeed CssImageInlineMaxBytes 3072;
     pagespeed CssInlineMaxBytes 20480;
     pagespeed CssOutlineMinBytes 40960;
     pagespeed ImageInlineMaxBytes 40960;
     pagespeed ImageJpegNumProgressiveScans -1;
     pagespeed ImageJpegNumProgressiveScansForSmallScreens -1;
     pagespeed ImageLimitOptimizedPercent 100;
     pagespeed ImageLimitResizeAreaPercent 100;
     pagespeed ImageRecompressionQuality 85;
     pagespeed ImageResolutionLimitBytes 32000000;
     pagespeed JpegRecompressionQuality -1;
     pagespeed JpegRecompressionQualityForSmallScreens 70;
     pagespeed WebpRecompressionQuality 80;
     pagespeed WebpRecompressionQualityForSmallScreens 70;
     pagespeed JsInlineMaxBytes 20480;
     pagespeed JsOutlineMinBytes 40960;
     pagespeed MaxCombinedCssBytes -1;
     pagespeed MaxCombinedJsBytes 51200;
     pagespeed MaxInlinedPreviewImagesIndex -1;
     pagespeed MinImageSizeLowResolutionBytes 3072;
     pagespeed RetainComment "[WILDCARD PATTERN]";
    
     pagespeed UseExperimentalJsMinifier on;
     pagespeed ImageMaxRewritesAtOnce 0;
     pagespeed ProgressiveJpegMinBytes 5120;
     pagespeed CriticalImagesBeaconEnabled true;
     pagespeed AvoidRenamingIntrospectiveJavascript on;
     pagespeed AddOptionsToUrls on;
     pagespeed DomainRewriteHyperlinks on;
    
     pagespeed UrlValuedAttribute span src hyperlink;
     pagespeed UrlValuedAttribute div background image;
     pagespeed MaxCacheableContentLength -1;
     pagespeed LazyloadImagesAfterOnload on;
     #pagespeed LazyloadImagesBlankUrl "http://www.gstatic.com/psa/static/1.gif";
     pagespeed LazyloadImagesBlankUrl "//clients.evlit.com/psa_static/1.gif";
     pagespeed ServeRewrittenWebpUrlsToAnyAgent off;
     pagespeed MaxSegmentLength 1024;
    
     #Respecting Vary Headers
     pagespeed RespectVary on;
     pagespeed PrivateNotVaryForIE off;
     #Honoring no-transform Cache-Control Headers
     pagespeed DisableRewriteOnNoTransform off;
     #Lower-casing HTML element and attribute names
     pagespeed LowercaseHtmlNames on;
     #Preserving HTML caching headers
     pagespeed ModifyCachingHeaders off;
     #Reducing Load by Randomly Dropping Expensive Rewrites
     pagespeed RewriteRandomDropPercentage 1;
     #Preserve URL Relativity
     pagespeed PreserveUrlRelativity on;
     #Specifying the value for the PageSpeed header
     pagespeed XHeaderValue "Powered By Pagespeed";
     #Configuring the location of static assets
     pagespeed StaticAssetPrefix /pagespeed_static/;
     pagespeed BeaconUrl "/pagespeed_beacon";
     #List outstanding urls on error
     pagespeed ListOutstandingUrlsOnError on;
     #Respecting X-Forwarded-Proto
     pagespeed RespectXForwardedProto on;
     #let's speed up PageSpeed by storing it in the super duper fast memcached
     pagespeed MemcachedServers "127.0.0.1:11211";
     pagespeed MemcachedTimeoutUs 100000;
    
     # PageSpeed Admin
     pagespeed MessageBufferSize 100000;
     pagespeed StatisticsPath /pagespeed_statistics;
     pagespeed GlobalStatisticsPath /pagespeed_global_statistics;
     pagespeed MessagesPath /pagespeed_message;
     pagespeed ConsolePath /pagespeed_console;
     pagespeed AdminPath /pagespeed_admin;
     pagespeed GlobalAdminPath /pagespeed_global_admin;
    
     # PageSpeed Cache Purge
     pagespeed EnableCachePurge on;
     pagespeed PurgeMethod PURGE;
    
     # PageSpeed Downstream Caches
     pagespeed DownstreamCachePurgeLocationPrefix http://localhost:80;
     pagespeed DownstreamCacheRebeaconingKey "N7CBn8AuiDkj6o";
    
     #pagespeed RunExperiment on;
     #pagespeed AnalyticsID UA-40827094-1;
     #pagespeed ExperimentVariable 3;
     #pagespeed ExperimentSpec "id=3;percent=10;default";
     #pagespeed ExperimentSpec "id=4;percent=10;level=CoreFilters;enabled=inline_preview_images,remove_comments;disabled=rewrite_javascript;options=AvoidRenamingIntrospectiveJavascript=off,CssInlineMaxBytes=4096";
     #pagespeed ExperimentSpec "id=5;percent=10";

    2. /usr/local/nginx/conf/pagespeed_statslog.conf

    #  Pagespeed stats logging 1.6.29.3+
    pagespeed Statistics on;
    pagespeed StatisticsLogging on;
    pagespeed LogDir /var/log/pagespeed;

    3. /usr/local/nginx/conf/pagespeed_handler.conf

    #  Ensure requests for pagespeed optimized resources go to the pagespeed
    #  handler and no extraneous headers get set.
    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
    location ~ "^/pagespeed_static/" { }
    location ~ "^/pagespeed_beacon$" { }
    
    location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
    location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }
    location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
    location /pagespeed_console { allow 127.0.0.1; deny all; }
    location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }
    location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }

    4. /usr/local/nginx/conf/nginx.conf

    user  www;
    google_perftools_profiles /tmp/tcmalloc;
    worker_cpu_affinity 00000001 00000010 00000100 00001000 00010000 00100000 01000000 10000000;
    # no need for more workers in the proxy mode
    worker_processes 8;
    error_log /var/log/nginx/error.log info;
    #error_log /dev/null info;
    worker_rlimit_nofile 5120;
    events {
     worker_connections 5120; # increase for busier servers
     use epoll; # you should use epoll here for Linux kernels 2.6.x
    }
    http {
     access_log off;
     server_name_in_redirect off;
     server_names_hash_max_size 2048;
     server_names_hash_bucket_size 256;
     server_tokens off;
     include    mime.types;
     default_type  application/octet-stream;
     sendfile on;
     tcp_nopush on;
     tcp_nodelay on;
     client_header_timeout 60s;
     client_body_timeout 60s;
     send_timeout 600s;
     reset_timedout_connection on;
     keepalive_timeout 5 60;
     fastcgi_connect_timeout 300;
     fastcgi_send_timeout 300;
     fastcgi_read_timeout 300;
     fastcgi_keep_conn on;
     fastcgi_buffer_size 16k;
     fastcgi_buffers 16 16k;
     fastcgi_busy_buffers_size 32k;
     fastcgi_temp_file_write_size 32k;
     fastcgi_intercept_errors on;
     open_file_cache max=51200 inactive=20s;
     open_file_cache_valid 30s;
     open_file_cache_min_uses 1;
     ssi on;
     ssi_silent_errors on;
     ssi_types text/shtml;
     gzip on;
     gzip_disable "MSIE [1-6].(?!.*SV1)";
     gzip_vary on;
     gzip_http_version 1.0;
     gzip_min_length 1100;
     gzip_comp_level 6;
     gzip_buffers 16 16k;
     gzip_proxied any;
     gzip_types application/ecmascript;
     gzip_types application/javascript;
     gzip_types application/pdf;
     gzip_types application/postscript;
     gzip_types image/svg+xml;
     gzip_types text/plain;
     gzip_types text/css;
     gzip_types text/csv;
     gzip_types application/json;
     gzip_types application/x-javascript;
     gzip_types text/xml;
     gzip_types application/xml;
     gzip_types application/xml+rss;
     gzip_types text/javascript;
     connection_pool_size 256;
     client_max_body_size 100m;
     client_body_buffer_size 128k;
     client_header_buffer_size 4k;
     large_client_header_buffers 4 4k;
     request_pool_size 32k;
     output_buffers 4 32k;
     postpone_output 1460;
     client_body_temp_path /tmp/nginx_client;
     proxy_temp_path /tmp/nginx_proxy;
     fastcgi_temp_path /tmp/nginx_fastcgi;
     uwsgi_temp_path /tmp/nginx_uwsgi;
     scgi_temp_path /tmp/nginx_scgi;
     limit_conn_zone $binary_remote_addr zone=one:10m;
    
     set_real_ip_from  127.0.0.1;
     real_ip_header    X-Forwarded-For;
     real_ip_recursive on;
     geoip_country  /var/lib/GeoIP/GeoIP.dat;
     geoip_city     /var/lib/GeoIP/GeoIPCity.dat;
    
     include pagespeed_libraries.conf;
     include pagespeed.conf;
     include pagespeed_statslog.conf;
    
     include "/usr/local/nginx/conf/vhosts/*.conf";
    }

    5. /usr/local/nginx/conf/vhosts/default.conf

    server {
      listen 80 default;
      server_name _;
      access_log /var/log/nginx/default-access.log combined;
      error_log /var/log/nginx/default-error.log;
      root /var/www/html;
      index index.html index.htm index.php;
      charset utf-8;
    
      pagespeed on;
      include pagespeed_handler.conf;
    
      location / {
        try_files $uri @backend-runtime;
      }
    
      location @backend-runtime {
        proxy_pass http://127.0.0.1:8080;
      }
    
      location ~* .(ftpquota|htaccess|htpasswd|asp|aspx|jsp|asa|mdb)?$ {
        deny all;
      }
    }


沪ICP备19023445号-2号
友情链接