HTML5预加载怎么用?WordPress利用HTML5预加载实现加速

2019-08-17
0评论
/
1049阅读
爱搜啊

不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch)。

HTML5预加载只是实现提高网站打开速度的一种方法其他提高网站的打开速度查看《网站SEO前端优化,如何提高网站的打开速度网站打开速度慢是什么原因

什么是HTML5预加载?

页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里。当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户。

简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面,图片,视频等)。而且方法超级的简单!

HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的,将rel属性指定为“prefetch”,在href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持:

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />

<link rel="next" href="2.html" />

WordPress实现HTML5预加载

HTML5预加载这个东西没记错好多年前就有了,我也曾经用过一段时间,装装逼还是很不错的,秒加载~毕竟当时用的香港主机没速度不行,预加载和纯静态应该就是唯一能装逼的两种方式了吧!预加载提高访问速度,就是当浏览者看你的文章的时候,后台其实已经在加载下一篇文章和主页了,自然就秒加载咯(好羞耻的赶脚)。它可以通过link标签加载你想要预加载的网页。

当然了预加载 不一定是一个网页 只要是个东西 都可以做到预加载,并不一定是网页文件 其他静态资源一样可以。

至于兼容性 呵呵呵,除了我们机制的IE一如既往的不兼容 其他都都还是可以完美支持滴 最新版的IE还是可以的 不过大天朝特受欢迎的xp可不是最新版的.

WordPress实现HTML5预加载

既然运用在WordPress 上不可能一个一个逗比加link吧?NO NO NO懒人永远不会这么做滴。

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>

<link rel="prefetch prerender" href="<?php echo get_next_posts_page_link(); ?>">

<?php } ?>

上面这段代码加载header.php里加上之后对方返回主页是会感觉速度嗖嗖的,此乃装逼绝技之一~

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>

<link rel="prefetch prerender" href="<?php echo get_next_posts_page_link(); ?>">

<?php } elseif (is_singular()) { ?>

<link rel="prefetch prerender" href="<?php bloginfo('home'); ?>">

<?php } ?>

这个放在single.php这个文件里,顾名思义肯定是文章的预加载咯,切文章时速度从此快快哒~

不过呐,现在是已经不用了,毕竟换上了飞快的ECS,而且都做了全站静态化+nginx缓存了 这玩意对我来说已经没有什么必要了,毕竟纯静态后,不用PHP处理,速度也是很快很快哒

不过论实用性,这玩意还是很不错滴!

禁止页面资源预加载(Link prefetch)

火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能,你可以这样设置:

user_pref("network.prefetch-next", false);

页面资源预加载(Link prefetch)注意事项

下面是一些关于页面资源预加载(Link prefetch)的注意事项:

预加载(Link prefetch)不能跨域工作,包括跨域拉取cookies。

预加载(Link prefetch)会污染你的网站访问量统计,因为有些预加载到浏览器的页面用户可能并未真正访问。

火狐浏览器从2003年开始就已经提供了对这项预加载(Link prefetch)技术的支持。


本站附件分享,如果附件失效,可以去找找看

诚通网盘附件百度网盘附件


标签: html5 WordPress
于2019-08-17发布