15208187678

为企业构建全球竞争力,行业信息化整体解决方案

For the enterprise to build the global competitiveness industry informatization overall solution

如何通过优化前端来提高网站速度
2021-03-14 28次 前端优化

我们建立网站来传播有关事件的信息,与同龄人交流,促销商品和服务等等。在众多的网站中,可能很难引起注意。这就是为什么我们需要想出有效的方法来提高我们网站的搜索排名并覆盖我们的目标受众。

一直到2020年,Google都在确定搜索结果排名的众多因素中确定了页面加载速度。但是比搜索排名更重要的是,网站加载速度对于网站的可用性至关重要。加载网页所花费的时间越多,跳出率越高,网站上所花费的时间就越少。

页面加载时间与网站速度

页面加载时间

页面加载速度表示从服务器加载网页并在浏览器中显示网页的速度。页面加载时间是单击链接到从服务器接收响应之间的时间段。

关于站点速度,需要考虑三个主要因素:

1、浏览器接收请求数据的时间(页面加载时间);

2、浏览器如何响应页面加载;

3、浏览器渲染的速度。

自然,快速加载的网站并不能保证在搜索排名中排名第一,即使当您的网站在相关性上与另一个网站捆绑在一起时,它可以为您提供优势。

速度多快?

定义平均可接受的网站速度

现在,让我们看看一些数字,并尝试找出在网站环境中“慢”和“快速”的含义。显然,这些定义会随着时间而改变,并且互联网用户对网站速度的要求也越来越高。早在1999年,当人们仍在使用拨号Internet连接时,他们平均等待8秒钟来加载页面是非常好的事情。在2020年,互联网连接速度有所提高,用户声称他们愿意等待长达6秒钟的时间。到2020年,如果下载时间超过三秒钟,则用户承认离开了该页面。

Google首先意识到了网站速度的重要性。Google工程师Arvind Jain声称,该公司关心的是新产品不会减慢其他Google服务的速度。难怪Google工程师建议网站的最佳性能为0.1秒。这就是将视觉信息存储在感觉记忆中所需要的。如果页面加载时间少于0.1秒,则我们认为该页面已被立即下载。自然,这是在网站上保留客户的一种非常有效的方法。

您如何衡量网站的加载速度?

哪些车速表可以衡量网站的加载速度?在网络上,您可以找到各种工具来帮助您衡量网站的速度。让我们看一下最有效和最受欢迎的选项。

Google PageSpeed

Google PageSpeed Insights是衡量网站性能的出色工具。它使您可以跟踪关键统计信息,检测可能的问题,并提供有关如何提高网站速度的可能解决方案和建议。Google PageSpeed使用分级评分系统,评分范围为1到100。如果您的得分达到85分或以上,则表明您的网站已经过优化并且运行良好。它的额外功能是估算网站移动版本的用户体验。

GTmetrix

GTmetrix跟踪您的网站性能,包括Google PageSpeed Insights和YSlow(由Yahoo!提供)提供的得分,以及这些资源提供的优化建议。GTmetrix还包括有关页面总加载时间,页面大小和请求数量的信息。您可以下载此信息作为报告,以方便进一步分析。

平度

衡量网站性能的另一种工具是Pingdom,它被定位为市场营销和整体性能监控的专业工具。您可以通过订阅各种计划来访问Pingdom的功能,并且在提交之前有14天的试用版。除了评估网站性能和显示浏览器请求等Pingdom基本功能外,您还可以存储测试结果并跟踪网站速度随时间的变化。

您如何优化网站的性能?

在运行测试以衡量网站的性能并确定瓶颈之后,是时候考虑网站优化了。我们将专注于前端(用户直接与之交互的网站部分)优化。以下是优化网站前端的五种方法:

1.利用浏览器缓存

缓存是提高网站性能的有效方法。浏览器缓存发生在客户端设备上:您已经访问的内容存储在硬盘上。这就是为什么第一次访问页面要比第二次加载相同页面花费更长的时间的原因。当您单击“上一步”或访问您最近查看过的页面时,浏览器缓存还可以加快页面加载速度。

网页包含许多元素:图像,HTML,CSS和JavaScript文件。这些元素中的某些元素在网站页面上始终使用(例如徽标,图标和按钮)。客户端的浏览器可以保存这些文件(服务器响应)的副本,因此只需下载一次即可。这个过程称为浏览器缓存。它加快了网页下载速度,节省了网络流量,并减少了服务器负载。

以下是一些用于管理客户端缓存(浏览器缓存)的HTTP标头:

过期。“ Expires”标头确定缓存的内容何时过期。内容过期后,浏览器将查询源服务器以查看内容是否已更改。“ Expires”标题非常适合缓存静态图像,例如导航元素和按钮,因为这些类型的元素很少更改。但是“ Expires”对于定期更改的页面也很有用。如果您设置内容过期时间,则客户端缓存会知道何时需要请求新版本的网页,并且用户不必手动刷新页面。

