logo苏工外贸站
最新文章SEO跨境电商Magento自学WordPress基础教程Wagtail
WordPress基础教程

进阶：Nginx增加Google PageSpeed模块

苏工 avatarBy 苏工
138
Tags:GOOGLE PAGESPEED
image of 进阶：Nginx增加Google PageSpeed模块

在网页测速结果内经常会看到优化提醒：缩短服务器响应时间，使用浏览器缓存，缩减资源大小，优化图片，优化CSS发送过程，移除会阻止内容呈现的JavaScript等等，虽然WordPress经过多个插件组合可以实现这些功能，但是太多的插件，服务器负担太重导致服务器响应时间变长，谷歌PageSpeed可以使用高速缓存，共享内存等方式加速网站资源的传输。一次配置可多主机调用，实现十分方便。

本篇在上篇基础上深入讲LNMP环境下Nginx增加PageSpeed模块，使之模块化，可定制，优化CSS发送过程，优化图片，缩减资源大小等工作，实现Web性能的最佳实践，改善网页延迟。

PageSpeed 基础篇 基础篇：Nginx增加Google PageSpeed模块

安装MemCached

apt-get install memcached

执行netstat -tap | grep memcached，查看是否安装成功。 

#安装成功会出现如下显示
root@sufob:~# netstat -tap | grep memcached
tcp 0 0 localhost:11211 *:* LISTEN 15703/memcached

配置PageSpeed

新建配置文件

先创建一个文件夹存放PageSpeed配置文件。

新建一个main.conf文件，用作PageSpeed全局变量控制。 

mkdir /usr/local/nginx/page_speed
nano /usr/local/nginx/page_speed/main.conf

将下面内容复制粘贴到main.conf保存。可参考注释理解各项功能。 

#main.conf
#PageSpeed 配置
pagespeed on;
#1.12.34.1以上可设置all
pagespeed ProcessScriptVariables all;
#启用PageSpeed Gzip请求资源，此项要求ng启用gzip
pagespeed FetchWithGzip on;

#配置筛选项默认CoreFilters
pagespeed RewriteLevel CoreFilters;
#是否尊重原始header
pagespeed RespectVary off;
#是否让PageSpeed优化缓存时间（接管缓存控制）
pagespeed DisableRewriteOnNoTransform off;
#重写HTML缓存头
pagespeed ModifyCachingHeaders on;
#列出未解决的错误
pagespeed ListOutstandingUrlsOnError on;
#限制资源最大值启用优化，默认大小16M
pagespeed MaxCacheableContentLength 16777216;
#配置共享内存元数据缓存
pagespeed CreateSharedMemoryMetadataCache "/var/cache/pagespeed/" 51200;
#配置文件高速缓存
pagespeed FileCachePath /var/cache/pagespeed;
pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000;
pagespeed LRUCacheKbPerProcess 8192;
pagespeed LRUCacheByteLimit 16384;

#启用memcached，默认64M，需SELinux enabled
pagespeed MemcachedServers "localhost:11211";
#共享内存元数据缓存检查点，5分钟一次
pagespeed ShmMetadataCacheCheckpointIntervalSec 300;

#缓存清除
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;
#清空缓存临界值，优化率80%
pagespeed DownstreamCacheRewrittenPercentageThreshold 80;

#PageSpeed管理页面配置
#共享内存统计
pagespeed Statistics on;
#开启虚拟主机统计信息
pagespeed UsePerVhostStatistics on;

pagespeed StatisticsLogging on;
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;
#消息缓冲区大小，默认为0，不保留消息
pagespeed MessageBufferSize 100000;
pagespeed LogDir /var/log/pagespeed;
pagespeed StatisticsPath /ngx_pagespeed_statistics;
pagespeed GlobalStatisticsPath /ngx_pagespeed_global_statistics;
pagespeed MessagesPath /ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed_console;
pagespeed AdminPath /pagespeed_admin;
pagespeed GlobalAdminPath /pagespeed_global_admin;

新建一个pagespeed.conf文件，用作Nginx配置文件，实现PageSpeed模块化的必要配置。 

nano /usr/local/nginx/page_speed/pagespeed.conf

将下面内容复制粘贴到pagespeed.conf保存。 

#pagespeed.conf
#PageSpeed优化设置
#直接获取HTTPS资源，允许自签名证书资源
pagespeed FetchHttps enable,allow_self_signed;

#加载筛选文件
include /usr/local/nginx/page_speed/filters_config.conf;

#启用测量客户端加载和呈现页面所花费的时间
pagespeed EnableFilters add_instrumentation;
#预处理DNS
pagespeed EnableFilters insert_dns_prefetch;

#缓存
#相当于同时使用了extend_cache_images, extend_cache_scripts和 extend_cache_css
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;

#确保对pagespeed优化资源的请求进入pagespeed处理程序并且没有额外的头部信息
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$ps_dollar" { }

#PageSpeed Admin Dashboard
include /usr/local/nginx/page_speed/dashboard.conf;

