优化SEO?提升你的PageSpeed评分吧!

简介

Nginx在处理网页请求时速度非常快,但是默认的Nginx配置也会导致PageSpeed评分降低。Google会将您网站的速度作为确定网站SEO位置的关键因素。

在本教程中,您将快速编辑nginx的配置文件,从而立即提升您网站的响应速度和PageSpeed指标。我们的目标是达到80/100以上的分数,这是PageSpeed分数绿色标记的阈值,其表示这是一个快速站点。

首先,本文将带您为特定类型的文件启用Gzip压缩。然后,将配置浏览器缓存以获得额外的提升。使用这些方法将提高在Nginx上运行的任何站点的运行速度,无论其构建的是CMS系统或者是个人博客。只要服务器是Nginx并且您可以编辑配置文件,即使你的服务器性能不够,这个方法也可行。

准备

要完成本教程,您需要:

  • 开始之前,你应该先购买一台服Ubuntu 16.04服务器,我建议您使用腾讯云免费开发者专属在线实验平台进行试验。
  • 您还需要安装Nginx Web服务器。如果您想在服务器上安装整个LNMP(Linux,Nginx,MySQL,PHP)可以参考这个教程

第一步、获取初始PageSpeed分数

在我们进行更改之前,让我们查看现有的PageSpeed分数,这样我们就可以在教程完成后与性能基准进行比较。通过将网站网址粘贴到PageSpeedInsights服务并点击分析来完成此操作。

你会看到如下结果:

https://assets.digitalocean.com/articles/pagespeed_nginx_1604/LbXFqZD.png

我们看到移动设备上的分数为63,桌面上的分数为74,因为其在服务器上未正确配置压缩和浏览器缓存。在本教程结束时,我们在在这个网站上检测下。

注意:在某些情况下,默认的Nginx配置可能已在配置文件中启用了Gzip压缩和缓存,从而产生了完美的PageSpeed分数。如果是这种情况,请继续阅读,因为默认设置不足以进行实际的应用。

第二步、启用压缩

CSS,JavaScript和图像文件可能很大,增加了用户网页下载的数据量。我们将使用压缩功能压缩这些数据,浏览器下载后会在本地解压,从而加快您的网站浏览速度。Nginx想压缩数据,可以选择Gzip工具。它适用所有的Linux发行版。启用Gzip压缩后,浏览器可以更快地下载静态资源,这就是PageSpeed工具(图中)将其标记为需要解决的问题的原因。

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

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

找到服务器配置块,如下所示:

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

让我们添加代码段来配置压缩。

首先,启用Gzip压缩并设置压缩级别:

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

    gzip on;
    gzip_comp_level    5;

您可以选择1~9之间的数字。5是一个比较平衡的值,大多数ASCII文件减少了大约75%的容量。

接下来,告诉Nginx不要压缩任何已经很小并且不太可能进一步压缩的文件。默认值是20字节,其实这并不是一个比较好的默认值,因为它通常会在压缩后导致更大的文件。将它设置为256来代替:

    gzip_comp_level    5;
    gzip_min_length    256;

接下来,告诉Nginx压缩数据:

...
    gzip_min_length    256;
    gzip_proxied       any;

这些代理在客户端的Accept-Encoding功能头变化时同时缓存资源的压缩版本和常规版本。这避免了一个问题,即非Gzip支持的客户端,如果他们的代理给他们压缩版本,那么极少数的客户端会显示乱码。

...
    gzip_proxied       any;
    gzip_vary          on;

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

...
    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

编辑完成后,整个部分应如下所示:

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以利用浏览器缓存,这将从服务器中挤出额外的性能。

第三步、配置浏览器缓存

第一次访问域时,会下载一些文件并将其存储在浏览器的缓存中。在后续访问中,浏览器可以提供本地版本,而不是再次下载文件。这使得网页加载速度更快,因为它只需要检索自上次访问以来已更改的数据。为用户提供了更好的体验,也是PageSpeed数据判断因素之一。

在编辑器中打开默认的Nginx配置文件:

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

您将添加一小段代码,告诉浏览器将CSS,JavaScript,图像和PDF文件缓存时间,这里我们设置为七天。

在上一个Gzip压缩代码之后直接在服务器块中插入以下代码段:

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

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

注意:如果您运行的是一个简单的博客,那么每周强制进行新的下载是没有意义的。相反,您可以告诉浏览器将文件缓存更长时间,例如30天或更长时间。

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

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

让我们看看这些变化如何影响我们的PageSpeed吧。

第四步、测试

我们再次打开PageSpeed Insights ,然后输入你的网址,点击“分析”您将看到压缩和浏览器缓存警告消失了:

https://assets.digitalocean.com/articles/pagespeed_nginx_1604/IQolNMR.png

完成本教程后,您的成绩应该比以前高出至少10分。我们的目标是得分高于80。如果您的网站仍低于此阈值,还有其他一些事项需要注意。请查看下方的优化建议,PageSpeed Insights将详细说明这些内容并向您展示如何修复它们。

结论

本文教你通过对Nginx配置进行简单更改来加速您的网站。更改Nginx配置只是改进PageSpeed的一种方法。您仍然需要编写高性能代码,适当缓存内容,通过内容分发网络(CDN)优化,并尽可能使用压缩策略以保持快的访问速度。


参考文献:《How To Increase PageSpeed Score By Changing Your Nginx Configuration on Ubuntu 16.04》

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

理工男图解零维到十维空间,烧脑已过度,受不了啦!

让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

35230
来自专栏钱塘大数据

中国互联网协会发布:《2018中国互联网发展报告》

在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

13750
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.2K20
来自专栏怀英的自我修炼

考研英语-1-导学

英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

12310
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18330
来自专栏微信公众号:小白课代表

不只是软件,在线也可以免费下载百度文库了。

不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

44730
来自专栏前端桃园

知识体系解决迷茫的你

最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

22440
来自专栏腾讯高校合作

【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

16220
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

30440
来自专栏腾讯社交用户体验设计

ISUX Xcube智能一键生成H5

51520

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励