WordPress实现HTML5预加载

知更鸟
知更鸟
知更鸟
1600
文章
6935
评论
2011年11月3日19:41:08 43 12.4K
摘要

  HTML5引入了预加载页面技术,可以大幅度提高您的网站加载时间以及速度。WordPress实现HTML5预加载方法很简单,把下面代码加到header.php模版中。
  由于预加载是HTML5的一部分,目前并不是所有浏览器都支持,比如:Internet Explorer就不行了。而Firefox、chrome和opera支持该技术。因此如果访问者的浏览器不支持预加载,将什么效果也没有。
  至于真的有什么实际效果只能自己去体会了。

HTML5引入了预加载页面技术,可以大幅度提高您的网站加载时间以及速度。

WordPress实现HTML5预加载方法很简单,把下面代码:

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

加到header.php模版,<head> 与</head> 之间。

还可以根据自己的需要对上面的代码进行适当的修改,例如加个判断预读首页等。

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

由于预加载是HTML5的一部分,目前并不是所有浏览器都支持,比如:Internet Explorer就不行了。而Firefox、chrome和opera支持该技术。因此如果访问者的浏览器不支持预加载,将什么效果也没有。

至于真的有什么实际效果只能自己去体会了。

原文:Mastering HTML5 Prefetching

weinxin
版权声明
本站原创文章转载请注明文章出处
禁止WordPress评论存储IP地址 WordPress

禁止WordPress评论存储IP地址

禁止 WordPress 评论存储IP地址 默认WordPress 会在后台存储评论者的IP地址,主要是用于反垃圾评论,比如Akismet之类的插件,会通过IP判断垃圾评论。但IP属于个人隐私,不存储...
让 WordPress 支持 WebP格式图片 WordPress

让 WordPress 支持 WebP格式图片

让WordPress 支持 WebP格式图片 WordPress 默认不支持WebP格式图片上传,将下面代码添加到当前主题函数模板functions.php中,即可解决上传问题。 function w...
分割WordPress导出的XML文件 WordPress

分割WordPress导出的XML文件

用WordPress自带数据备份工具,可以导出xml格式的数据文件,如果导出的XML文件很大,受上传文件大小限制,无法导入时,可以用切割XML工具,将较大的xml文件分割成不同大小的文件,再分别导入。...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:43   其中:访客  27   博主  2   引用   14
    • 烟雨空灵 烟雨空灵 0

      鸟哥,方便问下滑到哪就加载哪一个模块是怎么做到的吗 :smile:

      • 清心涟漪 清心涟漪 1

        试了一下还是有一点点效果的

        • 土木坛子 土木坛子 2

          不知道这种预加载有什么用。假如是所有链接都预加载,那样其实是低效率的,浏览器如何知道我要访问哪些链接?倒不如网站本身实现所有内容预加载,提前实现静态化。

          • 爱华夏,信条 爱华夏,信条 3

            就是看不懂加载 页面 是啥意思,应该咋修改,

            • loren loren 2

              bloginfo(‘home’) 这个参数为什么在 http://codex.wordpress.org/Function_Reference/bloginfo 官方没有查询到?具体来说是指什么页面?首页?

              • Adazi资讯网 Adazi资讯网 3

                加上了,希望有好的体现~~

                • Amoy厦门 Amoy厦门 4

                  加了。没看出什么区别。用谷歌浏览器。速度好像差不多

                  • aifanr aifanr 1

                    很不错哦

                    • ybzhao ybzhao 0

                      没具体了解这几行代码的含义。已经加进去了,貌似能感觉的到效果,尤其是处于日志页面的时候,打开首页的时候,似乎要快一些。谢谢分享

                      • 流水线 流水线 3

                        学习了

                        • 无冷 无冷 1

                          没有效果

                          • Bing Bing 0

                            终于知道那几行代码什么意思了,又学到了点……

                            • 高邦设计 高邦设计 5

                              应该插个效果图,欣赏下

                              • 小陈 小陈 1

                                鸟哥 请问这个热点新闻的主题 那个关键字是怎么做啊。 我下了一个seo插件 在默认主题上面正常使用。 可是热点新闻的主题 就不行。 是不是我那路设置错了 啊 还是?

                                • 七支剑 七支剑 5

                                  这个貌似不错 等下去试试

                                  • Win7en乐园 Win7en乐园 8

                                    这个功能很不错呀!哈哈

                                    • China wholesalers China wholesalers 3

                                      先试试再说,不管有用没,貌似国外用那三个浏览器的还是多的。

                                      • 小坚 小坚 4

                                        好东西,试用一下先~

                                        【发现身边还有很多人用ie6.。。好悲惨】

                                        • 罗莱家纺四件套 罗莱家纺四件套 0

                                          路过看看

                                          • 屈臣氏官网 屈臣氏官网 5

                                            这个很有用哈 提高了客户体验度

                                            • 郑州驾校 郑州驾校 4

                                              学习了

                                              • 影楼礼品团购 影楼礼品团购 4

                                                很给力啊

                                                • wmtimes wmtimes 7

                                                  是啊,ie不支持这是个大难题。

                                                  • 猫10 猫10 0

                                                    看不懂到底预加载的是哪些页面…

                                                    • nero nero 1

                                                      请问这个预加载跟主题有关系吗?什么主题都行吗?只要是用wordpress就行吗?

                                                      • 软件酷 软件酷 5

                                                        不知道效果怎么样!