网站速度优化:如何在2019年

大约十年前,谷歌宣布, 网站速度会影响搜索排名。虽然文章没有说明速度对排名的影响,网站管理员阅读理解宣布网站速度优化应该是他们的发展计划。

除了搜索引擎优化速度优化的好处,页面加载时间是重要的决定仍有多少用户在你的网站上。HubSpot的报道,转换的减少与页面加载时间的增加有关-一秒钟的负载时间延迟可能导致~20-30%的转换率降低!!

在过去的几年里,有增加平均页面大小。事实上,在2018年,,平均来说,页面大小超过2MB!此页面加载的重要部分由图像组成,静态文件,和视频。

至少可以说,你的网站和你的网站整体速度的大小问题,很多!即使有一个不断增加的页面加载,有事情你可以做来提高你的网站如何处理事情。这篇文章讨论了这一切。

网站速度优化:你需要在我们开始之前

这篇文章假设您已经处理了两个关键问题:

  • 您使用一个优化的主题介绍不多膨胀的WordPress本身。
  • 你在足够快的主机

如果你在这两个盒子上打勾,您可以继续到下面的部分来探索一个全面的任务列表,您可以承担,以确保您的网站加载时间最小。

开始使用网站速度优化

解剖一个web页面

解剖
优化网页速度的技巧是理解网页的内容。让我们经历最受欢迎的组件:

  • 为网页提供结构和内容的HTML代码——即使WordPress在你的网站上运行派对,它所做的就是获取数据库中的所有内容,并将其转换为静态HTML输出
  • 静态文件,帮助设计,功能和交互(CSS,JavaScript)
  • 背景图像,逻各斯,和内容
为了呈现一个页面,浏览器请求的每个元素一个web页面,页面本身以HTML的形式,静态文件,图像,外部内容。因此,数 HTTP请求对网站速度优化也起着至关重要的作用。

发现你的立场:网站速度优化工具

我们继续之前到特定的技术,帮助你优化你的网站,让我们花点时间回顾一下有助于分析网页速度的工具。

如果你是一个初学者寻找休闲测试工具,你可以考虑使用Pingdom工具套件快速评估你的网站。更完整的解决方案,你可以直接到谷歌的页面速度的见解

Pingdom速度测试
用于速度测试的Pingdom工具
除了这些,如果你正在寻找一个快速选择一个浏览器插件的形式,你可以试着 YSlow,哪些测试网站和在浏览器中提供建议。此外,的 GTmetrix工具利用YSlow的测试结果进行报告。

💡如果你想要更多的选择来测试你的网站速度,这个帖子列表5最好的速度检查工具

在这篇文章中列出的技术之前,确保你在这里列出的工具之一上运行你的网站作为基准。只要你做任何网站速度优化,确保回到工具检查是否有任何速度改进。

步骤1:优化静态文件

本指南的第一步关注静态文件的优化——最普遍的形式的样式表(CSS文件)和脚本(JS文件)。

(a)将CSS移动到头部,JS到下

要执行的第一个优化是确保样式表在页面结构的部分,而所有脚本都移动到正好位于结尾上方标记你的页面。这背后的逻辑很简单:

  • 一般来说,样式表的大小比脚本小
  • 标签在页面的浏览器呈现的身体之前,任何元素中呈现的页面将有适当的样式
  • 脚本通常的功能发挥作用的内容页面加载后,所以,脚本通常可以被放置在底部

这种做法确保参观你的网站不会离开在挫折在等待页面加载。

为了快速处理脚本部分,您可以安装脚本页脚为WordPress插件。它可以工作在自动驾驶仪,也工作得很好。

(b)设置缩小

缩小是删除文件执行中不必要的那些部分的过程。例如,在你的样式表或脚本,执行时不需要以下步骤:

  • 空白的缩进
  • 评论
  • 长函数和变量名
  • 未使用的代码

缩小有助于大大减少静态文件的大小。可以使用以下服务来缩小文件使变小,或者安装其中之一缩小在WordPress插件

(c)使用异步加载