新建一个filters_config.conf文件，用于控制Pagespeed功能的开启及参数。 

nano /usr/local/nginx/page_speed/filters_config.conf

将下面内容复制粘贴到filters_config.conf保存。 

#filters_config.conf
## Text / HTML
pagespeed EnableFilters combine_heads;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters convert_meta_tags;
pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters pedantic;
pagespeed EnableFilters remove_comments;
pagespeed EnableFilters remove_quotes;
#pagespeed EnableFilters trim_urls;

## JavaScript
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters canonicalize_javascript_libraries;
pagespeed EnableFilters inline_javascript;
#高风险,延迟加载js
#pagespeed EnableFilters defer_javascript;

## CSS
pagespeed EnableFilters outline_css;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters inline_import_to_link;
pagespeed EnableFilters inline_css;
pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters fallback_rewrite_css_urls;
pagespeed EnableFilters rewrite_style_attributes_with_url;

## Images
pagespeed EnableFilters dedup_inlined_images;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters inline_images;
pagespeed EnableFilters convert_gif_to_png;
pagespeed EnableFilters convert_jpeg_to_progressive;
pagespeed EnableFilters recompress_jpeg;
pagespeed EnableFilters recompress_png;
pagespeed EnableFilters recompress_webp;
pagespeed EnableFilters strip_image_color_profile;
pagespeed EnableFilters strip_image_meta_data;
pagespeed EnableFilters jpeg_subsampling;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters resize_images;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters insert_image_dimensions;
pagespeed NoTransformOptimizedImages on;
pagespeed EnableFilters sprite_images;

新建一个dashboard.conf文件，用于配置管理面板。 

nano /usr/local/nginx/page_speed/dashboard.conf

将下面内容复制粘贴到dashboard.conf保存。 

#管理员控制面板
location /ngx_pagespeed_statistics {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location /ngx_pagespeed_global_statistics {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location /ngx_pagespeed_message {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location /pagespeed_console {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location ~ ^/pagespeed_admin {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location ~ ^/pagespeed_global_admin {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}

配置缓存文件夹权限

mkdir /var/cache/pagespeed
chown www:root /var/cache/pagespeed
chmod 700 /var/cache/pagespeed
mkdir /var/log/pagespeed
chown www. /var/log/pagespeed

安装apache-utils

apt-get install apache2-utils

设置PageSpeed管理面板的用户名密码。

htpasswd -d -b -c /usr/local/nginx/page_speed/.htpasswd sufob Pagespeed

其中sufob为用户名，Pagespeed为密码，根据情况修改成自己的用户名、密码。

配置Nginx

/usr/local/nginx/conf/nginx.conf中http标签最后一行include vhost/*.conf;前插入下面一行 

include /usr/local/nginx/page_speed/main.conf;

示例：

    ...
        access_log /home/wwwlogs/access.log;
    }
include /usr/local/nginx/page_speed/main.conf;
include vhost/*.conf;
}

在每个要启用PageSpeed模块的网站Nginx配置文件对应conf内引用下面一行即可实现PageSpeed模块化 

include /usr/local/nginx/page_speed/pagespeed.conf;

修改Nginx的conf文件，需要重新加载Nginx使配置生效。
终端内运行

lnmp nginx reload

效果

查看网站源码，可以看到jquery异步加载，其余js脚本采用延迟加载，这实现了PageSpeed Insights中对移除会阻止内容呈现的 JavaScript的要求。

jpg图片自动转换成webp格式。

管理缓存

Dashboard有两种权限，全局管理员和网站管理员，可以在dashboard中设置新的用户名、密码，实现权限分配。

  1. 管理面板

    1.1. 全局管理员面板

    1.2. 管理员面板

  2. 缓存报表

点击Console，可查看服务器缓存报表。根据报表数据针对性修改conf文件，达到实用要求。

更具体的内容可参照官方文档https://www.modpagespeed.com/doc/console

  1. 缓存清除

点击Caches标签下的Purge Cache，可以清除指定内容缓存也可清除全部缓存。全部清除缓存会使服务器短时间内负载升高，根据情况自行决定。

结论

本文中的conf配置文件能满足大部分速度优化需要，如果需要调整配置文件，修改文章中的filters_config.conf配置即可，根据自己的需要在行开头加#号注释掉或者添加新功能。

如果遇到jquery特效失效的情况，极有可能是js合并或者异步、延迟加载逻辑出错，重新调整conf中js的筛选器或者修改网站源码将jquery等js文件移到footer，手动设置延迟、异步加载。

作者：

苏工

SEO专家兼数据分析师，具备深厚的编程知识。擅长利用Python和前端技术（JavaScript、HTML、CSS）开发优化策略，提升网站排名和用户体验。精通GA4和谷歌标签管理器，熟练进行数据分析和解读，以数据驱动决策，优化SEO成效。结合技术能力和市场洞察，为电子商务和在线品牌打造全方位的增长解决方案。

更多文章
Charlie Sue profile picture.