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. 花生壳内网穿透vue项目错误

    原因:新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname不是配置内的,将中断访问. 解决:webpack.dev.conf.js添加配置 disab ...

  2. Django学习路36_函数参数 反向解析 修改404 页面

    在 templates 中创建对应文件名的 html 文件 (.html) 注: 开发者服务器发生变更是因为 python 代码发生变化 如果 html 文件发生变化,服务器不会进行重启 需要自己手动 ...

  3. PDOStatement::setFetchMode

    PDOStatement::setFetchMode — 为语句设置默认的获取模式.(PHP 5 >= 5.1.0, PECL pdo >= 0.2.0)高佣联盟 www.cgewang. ...

  4. 7.29 NOI模拟赛 题答 npc问题 三染色 随机 贪心

    LINK:03colors 这道题虽然绝大多数的人都获得了满分 可是我却没有. 老师讲题的时候讲到了做题答的几个技巧 这里总结一下. 数据强度大概为n=5000,m=60000的随机数据. 老师说:一 ...

  5. P6222 「简单题」加强版 莫比乌斯反演 线性筛积性函数

    LINK:简单题 以前写过弱化版的 不过那个实现过于垃圾 少预处理了一个东西. 这里写一个实现比较精细了. 最后可推出式子:\(\sum_{T=1}^nsum(\frac{n}{T})\sum_{x| ...

  6. 学习使用CompletableFuture

    CompletableFuture 一.前言 1.JDK5的异步处理方式 2.JDK8的异步处理方式 二.学习CompletableFuture 1.结果获取方式 2.创建CompletableFut ...

  7. C笔记-左值与右值

    目录 前言:工欲善其事,必先利其器 两种资料 参考资料及其使用说明 官方对于左值和右值的定义 实际使用时的疑问 左值的涵盖范围 重要概念: 左值转化(lvalue conversion) 左值与指针 ...

  8. 好用的连接池-HikariCP

    在Springboot的发展历程中,默认的DataSource也从Springboot1.x的tomcat连接池到Springboot2.x的HikariCP.关于HikariCP的简单使用在配置多数 ...

  9. js如何从一个数组中随机取出n个不同且不重复的值

    前言 一位正在学习前端的菜鸟,虽菜,但还未放弃. 给大家画张图了解思路 以下是代码 function randomArr(arr,num){ let newArr = [];//创建一个新数组 for ...

  10. 机器学习 | 详解GBDT梯度提升树原理,看完再也不怕面试了

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第30篇文章,我们今天来聊一个机器学习时代可以说是最厉害的模型--GBDT. 虽然文无第一武无第二,在机器学习领域并没有 ...