chaihongjun.me

ngx_pagespeed过滤器和部分配置介绍

ngx_pagespeed过滤器和部分配置介绍

  •  `responsive_images`(响应式图片,需要和resize_images一起使用)

  •  `responsive_images_zoom`(响应式图片可以缩放)

  •  `add_head`(***CoreFilters***)

  •  `combine_heads`(该是在<head>里面的东西都放到<head>里面去)

  •  `inline_import_to_link`(***CoreFilters***)

  •  `outline_css`(外联的CSS写入一个文件)

  •  `outline_javascript`(外联的JS写入一个文件)

  •  `move_css_above_scripts`(CSS资源都放到JS前面去)

  •  `move_css_to_head`(CSS资源都放到<head>里面去)

  •  `combine_css`(***CoreFilters***)(合并CSS文件)

  •  `rewrite_css`(***CoreFilters***)(压缩css)

  •  `fallback_rewrite_css_urls`(***CoreFilters***)(优化CSS文件中引用的资源,主要是图片)

  •  `rewrite_style_attribute`(***CoreFilters***)(优化内联的样式 style="xxxx:xxx")  

  •  `rewrite_style_attributes_with_url`(优化内联样式,但是必须带有url的,一般是背景图或者样式文件)

  •  `flatten_css_imports`(***CoreFilters***)(@import导入的CSS内联到元素)

  •  `prioritize_critical_css`(根据页面考虑关键CSS优先呈现,避免CSS阻塞)

  •  `make_google_analytics_async`(启用Google Analytics异步)

  •  `make_show_ads_async`(异步加载谷歌广告,高风险,试验性质)

  •  `rewrite_javascript`(***CoreFilters***)(压缩 javascript)

  •      `rewrite_javascript_external`(同上,重写外部脚本,实际使用`rewrite_javascript`)

  •      `rewrite_javascript_inline`(同上,重写内部脚本,实际使用`rewrite_javascript`)

  •  `include_js_source_maps`

  •  `combine_javascript`(***CoreFilters***)(将多个JS文件合并到一个文件中)

  •  `canonicalize_javascript_libraries`(从 ajax.googleapis.com 提供第三方库)

  •  `inline_css`(***CoreFilters***)(内联CSS)

  •  `inline_google_font_css`(内联谷歌字体)

  •  `inline_javascript`(***CoreFilters***)(内联JS)

  •  `local_storage_cache`(利用H5的localStorage能力)

  •  `insert_ga`(插入GA)

  •  `pagespeed AnalyticsID <Analytics ID>;`

  •  `rewrite_images`(***CoreFilters***)(优化图片,实际使用了`inline_images`,`recompress_images`,`convert_to_webp_lossless`,`resize_images`)

  •      `inline_images`(小图转换成data:url)

  •      `recompress_images`(一组优化,包含`convert_gif_to_png`,`convert_png_to_jpeg`,`convert_jpeg_to_webp`,`convert_jpeg_to_progressive`,`jpeg_subsampling`, `recompress_jpeg`,`recompress_png`,`recompress_webp`,`strip_image_color_profile`,`strip_image_meta_data`)

  •          `convert_gif_to_png`(gif转化成png,动画忽略)

  •          `convert_png_to_jpeg`(PNG转化成jpeg)

  •          `convert_jpeg_to_webp`(jpeg转化成webp)

  •          `convert_jpeg_to_progressive`(优化图片为渐进式)

  •          `jpeg_subsampling`(减少jpeg图片子采样)

  •          `recompress_jpeg`(重写压缩jpeg图片,依据指定的质量)

  •          `recompress_png`(重写压缩png图片,依据指定的质量)

  •          `recompress_webp`(重写压缩webp图片,依据指定的质量)

  •          `strip_image_color_profile`(剥离颜色配置文件)

  •          `strip_images_meta_data`(删除图片的meta元数据) 

  •      `convert_to_webp_lossless`(gif/png转换为无损webp)    

  •      `resize_images`(调整图像大小,修改图片width,height,并且使用`strip_image_color_profile`,`strip_images_meta_data`)

  •          `strip_image_color_profile`(剥离颜色配置文件)

  •          `strip_images_meta_data`(删除图片的meta元数据)    

  •  `convert_to_webp_animated`(gif动画转换为webp动画)

  •  `insert_image_dimensions`(<img> 标签内插入width和height值)

  •  `resize_rendered_image_dimensions`(图片调整大小为渲染的实际尺寸,忽略指定的width,height,并且也启用了`strip_image_color_profile`,`strip_images_meta_data`)

  •      `strip_image_color_profile`(剥离颜色配置文件)

  •      `strip_images_meta_data`(删除图片的meta元数据)

  •  `inline_preview_images`(提供低质量预览图,一旦onload之后换为高质量图,应该和`insert_image_dimensions`一起使用)

  •  `resize_mobile_images`(类似`inline_preview_images`仅适合移动端,应该和`insert_image_dimensions`一起使用)

  •  `remove_comments`(删除HTML注释)

  •  `collapse_whitespace`(删除HTML中不必要的空格)

  •  `elide_attribute`s(删除一些可以优化的没有意义的HTML属性,比如: disabled="disabled" 优化为 disabled)

  •  `extend_cache`(***CoreFilters***)(相当于`extend_cache_images`,`extend_cache_scripts`和`extend_cache_css`将静态资源的缓存时间设置为最大,并将哈希值写入url中,比如 ```<img src ="images/logo.gif.pagespeed.ce.xo4He3_gYf.gif">```)

  •      `extend_cache_css`(同上,优化css)

  •      `extend_cache_images`(同上,优化图片)

  •      `extend_cache_scripts`(同上,优化js)

  •  `extend_cache_pdfs`(同上,优化pdf文件)

  •  `sprite_images`(雪碧图,检测作用于CSS里面的gif,png背景图,需要同`rewrite_css`一起使用)

  •  `rewrite_domains`(默认不启用)

  •  `trim_urls`(优化缩短URL)

  •  `pedantic`(帮助HTML通过HTML4验证)

  •  `remove_quotes`(删除一些可以省略的引号)

  •  `add_instrumentation`(检测页面性能回传服务器?)

  •  `convert_meta_tags`(***CoreFilters***)(给HTML页面元标记加响应标头)

  •  `defer_javascript`(延迟JS执行)

  •  `dedup_inlined_images`(重复内联图像,一次写出内联图像,并通过javascript将图像注入重复出现)

  •  `lazyload_images`(延迟加载图像)

  •  `insert_dns_prefetch`(预解析DNS)

  •  `hint_preload_subresources`(提示资源预加载 在http响应头添加head 以便预加载)

  •  `in_place_optimize_for_browser`(进行特定于浏览器的就地优化)



明确告诉从磁盘哪里加载资源

pagespeed LoadFromFile "https://www.example.com/static/" "/path/to/static/";

禁止加载目录下全部文件

pagespeed LoadFromFileRule Disallow /var/www/cgi-bin/

禁止加载某类型文件

pagespeed LoadFromFileRuleMatch Disallow \ .php$;

允许加载某类型文件

pagespeed LoadFromFileRuleMatch allow \.css$;

禁止优化

pagespeed Disallow "*/jquery-ui-1.8.2.custom.min.js";

允许优化

pagespeed Allow "*/styles/*.css";

直接抓取https资源

pagespeed FetchHttps enable;

配置密钥

pagespeed SslCertDirectory "/path/to/SslCertDirectory/";
pagespeed SslCertFile "/path/to/SslCertDirectory/sslfile.cer";

配置缓存存放的地方和保存时间和清理周期

pagespeed FileCachePath  "/dev/shm/pagespeed_cache/";
pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000


PS:附上MD和单独HTML版本

ngx_pagespeed过滤器和部分配置介绍pagespeed.7z

也可以在线预览: ngx_pagespeed过滤器


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»