网页性能智能优化——Apache扩展mod_pagespeed

本文主要介绍出自谷歌公司的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.需要将

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

网页性能智能优化——Apache扩展mod_pagespeed,古老的榕树,5-wow.com