前言 每次页面渲染时，WordPress都会加载一系列外部引用JavaScript。...将script-name1.js，script-name2.js等替换为要排除的脚本的名称。 如果您不知道如何查找脚本名称，请参阅下面的方法3。 方法3：仅向选择性脚本添加延迟/异步属性。...根据脚本及其功能，您可能希望延迟加载或异步加载它们。 如前所述，延迟脚本仅在页面完全加载后执行，因此如果您的脚本需要在页面加载期间执行，则异步属性更合适。...记住这一点，下面的函数将允许您向选择性脚本添加延迟或异步属性。 让我们看看如何实现： 步骤1：第一步是查找并列出要添加defer或async属性的所有阻塞渲染脚本的列表。...$scripts_to_defer变量需包含所有要延迟的脚本名称，$scripts_to_async变量需包含所有要延迟的脚本名称。确保使用脚本名称编辑代码。
由于用户对每种情境有不同的性能预期，因此，系统会根据情境以及关于用户如何看待延迟的用户体验调研来确定效果目标。...一般情况下，大于0.1秒小于1.0秒的延迟不需要特殊反馈，但用户确实失去了直接操作数据的感觉 10 秒：大概是让用户的注意力集中在对话上的极限。...使用 Chrome Devtools 我们可以在 Chrome 开发者工具中，通过录制 Performance 的方式，手动查找时长超过 50 毫秒的脚本的“长红/黄色块”，然后分析这些任务块的执行内容...我们可以考虑拆分这些脚本： 首屏加载，仅加载必要的最小 JavaScript 代码。 其他 JavaScript 代码进行模块化，进行分包加载。...通过预加载、闲时加载等方式，完成剩余所需模块的代码加载。 拆分 JavaScript 脚本，使得用户打开页面时，只发送初始路由所需的代码。
根据StrangeLoop对亚马逊，谷歌和其他大型网站的案例研究，页面加载时间延迟1秒会损失7％的转化率，页面浏览量减少11％，客户满意度降低16％。...最好的网页加载速度是在2秒以内。如果你能做到更快那当然更好了，各个地方都提升几十毫秒，加起来可能就会有半秒或者一秒的提升。 导致网站变慢的原因是什么？...页面大小 – 主要是没有优化过的图片 不良插件 – 如果你使用了代码质量非常差的插件，就会非常明显的拖慢你的网站速度。 外部脚本 – 像广告、字体加载器等外部脚本，也会对你的网站性能产生巨大的影响。...我们将向你展示如何仅点点鼠标就可以提升你的网站速度（不需要写代码）。 只要你会用鼠标，就没问题！...为了生成页面，WordPress必须运行进程去查找所需的数据，然后将数据整合在一起，最后再呈现到用户的屏幕上。 这个过程涉及非常多的步骤，当有很多人同时访问你的网站时，就会明显拖慢网站的速度。
Astra的主要特点Google页面加载时间快，仅为0.4秒页面大小仅为50KB无需jQuery，仅使用纯JavaScript自托管Google字体优化的WordPress代码Astra主题的主要关注点是性能...Neve的主要特点页面大小仅28KBGTMetrix加载时间0.6秒Google 100%页面速度得分Neve以其出色的性能和速度优化而自豪，通过具体的速度评分数据证明其卓越性。...页面大小仅28KB，Google页面速度得分达到100%，GTMetrix页面加载时间仅为0.6秒，这些成绩显而易见。...它以强大的底层功能著称，拥有出色的 99% Google 页面速度得分和平均不到一秒的页面加载时间。...如果你对如何安装WordPress主题不太熟悉，这篇文章《傻瓜式教程：WordPress搭建个人博客》有相关介绍。
TTI 应从 FCP 时间点开始沿时间轴查找，如果出现 5 秒的静默窗口（没有长任务并且不超过 2 个正在处理的 GET 请求），那么最后一个长任务执行结束的时间点即为可交互时间。...、 脚本 和 AJAX 等都可以统计 FID，First Input Delay 首次输入延迟，由于主线程繁忙导致用户首次输入的延迟时间 FCI，First CPU Idle 首次 CPU 空闲，与 TTI...3.2.3 优化加载第三方脚本 应用依赖的第三方脚本通常会减慢页面加载速度，一般采用以下方式：按需加载和延迟加载。 按需加载 需用户交互才用到的功能模块应按需加载。...延迟加载 像是 Google analysis 和合作商营销等第三方日志埋点脚本，由于业务需要无法移除，加载后占用大量性能资源。...由于这类脚本和应用没有依赖关系，可使用 defer script 延迟脚本的解析执行。更进一步，延迟到在可交互时间之后加载就基本不会有任何影响。
最大限度增加空闲时间以提高页面在 50 毫秒内响应用户输入的几率 加载 在 5 秒内交付内容并实现可交互 用户对性能延迟的看法 时间区间 描述 0 至 16 毫秒 用户非常关注轨迹运动，不喜欢不流畅的动画...它们由三个指标组成，分别是 最大内容绘制时间（Largest Contentful Paint，LCP） 衡量「加载性能」 识别页面加载过程中主要内容最可能加载完成的时间点 首次输入延迟（First Input...❞ 在页面加载过程中，从页面开始加载的时刻起，主线程负责处理不同的任务，比如解析HTML或处理JavaScript文件。 然而，有些任务需要花费足够长的时间，以至于用户会感受到明显的延迟。...以下是2023年的TBT得分准确阈值： TBT得分 得分解读 0-200毫秒 良好（绿色） 200-600毫秒 需改进（橙色） 超过600毫秒 较差（红色） 根据这些阈值， 当我们的TBT得分在0-...减少请求资源数量和传输大小 通过选择CDN和优化CSS和JavaScript（专注于仅传送必要的代码），改进页面加载时间。
为什么会出现输入延迟呢 ❝输入延迟(Input Delay)是指在没有用户请求的情况下加载页面元素，例如图像或脚本。...然而，在某些情况下，这些资源可能会在没有用户直接请求的情况下被加载。例如，当网页中的脚本文件被设置为自动加载，并且不是在用户直接与网页交互时才加载，就会导致输入延迟。...以下是一些可采取的措施来减少长时间输入延迟的问题： 重新排序脚本：通过将关键脚本放在页面的顶部，使其尽早下载并尽快执行。这样可以确保与用户交互相关的脚本能够快速加载和运行。...优化图像：通过使用适当的图像格式（如WebP）和压缩图像文件大小，减少图像的加载时间。优化图像可以提高页面的加载速度，减少输入延迟。 删除不必要的脚本：检查网页中的脚本文件，并删除不必要的脚本。...使用延迟(defer)加载或异步(async)加载：对于某些脚本，我们可以将其设置为延迟(defer)加载或异步(async)加载，以便在页面加载完成后再加载和执行。
因此，在本指南中，我们将探讨如何查找和删除这些渲染阻止脚本，并向您展示如何提高 WordPress 网站的加载速度。...或者，您可以使用免费的在线工具（如 JavaScript Minifier）手动缩小脚本代码。 3.使用JavaScript的延迟和异步加载 Web 浏览器从上到下读取代码。...当他们遇到脚本标签时，他们会停止加载网页并读取脚本文件。这会减慢渲染速度。 您可以使用async属性与网页并行加载脚本，并在它可用时立即执行。或者，您可以利用defer属性来延迟脚本的解析。...同样，您可以使用 Chrome DevTools 的 Coverage Tab 或 GTmetrix 在您的网页上查找最未充分利用的脚本，然后将其删除。...尽管如此，无论您是使用插件还是手动查找脚本，您都需要了解诸如缩小、异步加载和加载顺序等概念。如果您的脚本之一失败，它将使您更容易解决任何加载问题。
但是，这里有一点需要说明，LCP得分与我们网站的「整体加载时间」可能会有所不同。我们可能有一个需要三秒钟才能完全加载的页面，但其LCP可能仅为2秒钟。...---- LCP得分 以下是LCP得分的范围及其对应的评价： 得分范围 评价 0 - 2.5秒 优秀 2.5 - 4秒 良好 4 - 7.5秒 需改进 超过7.5秒 不佳 ❝理想情况下，我们的LCP...而LCP仅测量页面能够在视口（viewport）内加载最大元素的速度。...此功能使图像元素无论与视口的距离如何都可以立即渲染。 这个问题也可能发生在使用JavaScript进行延迟加载的方法中。...❞ ---- 如何减少阻塞渲染的JS 一旦确定了关键代码，将这些代码从阻塞渲染的URL中移动到HTML页面的内联脚本标签中。页面加载时，将具备处理页面核心功能所需的内容。
这需要15-20秒才能加载。...：渲染阻止JavaScript cURL报告的加载时间现在很低，但如果您在Web浏览器中加载页面，则仍需要5秒钟才能显示内容。...该页面现在应该在浏览器中加载不到一秒钟。 关于插件和主题的注意事项 使用的慢代码示例都与特定插件相关，解决方案是停用它们。...缩小网站加载的CSS和JavaScript。缩小是压缩代码的过程，因此人们难以阅读，但计算机处理速度更快。脚本通常以缩小版和非缩小版的形式分发，因此您可以查找每个脚本的缩小样式并将其上载到服务器。...一些WordPress插件也可以自动缩小脚本。 浏览器缓存 默认情况下，每次用户访问时，都会从您站点的Web服务器下载所有页面资源（图像，脚本，样式），即使他们最近访问过它并已经下载了这些项目。
当任务的执行时间超过一定阈值（50毫秒）,它们被归类为「长任务」。如果用户在长任务执行时尝试与页面进行交互，或者需要进行重要的渲染更新，浏览器将延迟处理这些工作。这导致交互或渲染延迟。...❝页面的可交互性通过以下四个标准来衡量： 浏览器显示「有意义」的内容 页面已准备好处理用户针对「可见元素的操作」 页面在「50毫秒内响应用户交互」 页面代码中最重要的脚本已被执行，使「主线程处于空闲状态...如何计算TTI TTI的「计量单位是秒」，计算页面的TTI需要识别FCP和首个5秒「静默窗口」(Quiet Window)。...❞ ---- TTI 结束点 在我们网页加载过程中,用户的浏览器会执行许多脚本。其中一些任务需要的时间「超过50毫秒」，并且这些任务与TTI的测量相关。...代码发送到一个文件中来使浏览器不堪重负，而是将代码拆分，并最初只发送访问者在开始时所需的必要代码 延迟加载第三方脚本，如社交分享按钮、视频播放器嵌入、广告的iframes等，同时优先处理对用户提供最大价值的脚本
尽管通过WebKit的预加载扫描器能够利用网页显示的空闲时间预先下载资源，在一定程度上改善了浏览器的阻塞状况，但是网络延迟依然会导致网页加载缓慢。...虽然围绕性能优化的问题已经有了很多不错的技术（参见：延迟加载，异步加载），但是他们都无法避免地引入了额外的代码，或是针对浏览器的Hacks写法。...async 脚本会在自身被下载完、window.load 事件执行前立刻被执行，这意味着 async 脚本有可能（应该说很可能）不会按照它们在页面中出现的顺序被执行；而 defer 脚本则一定是按照它们在页面中出现的先后顺序执行...这里有个例子，在这个例子中一个外部脚本下载需要1秒钟，紧跟在这个外部脚本后面是一段执行需要1秒钟的内嵌脚本。我们可以看到这个页面加载话费了2秒钟时间。...还是同一个例子，只是是其中的外部脚本被标记为 defer。由于签入的脚本可以在外部脚本被下载的同时执行，因此我们看到这个页面加载的速度大约是之前的两倍。
来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90%。...亚马逊的数据表明：加载时间增加100毫秒，销量就下降1%。 以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。 一、页面内容 1....延迟加载 页面初始加载时哪些内容是绝对必需的？不在答案之列的资源都可以延迟加载。比如： 非首屏使用的数据、样式、脚本、图片等； 用户交互时才会显示的内容。...等首屏加载完成或者用户操作时，再去渲染剩余的页面内容。 6. 预加载 预先加载利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页面时更快地响应。...尽早输出（flush）缓冲 用户请求页面时，服务器通常需要花费200 ~ 500毫秒来组合 HTML 页面。在此期间，浏览器处于空闲、等待数据状态。
例如，如果一个页面对100次交互的响应时间为50毫秒，然后有一个交互的延迟为300毫秒，那么INP将被报告为50毫秒。...脚本执行与启动过程中的长任务之间的关系 在页面生命周期中，当页面加载时，首先进行渲染，但是这里有一个很迷惑的点，仅仅因为页面已经渲染出来，不意味着页面已经完成加载。...在页面加载过程中，可能会延长输入延迟的一件事就是脚本执行。...如果想了解更多关于JS被解析的细节可以参考之前的文章 V8如何处理JS JS执行流程 根据脚本的大小，这些工作可能会在主线程上引入长时间的任务，这会延迟浏览器响应其他用户交互。...谷歌将测量用户交互延迟的第98百分位数。因此，如果页面上的INP为250毫秒，则有2%的用户交互延迟大于250毫秒。
页面体验基于许多因素，包括：加载性能、交互性的首次输入延迟、用于视觉稳定性的累积布局移位（CLS）、移动友好性，HTTPS，是否含有侵入性的插页式广告。...可变字体：可以将字体的多种变体合并到单个文件中，因此我们可以仅加载一个通常小于所有文件组合的文件，而不是加载具有不同变体的“X”数量的不同文件。...始终使用 async 或 defer 延迟加载第三方脚本，以防止阻塞应用程序的主线程。你还可以使用 next/script 来设置脚本的优先级。 资源提示。...明智地使用资源提示来进一步减少加载脚本所需的时间。 跟踪代码管理器。考虑将第三方脚本的加载委托给代码管理器，你可以更好地控制脚本加载的顺序和脚本的数量。 4....延迟加。总是延迟加载视口之外的图像。这样，我们可以在第一次访问我们的页面时节省时间。为此，我们可以在 img 标签上使用 loading=”lazy”属性。 预加载。
一个非常常见的场景，通常在页面加载过程中我们的 Web 网页已经展示给用户足够的 UI 元素时，但存在页面交互逻辑的 JavaScript 脚本并为加载（执行完毕），此时页面虽然可以正常向用户展示内容但无法响应用户的交互式命令...TTI 的误差 误差 TTI 的设计初衷源自于页面在主线程空闲之前并不会真正“加载”的想法，所以通过 Lighthouse 的 TTI 的评分开发者们可以直观的观察到页面具备“响应用户的输入”的标准耗时...不置可否的是，在 LightHouse V8 时引入的 TTI 的确是一项革命性的指标，通过页面 LongTask 任务来评测主线程是否空闲从而反映页面在首屏加载的可交互耗时。...而首次加载页面时，当用户真正与页面中的元素发生交互时我们可以通过 FID （First Input Delay）来衡量用户的真实输入延迟。...INP 可以理解为 FID 的优化指标： 范围纬度上：FID 仅测量页面的首次互动的输入延迟而 INP 则会考虑页面所有的交互。
然后，我们还可以延迟某些组件的激活，直到它们出现在可视区域或用户交互需要或浏览器处于空闲状态为止。...如果可以，请从你自己的服务器[52]而不是供应商的服务器中加载第三方资源并延迟加载它们。...比如，Huddle 创建了一个假的聊天按钮，该按钮仅在单击时下载脚本，避免了页面一加载就加载2.3MB 的聊天小部件[53]。...Casper.com 发布了一份详细的案例研究，介绍了他们如何通过自动托管 Optimizely 将网站缩短1.7秒。 38 正确设置HTTP缓存报文头。...经过604800秒后，缓存将重新获取请求的内容，从而导致页面加载速度变慢。
三、性能现状先看优化前的首屏效果（没有开慢倍速）：可以从动图看出页面加载速度、白屏时间都不太理想，显然和我们的目标首屏秒开还有一段距离，为了实现首屏秒开的目标，可以先从以下几个方面进行分析。...另外可以观察以下关键性能指标，了解一下页面加载的各个阶段的耗时情况First Contentful Paint（FCP）：首次内容绘制时间，此时页面仅展示出一些水印组件，和白屏几乎没区别，一般应该在页面加载后的...五、具体动作首屏资源优化首屏资源加载会直接影响页面的渲染速度和体验，我们先查看下首屏资源的加载情况，由于各类资源请求过多，这里仅过滤来源于主应用的网络请求。...可以直接从中发现几个可优化的点：入口 JS 资源文件 Size 优化严重影响了页面整体加载性能，可以通过构建体积优化，主要思路就是代码分割拆包，静态资源上传 CDN，脚本代码压缩等方式处理接口缓存、调用时序治理针对用户信息...渲染优先级优化最后为了减少 LCP 的等待时间，我们将页面左侧菜单栏做一个懒加载处理，初始化仅展示一级目录菜单，既考虑了首屏视觉效果，也间接将子应用加载的时间点提前。
对于 Web 开发人员来说，如何衡量一个 Web 页面的性能一直都是一个难题。...要使网站响应迅速、动画流畅，通常需要较长的处理时间，但以用户为中心来看待性能问题，就会发现并非所有工作都需要在响应和加载阶段完成，我们完全可以利用浏览器的空闲时间处理可延迟的任务，只要让用户感受不到延迟即可...利用空闲时间处理延迟，可减少预加载的数据大小，以保证网站或应用快速完成加载。 为了更加合理的利用浏览器的空闲时间，最好将处理任务按 50ms 为单位分组。...对于其他非关键资源的加载，延迟到浏览器空闲时段再进行，是比较常见的渐进式优化策略。比如图片懒加载、代码拆分等优化手段。...通常情况下，延迟加载的内容要比页面上已有的内容大，但不一定是这种情况。接下来的两个示例显示了在页面完全加载之前发生的最大内容绘制。
原因是这都与您托管WordPress网站的数据中心有关。 TTFB，网络延迟，都发挥作用。 因此，我们应该选择靠近数据中心的位置和远离数据中心的位置执行网站测速人物。...网站最佳加载时间是否有一个参考值？ 越快越好，但大多数专家建议大约两秒或更短时间是一个很好的目标。 还要记住，感知性能和实际性能之间存在差异。...但是，记住，在所有的场景中，100/100分几乎不可能，这取决于你的WordPress站点是如何设置的。许多多用途的主题和网站附带了几十个外部脚本，想要获得一个完美的分数的话显然是很困难的。 4....站点速度报告三个方面的延迟来衡量： 网站页面视图示例的页面加载时间。 要跟踪的任何离散命中、事件或用户交互的执行速度或加载时间。 浏览器解析文档并使其可用于用户交互的速度有多快。 ?...该脚本计算各个元素的大小，并总结每种类型的网页组件。 根据这些页面特征，然后脚本提供有关如何改善页面加载时间的建议。 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
