网站建设之如何提高页面速度以获取更多流量和转化

页面速度是当今网站优化的关键因素。它对以下方面具有重大影响: 访客停留在您网站上的时间。 其中有多少可以转化为付费客户。 在付费搜索中,您按CPC支付的费用。 您在自然搜索中的排名。 不幸的是,大多数网站在页面速度方面的表现很差,这对其收入产生直接的负面影响。 作为数字营销者,我们几乎可以花很多时间做很多事情 WP网站建设

页面速度是当今网站优化的关键因素。它对以下方面具有重大影响:

  • 访客停留在您网站上的时间。
  • 其中有多少可以转化为付费客户。
  • 在付费搜索中,您按CPC支付的费用。
  • 您在自然搜索中的排名。

不幸的是,大多数网站在页面速度方面的表现很差,这对其收入产生直接的负面影响。

作为数字营销者,我们几乎可以花很多时间做很多事情,而且没有足够的时间来完成所有这些工作。结果,一些东西被推到了后燃器上。

最常被推迟的事情之一是优化页面速度。这很容易理解,因为大多数人并没有真正理解这个经常被忽略的细节的重要性,因此他们看不到花费时间和金钱将其改进几秒钟或更短的时间的价值。

对于某些营销人员而言,包括那些只专注于搜索引擎优化的营销人员而言,似乎没有多少时间,这已经被行业巨头一直一直到我们自己的分析数据的数据证明是巨大的。

我假设您像我一样,并且想要最大程度地提高业绩,当然也要提高收入,对吗?然后,让我们开始使您的网站快上油嘴!(那是很视觉的,不是吗?)

1.放弃廉价的虚拟主机

许多人想省钱的一种方法是选择一种廉价的共享主机,将尽可能多的网站塞入服务器中,就像一堆小丑堆在一辆汽车上一样。表现该死!

当然,您的网站在大多数时间都可以像大多数网络主机一样使用,但是加载速度如此之慢,以至于您的访问者会感到沮丧,而从未转化为购买者。

这些讨价还价的购物者坚持认为:“但是,这几乎没有引起注意!”

这就是事情-它可能对您几乎没有引起注意,因为它是您的孩子,您喜欢它。

但是其他所有人只希望尽快进入和退出您的网站。

人们想要在您的网站上停留足够长的时间来完成自己想做的事情,无论是要获得答案,购买产品还是其他特定目标。如果您放慢脚步,他们很可能会讨厌他们的经历,离开而不会converting依。

像这样思考:

大多数人无条件地爱自己的孩子。但是其他人的孩子在尖叫,扔东西,打扰他们在餐馆过夜的行为吗?他们讨厌那个孩子。您的网站也是如此。

真的有多大的不同?

根据亚马逊进行的一项研究,仅100毫秒(人类甚至无法感知的时间单位)之间的差异足以使他们的销售量减少1%。沃尔玛发现了类似的结果。

如果那微小的时间单位对销售有那么大的直接影响,那么您认为额外一秒钟或更长时间会对您产生什么样的影响?

但这并不止于此,因为您网站加载的速度(或缓慢)也会对自然搜索排名和按点击付费的费用产生影响。

换句话说,如果您的网站加载缓慢,则您应该期望在这一关键领域进行投资的竞争对手能吃到午餐。

底线:跳过预算虚拟主机。如果他们像商品一样(主要基于价格)出售商品,那么他们也将顾客当作商品对待。

有许多针对速度进行了优化的Web主机,特别是针对WordPress网站,并且其中一些的价格与预算选项相似。

因此,四处询问,进行一些测试并投资于一个虚拟主机,它将使您的性能满足您的访问者和Google的需求。

2.减少HTTP握手次数

网页呈现和运行所需的每个文件(例如HTML,CSS,JavaScript,图像和字体)都需要单独的HTTP请求。发出的请求越多,该页面的加载速度就越慢。

现在,如果您和大多数与我交谈的人一样,您可能会想:“哦,我不需要为此担心,杰里米。我知道自己在做什么,并且不会在我的网站中添加一堆of肿的垃圾!”

这可能是部分正确的。您可能不会在您的网站中添加一堆of肿的垃圾,但是对于我所遇到的90%以上的网站而言,它仍然存在。

那个膨胀并不存在,因为膨胀的童话在睡觉时把它吸了进去。之所以会这样,是因为大多数Web设计人员,无论技能或经验如何,都不会将页面速度作为优先事项。可悲的事实是,大多数人甚至都不知道如何做。

这是问题开始的地方:

大多数主题加载一个或多个CSS文件和几个JavaScript文件。诸如Jquery或FontAwesome之类的某些文件通常是从另一台服务器远程加载的,这大大增加了页面加载的时间。

当您考虑插件添加的其他CSS和JavaScript文件时,这甚至会变得更加棘手。仅从CSS和JavaScript文件发出六个或更多HTTP请求就很容易结束。

当您将页面上的所有图像都考虑在内时,每个图像都需要单独的HTTP请求,因此很快就会失去控制。

  • 将JavaScript文件合并为一个文件。
  • 将CSS文件合并为一个文件。
  • 减少或消除加载自己的JavaScript和/或CSS文件的插件。在某些情况下,与重力形式一样,您可以选择禁用它们。
  • 将精灵用于经常使用的图像。
  • 尽可能使用FontAwesome或Ionic Icons之类的字体代替图像文件,因为这样一来,仅需加载一个文件。

