Flying Pages能够实现:在用户点击网页的链接之前,就预加载这个网页,当再点击这个网页时,页面便能飞速打开,能为网站优化加分。接下来,就由LOYSEO来讲解Flying Pages的使用方法。

Flying Pages插件下载地址:https://wordpress.org/plugins/flying-pages/,请安装后启用它。

你也可以在安装之前,去演示站https://wpspeedmatters.com体验一下,进入网站后随意点击任何文字链接,都能飞快的打开。

Flying Pages的工作原理

Flying Pages向页面中注入了一个很小的JS代码,约为1KB,并等待浏览器变空闲才开始预加载屏幕内的页面链接;此外,如果你在配置项中勾选了“仅当鼠标悬停时进行预加载”,那么当它发现鼠标悬停于链接时,才预加载链接对应的页面。

Flying Pages提供了如下配置项,从而能避免过多的预加载导致服务器崩溃或访问变慢。

  1. 设置延迟预加载开始时间:当浏览器变空闲后,延迟指定时间再开始预加载屏幕中的链接;此项不作用于鼠标悬停预加载功能。
  2. 设置每秒的预加载请求数量,通常建议设置为1,数量越大越增加服务器负载。
  3. 选项“仅当鼠标悬停时进行预加载”,若不勾选,那将会预加载屏幕内的所有链接,本项建议勾选,有助于降低服务器负载。
  4. 设置鼠标悬停延迟时间:当鼠标悬停于链接时,延迟指定时间再开始预加载对应页面。此项不要过大,避免用户已经点击了,但还没进行网页预加载,那就失去功能的作用了。
  5. 忽略关键词:用于设置不需要预加载的页面,当URL中带有对应关键词时,都不会被预加载,此项保持默认即可。
  6. 对已登录用户禁用预加载,建议勾选,有助于降低服务器负载

常见问题

安装Flying Pages后,使用GTmetrix测试,发现Fully Loaded Time增加了,该怎么办?

当网页上所有其他资源都已完成下载并且浏览器变得空闲时,Flying Pages才开始预加载。它不会影响TTFB或“First paint”或“Contentful paint”。如果您担心GTmetrix中的Fully Loaded Time,请在设置中将“延迟预加载开始时间”设置为更大的数字,或者勾选“仅当鼠标悬停时进行预加载”。

我在GTmetrix / Pingdom / Google PageSpeed Insights测试中没看到任何改进

网页加载完成后,Flying Pages才会预加载屏幕中的链接,这只会提高单击链接后网页打开的速度,它并不能帮助您加快初始加载速度。

我需要缓存插件吗?

每次页面被预加载时,它都会执行一些PHP代码和MySQL查询,这会占用大量资源。因此,强烈建议使用WP Rocket这样的缓存插件。

Flying Pages会增加我的带宽用量吗?

会少量增加,增幅甚至不足5%。因为占用带宽的主要是视频和图像,它们占用了80%的带宽;而Flying Pages仅预加载HTML页面(通常小于30KB),并且不下载其中的任何资源(如图像,css,js)。

Flying Pages会增加服务器负载吗?

会的,但是,您可以减少每秒的预加载请求数量、仅在鼠标悬停时预加载,以减少服务器负载。

Flying Pages:在单击之前预加载页面,打开网页快得飞起的更多相关文章

  1. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  2. 移动端-H5预加载页面

    利用简洁的图片预加载组件提升h5移动页面的用户体验   阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...

  3. MUI - 预加载

    预加载都是在mui.init({)}中执行的 方式一:preload一次仅能预加载一个页面(除非循环) var subWebview = mui.preload({ url: 'examples/ac ...

  4. HTML5的页面资源预加载技术(Link prefetch)加速页面加载

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  5. JQUERY 插件开发——LAZYLOADIMG(预加载和延迟加载图片)

    开发背景 本插件开发是近期写的最后一个插件了,接下来我想把最近研究的redis最为一个系列阐述下.当然Jquery插件开发是我个人爱好,我不会停止,在将来的开发中我会继续完善,当然也会坚持写这个系列的 ...

  6. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  7. mui预加载

    1.只能加载一个页面 mui.init(); var page = null; mui.plusReady(function() { //预加载页面mui.preload必须放在plusReady事件 ...

  8. 图片利用 new Image()预加载原理 和懒加载的实现原理

    二:预加载和懒加载的区别 预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看 ...

  9. 页面预加载loading动画,再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

随机推荐

  1. 爬虫管理平台以及wordpress本地搭建

    爬虫管理平台以及wordpress本地搭建 学习目标: 各爬虫管理平台了解 scrapydweb gerapy crawlab 各爬虫管理平台的本地搭建 Windows下的wordpress搭建 爬虫 ...

  2. 一分钟玩转 Spring IoC!

    前言 「上一篇文章」我们对 Spring 有了初步的认识,而 Spring 全家桶中几乎所有组件都是依赖于 IoC 的. 刚开始听到 IoC,会觉得特别高大上,但其实掰开了很简单. 跟着我的脚步,一文 ...

  3. dsu on tree详解

    这个算法还是挺人性化的,没有什么难度 就是可能看起来有点晕什么的. 大体 思想是 利用重链刨分来优化子树内部的查询. 考虑一个问题要对每个子树都要询问一次.我们暴力显然是\(n^2\)的. 考虑一下优 ...

  4. 探讨Netty获取并检查Websocket握手请求的两种方式

    在使用Netty开发Websocket服务时,通常需要解析来自客户端请求的URL.Headers等等相关内容,并做相关检查或处理.本文将讨论两种实现方法. 方法一:基于HandshakeComplet ...

  5. Golang | Go语言多态的实现与interface使用

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第11篇文章,我们一起来聊聊golang当中多态的这个话题. 如果大家系统的学过C++.Java等语言以及面向对象的 ...

  6. iOS苹果美区 Apple ID 账号最新注册教程,iPhone用户务必收藏!

    编の语 前言 今天杀手宝宝出一个注册美区ID的教程,这是目前注册苹果美区ID最快的方法,所有人适合使用! 提の示 温馨提示: 所有内容均免费分享,部分资源来自于 网络,如与版权问题联系宝宝处理! 知道 ...

  7. python网络爬虫实战PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书

    点击获取提取码:vg1y python网络爬虫实战帮助读者学习Python并开发出符合自己要求的网络爬虫.网络爬虫,又被称为网页蜘蛛,网络机器人,是一种按照一定的规则,自动地抓取互联网信息的程序或者脚 ...

  8. 详细记录了python爬取小说《元尊》的整个过程,看了你必会~

    学了好几天的渗透测试基础理论,周末了让自己放松一下,最近听说天蚕土豆有一本新小说,叫做<元尊>,学生时代的我可是十分喜欢读天蚕土豆的小说,<斗破苍穹>相信很多小伙伴都看过吧.今 ...

  9. 微信小程序订阅消息调研

    相关资料 背景:微信模板消息已正式下架,改为订阅消息,详情如下: 服务变更通知 订阅消息:订阅消息相关内容如下: 订阅消息 接口设计 获取接口访问凭证 :根据appId和secret获取接口访问凭证a ...

  10. alpine 容器优化

    摘要:alpine容器一直是使用得比较多的,而且也是官方推荐使用的.但是官方的容器会有一些不方便的地方,比如安装软件, 时区不同等. 所以本文旨在完成一个alpine容器通用模板作为记录   # 导入 ...