对于网站的优化,很多站长都会经常做,网站的访问速度快了,也能给人不错的印象,加分不少,其中图片的使用,每个网站都需要,如果图片使用多,而服务器配置不高的话,可能会影响网页的打开速度,影响了体验了效果,那么使用图片多的时候,能有办法提高网页的访问速度吗?
答案肯定有的!
如果不想提高服务器配置的话,可以试试懒加载。
懒加载也叫延迟加载,顾名思义,指的是在网页中延迟加载图片的时机,当用户需要访问网页时,先让网页加载出来,让浏览器把其他的内容渲染出来,然后在访问的过程中加载图片,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。
懒加载,页面很长的网站场景,如果服务器速度比较慢的时候,就能明显感觉到懒加载的优势了。
懒加载的实现原理,其实也简单,将页面上的图片的src属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面滚动的时候,进行判断,如果图片进入页面可视区域内,则从自定义属性中取出真实路径赋值给图片的src属性,以此来实现图片的延迟加载。这样做能防止页面一次性向服务器发送大量请求,导致服务器响应面,页面卡顿崩溃等。
以前想让网站使用图片懒加载,都是通过JS来实现,网上也有人写相应的代码或插件,有一些网站主题集成了懒加载的JS,其实从Chrome76开始(2019年发布),谷歌浏览器内核原生支持懒加载属性,直接在img标签里面加上【loading="lazy"】属性,浏览器会自动实现懒加载。
如果所使用的主题,已经集成了懒加载的标签,就比较方便了,需要一个个设置了,如果主题里面没有,而还想使用懒加载的话,如果自己懂技术,可以通过修改主题加上懒加载,或者在文章添加图片的同时,在图片代码里,加上一段【loading="lazy"】属性,也能实现懒加载的效果。