如何通过更改Ubuntu16.04上的Nginx配置来提高PageSpeed分数

介绍

Nginx 在处理网页请求时表现出色，但即使网页看起来很快，默认的 Nginx 配置也会导致 Google 的 PageSpeed Insights 工具标记您网站的效率低下并对其进行评分不良。 Google 将您网站的速度作为确定您网站搜索排名的关键因素。

在本教程中，您将快速编辑您的域的配置文件，从而立即提高您网站的响应速度及其 PageSpeed 指标。目标是获得高于 80/100 的分数，因为这是谷歌将在您的分数上应用绿色标记的阈值，表示网站快速。

首先，您将为特定类型的文件启用 Gzip 压缩。然后，您将配置浏览器缓存以获得额外的提升。这些方法将提高在 Nginx 上运行的任何站点的速度，无论它是用什么软件或 CMS 构建的。例如，一个缓慢且性能不佳的 Wordpress 安装将立即获得收益，而无需触及核心线或支付昂贵的性能插件。即使站点运行在低功率的共享主机上，这种方法也有效，只要服务器是 Nginx 并且您可以编辑配置文件。

先决条件

要完成本教程，您需要：

使用 this initial server setup tutorial 设置一台 Ubuntu 16.04 服务器，包括 sudo 非 root 用户和防火墙。
按照如何在 Ubuntu 16.04 上安装 Nginx 教程在您的服务器上安装 Nginx。

第 1 步 — 获取初始 PageSpeed 分数

在我们进行任何更改之前，让我们捕获现有的 PageSpeed 分数，以便在教程完成后我们有一个性能基准来进行比较。为此，请将站点 URL 粘贴到 Google 的 PageSpeed Insights 服务并单击 Run Insights。

您将看到如下结果：

在此示例中，我们看到移动设备上的得分较低，为 63，桌面设备上的得分为 74，因为在服务器上未正确配置压缩和浏览器缓存。在本教程结束时，这两项将通过 Nginx 配置更改在所有设备类型上解决。

注意：在某些情况下，默认的 Nginx 配置可能已经在全局配置文件中启用了 Gzip 压缩和缓存，从而得到看起来很完美的 PageSpeed 分数。如果是这种情况，请继续阅读，因为默认设置对于实际设置来说还不够好。

让我们从配置 Nginx 压缩一些响应开始。

第 2 步 — 启用压缩

CSS、JavaScript 和图像文件可能很大，增加了用户必须下载的数据量。压缩意味着将这些资产缩小为更紧凑的版本，该版本更小，但仍包含所有必需的数据。 Gzip 是在 Nginx 上执行此压缩的一种选择。它在所有主要的 Linux 发行版中都可用，只需正确启用和配置即可。启用 Gzip 压缩后，浏览器可以更快地下载静态资源，这就是 PageSpeed 工具将其标记为需要解决的问题的原因。

要启用压缩，请在 nano 或您喜欢的文本编辑器中打开您网站的 Nginx 配置文件。我们将在此示例中使用默认文件：

sudo nano /etc/nginx/sites-available/default

找到服务器配置块，如下所示：

/etc/nginx/sites-available/default

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    . . .
}

让我们添加一系列片段来配置压缩。

首先，启用 Gzip 压缩并设置压缩级别：

/etc/nginx/sites-available/default

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    
    gzip on;
    gzip_comp_level    5;

您可以为此值选择 1 和 9 之间的一个数字。 5 是大小和 CPU 使用率之间的完美折衷，为大多数 ASCII 文件提供大约 75% r 的减少（几乎与级别 9 相同）。

接下来，告诉 Nginx 不要压缩任何已经很小且不太可能进一步缩小的东西。默认值为 20 字节，这很糟糕，因为它通常会导致压缩后的文件更大。将其设置为 256 代替：

/etc/nginx/sites-available/default

...
    gzip_comp_level    5;
    gzip_min_length    256;

接下来，告诉 Nginx 压缩数据，即使是通过 CloudFront 等代理连接到我们的客户端：

/etc/nginx/sites-available/default

...
    gzip_min_length    256;
    gzip_proxied       any;

