2020-10

10

网站建设中如何优化CSS以加快页面加载速度
  • 类型:专业观点
  • 编辑:尼高GARY
  • 来源:https://www.szniegoweb.com
  • 做为有着13年网站建设经验的我们,一直以来都会被客户要求优化CSS以加快页面加载速度,我们也在不断努力缩短网站的加载时间。它已经非常快地加载了,但是我知道仍有改进的空间,其中之一就是CSS加载。我们今天来分享一下这整个过程。

    网站建设

    第一限制样式表的大小

    如果要缩短加载时间,则减小CSS文件的大小是个好主意。如今,使用一些工具在构建时修改CSS(后处理程序或PostCSS)以为较旧的浏览器或其他一些增强功能提供后备功能已经很普遍了。就我我们而言,CSS具有为CSS变量生成的后备版本和具有旧版flexbox语法的前缀。这似乎是一个琐碎的问题,影响很小,但是对于像这样的小型样式表,结果节省了大约3 kB。这对于很少的工作来说是一个很大的进步。对于大型CSS,它有可能产生更大的影响。


    第二使用关键的CSS

    我们压缩了CSS文件,但仍然需要下载它。我们可以通过减少网络请求来加快网页加载时间。最好的网络请求根本就不是请求。我们可以将样式直接内联到HTML中,从而无需下载任何外部样式表,从而节省了时间。当然,在每个页面上都包含一个完整的9kb样式表(对于较大的项目而言较大),并不是十分有效。因此,我们将仅包含必要的样式,以将页面设计的一部分呈现在折叠上方,并延迟加载其余样式。这样,我们仍然可以利用浏览器缓存其他页面,并使我们的网页加载速度更快。由于我们包含了对页面渲染至关重要的样式,因此该技术称为Critical CSS。


    第三延迟加载样式表
    由于使用的是Critical CSS,因此我们希望延迟加载样式表,以避免阻塞页面的呈现。除非您需要支持某些旧的浏览器,否则,当今的现代解决方案是使用用于样式表的普通链接标记,但该标记具有不同的媒体类型和一些JS。Filament Group博客文章中充分描述了这个聪明的小技巧。在下面,您可以从帖子中看到用于延迟加载CSS的代码段,但是我建议您阅读整个内容。