WordPress图片实现真正延迟加载-加快页面打开速度节省服务器资源

免费教程   2014年03月14日 17:33  

Wordpress图片实现真正延迟加载-加快页面打开速度节省服务器资源

网页打开速度的好慢直接影响到网站的访问,大多数用户基本上不会对超过5秒钟还没有完全打开的网页产生任何好感。根据相关的研究发现,一个网站的图片太多,图片文件过大,页面太长,是导致网页打开时间过长的主要原因之一。

有人经常抱怨Wordpress网页打开速度太慢,为了提升WordPress的打开速度,我们不妨好好研究一下如何来加快网页中的图片的打开速度。 对图片太多的网页,不妨借鉴一下微博、淘宝和瀑布流主题的“按需加载”方式来加快速度。

于是就有了本文的实现文章图片真正延迟加载的主题了,它的目的就是实现在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。对于一些图片特别多的网站,利用图片延迟加载技术可以在一定程度上减轻服务器压力。

图片延迟加载效果之前部落也用过一段时间,不过后来发现在网速慢的情况下有看到网页上的图片实际已经全部加载完成了,然后才看到Lazy Load的渐隐效果,这样实际上是“伪延迟”,顶多给图片加了点展示的特效,实际用处不大,之后就放弃了。

这次说要的是实际真正的延迟加载,实际上仍然来源于以前的Lazy Load插件,只不过经过改良之后,Lazy Load插件让图片真正实现了延迟加载。更多有关于Wordpress优化加速的做法还有:

WordPress图片实现真正延迟加载-加快页面打开速度减轻服务器压力

一、Wordpress图片延迟加载准备工作

1、Lazy Load jQuery plugin地址:

  • 1、官方网站:https://www.appelsiini.net/projects/lazyload
  • 2、Github:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

2、下载并上传jquery.lazyload.js到你的网站服务器上,这是 Lazy Load jQuery plugin下载地址

3、编辑你的Header.php文件,或者是其它的能够使用JS在任意页面调用的Wordpress主题文件,放入以下代码:


<script src="https://img.freehao123.com/jquery.lazyload.js" type="text/javascript"></script>

4、注意要将代码中的域名换你自己的,JS的路径也要相应的更改过来,如果你的Wordpress没有加载jQuery,还得自己手动添加代码加载jQuery v1.4.4+。(PS:现在的Wordpress主题应该都有加载jQuery)

图片延迟加载引入JS文件

5、然后在你的</head>前面加入以下JS代码,激活jquery.lazyload.js。


<script type="text/javascript">
jQuery(function() {        
       jQuery("img").lazyload({
        effect : "fadeIn",
        failure_limit : 10 });
        });
</script>

二、修改图片IMG标签启用迟延加载

1、Lazy Load 要求图片的IMG属性写成这样的才可以正确启用延迟加载效果。


<img src="https://img.freehao123.com/grey.png" data-original="xxxx/xxxx/example.jpg"  width="600" heigh="400">

2、基本要求是:src中赋予一个1x1大小图片,data-original中写入图片的真实地址。

3、Lazy Load 延迟加载图片的原理是:打开网页时所有的图片是一个1x1大小默认图片,随着网页的拖动,Lazy Load jQuery plugin会“按需”将可视窗口内图片的src值替换成data-original的值,从而显示图片,其它的不在可视范围内的依然是被默认的图片所代替。

4、所以,建议大家将默认的src的图片放在一些免费CDN服务器上,或者是其它的主机空间上,以最大限度地减少图片对自身服务器的请求,同时最好是个微小的图片,例如1x1大小,这样可以保证默认图片以最短的时间加载进来,将图片加载时间降低到最低。

5、通过上面的设置,网站上所有的图片就会启用Lazy Load延迟加载技术了。

三、自动修改Wordpress文章、评论、缩略图片的IMG属性

1、 上面已经讲到,如果想要让图片实现卸载加载,则必须在IMG中设置好SRC默认值,加入data-original元素,但是实际上我们在Wordpress添加文章图片时默认的是没有这样的IMG标签的。

2、另外,对于已经存在了大量的文章图片的网站,是不可能再一篇一篇文章重新编辑修改图片的IMG属性。这时我们就可以采用Wordpress强大的过滤机制,自动将图片的IMG进行重写了。

3、将以下代码加入你的functions.php文件。代码来自:https://wptheming.com/2013/03/lazy-loading-images/