当资源出现在网页上时,网页浏览器会按顺序呈现和请求资源。亚搏娱乐国际这称为同步加载。然而,可以通过使用异步的属性一旦资源可用就加亚搏娱乐国际载它们。例如,您可以异步加载脚本如下:

这是一个插件列表,帮助你在WordPress异步加载

(d)使用GZIP压缩

GZip压缩是一种通过HTTP请求压缩资源的技术。亚搏娱乐国际用GZip压缩,资源的服务器发送压缩文件,亚搏娱乐国际时浏览器会将呈现一个web页面。

压缩和解压所需的时间和资源亚搏娱乐国际的资源由时间和带宽超过保存在一个较小的文件从服务器转移到客户机。这种技术不仅可以更快地加载页面,而且还可以节省服务器的成本。

Gzip压缩是一些WordPress缓存插件像WP最快的缓存。

(e)使用谷歌CDN为流行的库

最后的优化技术在这一步时使用谷歌或者微软CDN抓取站点上使用的任何公共库。背后的原因很简单——由于这些发布商的流行,可能客人已经资源在他们浏览器的缓存版本。

步骤2:优化图片

正如上面所讨论的,增加大小的主要来源网页多年来的图片。

甚至看一看CodeinWP的数字:yabo娱乐国际

图像负载

因此,,处理图片应该导致网站速度的最显著提高,确实如此。

图像对于网站来说是必不可少的,然而,对于web使用全质量图像并不推荐。你应该压缩图像在某种程度上,大幅减少了尺寸,同时给予公平的视觉质量。

你可以做几件事情做到这一点,网站速度优化:

(a)上传大小合适的图像

您当前的主题可能具有最大尺寸的图像,它可以显示-维度。找出那是什么然后只上传图片最大的两倍。

为什么要两次?这也将使主题显示retina-quality版本的图像。

(b)使用正确的类型的形象

两种最常用的图片在网络上jpg和png。

他们不是一样的。

  • JPG图像是照片和其他复杂图像的颜色信息
  • PNG图像图形是完美的,几乎没有颜色信息,比如界面截图。
一个JPG图像的例子
日落
PNG图像的示例
主题

(c)优化前在本地上传图片

之前有各种工具可以使用上传图片到您的网站。

  • 对于Web解决方案,试一试镀锡
  • 对于桌面,试一试意象派
镀锡
意象派

(d)延迟加载你的图像

另一种优化图像的技术是延迟加载,实践中形象不下载到访问者向下滚动看到它。

lazyload演示
延迟加载CodeinWP示范yabo娱乐国际

这里有一个惰性加载图像的完整指南在你的网站上。

(e)得到一个图像优化插件

最后但并非最不重要,你应该得到高质量的图像优化插件对你的WordPress站点。取决于您最终将使用哪一个,你可能会得到大量的图像优化需要在自动驾驶仪。

这里是6个最好的图像优化插件相比

如果你需要一个快速的建议,检查我们自己的Optimole。它提供了高效的图像压缩,除了一个CDN在自由计划!Optimole在对抗主要竞争对手时也取得了一些优异的成绩:

PNG优化结果
插件 原始PNG大小 优化后 优化% 压缩
Optimole 301千字节 34 KB 88.7% 有损和无损
Imagify 301千字节 67 KB 77.7% 有损
镀锡 301千字节 79.7 KB 73.5% 有损
短像素 301千字节 90.4千字节 69.96% 有损
帕克 301千字节 247 KB 17.9% 无损的
301千字节 257.4 KB 14.6% 无损的
JPG优化结果
插件 原始JPG大小 优化后 优化% 压缩
短像素 518 KB 169千字节 67.36% 有损
镀锡 518 KB 248.6千字节 52% 有损
Optimole 518 KB 274千字节 47% 有损和无损
Imagify 518 KB 338.7千字节 34.64% 有损
518 KB 488.9 KB 5.7% 无损的
帕克 518 KB 493 KB 4.9% 无损的

第三步:优化HTTP请求

