2021 年的网站加载时间:您的网站加载速度应该有多快?

家>博客>搜索引擎优化> 2021 年的网站加载时间:您的网站 Telegram 数据库用户列表 加载速度应该有多快?

2021 年的网站加载时间:您的网站加载速度应该有多快?
31 条评论
更新日期:2021 年 10 月 6 日
49
股份

 

快速加载的网站已成为 2021 年企业的首要任务。

网站速度慢会损害 SEO 和在线营销工作,因为它会影响您的谷歌排名、用户体验和转化率。自 2021 年 6 月起,谷歌更新了其搜索引擎算法,并正式核心网络指标SEO 排名的主要部分。

我们看到公司正在加大对网站基础设施和优化工具的投资,以确保其网站得到充分优化,从而提供无缝的用户体验。页面加载速度是消费者与您的品牌互动的关键部分。

什么是网站加载时间?
网站加载时间是指网站内容被用户看到所需的时间。理想情况下,网站应该2-3秒加载。

反弹概率增加32%页面加载时间从 1 秒增加到 3 秒。加载时间更快的网站往往具有更好的用户参与度和转化率。

网站加载时间最好在 3 秒以内
提高网站速度很困难,因为它涉及修复前端和后端的问题。

前端 Web 开发是用户可以看到的内容,例如页面上的文本、图像和动画。这些问题往往比服务器响应时间、数据库结构等后端问题更容易解决。

了解基础知识页面加载的工作原理这里。

在本文中,我们将了解网站加载缓慢的原因、如何修复这些问题以及如何优化以加快页面加载时间。

1. 图片
图片和视频是网站速度慢的主要原因,因为它们通常是最大的文件。一张高分辨率图片很容易超过 3MB。

高质量图像的文件大小通常较大。它们需要更多带宽来加载,从而增加页面大小。

少量较小的图片也会增加整个页面的大小。因此,虽然使用较小的图片是可取的,但减少图片数量无疑会缩短加载时间。

因此,优化您的图像将是加快网站速度的第一步。

减小图像尺寸

通过裁剪或调整大小来减小图像尺寸,使其适合页面,而不是让浏览器缩小它们。

因此,如果您的图像的显示尺寸仅为 800 x 600px,则无需上传 2000 x 3000px 大小的图片。

找出图像显示尺寸的快速方法是在浏览器上检查,检查“渲染尺寸”。

chromdev-tools-图像渲染大小

图像的渲染尺寸就是显示尺寸,可以很好地指示要使用的正确图像尺寸。

大多数图像使用 JPEG
图像格式是优化的重要部分,会影响页面速度。例如,PNG 格式通常比 JPEG 大,会降低网站速度。

一个好的经验法则是让大多数图像采用 JPEG 格式而不是 PNG 格式。

JPEG 采用有损压缩,这意味着图像中的一些信息会丢失或删除。因此,文件大小更小,图像格式也更小。
PNG 使用无损压缩,不会丢失数据。因此,质量保持最佳状态。这也意味着文件大小更大。通常,PNG 用于图标和复杂图像,例如需要透明背景的徽标。
使用较小的 JPEG 图像格式将有助于您的页面加载得更快。

速度测试:使用瀑布图分析每个资源的页面加载时间
修复某物的最佳方法是测量它。使用类似网页测试帮助您测量页面上每个资源的加载时间。通过它,您可以评估哪些图片和文件最拖慢了您的网站速度。

我教授更多关于网站速度测试、如何阅读瀑布图和发现页面加载瓶颈的知识网站速度优化课程在这里。

下一代图像格式
将图像转换为下一代图像格式可以进一步减小文件大小。以 WebP 或 JPEG 2000 格式提供图像可以将图像文件大小减小 25% 到 50%。

下一代图像格式也是Google 推荐的格式。

CSS 图像精灵
使用 CSS 图像精灵是节省空间的另一种方法。CSS 图像精灵将多幅图像组合成一个文件。CSS 代码用于加载要显示的图像部分。

2. 阻止渲染的内容
渲染阻塞内容是指需要先加载 Javascript 和 CSS 等内容,然后才能加载页面的其余部分。这就是为什么它被称为渲染阻塞。

如果你一直在努力核心网络生命力,您可能在 Google PageSpeed Insights 上看到过这个速度警告。

这是导致页面加载缓慢的主要原因,也是修复起来比较复杂的问题之一。您可以使用以下方法找出哪些资源会阻塞渲染:Google PageSpeed Insights,GT矩阵以及大多数速度测试工具。


elinate-渲染阻止

消除渲染阻塞

我用了很多优化方法消除渲染阻塞资源,将时间从 3.7 秒缩短至 0.15 秒,包括异步加载、缓存、最小化和删除插件。

3.过多的HTTP请求
当浏览器访问 URL 时,它开始解析 HTML 文档并发送 HTTP 请求以访问网站内容。

一个典型的 HTML 文档包含大约 70 个 HTTP 请求,用于加载页面所需的各种脚本、图像、CSS 文件和其他资源。

HTTP 请求越多,网站加载时间就越长,因为浏览器需要等待每个请求。需要处理的 HTTP 请求越多,页面加载时间就越长。

压缩 CSS 和 Javascript 文件是减少请求数量的一种方法。例如,将多个 CSS 文件合并为一个文件有助于实现这一点。浏览器只需要请求一个文件,而不是多个文件。

4. JavaScript
JavaScript 是网站和网络应用程序最常用的脚本语言。它通常用于任何页面交互,例如动画或可点击元素。

JavaScript 也会降低页面速度。阻止渲染的 JavaScript 文件会阻止浏览器加载页面,直到处理完脚本为止。

异步加载
要解决此问题,请对页面主要内容不必要的 JavaScript 使用异步加载。向脚 博客评论对 SEO 的好处及应避免的事项 (2024) 本添加“async”属性可让浏览器在解析脚本之前加载页面的其余部分。

但有些对页面布局至关重要的 JavaScript 文件无法异步加载。应通过最小化和连接代码来压缩关键的 JavaScript 文件。

压缩 JavaScript
压缩 JavaScript 涉及删除所有空格和注释以缩小文件大小。连接涉及将多个脚本合并到一个文件中以减少 HTTP 请求。

如果您使用的是 WordPress,则可以使用优化插件,例如 WP Rocket、Autoptimize 和 Perfmatters。这些插件有助于缩小和压缩 JavaScript 和 CSS,以缩短加载时间。

5.服务器响应时间
服务器速度慢是网站速度慢的主要原因。当有人访问您 CZ 领先 的网站时,浏览器会发出请求并等待服务器响应。

浏览器通常需要向服务器发出 69 到 75 个请求才能加载页面。每个请求仅几毫秒的延迟就会显著增加总加载时间。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注