function add_image_placeholders( $content ) {
    // Don't lazyload for feeds, previews, mobile
    if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
        return $content;
    // Don't lazy-load if the content has already been run through previously
    if ( false !== strpos( $content, 'data-original' ) )
        return $content;
    // In case you want to change the placeholder image
    $placeholder_image = apply_filters( 'lazyload_images_placeholder_image', get_template_directory_uri() . '/images/grey.png' );
    // This is a pretty simple regex, but it works
    $content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="%s" data-original="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', $placeholder_image ), $content );
    return $content;
}
add_filter( 'the_content', 'add_image_placeholders', 99 );

4、注意最后一句:add_filter( 'the_content', 'add_image_placeholders', 99 );是用来匹配Wordpress文章页面内容中的图片的。代码中的:/images/grey.png 是默认图片地址,你需要替换成你自己的。

修改Wordpress函数

5、如果你想让你的评论头像也实现延迟加载,请加入下列代码:


add_filter( 'get_avatar', 'add_image_placeholders', 11 );

6、有些Wordpress可能采用了timthumb 缩略图片,如果你想让你的缩略图片实现延迟加载,请加入下列代码:


add_filter( 'post_thumbnail_html', 'add_image_placeholders', 11 );

四、Wordpress图片延迟加载效果分析

1、通过上面的方法,我们已经将Wordpress所有的图片(文章内容图片、评论头像、缩略图片)都启用了延迟加载技术,打开网页可以看到图片的SRC值都是默认的图片地址,并加上了data-original元素。

重写了Wordpress图片标签

2、当页面往下拉的时候,图片进入可视窗口中,这时就直接显示出图片了。IMG的SRC值变成了真实的图像地址了。

Wordpress图片出现真实的地址

五、Lazy Load 图片延迟加载插件的高级设置

1、Lazy Load 允许自己定义图片延迟加载效果。默认情况下图片会出现在屏幕时才加载,如果你想提前加载图片, 可以设置 threshold 选项:threshold : 200 表示令图片在距离屏幕 200 像素时提前加载。


<script type="text/javascript">
jQuery(function() {        
       jQuery("img").lazyload({
        threshold : 200 });
        });
</script>

2、默认的情况下用户滚动到窗口上图片所在位置时图片就会被自动加载显示,如果你想设置为只有鼠标点击该图片或者当鼠标放在图片上时才会加载图片,可以加上click 和 mouseover事件。如下:


<script type="text/javascript">
jQuery(function() {        
       jQuery("img").lazyload({ 
      placeholder : "img/grey.png",
      event : "click" });
        });
</script>

3、当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理,例如FadeIn是渐显特效。


<script type="text/javascript">
jQuery(function() {        
       jQuery("img").lazyload({ 
       effect : "fadeIn" });
        });
</script>

4、有了网页的图片的布局可能会比较混乱,设置failurelimit的数字有助于我们提高插件的效率,failure_limit : 10表示插件找到 10 个不在可见区域的图片是才停止搜索,根据你的需要可以调高或者调低。


<script type="text/javascript">
jQuery(function() {        
       jQuery("img").lazyload({ 
       failure_limit : 10  });
        });
</script>

六、Wordpress图片延迟加载插件:simple-lazyload

1、simple-lazyload官网:

  • 1、插件地址:https://wordpress.org/plugins/simple-lazyload/

2、也许有人对上面如此多的JS代码已经感到“压抑”了,那么你可以使用simple-lazyload这个Wordpress图片延迟加载插件来实现上面纯代码效果:simple-lazyload插件下载

3、启用了simple-lazyload插件后,可以看到所有的图片(包括评论、缩略图、文章图片)的SRC值变成了默认的1像素的图片。同时写入了File元素,值为图片的真实地址。

Wordpress安装延迟加载插件

4、将网页往下拉的时候,图片显示出来了,SRC值也变成了图片的真实地址了。

Wordpress插件图片显示效果

七、关于图片延迟加载的一些问题

1、如果你的程序不是Wordpress,可以使用纯代码的方法实现,如果是Wordpress,为了“懒”,可以试一试simple-lazyload插件,注意该插件可能会与其它的插件不兼容,需要自己修改一下。

2、图片延迟加载质疑一:是不是有利于加快网页的打开速度?Lazy Load 将所有的图片变成了1x1大小的图片,减少了单一网页的带宽请求,同时除了第一张默认图片是从服务器下载到本地外,其它的都是用的浏览器本地缓存,所以从理论上讲,Lazy Load 可以减轻浏览器客户端的压力,特别是对于一些图片特别多、页面特别长的网页更有效果。

