[分享]WordPress 实现 HTML5 预加载方法

发布于 2024-11-05 21:10:22

164

WordPress 实现 HTML5 预加载方法，HTML5新增加了预加载页面技术，预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的...

WordPress 实现 HTML5 预加载方法，HTML5新增加了预加载页面技术，预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现。

IE11、Firefox、chrome 和 opera 支持 HTML5 预加载技术，预加载不一定是一个网页，并不一定是网页文件其他静态资源JS、CSS、图片等等一样可以。

下面教大家如何让WordPress 实现 HTML5 预加载方法：

1.「后台」→「外观」→「编辑」「header.php」文件，把下面的代码加入到 <head> 与</head> 之间

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } ?>

如果想加个判断预读首页，可以根据上面的代码修改：

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } elseif (is_singular()) { ?>
<link rel="prefetch" href="<?php bloginfo('home'); ?>">
<link rel="prerender" href="<?php bloginfo('home'); ?>">
<?php } ?>

这样我们就基本完成 WordPress 实现 HTML5 预加载方法，快试试效果吧！

WordPress 预加载