关于网站图片的渐进式加载和懒加载的实现的方法
衡量一个网站SEO做得好不好的一个重要指标，是页面的打开速度，而影响一张网页打开速度的一个很重要的因素，是加载图片的大小。目前网络上流行的两个优化图片的概念，分别是渐进式加载和懒加载。一个好的网站，需要同时对图片都做到渐进式加载和懒加载这两种处理。懒加载，意思是浏览器加载页面的时候先不加载图片，视窗滚动到能显示图片的位置的时候，图片再自动加载。这样可以避免打开页面的同时因为要加载图片，导致的页面打开时间变长的问题。目前主流浏览器已经都可以不用JS实现了，只要给图片加上loading=”lazy”的属性即可。WordPress基本已经替我们自动实现了，只要是通过content或者thumbnail相关的函数调用的图片，WP自动会给它们加上这个属性：不得不提一下，WordPress更妙的地方在于它不仅自动实现了懒加载，还自动实现了用srcset和sizes属性在不同的屏幕尺寸上调用适合的大中小图，避免流量浪费。这些大中小图都是后台预设并自动生成的，不需要你多花一分的力气。这可是很久以前就实现了接下来说渐进式加载。不同于懒加载是为了提升页面加载速度，渐进式加载主要还是为提升观感服务的，它并不会加快页面打开速度，单纯只是为了让图片加载过程显得“好看”而已。渐进式加载图片大致效果如下：以前我们会用JS去调用一张模糊图片，并监听原图的加载，加载原图完成后再替换模糊图片显示。你可以得出一个结论，渐进式加载由于要多加载一张模糊图片，总的加载量反而是更多的，开销反而变大了。现在有了更容易的实现方式，就是在导出图片的格式上勾选一下即可，不需要再用到任何JS脚本和额外的图片了。以Photoshop导出JPG为例，只要保存的时候选择“连续”，这样的图片放在网页上，加载的时候自动会有一个模糊到清晰的效果我们做的网站，对这些技术细节贯彻是很彻底的。对于图片来说，懒加载和渐进式加载同时都要做好，同时在使用图片之前还要对图片的格式尽可能优化，这样才能保证每个页面的加载速度。
页:
[1]