贵阳贵阳网站建设公司:如何适当提高页面加载时间-极简慕枫

贵阳贵阳网站建设公司:如何适当提高页面加载时间

2019-01-14

贵阳贵阳网站建设公司

到目前为止,网站速度已成为当今摇摇欲坠、竞争激烈的在线市场取得成功的最关键的决定因素。

几年前,当我们谈到优化网站性能时,我们只关注于优化其服务器端,因为大多数站点都是静态的,并且是为服务器端处理的。然而,Web2.0技术的出现使得动态Web应用非常流行。

因此,必须对您的站点在客户端的表现给予应有的关注,就像服务器端的处理一样。

现贵阳贵阳网站建设公司在,与服务器端的性能问题相比,客户端遇到的性能问题需要立即解决,因为前者会影响用户体验。虽然可以通过将后端性能提高50%来提高10%的总体web应用程序性能,但不可否认的是,通过将工作重点放在前端并将其加载时间减少到一半,可以使应用程序的性能提高40%或40%以上。

更重要的是。与后端项目相比,您需要花费更少的时间和资源对前端进行改进。这就是为什么网站所有者在改善其网站前端性能时给予适当考虑是很重要的。

下面是一些有助于在很大程度上提高前端性能的最佳实践:

1.首先,测量页面加载时间。

当然,当用户向浏览器提交请求时,您可能想知道前端是如何响应的。此外,只有在测量了你的前端表现之后,你才能知道需要改进的水平。

幸运的是,有几个有用的在线工具,可以帮助识别您的网站的前端性能,如页面速度,Y慢速和Firebug等等。

2.缩小CSS、HTML和JavaScript资源的大小

在编写CSS代码时,我们经常使用更容易理解的格式。基本上,我们更喜欢使用类似于:

.center {
margin: auto;
width: 80%;
border:6px solid #d3d3d3;
padding: 8px;
}

在上面的例子中,我贵阳贵阳网站建设公司们可以清楚地看到,我们使用边距和其他CSS属性对齐中心。上面的CSS也可以写成:

.center {margin: auto;width:80%;border:6px solid #d3d3d3;padding:8px;}

但是正如您所看到的,这一行代码并不像上面的CSS代码片段那么清晰。虽然,它可能更容易阅读,但它包含不必要的字符。

如果您运行的是一个拥有上千行代码的大型网站,那么像以前的代码片段那样编写代码可能会降低性能。贵阳贵阳网站建设公司但是,压缩CSS文件可以帮助您减少不必要的字符,如空格、注释等。

缩小的最好部分是,所有不必要的字符(包括冗余数据)都可以在不影响您的网站性能的情况下被消除。您甚至可以使用YUI压缩工具缩小CSS代码和JavaScript。此外,您还可以使用PageSpeedInsight工具缩小HTML。

3.将CSS和JavaScript文件捆绑在一起以减少HTTP开销

当您加载网站时,HTTP请求将发送到远程服务器,您的所有网站文件(如CSS和JavaScript)都需要下载到Web浏览器中。

因此,如果您有4个CSS文件,则至少需要4个“GET”请求来呈现所有这些文件。这最终将增加生成网页所需的开销。但是,通过将CSS和JavaScript文件捆绑在一起,可以大大提高页面速度。

SitePoint还谈到将CSS和JavaScript捆绑在一起,因为它们能够将响应时间缩短到1.6秒,这帮助他们将“响应时间减少了原来时间的76%”。

4.优化映像以减少服务器请求

下载多个贵阳贵阳网站建设公司:如何适当提高页面加载时间可以使您的网站痛苦缓慢,而不管他们的图像。这是因为,站点上的每个图像都会发出一个HTTP请求来加载。因此,网站上的贵阳贵阳网站建设公司:如何适当提高页面加载时间贵阳贵阳网站建设公司越多,生成的GET请求就越多,如下面的截图所示:

不幸的是,浏览器只能同时处理几个请求,从而导致图像的瓶颈。但是,将多个图像组合到一个映像中可以帮助减少HTTP请求的数量。这正是CSS雪碧所做的。

雪碧基本上是一个包含一组图像的大型图像。谢天谢地,CSS雪碧生成器帮助完成上传贵阳贵阳网站建设公司:如何适当提高页面加载时间的任务-这需要合并成一个CSSSprite-要简单得多。这里是雪碧贵阳贵阳网站建设公司:如何适当提高页面加载时间的一个例子:

使用数据URI进行优化

还有一种方法可以用于优化图像以减少HTTP请求,称为数据URI。在HTML文档中使用IMG元素或在CSS中定义背景图像时,需要将该元素链接到外部图像文件。

使用数据URI,您可以消除浏览器从外部源加载图像数据的需要,因为它将数据嵌入到HTML或CSS文档中。

数据URI以数据字符串的形式表示标记和样式表中的数据,这些数据字符串被编码为base 64格式。最好的部分是可以使用字符串直接将图像存储在标记和样式表中,而不是发出HTTP请求从外部源加载图像数据。数据URI的标准格式是:data:[][;base 64]。

现在,让我们看一个例子,其中数据URI以CSS中的“重复背景图像”的形式出现:

body {
background-image:url('data:image/png;base64,');
background-repeat: repeat;
}

包起来

随着互联网连接的速度越来越快,网站所有者需要确保他们的网站前端性能得到优化,以达到快速的性能。希望以上列出的关键点将有助于优化您的前端性能,从而提高网站速度。

联系电话 400-6065-301

微信咨询 寒总监