当涉及到您的网站页面时，大小至关重要。 页面的文件大小越小，对于任何请求该页面的人，其加载速度都会越快。
人们确实注意到页面加载需要多长时间。 实际上，根据来自Pingdom的数据，有24％的用户将放弃一个需要四秒钟加载的网站 ，而如果有五秒钟的用户将有38％的用户离开该页面 。
更不用说，Google承认在网络搜索排名中使用网站速度 ，因为更快的网站往往会创造更快乐的用户。
此外，如今， 许多搜索者使用他们的手机来查找和浏览网站- 互联网连接不健全和数据速度慢，使得加载大页面尺寸变得更加困难。
最终，为了保持健康的网页排名，您的业务需要专注于在所有设备上提供快速，优化的网站体验。 为了确保您的网站不会受到点击量的影响，这篇文章将解释您需要了解的有关页面大小以及如何减少页面大小的所有信息。
什么是页面大小？
“页面大小”（也称为页面权重）是指特定网页的整体大小。
页面大小包括用于创建网页的所有文件，包括HTML文档，任何包含的图像，脚本和其他媒体。
网页的合适大小是多少？
为了帮助您确定网页的权重，我们查看了2020年2月1日至2020年3月1日之间（台式机和移动版） 网页的平均大小 ：
图片尺寸
在2020年，平均桌面网页重2080 KB ，而平均移动网页重1885 KB –与2017年的明显不同，2017年，平均桌面网页重1532 KB ，平均移动网页重1354 KB 。
当然，需要注意的是，上面的数据显示的是典型网页的平均大小-这意味着许多网站可能远远低于该大小，而其他较重的网站则可能使数据朝另一个方向倾斜。
最终，它取决于站点。 虽然某些网站可能包含自定义字体，全屏视频和其他“权衡”页面的设计元素，但其他网站可能采用极简主义的方法，并坚持简单的文本和白色背景。
请记住，页面的权重会因公司或行业而异。 如果您的电子商务网站上有各种各样的照片，则很可能会预料到更大的页面重量。
但是，总的来说，您应该力争达到或低于平均值。
当然，保持头脑同等重要–页面权重并非始终是最重要的指标。
以亚马逊为例-使用Google的PageSpeed Insights，我搜索了Amazon.com ，发现他们在页面性能方面仅占100％的51％：
当然，对于亚马逊而言，这可能无关紧要–他们当然需要较重的页面来显示所出售的数千种产品和服务的图像，并且用户不介意加载时间，因为他们知道该怎么做。期望。
但是，如果不确定页面权重是否会严重降低整体页面质量，请尝试将自己的网站输入Google的PageSpeed Insights中以评估整体效果。
如果您对当前的页面速度不满意或认为页面的重量应该较低，那么让我们探讨一下如何立即降低该重量。
减少页面大小的5个技巧
1.调整大小并压缩图像
在页面权重方面，图像是最大的贡献者之一。 如果您希望缩小尺寸，则首先需要调整任何不必要的大图像的大小。
上传照片时，请记住，图像尺寸绝不能大于容器的尺寸。 如果容器的最大宽度为500像素，通常没有理由上传1,000像素宽度的图像。
但是，假设您要提供人们可以共享和下载的高分辨率图像，该怎么办？ 我们建议上传与容器所在宽度完全相同的图片，然后将其超链接到高分辨率版本，以免造成页面负担。
除了图像尺寸，您还可以通过压缩来进一步缩小图像的尺寸。 压缩图像有助于减小其文件大小，最终有助于减少页面加载所需的时间。
如果您正在寻找压缩工具，这些是我们的最爱：
- 压缩器
- Compressjpeg.com
- Jpegmini.com
如果您是HubSpot用户，那么您会很幸运：HubSpot COS具有自动调整图像大小和压缩图像的功能。
“如果用户上传的尺寸为5,000 x 5,000的图像但仅以500 x 500的尺寸显示在网站上，则使用自动调整图像大小将有助于减少浏览器的加载时间。另一方面，图像压缩会减少文件大小，同时保持上传图像的质量。” HubSpot的Maggie Himba解释说 。
当然，减轻页面重量的最简单方法是消除尽可能多的不必要图像。 但是对于那些需要留下的人，上面提到的技巧应该可以解决问题。
2.使用CSS Sprites
因此，现在我们知道，在给定的页面上拥有大量图像（尤其是大图像）将增加页面权重并减慢加载时间，对吗？
这是因为每个映像都会生成一个服务器请求，这会减慢整个过程。
输入CSS精灵。
根据W3School ，CSS Sprite表示一组图像，这些图像被组合以创建一个图像文件。 然后，您使用CSS仅显示想要显示的组合图像的一部分，从而减少了页面加载所需的服务器请求数量。
为了澄清，下面是更直观的说明。 示例A包含每个浏览器图标的单独图像文件，总计70.7 KB。 示例B使用CSS精灵（一幅使用CSS来显示该图像的一部分的图像）来显示相同的确切信息。 这些图像的总大小小于示例A的一半。
资料来源： Tutorial Republic
3.删除不必要的自定义字体
自定义字体很有趣。
它们为您的页面增添个性，并帮助您与其他人区分开来。 但是，自定义字体的麻烦在于它们会带来一些负担。
幸运的是，如果您认为自定义字体对于网站的设计是必需的，则有一个解决方案：创建WOFF2文件。
正如Wholegrain Digital首席开发人员Joshua Stopper所说 ：“可以说，最简单的更改是毫无缺点的，它是将[custom]字体转换为浏览器中可用的最现代，最有效的格式，WOFF2 …在我们的案例中，仅通过在TTF上加载WOFF2文件，我们就减少了60％。”
但是，如果您正在寻找一种简便的方法来减轻页面的重量，则可能需要重新评估使用的自定义字体的数量。 虽然一对夫妇不会受到伤害，但过量使用它们仍可能会损害您的页面速度。
4.尽量减少资源
可以通过缩减来减少您的资源之一吗？
“最小化是指在不影响浏览器处理资源的情况下删除不必要或冗余数据的过程-例如，代码注释和格式设置，删除未使用的代码，使用较短的变量和函数名称等，” Google Developers解释说 。
根据Google的介绍，以下是应如何减少资源的方法：
的HTML
使用PageSpeed Insights工具生成HTML代码的优化版本。 使用此分析来运行HTML页面并浏览“缩小HTML”规则。 最后，点击“查看优化内容”以访问缩小的HTML代码。
的CSS
查看以下工具：
- YUI压缩机
- cssmin.js
的JavaScript
查看以下工具：
- 闭包编译器
- 敏敏
- YUI压缩机
5.使用内容交付网络（CDN）
根据TechTarget的说法， 内容交付网络指的是“缓存服务器的互连系统，这些互连服务器使用地理邻近性作为交付Web内容的标准”。
这意味着什么？ 为什么你要在乎？
假设您网站的所有元素都存储在马萨诸塞州的波士顿。 对于试图访问您的网站页面的波士顿人-或美国境内的任何人来说，这都是一个好消息。 但是伦敦那位忠实的访客又如何呢？ 仅由于服务器的位置，他们加载页面的时间可能会明显更长。
CDN旨在通过将您的网站元素存储在世界各地的多个位置来解决此问题，以确保每个人都能在快速加载时间内获得公平的机会。
注意：虽然此步骤不一定能减轻页面的重量，但将有助于提高其速度-无论如何，这就是我们真正要的，对吧？
准备好权衡了吗？
在应用这些技巧之前，最好先对您正在使用的内容有所了解。 要验证您网站的速度和大小，请从WebsiteOptimization.com中检出网页分析器 。
如果您想更详细地报告网站的整体性能， 请查看HubSpot新近重新设计的Website Grader 。 您会收到一份免费的个性化报告，该报告会对您的网站的关键指标进行评分，包括性能，移动就绪性，SEO和安全性。
