广州蓝景分享HTMLCSS功能让页面加载速度提高数倍

Hello，各位小伙伴，今天广州蓝景跟大家分享前端技术干货，页面加载速度问题。

首先我们都讨厌加载缓慢的页面！

要知道加载时间每增加1秒（0-5秒之间），网站转化率就会平均下降4.42%。页面加载时间的前五秒对转化率的影响最大。

幸运的是，我们可以通过优化HTML和CSS文件来提高网站的页面加载速度，而无需花费昂贵的服务器资源！

注：本文将仅关注如何使用HTML和CSS文件来提高页面加载速度。

延迟加载

延迟加载是一种缩短关键渲染路径长度的策略，从而减少页面加载时间。

a） 拆分CSS文件

尽量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上执行。

对于打印媒体，可以使用：

对于移动设备屏幕，可以使用：

对于平板电脑屏幕，可以使用：

对于移动屏幕横屏或竖屏，也可以使用不同的CSS文件：

通过将CSS分离成多个文件，主文件（在本例中为styles.css）变得小多了，从而减少了渲染被阻塞的时间，大大提高了页面加载速度。

b） CSS的font-display属性

font-display属性应用于@font-face规则，定义浏览器如何加载和显示字体文件，从而允许在字体加载或加载失败时以回退字体显示文本。这可以通过使文本可见取代空白屏幕来提高性能，但代价是闪烁无样式的文本。

@font-face {font-family: "nunito", sans-serif;font-weight: 400;font-style: normal;font-display: fallback;}

c） HTML文件中的图片懒加载

使用loading="lazy"，以便仅在需要时加载图像。这将大大降低页面加载速度。

2. 选择正确的图片格式

.WebP格式的图片被推荐作为网络的图片格式标准。

WebP无损图片在尺寸方面比PNG小26%。WebP有损图片比同等SSIM质量指数下的同类JPEG图片小25-34%。动画WebP图片支持有损、无损和透明，与GIF和APNG相比，可以提供更小的尺寸。

下图是WebP与PNG图片格式对比：

下图是WebP与JPEG图片格式对比：

所有这些测试都可以证明，即使是有损压缩，webp图片的压缩率也更高，因此大大减少了页面加载时间！

你还可以尝试另一种图片格式.avif，在少数情况下比.jpg更好，但由于该格式比较新（2019年发布），因此还没有多少浏览器支持.avif格式！

使用元素

a） 可用于针对不同的media条件裁剪或修改图片（例如，在较小的显示器上加载大图片的缩略版本）。

b）在不支持webp格式的情况下提供替代图片格式。

c）通过为查看器加载最合适的图片来节省带宽并加快页面加载时间。

如果为高DPI显示器提供更高分辨率的图像版本，请改用元素上的srcset。这允许浏览器在数据保存模式下选择低分辨率版本，并且你不必编写显式media条件。

3. 渲染图像

由于图像是异步加载的，并在第一次绘制后继续加载，如果在加载之前未定义其尺寸，则可能会导致重排到页面内容。例如，文本因加载图像而被推下页面。因此，设置width和高height属性至关重要，以便浏览器可以在布局中为它们保留空间。

对于任何background-image，设置background-color值很重要，以便在下载图像之前，覆盖的内容保持可读。

4. 压缩HTML和CSS文件

压缩指的是从代码中删除所有不必要的字符以减小尺寸。删除的是不需要的空格字符，如空格、换行符、制表符等以及注释。

使用压缩工具，如CodeBeautify，CSS Minifier等来缩小HTML和CSS文件。有助于为网站提供更快的页面加载速度。

如何提高HTML页面加载速度

　　降低页面的比埋神重
　　高谈1去除不必要的空白和注释， 将inline的script和css放弯念亏到外部文件中。 HTML Tidy这个工具可以用来自动的去除空白。还有一些其他的工具能够压缩javascript代码，比如将比较长的标志符换成短的，通过这种方式，尽量的减少页面的比重。
　　减少文件的数量
　　将少一个webpage被加载时所需要的下载的文件数量，有些browser具有cache的设置，如果一个css或是javascript文件没有被改变的话，它就不会再去下载一遍。通过这样的设置，也可能减少文件下载的数量。
　　减少Domain查询
　　对于每个Domain的查询，都需要去检索DNS， 过多的Domian查询会导致页面加载速度变慢。
　　缓存重用的内容
　　确保所有可以被缓存的数据都已被缓存，并在恰当的时间过期。
　　尤其要注意的是：Last-Modified header，它会记录下静态最近被改动的时间，而对于大多数web服务器来讲，都会默认的为静态文件提供这样的头。
　　js：避免使用eval或者是函数构造器
　　js解释器在执行代码前，会进行类似预编译的操作，首先会创建一个当前执行环境下的活动对象，并将那些用var声明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined， 并将那些以funciton定义的函数也添加为活动对象的属性，而他们的值真是函数的定义。
　　使用eval时，传递给它的string内容，因为无法进行预编译，所以解释器也无法丢代码进行优化。这样的结果就是eval的效率相当低。
　　同时，在所以可以用string代替函数的地方，都不要用string来代替，而应该直接传一个函数过去。
　　js： 尽量使用局部变量而非全局变量
　　局部变量的查找速度比全局变量高出许多。

如何提高页面加载速度

如何提高页面加载速度

　　网站最重要的一个核心就是用户体验，网站的打开速度影响着访客的浏览体验，提高网站页面的加载速度的方法其实有很多，下面我主要从下面四个角度进行讨论，分享常用的提高网页加载速度的技巧：

　　一、网页压缩技术

　　对于网页压缩而言，相信各位站长都比较熟悉，主要是启用服务器Gzip，对页面Gzip压缩，减少元素的'体积，从而减少数据的传输，进而提高网页的加载速度。

　　二、CSS优化

　　(1)css位置

　　CSS说明如果出现在后，页面需要重新渲染，打开速度受到影响。所有css定义代码的位置要放到网站之前。

　　(2)css sprite技

　　网站上的一些图片可以采用css sprite技术进行合并，减少加载请求次数，从而提高网页的加载速

　　(3)css代码优化

　　通过对css代码属性的简写、移除多余的结构(fr ameworks)和重设(resets)等一系列的方法和技巧来简化css代码，减小css文件的大小。

　　三、缓存静态资源

　　通过设置浏启者览器缓存，将css、js等不太经常更新的文件缓存在浏览器端，这样同一访客再次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、js等，而不必每次都从你的服务器读取，这样在一定程度上加快了网站的打开速度，又可以节约你的服务器流量。

　　四、JS优化

　　(1)JS位置

　　网页代码中对js进行优化的时候，建议将JS放在页面最后，这样可以加快页面打开速度。

　　(2)合并JS

　　合并相同域名下的js，通过减少网络连接次数从而提高网页的打开速度。

　　(3)LazyLoad(延明轿迟加载)技术

　　Lazy Load是一个用ja vasc ript 编写的 jQuery 插件，它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。例如本人的破折君博客就采激旁肆用这个图片延迟加载功能。

;