3.包括尾斜杠

不管是从外部来源(链接构建工作)还是从您自己的网站内部指向网站的链接,都不要在末尾加斜线,这会对速度产生不利影响。

就是这样:

当您访问不带斜杠的URL时,Web服务器将查找具有该名称的文件。如果找不到具有该名称的文件,则将其视为目录,并在该目录中查找默认文件。

换句话说,通过省略结尾的斜杠,您将强制服务器执行不必要的301重定向。尽管它对您来说似乎是瞬时的,但是它确实需要花费更长的时间,并且正如我们已经确定的那样,一点点累加起来。

https://example.com(不好)

要么

https://example.com/services(这也很糟糕)

https://example.com/(很好)

要么

https://example.com/services/(这也很好)

4.启用压缩

启用GZIP压缩可以大大减少下载HTML,CSS,JavaScript文件所需的时间,因为它们下载的压缩量要小得多,然后一旦到达浏览器便被解压缩。

不用担心-您的访客不需要做任何额外的事情,因为所有现代浏览器都支持GZIP并已针对所有HTTP请求自动对其进行处理。

5.启用浏览器缓存

启用浏览器缓存后,网页的元素将存储在访问者的浏览器中,因此下次访问您的网站时,或者当他们访问另一个页面时,他们的浏览器可以加载页面,而无需向服务器发送另一个HTTP请求以供访问任何缓存的元素。

一旦加载了第一页并将其元素存储在用户的缓存中,则仅需要在后续页面上下载新元素。这样可以大大减少典型浏览会话中需要下载的文件数量。

6.尽量减少资源

最小化CSS和JavaScript文件可消除不必要的空格和注释,以减小文件大小,从而减少下载时间。

幸运的是,这不必是手动过程,因为可以在线使用多种工具来将文件转换为更小的缩小版本。

WordPress还提供了几个插件,这些插件将其常规版本的CSS和JavaScript文件的缩小版本替换为您网站标题中的链接,而无需修改您的原始文件,包括流行的缓存插件,例如:

  • W3总缓存
  • WP超级缓存
  • WP火箭

正确设置可能需要一些努力,因为缩小常常会破坏CSS和JavaScript,因此,一旦缩小所有内容,请务必彻底测试您的网站。

7.优先处理首屏内容

如果对网站进行编码以优先考虑首屏内容(换句话说,即在访问者滚动之前可见的内容),则访问者可以看到您的网站更快地加载。

这意味着要确保出现在折叠上方的所有元素也都位于HTML代码的开头附近,以便浏览器可以先下载并呈现它们。

包括以内联方式而不是外部CSS文件中呈现该区域所需的所有CSS和JavaScript也是至关重要的。

8.优化媒体文件

因为带有高质量相机的移动设备是常见的,而诸如WordPress之类的现代内容管理系统使上传图像变得很方便,所以许多人只是拍摄并上传照片而没有意识到图像通常至少比原来大四倍。必要。

这会大大降低您的网站速度,尤其是对于移动用户而言。

优化网站上的媒体文件有可能极大地提高页面速度,并且这样做相对容易,因此,这是您的宝贵时间。

优化图像

  • 选择理想的格式。JPG非常适合摄影图像,而GIF或PNG最适合具有大面积纯色图像。8位PNG文件用于没有alpha通道(透明背景)的图像,而24位文件用于具有alpha通道的图像。
  • 确保图像尺寸合适。如果在您的网站上以800像素宽显示图像,则使用1600像素宽的图像没有任何好处。
  • 压缩图像文件。除了是顶级的图像编辑程序之外,Adobe Photoshop还具有出色的图像压缩功能,起价为9.99美元/月。您还可以使用免费的WordPress插件(例如WWW Image OptimizerImsanityTinyJPG)自动压缩上传的图像。

优化视频

  • 选择理想的格式。MP4在大多数情况下是最好的,因为它产生的文件大小最小。
  • 根据访问者的屏幕尺寸提供最佳尺寸(尺寸)。
  • 如果视频在背景中用作设计元素,则消除音轨。
  • 压缩视频文件。我大多数时候都使用Adobe Premiere,但Camtasia也是一个不错的选择。
  • 减少视频长度。
  • 考虑将视频上传到YouTube或Vimeo,而不是在本地提供,并使用其iframe嵌入代码。

但是,您不应该在此停下来,因为那只会划伤表面。

为了真正优化您网站上的媒体,您需要根据屏幕大小提供适当大小的图像,而不是简单地调整它们的大小。

根据图像的实现,有两种方法可以解决此问题。

  • 可以使用src set来提供网站HTML中的图像,这使浏览器可以根据访问者正在使用的设备的屏幕大小来选择,下载和显示适当的图像。
  • 通过CSS放置的图像-通常作为背景图像,可以使用媒体查询来提供,以根据访问者正在使用的设备的屏幕尺寸选择适当的图像。

9.利用缓存和CDN

缓存使您的Web服务器可以存储网页的静态副本,以便可以将其更快地传递到访问者的浏览器,而CDN则可以将这些副本分发到世界各地的服务器,以便访问者的浏览器可以从Web站点下载它们。最接近其位置的服务器。这样可以大大提高页面速度。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10506

发表评论

电子邮件地址不会被公开。 必填项已用*标注