sumaart

web site / mobile & h5 / brand design
less is more, art is freedom…

设计观点

Back

提高网站性能:专业网页设计师的实用技巧

Share

Time:

2022-03-25 02:52:51

Author:

素马

是什么让网站让访问者保持更长时间的参与并支持高转化率?这是网站的性能。随着移动市场的兴起,网站的速度对于赢得大量客户份额至关重要。网站提速的方法有哪些?以下将公平地讨论这个话题。

 

巨头们经历了什么?

 

根据亚马逊2007年的统计数据,加载时间每增加100毫秒,他们的销售额就会下降1%。

 

谷歌在2006年谷歌地图推出时曾分析,页面大小从100KB减少到80KB后,第一周的流量增加了10%,后三周增加了25%。

 

很明显,必须关注网站的性能,这应该纳入主要的网页设计过程。

 

以下是一些久经考验的技术,可以使网站表现更好。阅读并尝试一下!

 

 

HTTP请求-保持在最低限度

应尽量减少浏览器到服务器的往返次数,以提高网站的性能。浏览器必须下载网站使用的每个文件。将CSS文件包含在单个样式表中。JavaScript和图像也应该这样做。

 

结合HTML、CSS、JavaScript

代码通常以易于阅读的方式格式化。为此,代码中包含了一些不必要的字符,可能是注释、空格和行字符。通过删除这些不必要的字符,可以减少文件大小,从而减少浏览器下载的数据。缩小HTML、CSS和JavaScript。

 

图像优化–极大地影响Web性能

浏览器还需要下载图像,这可能会降低网站的速度。在某些情况下,CSS图形比图像好得多,比如按钮。如果使用图像很重要,那么在不损失质量的情况下对其进行格式化和压缩将有助于保存数据。

 

Sprite——你可能听说过

由于最小的HTTP请求是提高网站性能的关键,因此每张图片需要向服务器发送一个请求,浏览器可以同时结束几个请求。通过将多个图像组合在一起,可以减少与图像相关的HTTP请求。

 

虽然Sprite很难创建,但有许多在线可用的Sprite工具可以从中获得帮助。

 

压缩图像

如果图像数量较大或现场有摄影展示,则无法压缩图像。压缩和格式化图像可以节省许多数据字节,从而提高网站的性能。确保图像被压缩而不会丢失其质量或外观。使用工具保存图像可能会产生额外的数据,其中包括颜色数据或元数据。

 

数据URI——帮助减少HTTP请求

这种技术有助于将字体和图像编码到数据字符串中。因此将它们集成到样式表和标记中。它减少了发送到服务器的图像的HTTP请求。

 

缩放图像以节省数据字节

最好以原始大小提供图像,但是当要提供多次相同的图像并且其中一个具有原始大小时,可以调整它们的大小。它将有助于保存数据字节。它与大尺寸的流体图像无关,它比在小屏幕上显示的要大。Photoshop是缩放图像的正确工具。

 

启用缓存以提高Web性能

Web服务器和浏览器允许缓存,这意味着存储用户先前提出的关于网页、图像、CSS/JavaScript和cookie的请求。它减少带宽以提高网络性能。

 

JavaScript应该在底部

作为浏览器,需要下载所有文件才能在用户面前显示完整的网页。为了最大限度地减少加载时间,JavaScript文件不应加载到HTML头部,而应加载到底部附近。由于JavaScript需要更多时间来加载,因此将其保持在底部不会影响页面其余部分的加载。

 

应该完全避免错误的请求

网站链接损坏或任何导致404/410错误的请求都属于错误的请求标题。应该完全避免这些不良请求,以提高网站的性能。

 

选择内容交付网络

通常,服务器会保留网站的副本,然后响应任何用户的请求。响应时间因用户所在位置而异。内容交付网络的工作方式不同,因为它们存储网站的许多副本并将它们保存在位于世界不同地区的不同服务器上。这意味着内容交付网络最大限度地减少了网站的加载时间,因此有助于提高性能。

 

您开始考虑了吗?

如果您想最大限度地利用网站,则必须引起网站访问者的注意。为了引起网站访问者的注意,网站需要用户友好并且加载时间短。快速的网站使访问者在网页上停留的时间更长,因此转化的机会也更多。

 

您是否已经在考虑上述因素来加快您的网站速度并提高网络性能?如果没有,那么您应该开始考虑它们;这一切都是为了让您的网站高度用户友好。