早些时候,我们讨论了浏览器,当用户开始加载一个网页,实际的转移是通过单独的HTTP请求。单个请求获取每个资源。因此,这样的请求数量的增加会增加您的web页面的加载时间。

站点请求
HTTP请求的web页面

(一)合并文件

第一个任务是减少HTTP请求的负载结合类似的资源。亚搏娱乐国际在减少资源时,亚搏娱乐国际你可以把类似的文件组合在一起。例如,所有的样式表(CSS文件),和所有自定义JavaScript文件可以组合成单个文件。这减少了客户端加载所有资源时必须发出的请求的数量。亚搏娱乐国际

再一次,这些WordPress的简化插件可以帮助你做到这一点。

(b)尽量减少DNS查找

当HTTP请求一个域www.yabo娱乐国际codeinwp.com,执行DNS(域名系统)查找以查找服务器的IP地址。因此,你的目标也应该尽量减少DNS查找所有请求的数量,为了加快网站加载。

这里有一个指导降温Kinsta关于如何做到这一点。

(c)启用维生

没有任何优化,浏览器为每个资源发送单个HTTP请求。一旦下载完成此连接关闭。然后,浏览器向服务器发出新资源请求。保持活力是一种在资源下载完成时不终止请求的技术。

你可以通过以下方式:使保持生机

(d)最小化重定向

重定向是自动将客户机从一个位置带到资源的另一个位置的指令。每个重定向会增加您的web页面的加载时间,除非绝对必要,你应该避免任何重定向代码中。

(e)使用CDN

CDN(内容分发网络)是web服务器的集合在广阔的地理位置,快速高效地为客户提供内容。

请求资源的客户端将从地理上最接近客户端位置的服务器获得资源。这确保了内容要求在最短的时间内到达客户端!!

我们有一个单独的资源比较顶部CDN WordPress站点的解决方案,以及如何被注视的信息。

步骤4:缓存

不存在任何网站速度优化指南可以没有部分缓存。一些技术,我们前面所讨论的,GZip压缩和minificaiton等,今天是许多缓存解决方案的一部分。

缓存是指存储资源的现象在一个临时存储在需要时迅速检索它。有各种形式的缓存:

  • 页面缓存:服务器上存储的页面的静态HTML版本
  • 数据库缓存:存储在服务器上的常见数据库查询的结果(比如站点的前10篇文章)
  • 浏览器缓存:在浏览器中存储页面的部分

我们比较了在这篇文章中最受欢迎的WordPress缓存插件。TL;去结账可湿性粉剂火箭如果你正在寻找一个完整的解决方案。另外,如果你喜欢免费的东西,这是一个指导如何配置W3总缓存

第五步:优化移动

在本文前面的部分中,我们讨论了与桌面和移动相关的优化技术。然而,移动内容的消费越来越多,and there are new challenges a smaller screen brings. This section,因此,讨论了移动设备的网站速度优化方法。

移动优化指的是确保移动访问web页面的经验作为桌面同行相同的功能和效率。以下列表包含用于管理移动设备的网络内容的某些卫生因素:

  • 使用响应web设计,确保不同的设备得到不同版本的web页面
  • 避免使用闪光灯和弹出窗口,移动设备可能不支持它
  • 不要等交互链接位置太接近彼此

除了这些因素外,AMP(加速移动页)是一个项目,旨在创建内容快速、一致的设备。

这是在WordPress中开始使用AMP

结论

我希望本指南给你一些建议你应该做什么来提高你的网站的网站速度优化的整体水平。

只是回顾一下;我们第一次看的剖析一个web页面来解决特定领域改善。然后,我们继续优化的具体步骤:

  • 步骤1覆盖的优化静态文件的形式样式表和脚本
  • 步骤2处理图像及其优化
  • 第三步是所有关于技术优化HTTP请求
  • 第四步讨论了一些受欢迎的缓存技术
  • 步骤5涉及移动设备的优化

当谈到网站速度优化时,你有什么困难吗?请在下面的评论中告诉我们。

别忘了加入我们的速成课程以加速你的WordPress网站。通过一些简单的修复,你可以减少加载时间,甚至50 - 80%: