PageSpeed优化工具详解

发布时间:2023-05-20

一、PageSpeed简介

PageSpeed是一个开源的优化工具集,由Google开发。它主要用于网站速度的优化,可以对网页的内容进行压缩、缓存和合并,有效地减少带宽使用和页面加载时间。除此之外,PageSpeed还能分析网页的性能问题,并给出优化建议。 PageSpeed有两个版本:一是针对Apache HTTP Server的模块,另一个是Chrome和Firefox浏览器的扩展。这篇文章主要介绍Apache模块的使用方法。

二、安装和配置

1、安装

#!/bin/bash
# 安装编译工具和依赖库
yum -y install make automake gcc gcc-c++ kernel-devel  \
  zlib zlib-devel pcre pcre-devel openssl openssl-devel
# 下载和解压
cd /usr/local/src/
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz
tar -xzf v1.13.35.2-stable.tar.gz
# 下载和编译modpagespeed库
cd incubator-pagespeed-ngx-1.13.35.2-stable/
wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
tar -xzf 1.13.35.2-x64.tar.gz
# 编译Nginx
cd /usr/local/src/
wget https://nginx.org/download/nginx-1.14.2.tar.gz
tar zxvf nginx-1.14.2.tar.gz
cd nginx-1.14.2/
./configure --prefix=/usr/local/nginx \
--add-module=/usr/local/src/incubator-pagespeed-ngx-1.13.35.2-stable \
--with-http_stub_status_module \
--with-http_ssl_module \
--with-http_gzip_static_module \
--with-cc-opt="-Wno-error"
make && make install

2、配置

user nobody;
worker_processes auto;
error_log /usr/local/nginx/logs/error.log debug;
pid /usr/local/nginx/logs/nginx.pid;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    access_log /usr/local/nginx/logs/access.log main;
    sendfile on;
    keepalive_timeout 65;
    # PageSpeed配置
    pagespeed on;
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    server {
        listen 80;
        server_name localhost;
        pagespeed RewriteLevel PassThrough;
        pagespeed DisableFilters rewrite_images;
        root /usr/local/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

这里我们将PageSpeed的文件缓存路径设置为/var/ngx_pagespeed_cache,并在server段的location段中开启了PageSpeed的RewriteLevel,并禁用了rewrite_images过滤器。

三、使用PageSpeed

1、使用PageSpeed Insights

PageSpeed Insights是Google提供的在线工具,可以分析网站在移动端和桌面端的性能,给出针对性的建议。用户只需在工具网站输入网站URL,即可获得性能报告。

2、使用PageSpeed模块

启用PageSpeed模块后,每个请求都会被检查以确定网页是否应该被优化。如果是,PageSpeed会通过HTML过滤器、图像压缩、按需生成CSS和JavaScript等手段来改进网页质量。下面我们来举一个网页重定向的例子:

# 重定向
location /redirect {
    # 记录重定向流量,采用统计代码方式
    add_header Cache-Control "max-age=0, no-store";
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";
    add_header X-XSS-Protection "1; mode=block";
    # 将/redirect请求重定向到/new_location位置,并在重定向左右自动合并查询字符串
    pagespeed RewriteLevel CoreFilters;
    pagespeed RewriteMap "http://localhost/new_location" "/new_location";
    location = /new_location {
        return 200 "Redirected";
    }
}

这里我们使用PageSpeed的RewriteMap替换了/redirect重定向请求,将其重定向到/new_location,并自动合并查询字符串。同时,我们也添加了一些HTTP头,以保障用户隐私和安全。

四、PageSpeed的优势

  1. 全面优化:PageSpeed可以对网页的各种组成部分进行优化,包括HTML、CSS、JavaScript、图片等。
  2. 扩展性好:PageSpeed可以通过添加自定义过滤器进一步优化网页。
  3. 免费和开源:PageSpeed是一个免费、开源的项目。

五、PageSpeed的劣势

  1. 可能会导致一些不良影响:当网页优化方式存在问题时,可能导致一些不良的影响,如:渲染延迟、内容错误等。
  2. 性能损失:使用PageSpeed可能会降低服务器处理请求的性能,尤其是在流量较大的情况下。
  3. 难以配置:PageSpeed的配置较为复杂,需要一定的技术水平。

六、总结

PageSpeed作为一个免费、开源的网站优化工具,该如何理解它的优势与劣势呢?我们可以这么说:PageSpeed的优点是它支持对网页的各个部分进行优化,强大的扩展功能和资源的广泛性。 同时,它也有一些劣势:可能会导致一些不良影响,如渲染延迟、性能损失等,难以配置。如果你需要在平衡性能和优化效果之间取得最好的平衡,使用PageSpeed可能是个不错的选择。