高端定制网站建设服务商
顶匠科技,已为数百家企业提供网站建设服务

优化CSS性能提高网站打开速度的方法

作者:苏州网站建设日期:2019-06-04 10:32 浏览:170
  用户对一个网站进行评价时,对网站的打开速度是非常看重的,当用户在浏览一个网站时,点击网站好久都打不开,用户是没有耐心慢慢等的,必然后马上关闭去浏览其他网站,就算你页面再好,内容再丰富,也是没有任何作用的。因此,对于网站的打开速度我们一定要认真对待,是网站的重要基础。那么,为什么网站打开速度慢呢?除了服务器等基础原因,网站css也是很重要的因素,今天苏州网站建设小编就为大家介绍一下优化CSS性能提高网站打开速度的方法。

优化CSS性能提高网站打开速度的方法
 
  什么是CSS?
 
  级联样式表或CSS是用于基于标记语言文档中提供的内容定义网站的可视化表示的语言,它被认为是Web和HTML和JavaScript的“基石技术”之一。CSS通常存储在外部样式表中,或者.css files也可以直接集成到HTML文档中。
 
  CSS允许网站的演示文稿和内容之间的分离,这使得网站更容易被不同的设备访问。将颜色和字体的信息与内容分开也会降低网站的复杂性,因为几个HTML页面可能共享相同的内容.css file。但是,如果使用不当,CSS可能会严重影响网站的性能。
 
  CSS性能和网站速度
 
  在评估网站的速度时,需要衡量各种性能指标,但有两个突出显示:
 
  首个字节的时间
 
  开始渲染的时间
 
  首个字节的时间是指访问者在请求您的URL后接收首个数据字节所需的时间,开始渲染的时间是用户的浏览器实际开始显示内容的时间点。前者在很大程度上取决于您的服务器设置,但后者更多地取决于CSS结构。
 
  也就是说,浏览器在接收数据之前不会开始渲染,因此首个字节的慢速时间显然会缩短开始渲染的时间。因此,在获得优化CSS性能之前,您应该优先解决服务器的任何潜在问题。
 
  CSS性能如何影响启动渲染的时间?
 
  在浏览器开始布置网页内容之前,它需要HTML和CSS形式的说明。因此,在下载和处理所有外部样式表之前,渲染无法开始。这需要的往返次数越多,游客就越需要等待。
 
  使用外部CSS涉及发出一个或多个HTTP请求,因此您的目标应该是尽可能减少所需请求的数量。例如,将插件,横幅和布局链接样式放入单个.css文件中可以显着加快首次渲染的时间。

优化CSS性能提高网站打开速度的方法
 
  提高CSS性能:内联简介
 
  确保快速交付CSS的一种方法是内联实践,内联意味着将外部CSS资源直接插入HTML文档。这种技术适合较小的资源,但它仍然有明显的区别。
 
  内联CSS减少了浏览器在开始呈现页面之前需要下载的数据量,使用外部CSS文件时,必须在标记文档完成下载后单独下载它们,内联可以让你一石二鸟,可以这么说。
 
  要内联CSS,只需从外部CSS文件中复制所需的CSS代码,然后将其粘贴到HTML文档头部的样式标记之间,如下所示:
 
  <head>
 
  <!– Your header markup –>
 
  <style>
 
  .your-styles {
 
  font-weight: bold;
 
  }
 
  .etc-etc {
 
  color: #222222;
 
  }
 
  </style>
 
  </head>
 
  内联更大的CSS资源
 
  如果您尝试内联大型CSS文件,可能会从性能测试工具收到警告,指出您的首屏内容太大。因此,对于较大的CSS文件,您应该只内联渲染您的首要内容所需的CSS。然后,您应该异步加载完整的样式表,以便页面可以在解析时继续呈现。
 
  关键CSS是一个GitHub项目,可以帮助您选择哪个CSS属于首屏,但您还应该进行手动检查以确保没有遗漏关键组件。
 
  在缩小和Gzip压缩之后,所有您的首要样式,脚本,标记理想情况下总重量应小于14 kb。由于14 kb大致是服务器在一次往返中可以发送的数据量,保持在该阈值之下允许用户在他们收到的一个数据包中获得所有内容。
 
  使用异步加载和缓存提高CSS性能
 
  上述技巧可以将用户的浏览器保存一次往返服务器,因此他们在一次访问时会更快地看到内容。不幸的是,用户的浏览器不会缓存CSS,因此每次访问时都必须从头开始加载所有内容。如果你有相当简单的CSS,这不是一个问题。但是,在大多数情况下,您仍然希望用户的浏览器缓存大部分CSS,这就是为什么许多Web开发人员只需在其主页或登录页面上内联CSS,同时在其网站的其余部分使用外部CSS。
 
  解决此问题的一种方法是异步加载,不幸的是,没有办法本地异步加载CSS文件,但你可以使用像loadCSS.js这样的脚本来完成这项工作。

优化CSS性能提高网站打开速度的方法
 
  提高CSS性能的7个提示
 
  1.使用preload / HTTP / 2 Push
 
  预加载资源提示告诉浏览器提前获取资源,要让CSS先行一步,请将其设置为HTML文档中的链接标记,如下所示:
 
  <link rel=”preload” href=”/css/styles.css” as=”style”>
 
  或者,您可以在服务器配置中包含preload作为HTTP标头:
 
  Link: </css/styles.css>; rel=preload; as=style
 
  如果您的服务器配置为HTTP / 2,预加载将被解释为服务器推送。一些CDN还支持服务器推送,这将有助于进一步加快高优先级CSS文件的传送速度。
 
  2.不要内联一切
 
  不要在HTML文件中内嵌所有内容,因为这会导致初始HTML文档的大小增加,因此TTFB需要更长的时间。
 
  3.连接并缩小CSS
 
  将样式表连接到一个文件并发送缩小版本可以大大减小CSS的大小。
 
  4.减小样式表的大小
 
  样式表越小,它们包含的选择器越少,浏览器在呈现网页时必须执行的工作就越少。因此,您应该尽力删除不需要的选择器,利用实用程序类并避免重复的CSS代码,您可以使用诸如uncss之类的工具来确保样式表仅包含必需的CSS代码。
 
  5.选择你的选择器
 
  说到选择器,使用后代选择器强制浏览器检查所有后代元素是否匹配,因此它们可以创建比它们旋转更多的问题。通用选择器也可能相当昂贵,因此也避开它们。尽可能使用浅选择器。
 
  6.避免一些属性
 
  某些CSS属性比其他属性要臃肿得多,所以应该保守地使用它们,这些是需要注意的几个属性:
 
  边界半径
 
  箱阴影
 
  过滤
 
  位置:固定
 
  转变
 
  如果它们每页出现数百次,那么整体CSS性能可能会受到影响。
 
  7.避免@import
 
  不要使用@import指令来包含外部样式表,因为它会阻止并行下载,这是一种古老的做法。相反,始终使用链接标记
 
  苏州网站建设总结:很多客户都喜欢在网站设计上下功夫,不过无论网站加载完成后有多好,如果用户在此时就离开网站,再多的努力也是没有作用的。上面这些关于css的策略方法,能帮助我们更好的精简网站编码,提升网站打开速度,增加客户访问率。

13585950001在线技术咨询
75秒时时彩注册---广东快乐10分开奖直播网址_欢迎您 75秒时时彩-广东快乐10分开奖直播网址 光大时时彩注册---广东快乐10分开奖直播网址_欢迎您 75秒时时彩_官网 75秒时时彩_安全购彩 75秒赛车网址_安全购彩