网站速度优化:如何在2020年逐步实现

大约十年前,谷歌宣布网站速度将影响网络搜索排名。尽管该帖子并未阐明速度对排名的影响,但阅读该公告的网站管理员理解,网站速度优化应该是他们发展计划的重中之重.


此外 SEO速度优化的好处, 页面加载时间对于确定您的网站上保留了多少用户非常重要。 HubSpot报告说 转换下降与页面加载时间的增加有关 –加载时间延迟一秒可能会导致转化率降低约20-30%!

网站速度优化指南

在过去的几年中,平均页面大小有所增加。实际上,在2018年, 平均而言,页面大小超过2 MB! 此页面加载的重要部分包括图像,静态文件和视频.

至少可以说,网站的大小和网站的整体速度非常重要!即使页面负载不断增加,您也可以采取一些措施来改善网站的处理方式。这篇文章讨论了这一切.

网站速度优化:开始之前您需要什么

这篇文章假定您已经处理了两个关键事项:

  • 您使用的优化主题不会在WordPress本身之上带来太多膨胀.
  • 您在足够快的主机上.

如果在这两个框中打勾,则可以继续以下各节,以探索可以确保网站加载时间最短的任务的完整列表。.

网站速度优化入门

网页剖析

解剖学

优化网页速度的诀窍是了解网页中包含的内容。让我们看一下最受欢迎的组件:

  • HTML代码可为网页提供结构和内容-即使WordPress在您的网站上举办聚会,它所做的只是获取数据库中的内容-所有内容-并将其转换为静态HTML输出
  • 有助于设计,功能和交互性的静态文件(CSS,JavaScript)
  • 用于背景,徽标和内容的图像

为了呈现页面,浏览器请求网页的每个元素–页面本身以HTML,静态文件,图像,外部内容的形式出现。因此,数量 HTTP请求 在网站速度优化中也起着至关重要的作用.

找出自己的立场:网站速度优化工具

在继续介绍可帮助您优化网站的特定技术之前,让我们花一点时间来回顾有助于分析网页速度的工具.

如果您是初学者,正在寻找一种休闲测试工具,则可以考虑使用 Pingdom工具 套件,用于快速评估您的网站。要获得更完整的解决方案,您可以转到 Google的Page Speed见解.

速度测试Pingdom速度测试工具

除此之外,如果您正在寻找浏览器插件形式的快速选项,则可以尝试 慢速, 测试网站并从浏览器中提供建议。此外, GTmetrix工具 利用YSlow的测试结果生成报告.

��如果您想要更多选择来测试您的网站速度,这篇文章将列出 5种最好的速度检查工具.

在学习这篇文章中列出的技术之前,请确保您使用此处列出的工具之一运行网站以作为基准。一旦您对网站进行了速度优化,请确保返回该工具以检查速度是否有所改善.

步骤1:优化静态文件

本指南的第一步着重于静态文件的优化-最流行的形式是样式表(CSS文件)和脚本(JS文件).

(a)将CSS移至头部,将JS移至底部

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

  • 通常,样式表的大小小于脚本的大小
  • 在浏览器呈现页面主体之前将样式表加载到标签中之后,页面中呈现的所有元素都将具有正确的样式
  • 脚本的功能通常在页面内容加载后开始发挥作用,因此,脚本通常可以放在底部

这种做法可确保您的网站访问者在等待加载网页时不会感到沮丧.

要快速处理脚本部分,您可以为WordPress安装“脚本到页脚”插件。它可以在自动驾驶仪上正常工作.


页脚脚本 页脚脚本

作者: 约书亚·戴维·尼尔森

当前版本:0.6.4.1

上次更新时间:2020年4月15日

scripts-to-footerphp.0.6.4.1.zip


94%的评分


20,000+安装


3.1.0要求

(b)设置缩小

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

  • 缩进的空格
  • 注释
  • 长函数和变量名
  • 未使用的代码

缩小可以极大地减少静态文件的大小。您可以使用以下服务缩小文件大小: 缩小, 或安装其中之一 WordPress中的缩小插件.

(c)使用异步加载

