今天对博客文章页面进行了升级,可以通过几个参数控制页面图片加载逻辑。该页面在后面会添加图片,用于测试性能,测试性能工具为chrome devtool中的Lighthouse。测试环境选的是手机。
结果会在放在另外一篇文,见图片加载策略对页面性能影响。并以下图为测试图片。虽然是同一张图片,但张图片都以不同结尾,触发以重复加载。
![占屏图片,可忽略](/?_x=file.out&idm=154ca2d&extr=1920x1080&v=0)
目录
参数
_NLN |
_SWH |
_ST |
开启图片 lazy laoding |
设置图片宽高 |
指定图片格式 |
-
_NLN
- 0 默认
启用 native lazy laoding ,不可用 使用 lozad
- 1
使用 lozad
- 2
关闭 lazy laoding,即全部加载
-
_SWH
-
_ST
- 0
指定图片格式
- 1 默认
指定图片格式 webp或jpg
参数使用
占屏内容,可忽略
![占屏图片,可忽略](/?_x=file.out&idm=154ca2d&extr=1920x1080&v=1)
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
![占屏图片,可忽略](/?_x=file.out&idm=196a26f&extr=2000x2000)
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
![占屏图片,可忽略](/?_x=file.out&idm=154ca2d&extr=1920x1080&v=2)
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
![占屏图片,可忽略](/?_x=file.out&idm=154ca2d&extr=1920x1080&v=3)
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
![占屏图片,可忽略](/?_x=file.out&idm=154ca2d&extr=1920x1080&v=4)
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
![占屏图片,可忽略](/?_x=file.out&idm=154ca2d&extr=1920x1080&v=5)
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
占位
![占屏图片,可忽略](/?_x=file.out&idm=154ca2d&extr=1920x1080&v=6)