当涉及到你的网站页面时,大小很重要。页面的文件大小越小,对于任何请求它的人来说,它的加载速度就越快。

和人们请注意页面加载多长时间。事实上,根据Pingdom的数据,24%的用户会放弃一个网站加载需要四秒钟,而且38%的用户将离开该页面如果这只需要5秒钟。

您的网站有多强?使用Hubspot的免费网站GERGER等级。

更不用说,谷歌已经承认了在Web搜索排名中使用网站速度,随着较快的网站倾向于创造更快乐的用户。

此外,现在,大量搜索者使用他们的手机寻找和探索网站 -不稳定的互联网连接和缓慢的数据速度使得加载大页面更加困难。

最终,为了保持健康的页面排名,您的业务需要专注于提供快速,优化的网站体验在所有设备上。为确保您的网站不会受到流量的打击,这篇文章将解释您需要了解页面大小以及如何减少它。

页面大小是什么?

“页面尺寸” - 也称为页面重量 - 指特定网页的总体大小。

页面大小包括用于创建网页的所有文件,包括HTML文档、包含的任何图像、脚本和其他媒体。

网页的大小是多少?

为了帮助您对页面重量进行基准,我们看看了网页的平均大小2020年2月1日至2020年3月1日期间:

大小-Web页图片大小

在2020年,平均桌面网页重量2080 KB.,而手机网页的平均权重1885 KB这和2017年的普通桌面有很大的不同网页重1532 kB和平均移动网页权重1354 kB

当然,重要的是要注意,上面的数据显示平均数典型网页的大小 - 这意味着大量的网站可能低于此尺寸,而其他较重的网站可能会围绕另一个方向偏斜数据。

最终,这取决于网站。虽然有些网站可能会加入自定义字体、全屏视频和其他设计元素,让页面变得“沉重”,但其他网站可能会采用极简主义的方法,坚持使用简单的文本和白色背景。

请记住,您的页面的重量取决于您的公司或行业。raybet电子竞技如果您有一个具有各种各样的照片的电子商务网站,那么您可能会预测更大的页面重量。

但是,一般来说,你应该是或者以下平均值。

当然,关注的重要性同样重要的是重量并不总是考虑最重要的指标。

以亚马逊为例-使用我搜索了谷歌的Pagespeed Insights,我搜索了Amazon.com并看到页面性能的10%以上,他们得分为100%:

page-weight-amazon当然,对于Amazon来说,这可能并不重要——他们需要更厚的页面来显示他们销售的成千上万的产品和服务的图像,而且用户不介意加载时间,因为他们知道会发生什么。

然而,如果你不确定你的页面权重是否会不成比例地降低你的整体页面质量,试着输入你自己的网站谷歌的Pagespeed见解衡量整体表现。

如果您对当前的页面速度不满意或认为您的页面重量应该较低,让我们探索现在如何减轻这种重量。

5减少页面尺寸的提示

1.调整和压缩您的图像

在页面重量方面,图像是最大的贡献者之一。如果您要缩小尺寸,您将想首先调整任何不必要的大图像。

当上传照片时,请记住图片的尺寸不能大于容器的大小。如果容器的最大宽度是500像素,那么通常没有理由上传1000像素宽的图像。

但是,让我们说你想提供高分辨率的图像可以分享和下载 - 你应该怎么做?我们建议上传一张图片,该图片恰好是它的容器宽度并将其超链接到高分辨率版本,以避免在页面上重量。

除了图像尺寸之外,您还可以通过压缩图像来进一步缩小图像的大小。压缩图像有助于减少其文件大小,最终有助于减少页面加载所需的时间。

如果您正在寻找压缩工具,这些是我们的一些最爱:

如果你是HubSpot用户,那么你很幸运:HubSpot COS具有自动调整图像大小和图像压缩功能。

“如果用户上传具有5,000 x 5,000的尺寸的图像,但仅在网站上显示为500 x 500,然后使用自动图像调整大小将有助于减少浏览器加载时间。另一方面,图像压缩减少保留上传的图像质量的文件大小,“解释了Hubspot的Maggie Himba