3、图片延迟加载质疑二:是不是真的有利于减轻服务器负担?理论上,Lazy Load 是增加了网页中图片总请求数(多了一个默认1x1的图片请求)。但是实际情况是这样的,很多人打开一网页都是看了前面的内容就关闭了,这时延迟加载的作用就出来了,它避免了每次打开网页都把所有的图片请求完毕,加上我们把默认的图片换成外部服务器的,所以实现上Lazy Load 是有可能减轻服务器压力的。

4、图片延迟加载质疑三:是不是不利于SEO?这个问题其实比较重要,尤其是现在百度搜索排名中出现了图文和缩略图。经过测试,由于使用了<noscript><img src=”真实地址”></noscript>这样的代码谷歌可以收录(实际上谷歌JS也可以读懂),但是百度这厮就不敢肯定了。理论上讲,<noscript></noscript>是被所有的浏览器所支持的。

文章出自:免费资源部落 https://www.freehao123.com/ 版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。

十个便宜VPS主机分享-VPS服务器建站和搭建应用服务体验
2014年六大免费VPS主机-免费VPS申请、使用和点评

您或许对下面这些文章有兴趣:                    本月吐槽辛苦排行榜

在这个部落村庄里,已经有81 位神马家族成员冒出泡来在农场开始干活了
  • ivmm 9

    感觉看过一模一样的一篇

    阿城守候 回复:

    @ivmm,在哪看到的?

    ivmm 回复:

    @阿城守候, 我想应该是wpjam吧

    尐雾 回复:

    @ivmm, 挤挤 :razz:

    余人陶艺 回复:

    @尐雾, 我也挤挤

    小新 回复:

    @余人陶艺, 我擦 今晚迟了

    FINLE 回复:

    @ivmm, 类似的文章是挺多的。

    这是农场的第 1 块农田,部落批准 [ivmm] 在[2014-3-14 17:44]开垦完成.
  • 今天赶早了

    阿城守候 回复:

    表情居然被删了 :sad: :sad:

    qi 回复:

    @阿城守候, 好像是个图片。

    阿城守候 回复:

    @qi, 是的!是个图片,不过是个表情的图片 :mrgreen:

    qi 回复:

    @阿城守候, 你的博客呢?

    阿城守候 回复:

    @qi, 还在啊!

    这是农场的第 2 块农田,部落批准 [阿城守候] 在[2014-3-14 17:46]开垦完成.
  • 貌似用图片cdn可以免除这些问题

    这是农场的第 3 块农田,部落批准 [逗妇乳] 在[2014-3-14 17:49]开垦完成.
  • wwng 1

    好!!!

    这是农场的第 4 块农田,部落批准 [wwng] 在[2014-3-14 17:55]开垦完成.
  • 很多主题都集成了这个效果

    这是农场的第 5 块农田,部落批准 [潮流台] 在[2014-3-14 18:04]开垦完成.
  • @qi,这是你的地址吗?28.23.30.189

    qi 回复:

    @阿城守候, 是的,你怎么知道的?

    阿城守候 回复:

    @qi, 猜的!
    :eek: 你在用Firefox 27.0?

    qi 回复:

    @阿城守候, 厉害,Chrome我也用。

    323心 回复:

    @qi, 疑是黑客!呵呵

    这是农场的第 6 块农田,部落批准 [阿城守候] 在[2014-3-14 18:23]开垦完成.
  • Iris 7

    来得早,不如来得巧。lazyload之前研究过,不过不适合我。我图片不多,影响不大。

    阿城守候 回复:

    @Iris, 要是能秒开就….

    qi 回复:

    @Iris, 你的博客换空间的吗?怎么变快了?

    阿城守候 回复:

    @qi, 没有啊!还是你介绍的那个serverhub.com空间,加上360(CDN+360招财帮[网盟])

    Iris 回复:

    @qi, 没有换,只是启用了啥缓存插件来着,之前是忘记开了。

    这是农场的第 7 块农田,部落批准 [Iris] 在[2014-3-14 18:27]开垦完成.
  • 好像不错,可以试试

    这是农场的第 8 块农田,部落批准 [烟花易冷] 在[2014-3-14 19:09]开垦完成.
  • 虽然对于我暂时没什么用,但哪天我抽风了就不一定了

    这是农场的第 9 块农田,部落批准 [永远的爱萝莉] 在[2014-3-14 19:19]开垦完成.
  • Kung 23

    现在图片用的微博图床,速度还算蛮快的- –

    这是农场的第 10 块农田,部落批准 [Kung] 在[2014-3-14 19:50]开垦完成.
  • 陌羽 3

    这个挺好的。P.S.封面的进度条看得我想把它补全。。。。强迫症伤不起 :mad:

    这是农场的第 11 块农田,部落批准 [陌羽] 在[2014-3-14 20:03]开垦完成.
  • 今天簽到啦!時間:下午9:13:54

    这是农场的第 12 块农田,部落批准 [超級efly] 在[2014-3-14 21:13]开垦完成.
  • 323心 16

    下次要发很多图片再用,现在图不多

    这是农场的第 13 块农田,部落批准 [323心] 在[2014-3-14 22:36]开垦完成.
  • 今天来晚了;好高级的东西,感觉我弱爆了~

    这是农场的第 14 块农田,部落批准 [无纯洁] 在[2014-3-14 23:15]开垦完成.
  • 若水 16

    后排。

    这是农场的第 15 块农田,部落批准 [若水] 在[2014-3-14 23:45]开垦完成.
  • Chun Yu 2

    後排。

    这是农场的第 16 块农田,部落批准 [Chun Yu] 在[2014-3-14 23:58]开垦完成.
  • Chin 3

    CDN无压力 :mrgreen:

    这是农场的第 17 块农田,部落批准 [Chin] 在[2014-3-15 16:36]开垦完成.
  • 延迟我倒是没有用,但我用WP Smush.it插件压缩图片的,效果还行

    这是农场的第 18 块农田,部落批准 [艾微资讯] 在[2014-3-15 22:36]开垦完成.
  • 弱者 7

    网站这东西嘛。不然图片就用七牛 加个w3c插件。
    不然就搞个cdn。其实都好办。。。

    这是农场的第 19 块农田,部落批准 [弱者] 在[2014-3-15 23:15]开垦完成.
  • 不知道为什么开启wp super cache然后在cdn那一项用了七牛cdn访问反而更慢了。

    qi 回复:

    @影推吧, 用Chrome的查看元素看看网络情况,能够知道哪些因素导致页面变慢。

    影推吧 回复:

    @qi, 我把这个db-cache-reloaded-fix插件关了就正常了,难不成不兼容?

    这是农场的第 20 块农田,部落批准 [影推吧] 在[2014-3-16 19:21]开垦完成.
  • 耳屎网 6

    不是有个图片小精灵可以换一种图片加载方式吗?!

    这是农场的第 21 块农田,部落批准 [耳屎网] 在[2014-3-24 00:36]开垦完成.
  • 耳屎网 6

    将错了,是css精灵

    这是农场的第 22 块农田,部落批准 [耳屎网] 在[2014-3-24 00:36]开垦完成.
  • 我用的是第一种方法!

    这是农场的第 23 块农田,部落批准 [免费部落] 在[2014-3-24 15:34]开垦完成.
  • 贴吧 4

    不是放在自己主机里面的图片也有延迟加载的功效么?

    qi 回复:

    @贴吧, 是的,也可以。

    贴吧 回复:

    @qi, 确定哈?我用了没效果,可来找你了!哈哈~

    qi 回复:

    @贴吧, 我已经测试通过了。

    贴吧 回复:

    @qi, 好的,感激不尽!

    这是农场的第 24 块农田,部落批准 [贴吧] 在[2014-3-31 13:34]开垦完成.
  • 斌果 3

    这东西大多都是个心理作用,其实大多数情况下差不多,除了有的文章非常长

    qi 回复:

    @斌果, 这个还得有浏览器支持才行。

    这是农场的第 25 块农田,部落批准 [斌果] 在[2014-4-5 12:54]开垦完成.
  • 这个已经用上了,很有用

    这是农场的第 26 块农田,部落批准 [生活有意思] 在[2014-4-10 10:14]开垦完成.
  • 好不容易把lazyload.js配置好了,,,结果看到居然有插件。。。 :lol:

    这是农场的第 27 块农田,部落批准 [小米] 在[2014-4-14 22:15]开垦完成.
  • 抓紧时间试用一下,由于使用的香港空间,有时图片出来有点慢

    这是农场的第 28 块农田,部落批准 [优享库] 在[2014-4-18 18:36]开垦完成.
  • 东纸 1

    不用这么麻烦吧,下个插件,全站自动实现了…

    这是农场的第 29 块农田,部落批准 [东纸] 在[2014-4-22 13:26]开垦完成.
  • 小明

    哪位精通wordpress?请加我qq1375500679,有合作的事情

    这是农场的第 30 块农田,部落批准 [小明] 在[2014-4-26 17:19]开垦完成.
  • 原来如此、受教了。

    这是农场的第 31 块农田,部落批准 [寻宝站] 在[2014-5-26 17:51]开垦完成.
  • 以前用过,还是很不错的

    这是农场的第 32 块农田,部落批准 [微历史] 在[2014-5-27 13:51]开垦完成.
  • :mrgreen: 大神好屌

    这是农场的第 33 块农田,部落批准 [晨风] 在[2014-5-28 13:44]开垦完成.
  • :mrgreen: 不知道能不能延迟加载Backlinks的插件,每次一开启Backlinks的插件,就会网站打开很慢,想问问看您这边有没有方法的,百度美百到~

    这是农场的第 34 块农田,部落批准 [一与博客] 在[2014-6-23 14:55]开垦完成.
  • 游客 10

    哈哈,坚决不用那个插件,奋斗把代码挂上了 :mrgreen:

    这是农场的第 35 块农田,部落批准 [游客] 在[2014-7-19 06:26]开垦完成.
  • 这个有选择性么,比如说首页不想有这个效果,只在文章也有效果呢

    qi 回复:

    @小舞, 可以在首页不加载JS文件。

    这是农场的第 36 块农田,部落批准 [小舞] 在[2014-12-17 10:02]开垦完成.
  • 最近做主题一直要找这篇文章,部落回归的太及时了~新年快乐

    qi 回复:

    @烟花易冷, 非常感谢支持。

    这是农场的第 37 块农田,部落批准 [烟花易冷] 在[2015-2-13 16:26]开垦完成.
  • 按照文章上写的实施了不过没有效果…js没有报错,img图片没有被替换重写,这是什么个情况..

    qi 回复:

    @cjoke, jQuery v1.4.4+有没有加载进来?

    cjoke 回复:

    @qi, 我发现文章页有效果,但是对首页的图片不起作用,不过我首页的图片是代码写的调用了文章的第一张图,如果没有的话就用默认的图,但却是没有效果,难道和这有关系?

    这是农场的第 38 块农田,部落批准 [cjoke] 在[2015-5-8 16:58]开垦完成.
  • 我的图片比较多,正需要这厮

    这是农场的第 39 块农田,部落批准 [万豪] 在[2015-6-19 12:30]开垦完成.
  • puppy 4

    试试,要放很多美@女图片在我的网站上呢。

    qi 回复:

    @puppy, 图片多了可以用CDN,这样加载速度会更快。

    puppy 回复:

    @qi, 用这个插件好很多了。
    我用buyVM速度不错,七牛反而感觉加载慢。
    看效果,延迟加载www.zhangwang.me/660.html :neutral:

    qi 回复:

    @puppy, 网页加载确实很顺畅。

    这是农场的第 40 块农田,部落批准 [puppy] 在[2015-9-27 18:30]开垦完成.
  • 四弦 4

    老大,我投一篇稿子:
    https://sxbk.pw/ghost-lazyload/
    是给Ghost增加lazyload的教程,望采纳,谢谢~

    qi 回复:

    @四弦, 好的,谢谢了。这个页面是不是在XP下面无法打开?

    四弦 回复:

    @qi, 是啊,因为用了Let’s Encrypt的证书= =
    那老大你留个邮箱可好,我邮件发给你

    qi 回复:

    @四弦, 已经用Windows 7的电脑打开了。你的网站就是用的这个lazyload吗?

    四弦 回复:

    @qi, 是的

    这是农场的第 41 块农田,部落批准 [四弦] 在[2016-1-31 14:14]开垦完成.
  • 不错的教程!赞 :oops:

    这是农场的第 42 块农田,部落批准 [龙笑天] 在[2016-4-23 14:52]开垦完成.
  • 在源代码看了下,好像部落的图片现在只用了七牛云吗?看评论好像是说用了七牛就不用再用这个懒加载了?我感觉用了懒加载之后,百度图片等应该抓取不到图片原链接了吧。

    qi 回复:

    @狂族晨曦, 虽然说百度引擎的技术在不断改进,但是对于JS还是不能正常识别,所以用了懒加载的JS,百度图片蛛蛛应该是不能正常识别,至少会出现问题。我现在的图片都是用的七牛的,使用外链图片,就不用担心图片加载导致网页打开慢了。

    这是农场的第 43 块农田,部落批准 [狂族晨曦] 在[2016-4-25 20:06]开垦完成.
看贴要回贴有N种理由!看帖不回贴的后果你懂得的!


(Ctrl + Enter提交)   

部落快速搜索栏

热门点击排行榜

网站导航栏

X
返回顶部