缓存控制。扩展其范围的各种指令(可调整参数)均支持“ Cache-Control”标头。让我们看一些Cache-Control指令:

“私有”指令将内容指定为中间代理无法缓存的私有数据。只有最终用户的浏览器才能缓存此类数据。

“ no-store”指令是严格的选项,禁止缓存任何内容。该指令在处理机密信息时非常有用。

“ no-cache”指令在内容显示在最终用户的浏览器中之前对其进行重新验证。使用ETag标头,“ no-cache”启动内容的重新验证,以确保自上次会话以来未更改内容。

最后修改。“ Last-Modified”标头告诉浏览器文件的最后修改时间。例如,“上次修改时间:2016年9月22日,星期四,格林尼治标准时间”。因此,当浏览器将请求发送到服务器以检查文件是否已更新时,浏览器将显示先前缓存的文件。“ ETag”标头的工作原理相同,只是不受时间限制。验证文件后,将从缓存中检索带有唯一“ ETag”标头的文件。

2.压缩图像

2016年,HTTP Archive进行了一项研究,发现网站的页面权重中约有64%由图像组成。图片会使网站变慢。因此,优化图像可能是缩短站点加载时间的最佳方法之一。在研究图像压缩技术并考虑最佳格式之前,先问自己是否确实需要某些图像;通常,网站应尽量减少对速度有负面影响的图形,因为这会导致总体上较差的用户体验。如果您无法消除图像,请考虑使用CSS效果,该效果更轻巧,并且在任何分辨率下都显得清晰。

此外,请考虑哪种图像格式最合适。例如,您应该使用栅格图像还是矢量图像。矢量格式更适合使用徽标,文本和图标,因为矢量图像的质量不取决于比例和分辨率。但是,矢量格式不适用于复杂的图像,例如照片。对于照片,应考虑使用光栅图像格式,例如JPEG,GIF或PNG。

3.最小化CSS,HTML和JavaScript

通过消除不必要的间隙,制表符,折行等来最小化CSS,HTML和JavaScript。这会导致人类的代码可读性较差,但文件的大小更小-机器可以很好地读取缩小的代码。

资产管道的好处。资产管道是默认的上云CMS框架,该框架结合,最小化和压缩JavaScript和CSS资源。它还使您能够使用其他编程语言和预处理器(包括CoffeeScript,Sass和LESS)创建这些资源。

减少请求数。浏览器可以同时执行的请求数量受到限制,这就是为什么减少请求数量可以减少加载时间的原因。资产管道合并了资源,从而减少了浏览器请求。

缓存文件。文件缓存可以缩短页面加载时间-但是,如果对资产进行了更改,该怎么办?为了说明可能的更改,管道使用指纹-一种在文件名与其内容之间建立关系的工具。如果在更改文件内容后重命名了文件,则指纹使用户可以检查文件的两个版本是否相似。此技术为浏览器提供了相关的文件版本。

4.遵循“折中原则”

这是一个事实:在网站上放置元素在网站的整体加载速度中起着重要的作用。您拥有的元素越多(包括图像和样式表),对每个元素进行的HTTP请求就越多,从而导致加载速度提高。正确分配网站元素可以使您有效地提高前端性能。 优先原则是将最必要的元素放在网页的上部,无需向下滚动即可看到。以下是遵循“折叠式”原理的几个技巧:

最小化首屏上的数据。页面顶部显示的数据越多,发送到托管服务器的HTTP请求就越多。此过程直接影响页面加载时间。最小化首屏数据可以带来更好的网站性能。

将CSS移至网页的上部。将CSS放在网站标题中会导致逐步加载标题,徽标,导航等。当用户可以看到您的网站加载情况并可以判断出正在发生什么时,他们会感到更加自在。

将脚本放在下面。如果您的脚本位于网页的上部,则浏览器将首先下载它们,然后显示用户最初请求的内容。在底部放置脚本会告诉浏览器先下载最相关的信息,然后再下载脚本。

5.实施Gzip压缩

压缩文件的下载和传输到网络浏览器的速度更快。Gzip压缩器可处理包括JavaScript,CSS和HTML文档在内的文本文件;但是,Gzip无法压缩视频,图片和音频文件等元素。压缩文件占用的空间更少,所需的带宽也更少。根据调查,将Gzip压缩文件保留在服务器上可以使页面的下载速度提高3-4倍。

Gzip可在大多数现代浏览器(包括Chrome,Firefox,Opera和Internet Explorer)上运行,这使Gzip成为最吸引人的压缩器之一。

结论

当然,识别站点的瓶颈会降低性能,这需要花费大量时间和精力。请关注我们的博客,以获取有关如何优化后端以缩短页面加载时间的文章。

推荐阅读