如何优化网站的性能?

网站优化对于任何网站所有者来说都是一个重要方面,以便为他们的网站访问者提供流畅的体验。 访问加载缓慢的网站的用户往往会更快地退出,并且再也不会回来。 这将直接影响网站的收入和声誉。

对站点性能的影响主要发生在以下几点:

  • 当网络浏览器获取 HTML 代码时
  • 运行 JavaScript 元素
  • 阅读 CSS 和
  • 加载图像文件

本文介绍了在前端优化网页时应遵循的最佳实践。

减小渲染页面的大小

首先也是最重要的事情是网页应该尽可能轻,并且应该更小。 清理网站涉及两件事。

  • 清理图像和文件等内容。
  • 识别和清理不需要或过时的代码或以更有效的方式重写代码。

清理前端和后端不仅可以更快地加载您的网站,还可以提供更好的用户体验。

最小化和压缩静态文件

网页需要包含静态文件,例如 JavaScript、CSS 和图像。 缩小静态文件(如 JS 和 CSS 文件)的概念实际上是删除任何不需要的注释、代码之间的空格等。通常从开发和维护的角度来看,这些注释和缩进是需要的。 但是这些注释和空格中的每一个都会增加文件大小。 由于它不影响前端功能,因此就网页而言,它们将是开销。

因此,在实时站点上使用 JavaScript 和 CSS 文件是一种最佳实践。 这将有助于减少访问网页时下载的静态文件的大小。 更轻的重量和更小的文件肯定会提高网页的性能。 网络上有许多缩小工具可用于缩小 JS 和 CSS 文件。

减少 HTTP 请求

请记住,您网站上的每个 CSS、JS 和图像文件都会向 Web 服务器发送一个单独的 HTTP 请求以进行加载。 当网页有很多文件时,渲染网页的大部分时间都花在下载这些文件上。 所以减少组件的数量很重要,这反过来会减少从页面发送的http请求的数量。 这样可以确保网页加载速度更快。

但是减少 HTTP 请求通常是不可能的,因为我们可能需要在网页中运行丰富的应用程序。 您可以考虑以下部分中介绍的合适方法来减少 http 请求的数量。

合并静态文件

通常一个网页中可能包含多个 JavaScript 和样式表文件。 渲染网页时所需的所有 JS 文件都可以组合到一个文件中并包含在页面中。 实现这一点会将多个 http 请求减少到对服务器的单个请求,因此最终将获得相同的结果并提高性能。

同样,页面中加载的所有 CSS 文件也可以合并为一个 CSS 文件。 如前所述,缩小生成的组合文件也将有助于更快地下载静态文件。

请记住,组合 JS 文件可能会破坏网页,因为这些功能可能无法按预期工作。 因此,在实时环境中部署组合和缩小的 JS 文件之前,请彻底测试这些功能。

从不同域加载文件

加载静态文件时,所有后续组件都会等待下载完成,然后再尝试下载下一个。 浏览器的这种行为肯定会增加网页加载所需的时间。

当所需组件均匀分布在多个域中时,可以并行下载组件。 特别是可以从站点的子域加载图像,以便它们可以与其他内容并行加载。

动态加载静态文件

在大多数情况下,页面加载本身不需要在访问网页时下载的所有组件。 有些组件仅在页面上执行的某些操作(例如单击链接、将鼠标悬停在特定文本或图像上)时才需要。 这样的组件可以在稍后的时间点加载。

一旦识别出此类组件,我们应该能够延迟这些组件的下载。 这些事件驱动的组件可以动态加载,这将减少在页面加载时加载的组件数量,而是仅在触发该特定事件时才下载。

类似地,也可以动态下载仅在任何特定动作或事件上需要的图像组件。

延迟加载

延迟加载是一个概念,通过该概念将对象或组件延迟到实际需要它的位置。

通常当页面加载时,页面的全部内容都会被加载。 这将使页面的大小和重量变得沉重,更不用说http请求的数量了。 在对此进行进一步分析时,页面的某些部分将低于用户可查看区域,因此在页面加载时保持未使用或不需要。 识别这样的区域将有助于实现延迟加载概念。

这可以使用 JavaScript 轻松实现,其中计算用户可视区域的尺寸。 然后,只要像滚动一样调用任何操作,内容就可以附加到 html 的正文中。 这也可以通过提及稍后加载内容或页面部分的时间范围来完成。

图像分割

通常具有多个图像的网页需要更长的时间来加载,因为图像是最重的组件,下载它们将花费大量时间并生成多个 http 请求。 这些图像可能和图标、按钮背景图像等一样小。每次需要这些图像时,都会触发一个新的 http 请求。 使用图像精灵是提高网页性能的最佳方式。

图像精灵是放入单个图像的图像集合。 可以通过在 CSS 中指定背景位置来显示单个图像。 这将减少页面加载时间、带宽使用和服务器负载。

JavaScript 和样式的外部化

内联脚本和样式不是最好的编码方式,也很难得到一个很好的概述。 使用内联脚本和样式有很多缺点。

  • 呈现的 HTML 的大小增加并且变得更重。
  • 另一件事是,由于 HTML 代码永远不会被缓存,所有的内联 JavaScript 和 CSS 内容也不会被缓存。

缓存可以通过在外部使用脚本和样式表来提高网页的加载速度。

顶部的 CSS 和底部的脚本

将样式表或 CSS 文件放在页面顶部以及 head 标签中会使页面加载速度更快,因为它允许页面逐步呈现。 渐进式渲染通常会给用户一种页面加载速度更快的体验。

将 JS 文件移动到页面底部可以提高页面的性能。 但是这种情况下的限制是,在页面加载期间执行文档写入或 DOM 操作的任何脚本本身都会受到影响。

还有另一种可以使用延迟和异步脚本的解决方案。 延迟 JS 文件类似于在页面底部加载 JS 文件。

删除重复的脚本和 CSS

重复的 JavaScript 和 CSS 通常会增加 http 请求,并且还会在评估 JavaScript 函数和样式上不必要地浪费时间。

如果一个外部脚本被包含两次并且不可缓存,它会在页面加载期间生成两个 HTTP 请求。 即使脚本是可缓存的,当用户重新加载页面时也会出现额外的 HTTP 请求。

为组件使用 Cookie 免费域

确保使用无 cookie 请求请求所有静态组件。 因此,创建一个无 cookie 的域并在该域中托管所有独立于 cookie 的组件(如图像)将提高网页的性能。 大多数图像组件不需要 cookie 信息,因此所有图像都可以从无 cookie 的域中加载。

事件处理程序的容器绑定

在一个网页上,会有几个事件绑定到一个特定的功能。 例如,单击链接时触发弹出窗口。 这些事件可以在页面加载时单独绑定。 如果有多个像这样的事件绑定到 DOM 元素,这将证明更昂贵。

在性能方面,所有事件处理程序可以一起包含在一个容器中。 绑定可以在容器 html 元素级别完成,并在此容器内的任何 html 元素上执行任何事件时调用。

这将减少每个事件的单独绑定,从而提高网页在页面加载时的性能。

这篇文章是作为客座文章提交的。 如果您有兴趣提交文章,请查看提交访客帖子页面。
查看  如何提交 Google DMCA 删除请求?

类似文章