Web浏览器按照出现在网页上的顺序顺序渲染和请求资源。这称为同步加载。但是,您可以通过使用以下命令更改浏览器的默认功能 异步属性 尽快加载资源。例如,您可以按以下方式异步加载脚本:

这是 可以帮助您在WordPress中进行异步加载的插件列表.

(d)使用GZIP压缩

GZip压缩是一种通过HTTP请求压缩资源的技术。通过GZip压缩,服务器发送压缩的资源文件,浏览器在渲染网页时将其解压缩.

压缩和解压缩资源所需的时间和资源远远超过了将较小的文件从服务器传输到客户端所节省的时间和带宽。这种技术不仅可以更快地加载页面,而且可以节省服务器成本.

GZip压缩是一些WordPress缓存插件(例如WP Fastest Cache)的一部分.

(e)将Google CDN用于流行的图书馆

此步骤中的最终优化技术是 在获取您网站上使用的任何公共库时使用Google或Microsoft CDN. 背后的原因很简单–由于这些CDN的普及,访问者很可能已经在其浏览器中缓存了该资源的版本.

步骤2:优化图片

如上所述,这些年来网页大小不断增长的主要来源是图片.

甚至看看CodeinWP自己的号码:

图像加载

因此, 处理图像应该可以最大程度地提高您的网站速度, 它确实.

图片是网站必不可少的,但是,实际上不建议在网站上使用高质量图片。您应将图像压缩到一定程度,以大幅度减小尺寸,同时获得合理的视觉质量.

您可以做一些事情来实现这一点,并牢记网站速度的优化:

(a)上传尺寸合适的图片

您当前的主题可能具有可以显示的图像的最大尺寸-尺寸方向。找出问题所在,然后仅上传最大两倍大的图像.

为什么两次?这也将允许主题显示图像的视网膜质量版本.

(b)使用正确的图像类型

网络上两种最常用的图像类型是JPG和PNG.

他们不一样.

  • JPG图像适用于包含大量颜色信息的照片和其他复杂图像
  • PNG图像非常适用于几乎没有颜色信息的图形,例如界面屏幕截图.

PNG图像示例主题

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

在将任何图像上传到站点之前,可以使用多种工具。.

tinypng
图像优化

(d)延迟加载图像

优化图像的另一种技术是延迟加载,即在访客向下滚动以查看图像之前不下载图像的一种做法。.

延迟加载演示CodeinWP上的延迟加载演示

这是在您的网站上延迟加载图片的完整指南.

(e)获取图像优化插件

最后但并非最不重要的一点,您应该为WordPress网站获得一个高质量的图像优化插件。根据最终使用哪种相机,您可能会在自动驾驶仪上完成大部分图像优化需求.

这是 比较了6个最佳图像优化插件.

如果您需要快速推荐,请查看我们自己的 擎天柱. 除了免费计划中的CDN之外,它还提供高效的图像压缩!与主要竞争对手相比,Optimole还可以提供一些出色的结果:

PNG优化结果

插件优化后的原始PNG大小优化%压缩
擎天柱301 KB34 KB88.7%有损和无损
想像一下301 KB67 KB77.7%有损的
小小PNG301 KB79.7 KB73.5%有损的
短像素301 KB90.4 KB69.96%有损的
m301 KB247 KB17.9%无损
EWWW301 KB257.4 KB14.6%无损

JPG优化结果

插件优化后原始JPG大小优化%压缩
短像素518 KB169 KB67.36%有损的
小小PNG518 KB248.6 KB52%有损的
擎天柱518 KB274 KB47%有损和无损
想像一下518 KB338.7 KB34.64%有损的
EWWW518 KB488.9 KB5.7%无损
m518 KB493 KB4.9%无损


图像优化和Optimole的延迟加载 图像优化 & Optimole的延迟加载

作者: 擎天柱

当前版本:2.3.1

上次更新时间:2020年4月21日

optimole-wp.zip


96%的评分


50,000+安装


WP 4.7+要求

步骤3:优化HTTP请求

