HTML&CSS中提升页面加载速度小技巧
研究发现：页面加载速度在0-5s之间时，每额外增加1s的加载时间将会直接导致网站的转换效率下降4.42%，前5s的页面加载时间对于站点转化效率影响最大。因此，通过对页面的HTML和CSS的有效组织会在一定程度上提升页面的加载速度。
下面将重点介绍页面中常见的HTML&CSS内容进行相应优化的手段。
1.懒加载
懒加载能有效缩短页面渲染的关键路径，进而提升页面的加载速度。
1.1 CSS拆分
CSS文件需要瘦身，从而尽快完成加载，而这可以通过媒体类型拆分、媒体查询等手段提升页面渲染。比如下面的CSS将会在所有的设备上加载：
<!-- Loading and parsing styles.css is render-blocking -->
<link rel="stylesheet" href="styles.css" />
打印设备
如果一个CSS文件只需要作用于打印设备，可以通过如下方法：
<!-- Loading and parsing print.css is not render-blocking -->
<link rel="stylesheet" href="print.css" media="print" />
手机设备
如果一个CSS文件只需要在手机上加载，可以通过如下方法进行声明：
<!-- Loading and parsing mobile.css is not render-blocking on large screens -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" />
平板
如果一个CSS文件只需要在平板（Tablet Screens）上加载，可以通过如下方法进行声明：
<!-- Loading and parsing tablet.css is not render-blocking on large screens -->
<link
rel="stylesheet"
href="tablet.css"
media...
点击查看剩余70%
{{collectdata}}
网友评论