首页 » 技术文章 » WordPress » 浏览内容

WordPress教程:让WordPress图片和头像延迟加载

229 0 发表评论

wordpress图片和头像延迟加载的好处就是可以提升部分页面的加载速度,其实可以将静态资源托管到七牛云存储以及使用七牛来缓存静态文件,从而提升网站的速度。

load_480

关于wordpress图片延迟加载:

如果您的文章本身加载了较多或者较大的图片,那么延迟加载图片后首先载入页面,延迟载入图片,从而大大改善访客的体验。

关于头像延迟加载:七牛本身具有多个CDN加速节点,速度是很快的,但是将gravatar头像缓存到七牛这个过程可能需要一点时间,如果您的页面中出现从未缓存过的头像可能还是有点慢,那么这篇文章可以很好的解决上面的两个问题。

一、添加jquery.lazyload.js 插件

首先下载jquery.lazyload.js 插件,将压缩包内的js文件和图片文件全部解压至主题根目录。并将下面的代码添加到主题目录下的footer.php文件中进行引入。

二、图片延迟加载

按照官网的说明需要将图片添加一个data-original属性,不过手动添加比较麻烦,只需要将下面的代码添加到主题目录下的functions.php文件中,这样就会自动为每一张图片添加data-original属性,从而达到图片延迟加载的目的。

三、Gravatar头像延迟加载

wordpress默认使用Gravatar头像,因此总会受到头像的影响而拖慢整个页面的加载速度,再functions.php文件中(可能在这个文件,根据您自己的主题情况而定)

找到代码一,将其替换为代码二。

通过上面的三个步骤即可实现wordpress图片和头像延迟加载的目的,好处就是只有浏览到图片位置时才加载图片,可以提高多图片页面的加载速度,减轻服务器负担。坏处是:可能会影响到搜索引擎对图片的收录,还有就是部分浏览器打开页面会出现空白。不过目前从观察来看绝大部分主题已经默认使用此功能,有需要的可参考。

标签:

评论 共 0 条 (RSS 2.0) 发表 评论

  1. 暂无评论,快来抢沙发!

发表评论

  •   没有头像?

关注我们,实时联系

通知公告">更多...

♥如果喜欢本站可以直接点击订阅博客
♥点击此加入晓残博客会员群加入扣群
♥本站免费提供加密解密服务点击解密
♥伙伴们喜欢本站赏个好评呗

关注微信

有偿服务

博客统计

  • 日志总数:477 篇
  • 评论数目:1474 条
  • 标签总数:40 个
  • 页面总数:8 个
  • 分类总数:17 个
  • 友链总数:24 个
  • 建站日期:2011-02-13
  • 运行天数:2124 天
  • 最后更新:2016-12-6

订阅博客