然后告诉这些代理在客户端的 Accept-Encoding 功能标头发生变化时缓存资源的压缩版本和常规版本。这避免了一个不支持 Gzip 的客户端，如果他们的代理给他们压缩版本，会显示乱码的问题，这在今天是非常罕见的。

...
    gzip_proxied       any;
    gzip_vary          on;

最后，为要压缩的输出指定 MIME 类型。我们将压缩图像、JSON 数据、字体和其他常见文件类型：

/etc/nginx/sites-available/default

...
    gzip_vary          on;

    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
    # text/html is always compressed by gzip module

完成后，整个部分应类似于以下示例：

/etc/nginx/sites-available/default

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    
    gzip on;
    gzip_comp_level    5;
    gzip_min_length    256;
    gzip_proxied       any;
    gzip_vary          on;

    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
    # text/html is always compressed by gzip module
}

保存并关闭文件。

您已经在配置文件中添加了许多行，并且总是有可能缺少字符或分号，这可能会破坏事情。为确保您的文件此时没有错误，请测试 Nginx 配置：

sudo nginx -t

如果您完全按照本教程中的说明进行了更改，您将不会看到任何错误消息。

此更改将为您的站点速度提供最大的加速，但您也可以配置 Nginx 以利用浏览器缓存，这将从服务器中挤出额外的性能。

第 3 步 — 配置浏览器缓存

第一次访问域时，这些文件会被下载并存储在浏览器的缓存中。在随后的访问中，浏览器可以提供本地版本，而不是再次下载文件。这使网页加载速度更快，因为它只需要检索自上次访问以来已更改的数据。它为用户提供了更好的体验，这也是 Google 的 PageSpeed Insights 建议实施它的原因。

再次在编辑器中打开默认的 Nginx 配置文件：

sudo nano /etc/nginx/sites-available/default

您将添加一小段代码，告诉浏览器在缓存中存储 CSS、JavaScript、图像和 PDF 文件 7 天。

在前面的 Gzip 压缩代码之后直接在 server 块中插入以下代码段：

/etc/nginx/sites-available/default

...
# text/html is always compressed by gzip module

location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
    expires 7d;
}

注意：这是针对经常变化的内容的配置。如果您正在运行一个开发活动最少的简单博客，那么每周强制进行新下载是没有意义的。相反，您可以告诉浏览器将资产缓存更长的时间，例如 30 天或更长时间。

最终的 Nginx 配置文件应如下所示：

/etc/nginx/sites-available/default

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    
    gzip on;
    gzip_comp_level    5;
    gzip_min_length    256;
    gzip_proxied       any;
    gzip_vary          on;

    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
    # text/html is always compressed by gzip module

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        expires 7d;
    }
}

保存并关闭文件以退出。确保配置没有错误：

sudo nginx -t

然后重新启动 Nginx 以将这些新指令应用于传入请求。

sudo systemctl restart nginx

您已经定制了 Nginx 以提供更好的 PageSpeed 分数。让我们看看这些变化如何影响我们的 PageSpeed。

第 4 步 — 衡量结果

要检查这些配置更改将您的 PageSpeed 分数提高了多少分，请再次通过 PageSpeed Insights 工具运行您的网站，方法是粘贴 URL 并单击 Run Insights。您将看到压缩和浏览器缓存警告消失了：

将新分数与您的初始基线指标进行比较。完成本教程后，您的成绩应该至少比以前高 10 分。

我们的目标是获得80分以上的分数。如果您的网站仍低于此阈值，则需要注意其他事项。如果您单击每个问题的 显示如何修复 链接，PageSpeed Insights 将详细说明这些问题的具体内容并向您展示如何修复它们。每个站点的具体步骤各不相同，超出了本教程的范围。

结论

通过对 Nginx 配置进行简单更改，您已经加速了您的网站。您的 PageSpeed 分数现在好多了，网站加载速度也快了很多。这将使用户更快乐，并提高您网站在 Google 眼中的质量。 PageSpeed 是一个非常重要的排名信号，您现在正在证明您的域正在为访问者提供愉快的体验。

更改 Nginx 配置只是提高 PageSpeed 的一种方法，仅靠它自己可能还不够。您仍然需要编写高性能代码、适当地缓存内容、通过内容交付网络 (CDN) 提供资产，并尽可能使用缩小来保持速度。