前言
ngx_pagespeed 是一个 Nginx 的扩展模块,可以加速你的网站,减少页面加载时间,它会自动将一些提升web性能的实践应用到网页和相关的资源(CSS、JS和图片)上,无需你修改内容和流程,对于前端开发人员来说,能省下许多功夫。需要注意的是,Ngx_pagespeed这个模块对Nginx本身来说并不会带来性能上的优化,反而会加重服务器的负担,所以不建议小内存少内核的VPS使用。但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。其实WordPress上也有一款类似功能的插件W3 Total Cache:https://wordpress.org/plugins/w3-total-cache/,功能不比ngx_pagespeed差。
功能包括:
- 图片优化: stripping meta-data, dynamic resizing, recompression
- CSS & JavaScript 压缩、合并等
- 小资源的内联
- 推迟图片和 JS 的加载
- HTML 重写
- 延长缓存扩展
安装
对于使用军哥lnmp1.3的一键安装包的用户
执行以下指令
1 2 3 4 5 | wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.11.33.4-beta.zip unzip v1.11.33.4-beta.zip cd ngx_pagespeed-1.11.33.4-beta/ wget https://dl.google.com/dl/page-speed/psol/1.11.33.4.tar.gz tar -xzvf 1.11.33.4.tar.gz |
安装好之后执行以下指令编辑upgrade_nginx.sh
1 2 3 | cd / cd lnmp1.3-full/include vi upgrade_nginx.sh |
找到[kbd]./configure –user=www –group=www –prefix=/usr/local/nginx[/kbd],在这行代码的末尾添加
[kbd]–add-module=$HOME/ngx_pagespeed-1.11.33.4-beta[/kbd]
接着更新一下nginx
1 | ./upgrade_nginx.sh |
不用更新nginx的版本,运行这个命令的结果只是把pagespeed这个模块加入到nginx中去。
对于手动搭建平台的用户
一、自动安装PageSpeed
1 2 | bash <(curl -f -L -sS https://ngxpagespeed.com/install) \ --nginx-version latest |
脚本会自动安装Dependencies以及自动编译最新版本的的Nginx和ngx_pagespeed,当然也可以指定要编译的Nginx和pagespeed版本。
如果不想要编译最新版本的Nginx
1 2 | bash <(curl -f -L -sS https://ngxpagespeed.com/install) \ --ngx-pagespeed-version latest-stable |
这样只会准备好ngx_pagespeed的module,之后还需要自己来编译Nginx
更多指令参照
1 | bash <(curl -f -L -sS https://ngxpagespeed.com/install) --help |
二、手动安装PageSpeed
1)Denpendencies安装
RedHat, CentOS下执行
1 | sudo yum install gcc-c++ pcre-devel zlib-devel make unzip |
Ubuntu/Debian下执行
1 | sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip |
2)下载PageSpeed
1 2 3 4 5 6 7 8 9 | NPS_VERSION=[这里输入版本号,比如1.11.33.4,最新版本号在https://modpagespeed.com/doc/release_notes获取] cd wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip unzip v${NPS_VERSION}-beta.zip cd ngx_pagespeed-${NPS_VERSION}-beta/ psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz [ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL) wget ${psol_url} tar -xzvf $(basename ${psol_url}) # extracts to psol/ |
3)下载Nginx并且编译
1 2 3 4 5 6 7 8 9 10 11 | NGINX_VERSION=[这里输入要编译的NGINX版本] cd wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz tar -xvzf nginx-${NGINX_VERSION}.tar.gz cd nginx-${NGINX_VERSION}/ ./configure --add-module=$HOME/ngx_pagespeed-${NPS_VERSION}-beta ${PS_NGX_EXTRA_FLAGS} ... 你自己想要加入的其他编译参数 ... make sudo make install |
PageSpeed设置
当然安装好以后pagespeed需要手工设置以后才能正常工作
修改[kbd]/usr/local/nginx/conf/vhost/*.conf[/kbd]
在server代码块中启动pagespeed
1 2 3 4 5 6 7 8 9 10 11 12 | pagespeed on; # Needs to exist and be writable by nginx. Use tmpfs for best performance. pagespeed FileCachePath /var/ngx_pagespeed_cache; # 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 ~ "^/ngx_pagespeed_beacon$" { } |
更多设置参考:https://modpagespeed.com/doc/configuration
分享一个网上的配置:
[kbd]/usr/local/nginx/conf/pagespeed.conf[/kbd]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 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"; |
补充:如果遇到Rewrite冲突(404),那么在Nginx的conf文件里加入这一行
1 | if ($request_uri ~ "(ngx_pagespeed_([^.]+)/(.*)?)") { break; } |
Pagespeed中的缓存管理
pagespeed默认是按照文件的ttl来判断什么时候更新缓存的,很多时候我们是没有给文件设置ttl,这样话就会造成
pagespeed默认将文件缓存时间设置成一年!!这样是非常不好的,尤其是在测试主题的时候,
有两种方法解决,一种是一步步把文件ttl设置好,这样非常麻烦,第二种就是使用pagespeed的管理页面
在ngx_pagespeed 1.8.x版本以后谷歌引入了pagespeed的管理页面,这样给缓存管理带来了很大的方便。
首先需要在[kbd]/usr/local/nginx/conf/vhost/*.conf[/kbd]中pagespeed on下一行加入
1 2 3 4 5 | pagespeed EnableCachePurge on; pagespeed FileCachePath /var/ngx_pagespeed_cache; #下面两行把默认路径(pagespeed_admin)自定义成自己想要的管理路径,不建议用默认路径 pagespeed AdminPath /pagespeed_admin; location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; } |
保存以后再用service nginx restart 重启nginx应用配置。
这样你就可以用http://你的域名/你自定义的管理路径 访问pagespeed的管理页面了