加载缓慢的网站可能会损害网站形象,并造成金钱损失,因为你会因为转化率低而损失很多客户。相反,高性能网站将对你的企业成功产生积极的,多米诺骨牌的影响。它将吸引更多的用户,从而增加销售机会,最终吸引更多的客户。

什么是网站速度优化,为何如此重要?

单击网站的链接后,网站速度就是网页下载,在浏览器中显示并响应用户交互所花费的时间。

该术语不应与“感知性能”混淆,后者是访问者根据其在屏幕上首先看到的内容(不一定是首先加载的元素)评估你网站的性能的方式。由于它们是两个不同但又同等重要的概念,因此你应始终同时提高网站的速度和可感知的性能-以下提到的技巧将帮助你实现。

网站加载速度慢的影响

可用性影响:如果网站加载速度越快,可以使用它的功能就越早,例如可以帮助访问者导航到商店,与客户服务进行交流或者只是了解你网站目的的项目。因此,允许这些功能更快地显示出来将带来更多的回头客。就这么简单。

用户参与度的影响:当用户可以更快地浏览流程时,他们更有可能与你的网站互动。例如,如果你有一个在线商店,而结帐流程的每个步骤都需要花费几秒钟的时间来加载,那么许多潜在的买家将完全放弃该流程是可以理解的。填写表格或在页面之间跳转也一样。你可以在此处看到此类问题对你的站点访问者数量和总体业务目标的不利影响。

转化影响:转化是大多数网站所有者关注的一个具体目标。实际上,页面速度的延迟只有100毫秒,可导致你网站的转化率降低7%。如果你的访问者不能足够快地利用你的功能,那么毫无疑问,他们将继续进行下一个功能。

搜索引擎可见性的影响:在对网站进行排名时,Google会考虑网站的速度(称为SEO,搜索引擎优化)。因此,如果你希望自己的网页在特定关键字搜索结果中的排名更高,那么你的页面在每毫秒可见的时间内就会有更好的机会。

改善网站速度优化的推荐技巧

  • 不要在首页加载过多内容
  • 优先考虑以上折叠内容
  • 避免网站上的媒体过多
  • 优化图像尺寸
  • 注意你的文本-图像关系
  • 尽可能在其他设计元素上使用文字
  • 减少字体的数量和样式
  • 限制动画的使用
  • 专注于移动性能

不要在首页加载过多内容

将太多内容和媒体(文本,图像,视频和动画)包装在首页上可能会对加载速度造成很大的损失。加载时间可能太长,并且可能使访问者不知所措,以至于他们可能会错过你页面上的重要内容,并在不进行任何交互的情况下离开。

内容最少的井井有条的首页将使你的网站访问者从进入你的网站开始就可以轻松吸收所呈现的信息,从而帮助他们更快地了解你的主要信息。

优先考虑以上折叠内容

“首屏之上”是指网站首页上的部分,访问者在页面加载后以及向下滚动之前都可以立即看到它们。这是你网站上最重要的部分,因为这是任何人进入时都会看到的第一件事,也是加载的第一部分。

在网站的其他内容加载时吸引访问者的眼球,从而策略性地使用此部分。你可以通过有意义的文字和相关的精美照片来做到这一点。最基本的准则是包括标题和副标题文本(例如公司名称和标语),徽标和CTA(号召性用语) 按钮。

从本质上讲,请覆盖访问者需要知道的主要信息,同时保持页面的简洁明了。同样,本节遵循一个很好的经验法则:如果它与你的主要信息保持一致,则保留它。如果它吸引了你的访问者的注意力,请将其放在折叠之下或网站的其他页面上。

但是,该规则有一个例外。你应该确保首屏内容由有限的动画组成。由于动画会降低其应用到的可见性(请参见下文),这将使用户可以从一开始就看到你的更多内容。代替动画,而使用文本,图像或徽标来获得视觉效果。

代替动画而使用文本、图像或徽标来获得视觉效果
代替动画而使用文本、图像或徽标来获得视觉效果

避免网站上媒体元素过多

