WordPress实现HTML5预加载

WordPress4312.6K阅读模式
摘要  HTML5引入了预加载页面技术,可以大幅度提高您的网站加载时间以及速度。WordPress实现HTML5预加载方法很简单,把下面代码加到header.php模版中。   由于预...

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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  43  访客  27  作者  2
    • 软件酷
      软件酷 5

      不知道效果怎么样!

      • nero
        nero 1

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

        • 猫10
          猫10 0

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

          • wmtimes
            wmtimes 7

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

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

              很给力啊

              • 郑州驾校
                郑州驾校 4

                学习了

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

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

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

                    路过看看

                    • 小坚
                      小坚 4

                      好东西,试用一下先~

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

                      • China wholesalers
                        China wholesalers 3

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

                        • Win7en乐园
                          Win7en乐园 8

                          这个功能很不错呀!哈哈

                          • 七支剑
                            七支剑 5

                            这个貌似不错 等下去试试

                            • 小陈
                              小陈 1

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

                              • 高邦设计
                                高邦设计 5

                                应该插个效果图,欣赏下

                                • Bing
                                  Bing 0

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

                                  • 无冷
                                    无冷 1

                                    没有效果

                                    • 流水线
                                      流水线 3

                                      学习了

                                      • ybzhao
                                        ybzhao 0

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

                                        • aifanr
                                          aifanr 1

                                          很不错哦

                                          • Amoy厦门
                                            Amoy厦门 4

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

                                            • Adazi资讯网
                                              Adazi资讯网 3

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

                                              • loren
                                                loren 2

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

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

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

                                                  • 土木坛子
                                                    土木坛子 2

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

                                                    • 清心涟漪
                                                      清心涟漪 1

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

                                                      • 烟雨空灵
                                                        烟雨空灵 0

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

                                                      匿名

                                                      发表评论

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

                                                      拖动滑块以完成验证