网站速度优化 -如何提高网页加载速度？ - 邦阅网-发现真实的外贸服务商

本章主讲的内容是网站速度优化 -如何提高网页加载速度？众所周知，网页加载速度是谷歌seo优化排名的一个重要组成部分，很多同学都在用各种方法来提高网页的加载速度，包括用代码用插件，但是往往速度并不是特别理想。今天我们来实操讲解如何提高网页加载速度。首先我们先用谷歌官方的网页加载速度测试工具google pagespeed insights来检测一下没有做网页速度优化的得分。这里Jack老师用的就是自己的xxx_uro-ckkcd?.?k_okg这个网站来进行实操讲解，为了更好的说明优化的前后的对比，Jack老师删除了之前所有的优化代码和优化插件。测试后的得分如下图所示：

这个网页加载的测试结果数据真心是惨不忍睹，有一种想把自己摁在马桶里淹死的冲动!好在我们有对应的网页速度优化操作思路，所有不要着急，一步步跟着Jack老师来多网页加载速度进行深入的提升。

网站速度优化技巧一：Gzip压缩

在测试结果中，谷歌告诉我们需要开启Gzip压缩，我们先来看一下什么是Gzip压缩。gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。（看不懂也没关系，反正我们知道有这么个东西知道怎么去优化它就好了）。正如上文所说Gzip是应用于服务器的压缩，我们最常见的服务器类型有Apache和Ngix。对于不同的服务器类型我们有不同的优化代码，所以我们需要先了解一下自己的服务器类型。怎么了解？

1.问主机服务商的工作人员

2.通过工具查询zllp.myyxxx_s?lowrfl_okgy

经过查询后得知，Jack老师的这个网站服务器是bluehost的Nginx类型。

谷歌官方给出了对应的服务器类型的Gzip压缩代码，点击此处进行查询

代码如下：

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)"
gzip_vary on;
gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

这时候我们需要将代码添加到我们网站后代的nginx.conf文件夹中，怎么做？

1.通过filezilla软件联通你的网站后台

2.找到nginx.conf文件，打开后黏贴如上的代码，保存后关闭并上传至服务器

我们来一起看一下，做了Gzip压缩后的效果是什么样的。

在浏览器中输入如下地址：zllpmyylkkd_oz=sre_okgyGe=p.y（这个是站长工具的Gzip检测页面），在搜索框中填入你刚刚进行代码添加的网站域名，出现如下界面：

我们可以清楚的看到这时候Jack老师的网站已经进行了Gzip压缩，压缩率达到78.19%.是不是很有意思？不知道各位同学的压缩率如何？一起来晒晒？

网站速度优化技巧二：除阻塞渲染的资源

做完了Gzip压缩之后，我们再看Page Speed Insights的优化建议第二条是—移除阻塞渲染的资源。那么什么叫阻塞渲染的资源？同学们在打开网站页面的时候，会发现有些网页做的特别炫酷，这些都是由CSS和javascript进行处理的，但是往往很多时候这些CSS和JavaScript在首次绘制页面时是不需要的。所以我们需要将这些CSS和Javascript进行短暂性移除以提高网站的加载速度，让访客得到更好的网站加载速度的体验感。我们一起来看一下如何找出这些阻塞渲染的资源，谷歌官方提供了如下的三种方法：

1.<script> 标记，其具有以下特征：

位于文档的 <head> 中。没有 defer 属性。没有 async 属性。

2.<link rel="stylesheet"> 标记，其具有以下特征：

没有 disabled 属性。如果具有此属性，则浏览器不会下载样式表。没有与用户的设备匹配的 media 属性。

3.<link rel="import"> 标记，其具有以下特征：

没有 async 属性。

对此我们有三种相应的解决方案，如下所示：

1.如果页面没有很多JavaScript且比较小的情况下，你可以内联方式来解决这个问题。您可以使用Autoptimize等插件内联JavaScript。但是，这实际上仅适用于非常小的站点。大多数WordPress网站都会有三个以上的JavaScript，这种方法适用性一般。

2.第二种是异步加载JavaScript。异步Javascript本质上是在HTML解析期间下载文件，并将在完成下载后暂停HTML解析器执行它。

3.第三是延迟加载JavaScript。 defer属性还在HTML解析期间下载文件，但它仅在解析完成后执行。此外，具有此属性的脚本按页面上的外观顺序执行。阅读有关异步和延迟之间差异的文章

在这里Jack老师选择的是第二种解决方案—异步加载Javascript文件.为此，我们需要先安装一个Async JavaScript的插件，安装完成后，进行简单的设置就可以了，如下图所示：

相关的选项设置之后，我们保持更改，点击最下面的“save setting”按钮进行保存。我们来实测一下谷歌官网测速工具对异步加载javascript后的评分

两个网站打开端口的网站加载速度得分都有了提升，虽然提升幅度不是特别大，但是证明这种的提升办法是确实有效的.前面提到阻塞渲染的除了Javascript之外还有CSS，那么我们来看一下针对CSS应该如何进行优化.相关的优化原理这里就不进行赘述了，我们直接讲具体的操作办法，针对这个CSS优化问题，Jack老师推荐的是安装Autoptimize插件.安装和激活过程此处省略若干文字，该插件的设置界面如下：

看不清楚没关系，大概的跟着Jack老师的设置进行勾选就行，我们再来看一下设置后的页面加载速度评分结果，如下图所示

我们可以看到在进行Autoptimize插件安装和设置后，我们的网站速度得到了明显的提升。再回头看谷歌官方测速工具提醒我们需要对“缩短服务器响应用时 (TTFB)进行针对性优化”.很多时候，这一般是由于服务器响应时间过慢导致，即所使用的主机服务器就那样。所以Jack老师经常和同学们说，如果条件允许的话，尽量购买好一点的独立主机服务器或者vps，这样在网页加载速度优化上是有好处的，比方说这个服务器响应时间，独立主机比共享主机就更加的具有优势。对此，Jack老师推荐的是用缓存插件—Cache Enabler或者 wp-rocket来进行处理.wp-rocket在Jack老师的相关文章中有进行实操讲解，这里为了避免内容重复，我们选择cache enabler插件进行讲解，安装完成后设置界面如下：