如果说有一个地方的第一印象是绝对重要的,那就是你的网站--我们谈论的不仅仅是设计和内容。页面的速度是它成功的最重要的决定因素之一。
一个缓慢的加载网站会损害你的声誉,也会花费你的钱,因为你将失去转换。相反,一个高性能的网站会对你的商业成功产生积极的多米诺效应。它将吸引更多的游客,从而增加销售领导,并最终带来更多的客户。
确保您有一个快速加载网站的第一步是使用健壮的网站建设者,它提供最佳技术。然而,在这之后你的工作还没有结束。确保站点上包含的内容不会影响其性能是您的责任。
您需要找到合适的媒体平衡,选择放置项目的位置,以及首先使用什么类型的内容和扩展。例如,动画GIF可以为您的页面添加一些活力,但通常是沉重的文件,并消耗了大量的网络带宽。此外,文本加载速度比图像快,所以要注意如何排序元素。
有许多因素需要考虑,但你确实有能力做到这一点。再说,你来对地方了。本文为您提供了您需要了解的关于网站速度优化和如何提高网站性能的一切。
一旦一个网站的链接被点击,网站速度是它花费的时间,它需要网页下载,显示在浏览器中,并成为响应用户的互动。
这一术语不应与“感知性能”相混淆,即访问者根据他们首先在屏幕上看到的内容(这不一定是先加载的元素)来评估您的网站的性能。因为他们是两个不同的,但同样重要的概念,你应该始终致力于提高你的网站的速度和感知性能并行-这是下面提到的技巧将帮助你实现。
你的下一个问题可能是“什么是好的网站速度?”这方面的答案是特定行业的,但强烈建议,平均而言,您的页面加载时间低于3秒.
最后,您会想知道:为什么网站速度优化很重要(除了我们的挫折之外)极短的注意力跨度)?加载时间会影响可用性、转换、用户参与和搜索引擎可见性。
可用性影响::这似乎很明显,但您的网站加载得越快,它的功能就能越快被使用,例如帮助访问者导航到商店、与客户服务部门交谈或仅仅了解您网站的目的的项目。因此,让这些功能更快地被看到将创造更快乐的,返回的访问者。就这么简单。
用户参与影响:当用户能够更快地通过过程移动时,他们更有可能参与到您的网站中。例如,如果您有一家在线商店,并且结帐过程的每一步都需要超过几秒钟的时间来加载,那么很多潜在的买家都会完全放弃这个过程,这是可以理解的。这同样适用于填写表单或在页面之间跳转。您可以在这里看到这样的问题会对您的网站访问者数量和总体业务目标造成损害。
转换影响::大多数网站所有者关注的一个具体目标是转换。事实上,页面速度的100毫秒延迟会导致换算率下降7%为你的网站。如果你的访客不能足够快地利用你的功能,他们将毫无疑问地进入下一个。
搜索引擎可见性影响::谷歌在网站排名时考虑了网站的速度(称为SEO,搜索引擎优化)。因此,如果你想让你的网页在特定的关键词搜索结果中显示得更高,你就会有更好的机会让你的页面以每毫秒的速度出现在你的眼睛上。
现在你已经明白了网站的速度是什么,为什么它是重要的,现在是时候对你的网站做点什么了。下面,您将学习如何提高您的网站的性能,以确保您的客户和谷歌是内容。
1.
不要超载你的主页
2.
3.
优先考虑以上折叠内容
4.
5.
避免过多的媒体出现在你的网站上。
6.
7.
优化图像大小
8.
9.
注意你的文字和图像之间的关系。
10.
11.
尽可能使用文本而不是其他设计元素。
12.
13.
减少字体的数量和样式
14.
15.
限制动画的使用
16.
17.
关注移动性能
18.
19.
限制第三方申请的数量
20.
如果你只从这篇文章中拿走一件东西,那就是这个技巧。总之:保持干净,避免太长的首页。
晋江开发网站用太多的内容和媒体(文本、图像、视频和动画)填充你的主页会对你的成功产生负面影响。它可能要花很长时间才能加载,而且可能会使访问者感到不知所措,以至于他们可能会错过页面上的重要内容,而不会与其交互。
一个有组织的主页,内容最少,可以让你的网站访问者很容易地吸收从他们进入你的网站,帮助他们更快地理解你的主要信息。
如果你担心失去相关的内容,也有一个解决办法。您可以将内容分散在多个页面上。这将给你所有有价值的信息自己的“空间”发光。别担心,当你添加按钮来帮助用户导航时,你的主页之外的内容可以很容易地被浏览,比如“查看更多”,或者“查看我的博客/盖瑞”。
“折叠”指的是你网站主页上的部分,当页面加载时,在他们向下滚动之前,访问者可以立即看到。这是你网站中最重要的部分,因为它是每个人进入网站时会看到的第一件事,也是第一个加载的部分。
在网站的其他内容加载时,通过吸引访问者的目光,战略性地使用本节。你可以通过有意义的文本和相关的、有吸引力的照片来做到这一点。最基本的指导方针是包括标题和子标题文本(如公司名称和口号),你的标志,以及CTA(呼吁行动) 扣子.
本质上,包括你的访问者需要知道的主要信息,同时保持页面的清洁和直截了当。同样,本节需要遵循的一个很好的经验法则是:如果它与您的主要消息一致,请保留它。如果它吸引了访问者的注意力,把它放在折叠下面或者在你网站的另一个页面上。
然而,这条规则有一个例外。你应该确保你上面的折叠内容是由有限的动画组成的。随着动画降低了他们应用到的可见性(下面将有更多的介绍),这将允许用户从入门中看到更多的内容。不要使用动画,而是使用文本、图像或徽标作为视觉效果。
晋江开发网站除了你的主页,你应该做一些急需的春季清理你的网站的内容。在这里,集中你的努力达到质量而不是数量。
就像一个实体店老板不会把他们所有的存货都放在商店的橱窗里一样,你不应该把你的网站挤得满满的。事实上,你的网站是你的店面,你放置的每一个项目都有一个性能成本。
更具体地说,某些形式的媒体对您的站点的性能非常有害,因为它们的带宽大,加载时间慢,会影响其他所有内容的性能。
有无休止滚动的照片画廊就是这些“慢速装载机”之一。每一张照片--不管文件大小有多小--都会影响你的页面速度。在一个图片库里,所有这些照片无论如何都是看不见的。要做出能提高页面速度的调整,将照片库中的图片数量减少到只有最有价值的图片--尤其是在你的主页上。
嵌入式内容是另一个问题。其中一个明显的例子是嵌入式视频YouTube或脸书。因为它是一个外部源,所以您的网站主机(例如Wix.com)无法对其进行优化并控制加载时间。因此,如果加载速度慢,除了您,没有人能解决这个问题。
然而,这并不一定意味着您应该完全避免嵌入式内容。一个很好的妥协是减少它,就像只在你的网站上放置一个或几个视频。嵌入式视频的另一种特定选择是使用背景视频或添加视频框相反。因为您的网站主机控制了这些元素,它们将对您的网站速度优化产生较小的不利影响。
总之,当涉及到网站媒体时,问问自己:这值得吗?这对我的转换目标有好处吗?如果你对这些问题的回答是否定的,那就把它拿出来吧。
这里最简单的技巧是尽可能将JPEG文件用于图像而不是PNG文件。(如果你不知道我们在说什么,看看这个文件大小指南.)
这是因为JPEG文件通常比PNG更适合网络优化,这意味着它们更小,下载速度更快,同时保持了几乎相同的质量水平。除非你需要透明的照片,或者你是专业摄影师,否则JPEG提供了足够的质量和可用性。要转换您的图像,有许多免费的工具可以在线这样做,如TinyJPG, Compressor.io,和图像优化r.
托管在Wix.com自动获得将其图像转换为WebP图像格式的额外好处。WebP是Google引入的一种相对较新的图像格式,它提供了更好的压缩,从而为JPEG和PNG文件提供了更好的性能。Wix与所有支持这种新的和改进的格式的浏览器一起使用WebP。最重要的是,对于您在编辑器中裁剪的任何图像,Wix将自动优化您的网页的大小。
值得注意的是,虽然我们的平台将尽最大努力提供最好的性能,但有一件事我们不做:我们从不降低图像质量。你呈现给我们的形象是你的特权,我们不干涉它。
对你来说,还有一个特别的地方:“懒散加载图像。”最初,在加载Wix站点之后,图像可能具有低分辨率。这只是一个占位符,而高分辨率图像加载。这是我们使用的一种技术,通过防止访问者看到空白页来提高站点的速度和感知性能。
文字和图片就像养了两只宠物狗:有时它们是最好的朋友,有时它们会互相激战。因此,你需要为这些元素中的每一个设定单独的区域,以便给它们必要的呼吸空间,让它们和谐地一起工作。
其中一个例子是创造对比。最好通过一个场景来解释:白色背景颜色、彩色图像和白色文本。由于文本加载速度比图像快,所以在白色背景上的白色文本在加载图像之前将被浏览器视为不可见的。在选择设计元素时,要考虑颜色来避免这一点。
这里要遵循的另一个金科玉律是:避免在图像中放置文本。唯一合理的例外是徽标。这是因为图像中的文本加载速度慢,因此您将丢失信息,并留下空白的画布,直到您的网站完全可见。除了加载问题之外,图像中的文本无助于网站无障碍。而不是这样,简单的解决办法是将你的文本放在图片上方的文本框中,让每个人都开心。
如上所述,文本加载速度比图像和动画快。但这并不是你应该把你的设计注意力集中在漂亮的词上的唯一原因。一个快速加载文本标题立即提请注意您的网站的主要信息,因此,提高您的访问者的整体经验。
另一个关键原因是搜索引擎优化(搜索引擎优化),或者是为确保你的网站排名更高搜索结果中的特定关键字。在不过于技术性的情况下,有一件事你应该注意:详细和高质量的文本将帮助谷歌(和其他搜索引擎)更好地理解你的网站是关于什么的-从而直接提高你的排名更高的机会。媒体只有一个间接的SEO影响,通过改善您的访问者的总体经验,或让他们停留在您的页面更长的时间。因此,如果你想选择最优的内容形式来吸引更多的访问者到你的网站,文本是要走的路。
您可以考虑减少字体系列在您的网站上只有两三个人。这将帮助您为您的品牌描绘一个一致的风格,以及散发出一种清洁和专业的气氛。毕竟,第一印象你的网站和业务是持久的时刻,你无法得到回报。然而,正如您所预期的,我们并不是根据我们的设计师朋友的说法来建议这一点的,这也是缩短站点加载时间的另一种方式。
这不仅仅是一个数字游戏:类型也很重要。如果你想用自定义字体例如,请注意这些都是图形元素(如图像和视频),这意味着它们在出现在网页上之前需要下载--这可能会影响网页的性能。
最后,避免过多的字体权重(大胆, 下划线, 斜体, 等)。这些也需要额外的下载,正如您所猜的,更多的时间增加了您的站点的加载速度。
底线:不要完全放弃定制字体或字体权重。相反,当您将这些功能放在您的站点上时,要明智地选择,并且只在您想要实现明确、明确的目的时才使用它们。 - 那是 全.
你有没有听过关于食物消费的一句话:“一切都要适度?”从你网站的角度来看,它具体指的是动画。和甜品类似,它们有令人上瘾的特性,总是让你想要更多--但它们是沉重的文件,加载速度慢得离谱。
我们知道我们不能完全阻止你使用动画,因为它们是相当有吸引力的文件。但是,您可以选择使用哪一个。特别是,避免动画GIF。这些可怕的文件是它们中最重的,即使它们很小。当动画GIF很大的时候,它们不仅会缓慢地加载自己,而且会延迟你网站上的其他所有内容。
当涉及到动画时,另一个最佳实践是:将它们移到页面的较低位置,在第一个折叠下面。这样,您就可以防止访问者在登陆您的站点时有压倒性的体验,并确保有一些有意义的内容可以立即阅读,并以合理的速度加载。
最后,您可以使用在线工具,如GIF到MP4若要将站点的动画转换为视频,请执行以下操作。视频提供与动画一样的视觉体验,尤其是GIF,但加载速度要快得多。另外,视频回放在第一缓冲器之后立即发生。相反,GIF必须在播放前全部下载--影响您的站点的感知性能。
每天都有越来越多的人在智能手机上上网,你可以打赌,他们会期望你的网站在掌上大小的屏幕上看起来很漂亮。Wix自动创建一个移动优化版本的您的网站,所以你不必担心建立一个从零开始。然而,仅仅拥有一个移动站点只是第一步。由于您的站点在移动设备上要比桌面小得多,所以您需要充分利用这个空间。例如,上面的折叠部分将包含更少的移动版本信息。因此,明智地选择你在那里的位置。基本知识包括:你的公司名称,徽标,以及CTA.
此外,确保消除甚至隐藏影响您的性能的所有元素。这可以以任何形式出现,从多种字体样式和格式到图像、动画、视频、特效等等。
要充分利用这个小屏幕空间,您可以用其他特性替换那些缓慢加载的元素,比如欢迎屏幕当您的站点加载时,它会显示您的徽标或照片,或者快速行动 棒材让你所有的联系方式只需一次简单的点击就可以了。
第三方应用程序(TPA)是您可以添加到您的网页,而不是由您的网站主机创建的功能。例如,Instagram饲料, 评级小部件,或地图显示您的位置-其中许多可通过以下途径免费获得:Wix应用市场.
TPA使用称为iFrames的东西,它本质上是站点内部的Web浏览器。用外行的术语来说,当你使用TPA时,你试图在你的网站中加载一个网站--而且,这超出了你网站主机的优化限制。总之:TPA可以为您的网站增加重要的时间加载速度。
但是,很明显,TPA提供了很多功能。你只需要在你如何使用它们的问题上变得聪明。你应该总是问自己,这些应用程序是否真的是必要的,以实现你的网站的目标。你还可以做其他的测试来做出决定。首先,逐个禁用每个应用程序,看看您是否注意到站点速度的差异。第二,尝试识别不同TPA功能中的任何重叠。例如,您需要一个图片库和Instagram Feed吗?这两个都显示了您的照片,而画廊是由您的网站主机提供给您的东西,这意味着它将加载得更快。
在你做了所有必要的改变,使你的网站快速,你会想要衡量你的结果。如果您有一个Wix站点,您可以使用以下方法检查其性能Wix现场速度测试.
对于非Wix用户,还有许多其他网站的性能测试需要尝试。一些最受欢迎的例子包括速度洞察由Google和销钉工具。这两种方法都能让你知道你的页面速度和其他重要的洞察力,比如它背后的原因是缓慢加载或改进它的方法。
·
了解感知绩效:这是你的网站访问者根据他们的屏幕上最先加载的内容来感知你的网站的速度。例如,如果您的主页上的内容在折叠之前加载,访问者在进入您的网站时将看到一个空白屏幕。这就是为什么内容放置和类型都是关键要素的原因。
·
·
您在网站上放置的每一个项目都有性能成本:当您想要添加一个元素时--不管是文本(长度、样式或类型)、视频、图像、动画还是应用程序--问问自己:值得吗?它与我最重要的目标一致吗?这对我的转化率有好处吗?如果你回答“不”,即使只是其中一个,你可能会考虑删除它,或者,至少,不把它放在你的页面的折叠上。
·
·
不要超载你的主页:这通常是访问者在您的网站上看到的第一页,这意味着它是加载的第一页。作为网页设计的最佳实践,你应该保持它的清洁。您拥有的项目越少,您使用的文件越少,您的页面载入的速度就越快,访问者逗留的可能性也就越大。
·