本文主要介绍出自谷歌公司的Apache扩展模块mod_pagespeed。该模块的目标是提高网页的加载速度。具体的实现方法主要是通过优化html代码、css代码、js代码、缩放图片来减少请求数量、请求流量，从而提高网页的加载速度。
?
我们首先展示一下插件的效果。下图是还没有开启mod_pagespeed模块的情况。
在这种情况下，页面中充斥着大量空格，以及很长的变量名称和函数名称。其实对于正式运行的系统来说这些空格和名称都是一种浪费。而且将网页的源代码暴露在外，对于安全性要求比较高的网站，这种做法也是比较危险的。所以，我们可以开启pagespeed模块来提高网站的加载速度，增强网站安全性，另外还可以节约服务器流量。
下图展示了开启pagespeed模块之后的情况。
从图中可以看出pagespeed模块将代码中的注释、空格、换行进行了省略，同时也压缩了变量名称。这样就可以减少网络流量，最终增加了网页的加载速度。
但这只是冰山一角，另外有更多的优化过滤器在下文中有详细说明。
安装
接下来介绍一下pagespeed的安装方法。在Linux中原本只需要一条命令就能安装，但是由于某某墙的存在，国内无法访问到国外的资源。所以需要先要想（翻）办（墙）法下载到安装包。
插件官网：https://developers.google.com/speed/pagespeed/module
下载完成后双击就可以安装。
为了方便大家，我把安装包上传到了国内的网盘中：http://115.com/lb/5lbd38nljh5i
安装完成后需要配置之后才能使用。下文将介绍配置方法。
配置
安装完成之后除了系统上多出了几个文件以外，不会有任何变化，需要经过配置才能使用。在Linux中配置文件的位置在/etc/apache2/mods-enabled/pagespeed.conf。如果你没有找到这个文件，那应该是插件还没有安装好，需要重新检查一下安装过程。
配置文件的前几行应该是这样的：
|
1
2
3
4
|
<IfModule
pagespeed_module>
#
Turn on mod_pagespeed. To completely disable mod_pagespeed, you
#
can set this to "off".
ModPagespeed
on
|
1.需要将
ModPagespeed off
改成
ModPagespeed on
2.找到包含ModPagespeed的那行，默认情况下是被注释的状态，在其之后添加以下代码：
ModPagespeedEnableFilters rewrite_javascript,rewrite_css
ModPagespeedEnableFilters collapse_whitespace,elide_attributes
ModPagespeedEnableFilters combine_javascript,flatten_css_imports,remove_comments,trim_urls
3.重启服务器让配置生效
sudo apachectl restart
经过这些步骤之后我们在浏览器中查看网页源代码就能看到很多变化了。但是从用户的角度来讲，除了页面加载速度提高了以外，页面的展示效果是没有任何变化的。
具体的过滤器在下文中还会进行详细的说明。
特性
-
自动优化网站和相关资源
-
使用最新的网页优化技术
-
40多种内容过滤器
-
免费、开源、更新快
-
可以给主机、CDN进行部署
过滤器
过滤器分为以下几类：
-
优化缓存
-
减少请求数
-
减少请求的额外开销
-
减少数据的大小
-
优化浏览器渲染
-
其他
优化缓存
替换js库
将常用的js库替换成对应的CDN版本。也就是说用户浏览我们的网页时常用的js库不会从我们自己的服务器上获取，而是从公共的服务器上获取，这样就减小了服务器的带宽压力。
配置代码
ModPagespeedEnableFilters canonicalize_javascript_libraries
延长缓存
延长静态文件的缓存时间。
配置代码
ModPagespeedEnableFilters extend_cache
延长PDF的缓存
类似“延长缓存”的过滤器，只是这种过滤器专门针对PDF文件进行优化。
配置代码
ModPagespeedEnableFilters extend_cache_pdfs
LocalStorage缓存
浏览器可以通过LocalStorage在客户端保存一些数据。这种过滤器就利用了这种特性。将一些CSS、JS等文件保存到LocalStorage，下次载入的时候就不再通过304 Not Modified判断缓存是否超时，而是直接从本地文件中读取。
配置代码
ModPagespeedEnableFilters local_storage_cache
分离CSS
将HTML网页中嵌套的css代码分离到外部文件中。这样就能让内嵌的css也享受缓存带来的加速了。
配置代码
ModPagespeedEnableFilters outline_css
分离JS
类似“分离CSS”过滤器。这种过滤器将内嵌的js代码分离到独立的文件中，以便加强缓存。
减少请求次数
合并CSS文件
将同一个页面中多个CSS文件合并为一个文件，这样就减少了请求的数量，从而提高了页面加载速度。
配置代码
ModPagespeedEnableFilters combine_css
展开CSS引用
将css中出现的@import进行展开。这样能减少请求数量，从而提高页面加载速度。
配置代码
ModPagespeedEnableFilters flatten_css_imports
内嵌CSS
将短小的css文件直接嵌入到html中，从而减少请求次数。
配置代码
ModPagespeedEnableFilters inline_css
展开Google Font API
将谷歌的字体接口直接转换成css内嵌到html中，从而减少请求次数。原理其实和内嵌css过滤器差不多，我们可以把谷歌字体API的css看成是短小的css，为了加快请求速度，将其直接嵌入到html中。
配置代码
ModPagespeedEnableFilters inline_google_font_css
合并js
类似合并css，将同一个文件中的多个js合并到同一个文件中。这样原本需要请求多次才能获取多个js，现在只需要请求1次就能获取多个js，减少了请求次数。
配置代码
ModPagespeedEnableFilters combine_javascript
内嵌js
类似内嵌css。这种过滤器将独立js文件中短小的js代码内嵌到html中，从而减少了请求次数。
配置代码
ModPagespeedEnableFilters inline_javascript
将css移动到js之前
在一些旧的浏览器中，js加载甚至运行完毕之后才会开始加载css文件。这非常不可取，所以需要这种过滤器来保证css在js之前。
配置代码
ModPagespeedEnableFilters move_css_above_scripts
分散域名
将主域名随机分散到多个镜像域名中，这样浏览器就可以通过并发请求来达到加速的目的了。
配置代码
ModPagespeedShardDomain domain_to_shard shard1,shard2,shard3...
合并css图
css中可能会用到多个背景图，比如按钮的按下状态、普通状态等，这种过滤器就是将这些图片合并到一张图片中，然后通过background-position定位到原本的图片。
配置代码
ModPagespeedEnableFilters rewrite_css,sprite_images
DNS预解析
通过<link rel="dns-prefetch" href="###"/>实现DNS预解析。这种过滤器将网页中出现的链接进行分析，然后将需要用到的域名放在head中，从而实现预解析。
配置代码
ModPagespeedEnableFilters insert_dns_prefetch
减少请求的额外开销
重写域名
域名改写成配置中指定的域名
配置代码
ModPagespeedEnableFilters rewrite_domains
减少网页内容的长度
折叠空白字符
将多个连续的空白字符替换成单个空白字符。当然前题是不改变任何表现形式。比如<pre>标签中的连续空格就不会被折叠。
配置代码
ModPagespeedEnableFilters collapse_whitespace
简化html属性
将一些无值属性进行简化。比如将<a disabled="disabled"/>简化成<a disabled/>。
配置代码
ModPagespeedEnableFilters elide_attributes
压缩js
将js进行压缩，删除其中的注释、换行、空格等，替换缩短变量名称、函数名称，提取公共的代码。
配置代码
ModPagespeedEnableFilters rewrite_javascript
图片优化
可以将图片转换成内嵌编码
可以将图片重新压缩比如gif转png，jpg提高压缩率等
可以调整图片的大小，减少网络流量
配置代码
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters inline_images
ModPagespeedEnableFilters recompress_images
ModPagespeedEnableFilters convert_gif_to_png
ModPagespeedEnableFilters convert_jpeg_to_progressive
ModPagespeedEnableFilters recompress_jpeg
ModPagespeedEnableFilters recompress_png
ModPagespeedEnableFilters recompress_webp
ModPagespeedEnableFilters strip_image_color_profile
ModPagespeedEnableFilters strip_image_meta_data
ModPagespeedEnableFilters jpeg_subsampling
ModPagespeedEnableFilters convert_png_to_jpeg
ModPagespeedEnableFilters resize_images
ModPagespeedEnableFilters convert_jpeg_to_webp
ModPagespeedEnableFilters convert_to_webp_lossless
ModPagespeedEnableFilters insert_image_dimensions
ModPagespeedEnableFilters resize_rendered_image_dimensions
优化浏览器渲染
转换meta信息
将http-equiv元信息转换成HTTP头
配置代码
ModPagespeedEnableFilters convert_meta_tags
延迟js执行
将js代码的执行时间延迟到onload事件之后。
配置代码
ModPagespeedEnableFilters defer_javascript
图片预览
将图片的缩略图内嵌到html代码中，从而提高页面的渲染速度。
配置代码
ModPagespeedEnableFilters inline_preview_images
ModPagespeedEnableFilters resize_mobile_images
延迟加载图片
当用户看到图片的时候再加载图片。这种过滤器适合图片多的网站，这样能节省一部分带宽。
配置代码
ModPagespeedEnableFilters lazyload_images
将css移动到头部
这种过滤器避免了浏览器反复扫描整个网页。
配置代码
ModPagespeedEnableFilters move_css_to_head
重写css
对css进行压缩和优化。
配置代码
ModPagespeedEnableFilters rewrite_style_attributes
增加head标签
这种过滤器非常简单，它只是查找网页中有没有head标签，没有的话就加上空的head标签。
配置代码
ModPagespeedEnableFilters add_head
其他过滤器
记录页面加载情况
在页面中加入一些js代码来记录页面的加载信息，并反馈给服务器用于后续优化。
配置代码
ModPagespeedEnableFilters add_instrumentation
加入js source map
为了便于调试被压缩过的js代码，加入js source map便于调试。
配置代码
ModPagespeedEnableFilters include_js_source_maps
将css中的@import转换成<link>标签
这种方法的优化作用比较有限，可以换用combine_css, rewrite_css, inline_css, extend_cache进行优化。
配置代码
ModPagespeedEnableFilters inline_import_to_link
加入Google Analytics
在页面中加入Google Analytics
配置代码
ModPagespeedEnableFilters insert_ga
ModPagespeedAnalyticsID <Analytics ID>
异步Google Analytics
将Google Analytics设为异步加载。同步加载的情况下，当Google Analytics未加载完时，其他脚本是不能加载的。开启异步加载之后，就不会出现这个问题了。
配置代码
ModPagespeedEnableFilters make_google_analytics_async
向下兼容
将html5的代码进行转换，使得它对html4的兼容性更高。
配置代码
ModPagespeedEnableFilters pedantic
运行实验
为了测试性能优化的效果，通过这种过滤器可以记录实验数据，便于分析优化效果。
配置代码
ModPagespeedRunExperiment on
ModPagespeedAnalyticsID UA-XXXXXXX-Y