在文章的前面,我们讨论了当用户浏览器开始加载网页时,实际的传输是通过单独的HTTP请求完成的。单个请求将获取每个资源。因此,此类请求数量的增加会增加网页的加载时间.

网站要求网页的HTTP请求

(a)合并档案

最小化HTTP请求负载的第一个任务是合并相似的资源。减少资源时,可以将相似的文件组合在一起。例如,所有样式表(CSS文件)和所有自定义JavaScript文件都可以组合为单个文件。这减少了客户端加载所有资源所必须进行的请求数量.

同样,这些 WordPress的缩小插件 可以帮助您做到这一点.

(b)最小化DNS查找

当对诸如www.codeinwp.com之类的域发出HTTP请求时,将执行DNS(域名系统)查找以查找服务器的IP地址。因此,您的目标还应该是最小化所有请求中的DNS查找次数,以加快网站加载速度.

这是一个 Kinsta的酷指南 关于如何做到这一点.

(c)启用保持活动状态

未经任何优化,浏览器将为每个资源发送一个HTTP请求。下载完成后,此连接将关闭。然后,浏览器向服务器发出新请求,以请求新资源。保持活动状态是一种在资源下载完成后不会终止请求的技术.

您可以通过以下方式启用保持活动状态:

(d)最小化重定向

重定向是一种自动将客户端从资源的一个位置转移到另一位置的指令。每次重定向都会增加网页的加载时间,除非绝对必要,否则应避免代码中的任何重定向.

(e)使用CDN

CDN(内容交付网络)是遍布广泛地理位置的Web服务器的集合,可将内容快速有效地交付给客户端.

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

我们有单独的资源比较WordPress网站的顶级CDN解决方案,以及有关如何被盯住的信息.

步骤4:缓存

没有有关缓存的内容,没有网站速度优化指南。我们之前讨论的某些技术(例如GZip压缩和最小化)是当今许多缓存解决方案的一部分.

缓存是指将资源存储在临时存储中以便在需要时快速检索它的现象。缓存有多种形式:

  • 页面缓存:服务器上存储的页面的静态HTML版本
  • 数据库缓存:存储在服务器上的常见数据库查询的结果(例如您网站上的前10个帖子)
  • 浏览器缓存:在浏览器中存储页面的一部分

我们在这篇文章中比较了最受欢迎的WordPress缓存插件。 TL; DR:结帐 WP火箭 如果您正在寻找完整的解决方案。另外,如果您更喜欢免费的东西,请参阅以下指南 如何配置W3总缓存.

第5步:针对移动设备进行优化

在本文的前面部分,我们讨论了与台式机和移动设备相关的优化技术。但是,移动设备上的内容消耗正在增加,并且较小的屏幕带来了新的挑战。因此,本节讨论了用于移动设备的网站速度优化方法.

移动优化是指确保网页的移动访问者体验与桌面访问者相同的功能和效率的做法。以下列表包含某些卫生因素,用于管理移动设备的Web内容:

  • 使用响应式网页设计以确保不同的设备获得不同版本的网页
  • 避免使用闪光灯和弹出窗口,因为移动设备可能不支持它
  • 不要将诸如链接之类的交互放置得太近

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

这是WordPress中AMP入门的指南.


安培

作者: AMP项目贡献者


74%的评分


500,000+安装


WP 4.9+要求

更多信息

1.5.3.zip版

当前版本:1.5.3

上次更新时间:2020年4月15日


74%的评分


500,000+安装


WP 4.9+要求

WordPress.org插件页面


安培

结论

希望本指南为您提供一些技巧,以帮助您提高网站的整体网站速度优化水平.

只是回顾一下;我们首先研究了网页的解剖结构,以解决需要改进的特定领域。然后,我们继续进行优化的特定步骤:

  • 第1步以样式表和脚本的形式介绍了静态文件的优化
  • 第2步处理图像及其优化
  • 步骤3全部涉及优化HTTP请求的技术
  • 步骤4讨论了一些流行的缓存技术
  • 第5步介绍了针对移动设备的优化

关于网站速度优化,您有什么需要解决的吗?请在下面的评论中告诉我们.

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

布局,演示和编辑,Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map