WordPress实现HTML5预加载

2011年11月3日19:41:08 43 已收录 11,436
摘要

  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经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:43   其中:访客  27   博主  2   引用   14

    • 软件酷 5

      不知道效果怎么样!

      • nero 1

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

          • 知更鸟 Admin

            @nero 是的,任何主题都适用

          • 猫10 0

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

            • wmtimes 7

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

              • 影楼礼品团购 4

                很给力啊

                • 郑州驾校 4

                  学习了

                  • 屈臣氏官网 5

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

                    • 罗莱家纺四件套 0

                      路过看看

                      • 小坚 4

                        好东西,试用一下先~

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

                        • China wholesalers 3

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

                          • Win7en乐园 8

                            这个功能很不错呀!哈哈

                            • 七支剑 5

                              这个貌似不错 等下去试试

                              • 小陈 1

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

                                • 高邦设计 5

                                  应该插个效果图,欣赏下

                                  • Bing 0

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

                                    • 无冷 1

                                      没有效果

                                      • 流水线 3

                                        学习了

                                        • ybzhao 0

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

                                          • aifanr 1

                                            很不错哦

                                            • Amoy厦门 4

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

                                              • Adazi资讯网 3

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

                                                • loren 2

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

                                                  • 爱华夏,信条 3

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

                                                    • 土木坛子 2

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

                                                      • 清心涟漪 1

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

                                                        • 烟雨空灵 0

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

                                                        • 来自外部的引用: 14

                                                          • WordPress实现HTML5预加载_HTML5研究小组_HTML5教程_HTML5资源_HTML5游戏
                                                          • WordPress实现HTML5预加载 – 闲云野鹤 — 宁静时品味孤独,学习时享受快乐!
                                                          • WordPress实现HTML5预加载 | 马佳彬
                                                          • WordPress实现HTML5预加载 – html5html5
                                                          • WordPress实现HTML5预加载 | CludeChn's Blog
                                                          • WordPress实现HTML5预加载 ¦ 亞瑟の國度
                                                          • WordPress实现HTML5预加载,加快博客访问 | 开溜网
                                                          • WordPress « 5MMX工作室
                                                          • WordPress实现HTML5预加载 | HTML5工作室
                                                          • WordPress实现HTML5预加载 | S9Tech
                                                          • Wordpress实现HTML5预加载 « SEO分享_SEO交流_网站优化_Wordpress防站_Wordpress技巧
                                                          • 分享 WordPress实现HTML5预加载 | 爱玩小光
                                                          • WordPress实现HTML5预加载 « 成人免费资源三级分享网站
                                                          • WordPress实现HTML5预加载 – HTML5 – 开发者问答