目录
您想知道如何减少 WordPress 网站的页面重量吗？了解页面大小是速度优化的良好开端。文件越小，浏览器下载并将其呈现给访问者的速度就越快。用户期望尽快找到他们正在寻找的信息，如果速度很慢，用户就会流失。
| 💡要记住的一条黄金法则：减少网页权重，以快速提供内容并让访问者（和 Google）满意！ |
我们的指南将帮助您了解页面重量的基础知识、如何检查尺寸以及如何缩小网页以提高性能。
什么是网站页面重量或页面大小？
页面重量（也称为页面大小）告诉您浏览器下载了多少字节。它是指将用于生成页面的以下所有资源相加后网页的总字节大小：
- CSS – 用于设置页面样式
- JavaScript——提供交互性
- HTML – 构成页面
- 字体——您在网站上使用字体的方式会影响其性能
- 图像和其他媒体文件 – 例如音频或视频
- 任何其他第三方资源
| 💡测量网页权重是“下载了多少字节来加载该特定页面？”的答案。 |
如何检查您的网页大小
许多不同的技术可用于测量网页大小，但最流行的两种技术是GTmetrix和WebPagetest。对于这两种性能工具来说，该方法都很简单，以下是它与 GTmetrix 的配合方式：
- 在搜索栏中添加您网站的 URL，然后点击“分析”按钮。
- 2. 只需在“页面详细信息”部分中查看结果即可：224 KB，与全球平均水平相比，这是一个不错的分数，如下统计部分所示。
| 📈 想要对您的网站进行全面的性能审核吗？请遵循我们的指南，帮助您提高 WordPress 上的 Lighthouse 分数。 |
现在您对网页重量有了更多了解，我们认为分享一些有关网页上占用最多空间的关键数据会很有趣。
2023 年 HTML 页面平均大小是多少？
根据httparchive.org 的数据，到 2023 年，桌面端 HTML 页面的平均大小约为 2.5MB，移动端为 2.2MB 。
什么占据了网站上最多的空间？
构成页面重量的最常见内容类型是（从最大到最小）图像、JavaScript、CSS 和 HTML。
网页上的平均图像权重是多少？
2023 年 8 月，桌面上的图像平均消耗高达 1029.3 KB，移动设备上的图像消耗高达 873 KB。
网页上的平均 JS 权重是多少？
JavaScript 是桌面和移动页面加载的第二大贡献者，在移动设备上平均消耗 533 KB，在桌面上消耗 587 KB。如果您不想影响网站的性能，则必须对其进行优化。
网页上的平均字体粗细是多少？
字体经常被忽视，但到 2023 年，它们在桌面上占用 151 KB，在移动设备上占用 132 KB。
网页上的平均 CSS 权重是多少？
平均而言，2023 年 8 月，CSS 在桌面和移动设备上消耗约 80 KB。
理想的网页重量是多少？
移动设备和桌面设备上的平均页面大小约为 1-1.5 MB，因此低于或在此范围内的任何内容都是理想的。但是，如果您需要视频和大量媒体，则 3 MB 以下的任何内容仍然可以接受。请记住，页面越重，优化性能就越困难。
为什么你应该让你的网页更小
以下 3 个理由可以说服您开始减小网页的大小：
- 确保加载速度并在移动设备上提供无缝的用户体验
- 提高您在搜索引擎 (SEO) 上的排名
- 降低带宽成本。
它主要是为了让您的网站在 Google 上更快、更显眼，同时为访问者提供卓越的用户体验。
让我们看看如何才能实现这一目标。
如何减小网页大小（包括 HTML）
要减小网页的大小，您可以应用以下 5 种性能技术：
- 启用缓存
- 优化代码
- 调整图像大小、压缩图像并将其转换为 WebP
- 优化字体
- 使用 CDN
在安装任何额外的插件之前，请确保您的网站保持准确的内容和有用的信息。明智地使用图像，不要添加任何对访问者没有好处的额外内容。现在，让我们回顾一下每种策略，以便您可以尽快开始减小网页大小！
1.启用缓存
缓存是减少页面大小的有效技术，因为您不需要在网站的每个页面上包含全部内容。因此，使用缓存还可以提高速度，因为它会从缓存加载以前存储的版本。
2. 优化代码
如前所述，网页的权重主要由代码、媒体和第三方元素组成。通过优化 HTML、CSS 和 JS 的交付，您肯定会减小页面的大小。代码优化可以通过缩小或延迟非关键代码的加载来完成。
如果您习惯编辑代码，则可以手动优化 JS 和 CSS。在这种情况下，您可以使用CleanCSS等在线工具，或者以下的插件工具
3. 调整图像大小、压缩图像并将其转换为 WebP
图像是网页中占用最多空间的元素，因此尽可能优化它们至关重要。我们建议您调整网络图像的大小，在不影响质量的情况下压缩它们，并使用 WebP 格式提供它们。
| 📖 平均而言，Google 发现 WebP 文件的平均大小比 JPEG 小 25%-34%。 |
🛠️ 优化图像的工具： Imagify是最简单的图像优化插件，可以自动压缩图像而不降低其质量。该插件完美地平衡了性能和图像质量，并带有批量压缩选项。它还提供 WebP 转换以节省更多图像字节并使您的网页尺寸更轻。
- 市场上有更多图像压缩插件 – 请查看我们的详细比较文章，其中列出了 WordPress 的最佳图像优化插件。
- 还可以使用其他在线工具，例如CompressJPG或Tiny-img，但您需要浏览计算机才能使用其中的图像，压缩它们，然后在 WordPress 上重新上传它们。
| 📖 对图像优化感兴趣？Imagify 整理了 3 个易于阅读的指南，解释： –如何调整图像大小 –如何压缩图像 –如何将图像转换为 WebP |
4. 优化字体交付
人们经常忘记，网络字体会快速累积，从而降低页面速度并增加页面重量。优化字体是减小页面大小的重要一步，还可以帮助完善排版和网站的整体设计。字体传送优化可以通过预加载来完成，这意味着您告诉浏览器在渲染最终页面之前立即开始下载字体。
🛠️ 优化字体交付的工具：
- WP Rocket 具有预加载字体功能，告诉浏览器立即开始下载字体。不然的话，他们会在很晚的时候被发现。它使您可以更好地控制字体的加载方式，这有助于优化性能并缩短网站的感知页面加载时间。
- 您可以手动将 Link 元素添加到文档的头部：
<head>
<!-- ... -->
<link rel="preload" href="/assets/Belleza-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>| 📖 这是关于字体优化以及如何删除任何无样式文本（FOUT）的详细指南，即当您短暂地看到具有另一种网络字体（浏览器的默认样式）的页面时。 |
5.使用CDN
虽然 CDN 不会直接减小页面的大小，但它们有助于更快地提供内容。由于缓存和遍布世界各地的存在点，它们缩短了用户和服务器之间的距离。
网页大小对于您网站的排名很重要，因为它直接影响您的速度。较大的网页加载缓慢，这意味着谷歌会对它们进行惩罚。为了防止这些性能问题，CDN 可能是您最好的盟友之一。
| 📖 想要将您的性能优化之旅提升到一个新的水平吗？应用19 个附加技巧来加速您的 WordPress 网站。 |
如何使用 WordPress 插件减少网站页面重量
您可以使用以下两个插件轻松减少网页重量，而无需触及任何一行代码：
发表回复