子比网站细节优化速度提升教程

Jaysun

本教程是在子比论坛旅途发布的优化教程,具体本人没有测试过,只是搬运过来分享给大家,如果有需要的可以自行测试下。

预加载

网站预加载是指提前加载网页中所需的资源,以便在用户需要时可以立即使用,从而提高页面的加载速度和性能。常见的预加载方法包括以下几种:

  1. DNS预加载:通过提前解析域名的DNS记录,以便在需要建立连接时可以立即使用解析结果。

  2. 图片预加载:将页面中所需的图片资源提前加载到浏览器中,以便在需要显示时可以立即使用。

  3. CSS和JavaScript预加载:将页面所需的CSS和JavaScript文件提前加载到浏览器中,以便在需要时可以立即执行。

  4. 预渲染:将页面提前渲染好并保存在浏览器中,以便在用户访问时可以立即显示。

网站预加载可以通过优化网页性能和用户体验来提高网站的转化率,但需要注意不要过度预加载,以免浪费带宽和服务器资源,同时也需要考虑预加载的资源是否真正被用户所需要。

教程

dns-prefetch

dns-prefetch有没有用呢,DNS Prefetch即DNS预获取,是前端优化的一部分,一般一次dns解析需要20-100毫米左右,所以减少DNS解析时间和次数是个很好的优化方式

案例

淘宝

1.png

使用方法

找到主题header.php文件添加即可

代码(更多内容自行修改)

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="//sdk.51.la" />
<link rel="dns-prefetch" href="//CDN.staticfile.org" />
<link rel="dns-prefetch" href="//lf6-cdn-tos.bytecdntp.com" />

网站预加载 JS 脚本 instant.page 的使用

instant.page 是一种网站预加载技术,它可以通过在用户点击链接之前预先加载页面来提高网页的加载速度。具体来说,当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器就会开始预加载该页面。当用户点击链接时,浏览器就会从预加载的缓存中直接读取页面内容,从而避免了重新加载页面的延迟。

使用方法

代码添加到网站的</body>标签之前(zibll可放入自定义js里面)

<script type="module" src="存放路径"></script>

代码下载

隐藏内容
评论可见
前往评论



您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 5 条评论,444人围观)
网友昵称:ImLinNai
ImLinNai V 普通用户 Google Chrome 123.0.0.0 Windows 10 x64 地板
03-28 来自江苏 回复
感谢分享
网友昵称:534615
534615 V 普通用户 Safari 17.3.1 Apple iPhone 凉席
02-28 来自辽宁 回复
来看看大佬写的
网友昵称:韩雨轩
韩雨轩 V 普通用户 Google Chrome 118.0.0.0 Windows 10 x64 板凳
02-25 来自北京 回复
看看看看
网友昵称:w690056512
w690056512 V 普通用户 Google Chrome 117.0.0.0 Windows 10 x64 椅子
2023-10-09 来自山东 回复
支持支持
网友昵称:酷酷i
酷酷i V 普通用户 Google Chrome 117.0.0.0 Windows 10 x64 沙发
2023-10-07 来自安徽 回复
看一下

目录[+]

取消
微信二维码
微信二维码
支付宝二维码