就像实体店老板不会将所有库存都放在商店橱窗中一样,你不应该使网站拥挤。实际上,你的网站就是你的店面,并且你放置在网站上的每一项都有性能成本。

更具体地说,某些形式的媒体会严重损害你网站的性能,因为它们的高带宽和缓慢的加载时间会影响其他所有媒体的性能。

滚动不断的图片是这些“慢速装载机”之一。每张照片-无论文件大小多么小-都会影响你的页面速度。而且,在照片库中,所有这些照片都不会一次可见。要进行调整以提高页面速度,请将照片库中的图像数量减少到最有价值的图像数量,尤其是在首页上时。

嵌入式内容是另一个问题。一个明显的例子是来自YouTube或Facebook的嵌入式视频。由于它是外部资源,因此你的网站托管商将无法对其进行优化和控制加载时间。因此,如果加载速度慢,除了你之外,没有人可以解决问题。

总而言之,当涉及网站媒体时,请问自己:这值得吗?这对我的转化目标有好处吗?如果你对这些问题的回答为“否”,只需将其删除即可。

优化图像尺寸

最简单的方法是,尽可能地使用JPEG文件而不是PNG文件。

这是因为JPEG格式通常比PNG格式更加优化Web,这意味着它们更小并且下载速度更快,同时保持了几乎相同的质量水平。除非你需要透明的图像,或者你是专业摄影师,否则JPEG提供足够的质量和可用性。推荐使用懒加载方法来减少网站请求。

注意文本和图像关系

文字和图像有时候会产生这种情况:使用白色背景色、彩色图像和白色文本,由于文本加载的速度比图像加载的速度快,因此在加载图像之前,浏览器将看不到白色背景上的白色文本。在选择设计元素时,请考虑颜色以避免这种情况。

避免在图像中放置文本。唯一合理的例外是徽标。这是因为图像中的文本加载速度很慢,所以你将丢失信息,并使访问者留有空白画布,直到你的网站完全可见为止。除了加载问题之外,图片中的文字也无助于网站的可访问性。

尽可能在其他设计元素上使用文本

如上所述,文本的加载速度比图像和动画的加载速度快。但这并不是你将设计注意力集中在漂亮文字上的唯一原因。快速加载的文本标题会立即引起你对网站主要消息的注意,从而增强访问者的整体体验。

另一个关键原因是SEO(搜索引擎优化),或为确保你的网站在搜索结果中的特定关键字上排名较高而付出的努力。无需太过专业,你应该注意一件事:详细且高质量的文本将帮助Google(和其他搜索引擎)更好地了解你的网站简介—从而直接提高你获得更高排名的机会。媒体只会通过改善访问者的整体体验或让他们在你的页面停留更长的时间而对SEO产生间接影响。因此,如果你想选择最理想的内容形式来吸引更多访问者访问你的网站,则文本是必经之路。

减少字体的数量和样式

你可以考虑将网站上的字体系列数量减少到只有两个或三个。这将帮助你为品牌画出一致的风格,并散发出简洁和专业的氛围。

如果要使用自定义字体,请注意这些是图形元素(例如图像和视频),这意味着它们将需要下载才能出现在你的网页上—这可能会影响网页的性能。

限制动画(动图)的使用

请避免使用动画GIF。这些可怕的文件是所有文件中最重的文件,即使它们很小。而且当GIF动画很大时,它们不仅会缓慢加载,还会延迟你网站上的所有其他内容。

可以使用GIF到MP4等在线工具将网站的动画转换为视频。视频提供与动画(尤其是GIF)相同的视觉体验,但加载速度更快。此外,视频播放会在第一个缓冲区之后立即发生。相反,必须在播放之前完全下载GIF,这会影响你网站的感知性能。

移动设备优先

移动设备的流行促进了移动端的开发,每天都有越来越多的人通过移动设备来浏览网页,因此推荐站长们开发移动版或响应式的网站。由于网页在移动设备上的大小要比台式机小得多,因此你需要充分利用该空间。例如,你在“折叠”部分上方的位置将保留较少的有关移动版本的信息。

需要我们为你创建网站吗?立即咨询