当然,减少页面重量的最简单方法是尽可能多地删除不必要的图片。但是对于那些需要留下来的人,上面提到的建议应该会奏效。

2.使用CSS精灵

所以现在我们知道拥有一吨图像 - 特别是大的图像 - 在任何给定的页面上都将增加页面重量并减慢负载时间,对吧?

这是因为每个图像生成服务器请求,这会减慢整个过程。

输入CSS精灵。

CSS Sprite是指组合以创建一个图像文件的图像集合,根据W3School。然后,您使用CSS仅显示您想要出现的组合图像的一部分。这样做,您正在减少页面加载所需的服务器请求的数量。

为了澄清,下面是一个更直观的解释。例A为每个浏览器图标包含单独的图像文件,总计70.7 KB。示例B使用CSS精灵(一个使用CSS显示图像部分的图像)来显示完全相同的信息。这些图像的总大小不到示例A的一半。

screen_shot_2015-07-22_AT_2.17.55_PM.png.

来源:教程共和国

3.删除不必要的自定义字体

自定义字体很有趣。

它们为你的页面增添个性,并帮助你将你的业务与其他人区分开来。然而,自定义字体的问题是,它们可以承载一些重量。

幸运的是,如果你觉得定制字体对你的网站设计是必要的,有一个解决方案:创建一个WOFF2文件。

作为Wholegrain Digital首席开发者Joshua Stopper写道“可以说,可以做的最简单的改变,没有任何缺点,是将[自定义]字体转换为浏览器中可用的最现代和最有效的格式,WOFF2……在我们的例子中,我们通过一个TTF加载一个WOFF2文件就实现了60%的减少。”

但是,如果您正在寻找任何简单的方法来减少页面的重量,您可能需要重新评估正在使用的自定义字体的数量。虽然使用两个不会有坏处,但过量使用仍然会影响页面速度。

4.尽量减少资源reybet雷竞技下载

您的资源是否可以通过缩减减少?reybet雷竞技下载

“缩减是指在不影响浏览器处理资源的情况下删除不必要或冗余数据的过程 - 例如,代码注释和格式化,删除未使用的代码,使用较短的变量和函数名称,等等,”谷歌开发人员解释一下

根据谷歌以下是你应该如何减少你的资源:reybet雷竞技下载

HTML.

使用介绍HTML代码的优化版本Pagespeed见解工具。使用此分析运行HTML页面并浏览“缩小HTML”规则。最后,单击“查看优化内容”以访问缩小的HTML代码。

CSS.

查看以下工具:

javascript.

查看以下工具:

5.使用内容递送网络(CDN)

一种内容交付网络指的是“一个互连的缓存服务器系统,使用地理上的邻近性作为发布网络内容的标准,”根据Techtarget

这是什么意思?你为什么要在意呢?

让我们说,所有网站的元素都存储在马萨诸塞州波士顿。这对Bostonian的 raybetapp- 或美国任何人来说都是很棒的新闻 - 他们正在尝试访问您的网站页面。但是忠诚的访客在伦敦一路呢?由于您的服务器所在的位置,它们可能会持续加载页面很长时间。

CDN的目标是解决这个问题,将你的网站元素存储在世界各地的多个地点,以确保每个人都有一个公平的机会在快速加载时间。

注意:虽然这一步骤不一定会减少页面的权重,但它将有助于提高其速度 - 这是我们真正在无论如何的速度吗?

准备好发表意见了吗?

在应用这些提示之前,最好开始感受您使用的内容。测试您的网站的速度和尺寸,退房网页分析仪来自witesoptoptimization.com。

如果您想要了解您的网站整体表现的更详细报告,查看Hubspot的新重新设计网站GEARER。你会得到一个免费的便士统一化报告,您的网站等级的标准,包括性能,移动准备,SEO和安全性。

新的呼叫动作

新的呼叫动作

免费分析您的网站SEO

最初发布于2020年4月2日下午1:00:00,2020年5月29日更新

话题:

SEO战略