GVKun编程网logo

PageSpeed Insights 是什麽? 对SEO有影响?(pages啥意思)

12

在本文中,我们将详细介绍PageSpeedInsights是什麽?对SEO有影响?的各个方面,并为您提供关于pages啥意思的相关解答,同时,我们也将为您带来关于AIO是什么,人工智能对SEO有哪些影

在本文中,我们将详细介绍PageSpeed Insights 是什麽? 对SEO有影响?的各个方面,并为您提供关于pages啥意思的相关解答,同时,我们也将为您带来关于AIO是什么,人工智能对SEO有哪些影响?、CDN服务对SEO有没有影响、css对seo有影响吗、Google Page Speed Insight显示不一致的结果的有用知识。

本文目录一览:

PageSpeed Insights 是什麽? 对SEO有影响?(pages啥意思)

PageSpeed Insights 是什麽? 对SEO有影响?(pages啥意思)

  很多SEO公司说 PageSpeed Insights (PSI) 跟 SEO 无关,其实错了,Google 早已经明确表达“网站使用者体验”与“网站效能”跟 SEO 有关,而 PSI 就是在帮助网站检测“网站使用者体验”、“网站效能”的重要工具,网站架构影响了SEO成效,如果能在PSI拿到高分,就等于在 SEO 有了更好的起跑点,这也是为什麽SEO必须跟网页设计做深度整合的原因

  什麽是 PageSpeed Insights (PSI)?

  PageSpeed Insights (PSI) 是由 Google 提供的网站测试工具,主要是测试“网站使用者体验”与“网站效能”这两项,Google 定义了许多标准,让网站开发者或是网路行销可以依照这些指标去改善网站,让网站可以更符合使用者体验 (UX),可以更快更好用。

  PageSpeed Insights 怎麽测试?

  首先到 PageSpeed Insights 测试网站,输入想测试的网址,按下【分析】按钮,等待结果出来,结果会分成行动装置、电脑结果,通常我们会以行动装置报告为主,因为 Google 自然排名是以手机版网站作为排名依据。

  1、用 PSI 测试网站效能与使用者体验


  第一区测试结果是“使用者体验”


  往下的第二区测试报告是“网站效能”


  PageSpeed Insights 测试指标有哪些?

  PSI测试分成“使用者体验”与“网站效能”这两项,使用者体验包含 3 项核心指标 (LCP、FID、CLS) + 3 项其他指标 (FCP、INP、TTFB),网站效能则有 6 项指标 (FCP、SI、LCP、TTI 、TBT、CLS),其中的LCP、CLS、FCP在两项测试指标是重複的。


  什麽是网站体验核心指标?

  Google 在2020年推出网站体验核心指标 (Core Web Vitals),用来测量网站的使用者体验是不是良好,以 LCP (最大内容绘制)、FID (首次输入延迟)、CLS (累计版面配置转移) 这三项作为核心指标,测试结果绿色是优良,黄色是待改善,红色是不及格,可以从 PageSpeed Insights 测试中得到数据,如果想更进一步知道哪些页面的 Core Web Vitals (网站体验核心指标) 需要改善,可以到Google Search Console 的网站体验核心指标找到资讯。

  Core Web Vitals 的三个测试指标


  GSC 的网站使用体验核心指标


  PageSpeed Insights 的 9 种优化指标

  使用者体验、网站效能加起来总共有 9 种指标,包含 LCP (最大内容绘制) 、FID (首次输入延迟) 、CLS (累计版面配置转移) 、 FCP (首次内容绘制) 、INP (下个画面的互动) 、TTFB (跑出第一字节时间) 、SI (速度指数) 、TTI (可互动时间)、TBT (封锁时间总计),让我们看一下各代表什麽意思,以及该如何优化,因为涉及太多技术,我们尽量深入浅出让大家理解。

  LCP (最大内容绘制) 如何优化?

  LCP (Largest Contentful Paint) 最大内容绘制,把网页想像是一块画布,渲染就是作画,LCP 就是画布上最大那一块的绘制时间,LCP 在测试网站最大内容载入的时间,最大内容可能是图片或影片,也可能是文字,LCP 时间越快越好,一般网站为例,LCP 通常是形象大图,或者是影片,这些内容优化就变得非常重要,也是影响 LCP 的最大因素。

  LCP 是网页中最大内容 (此例是大图)

  LCP 测试标准最佳是低于 2.5 sec


  使用PRPL模式做到即时加载


  1.   Preload:预先加载重要档案。(例如:预先加载 CSS)。
  2.   Render:加速渲染初始路线。(例如:使用 SSR 伺服器端渲染)
  3.   Pre-cache:预缓存原本有的档案。 (例如:使用 API 预缓存)
  4.   Lazy load:延迟加载其他路线和非关键的档案。 (例如:延迟载入图片)

  优化关键渲染路径

  精简DOM的架构,优化HTML程式码,与各种路径流程,包含CSS、JavaScrip...

  优化您的CSS

  精简CSS提昇载入速度,没有用到的CSS一定要移除,可减少行数并整合语法。

  优化网站图片

  压缩图片提昇载入速度,图片压缩到肉眼无法分辨的品质即可,不要使用原图直接上架。

  优化网页字体

  使用网页加载速度快的字体,可以的话,尽量用浏览器预设的字体。

  优化您的JavaScrip

  优化 Client 端的 JavaScrip,避免使用载入慢的 JavaScrip,尤其是複杂的动画或效果。

  FID (首次输入延迟) 如何优化?

  FID (First Input Delay)首次输入延迟,就是网页被使用者第一次点击 (Click) 所需要等待的时间,无论是点击连结、按钮、下拉选单,等待时间低于100毫秒就算是好的FID,会用首次输入作为指标的是因为首次使用者体验是最重要的感受。

  FID 测试标准需低于 100ms


  减少第三方代码的影响

  把没有用的第三方代码移除,或是减少使用不必要的代码

  减少JavaScript 执行时间

  避免使用又大又慢的JavaScript,没用到的JavaScript要移除,压缩程式码,拆解JavaScript程式码分开执行。

  最小化主线程工作

  检视网站内容显示的主要流程,将每一个步骤最小化。

  保持较低的请求数和较小的传输大小

  减少请求的数量,包含html、CSS、JavaScript、图片、字体、媒体、动画(GIF)

  CLS (累计版面配置转移) 如何优化?

  CLS (Cumulative Layout Shift) 累计版面配置转移是在测试网站的“视觉稳定性”,你有没有过一种经验,要点一个按钮或是连结的时候,画面忽然跳掉或是画面错位,甚至跳出广告,造成你无法点击的状况,记录版面配置转移这就是CLS指标存在的目的。

  CLS 测试标准需低于0.1分以下


  固定图片或影片尺寸

  如果网页有图片或是尺寸建议就是设定尺寸,或是使用CSS容器去预留需要的网页配置,避免内容重叠或是跑版,可以用 unsized-media 强制执行此行为(有支援的浏览器才可以)。

  避免使用跳出视窗功能

  除非是使用者点击按钮或连结,否则就不要制作自动跳出视窗的任何内容,以免发生内容佈局的偏移,造成不佳的使用者体验。

  选择简单的动画

  尽量採用单纯的换图动画,而不是会跳来跳去的动画,避免产生佈局偏移,动画是为了示意与转场,帮助内容的顺畅连续性,而不是花俏动画。

  FCP (首次内容绘制)怎麽优化?

  FCP (First Contentful Paint) 是跑出网站第一个内容的时间,FCP的内容可以是文本、图片、元素,把第一个出现的内容时间作为指标,也代表整个网站流程优化的展现。

  FCP、FID、TTI 指标之间差异


  FCP 首次内容绘制时间需低于 1.8 sec


  消除阻塞渲染的资源

  找出阻碍网页显示内容的原因,并将它排除,包含html、CSS、JavaScript、第三方程式…。

  优化CSS

  减少CSS程式码,把没有用到的CSS 移除

  预连接到所需的来源

  如果有需要预先连结的第三方网站,可以先预先设定连接。

  减少服务器响应时间(TTFB)

  TTFB是资源请求到回应的时间指标,减少TTFB时间就能加速FCP的时间。

  避免多个页面重定向

  从一个http跳到另一个http是很耗时间的,所以尽量不要使用页面重定向,尤其是多个页面重定向(301/302)

  预加载关键请求

  把关键重要的CSS、JavaScript预先加载进来,可以加快载入的时间。

  避免巨大的网路负载

  避免使用需要从外面载入网站的资源,以免连外面网站的时候花费太多时间。

  高效缓存静态资料

  利用Cache-Control暂存字型、图像、媒体… 静态资源,加快载入的速度。

  避免DOM过大

  写DOM架构的时候,必须精简程式,需要时才创建DOM 节点,不需要时应把节点移除,不要让DOM结构过大。

  DOM是什麽?

  DOM全名是Document Object Model 中文称作“文件物件模型”,DOM就是把HTML的各个标籤,包括文字、图片…,定义成物件,物件会形成一个树状结构,DOM也可以说是网站原始码的结构。

  最小化关键请求深度

  最小程度的使用关键资源连结数量,或者延迟下载,改变加载顺序,缩短下载路径长度

  确保文字在网页加载时可以看到

  字体需要时间才能载入完成,还没载完之前会看不到文字,要先用浏览器预设字体先暂时显示载完再换字体,以免FCP时间拉长。

  INP (下个画面的互动) 怎麽优化?

  INP (Time to First Byte) 下个互动画面的时间指标,INP是在测量网页操作流程的所有点击的反应能力,当使用者点击后产生反应的时间,越不顺畅的就会花上更多时间,主要是再测试滑鼠、触控银幕、键盘的点击后的反应时间,跟FID有一点相似,但FID只测量第一次,INP却是测量全部的点击反应,是更全面的指标。

  INP 测试标准要低于 200ms


  减少不需要的程式码

  把多馀的CSS、JavaScript移除,没有用的一定要移除,减少加载的负载

  把程式码拆开执行

  在网页加载期间延迟加载比较不重要的JavaScript

  避免DOM过大

  精简DOM架构,减少DOM 节点,把不需要的节点移除,不要让DOM过大。

  移除没有用到的第三方程式码

  检查是不是有没用到的第三方程式,如果有就移除,或者用更精简的方式使用。

  TTFB (跑出第一字节时间) 怎麽优化?

  TTFB (Time to First Byte) 是测量从网站请求到回应完成的时间指标,主要在测试从主机、系统、程式之间的效能速度,从这个指标就能知道网站主机效能、频宽速度。

  TTFB 测试标准需低于800 ms


  选择好的网站主机

  网站代管商的主机效能会影响TTFB数据,所以有足够效能与频宽是非常重要的。

  採用专业的程式

  好的网站设计公司可以写出效能好的程式,连接外速稳定的资料库。

  使用CDN服务

  如果希望全世界的节点都有一定的反应速度,可以採用CDN服务,可以让速度加快,以提昇TTFB效率。

  避免多次重定向

  网站重定向很浪费时间,一定要避免多次的网址重定向,将CLS预先提交给HSTS预载列表,减少HTTP 重定向到HTTPS的时间。

  预先连结网站外的资源

  如果有需要外连的资源,可以提前预先连结,减少加载时间

  使用HTTP/2 或 HTTP/3

  使用新一代的网页伺服器,可以提昇反应时间。

  预先加载需要的资源

  把关键重要的CSS、JavaScript预先加载进来,可以加快载入的时间。

  SI (速度指数) 怎麽优化?

  SI (Speed Index) 指数是测量“内容的视觉显示速度”,就是从没有到看到完整视觉页面的时间,是跟身体感觉的速度是很接近的数值,速度要低于3.4秒才算快。

  SI 标准需低于 3.4秒


  最小化主线程工作

  这个主线程优化工作范围是很大,包含html、CSS、JavaScript、图片、动画,整个流程都是。

  减少JavaScript执行时间

  JavaScript 是一个很吃时间的程式,载入过多複杂的JavaScript (动画效果),都会严重影响SI数值。

  确保字体保持显示状态

  字型载入是需要时间的,尤其是非浏览器预设的字型,都是需要时间载入的,如果无法使用预设字体,至少要先让网页显示,避免画面缺字,也会影响SI的时间。

  TTI (可互动时间) 怎麽优化?

  TTI (Time to Interactive) 可互动时间是指“网页进入可互动状态”所花费的时间,简单来说就是网站要载入完成才能开始互动,HTML、CSS、JavaScript、图片…必须都已经载入完成,互动的点击或功能才能真正使用,而TTI就是载完可互动时所花的时间。

  TTI 标准需低于 3.8秒

  减少不必要的JavaScript

  删除不需要JavaScript,或是延后载入不重要的JavaScript,都可以提昇TTI的效能。

  以PRP模式减少负载

  Preload:预先加载重要档案 (例如:预先加载CSS)。

  Render:加速渲染初始路线。(例如:使用SSR伺服器端渲染)

  Pre-cache:预缓存原本有的档案。(例如:使用API预缓存)

  Lazy load:延迟加载其他路线和非关键的档案 (例如:延迟载入图片)

  优化第三方JavaScript

  很多第三方JavaScript都会拖垮网站速度,可以试著整理一下第三方JavaScript,不需要的JavaScript移除,或者与先载入需要的JavaScript。

  TBT (封锁时间总计) 怎麽优化?

  TBT (Total Blocking Time) 是测量用户输入后的延迟累计的时间,包含滑鼠点击、银幕点击、按下键盘的等待时间,主要是把FCP(首次内容绘制)、TTI(可互动时间)的时间加总。

  TBT 标准需低于 200毫秒


  优化网站程式

  程式码包含HTML、CSS、JavaScript、图片压缩、第三方程式码…,只要会延迟时间的因素都要排除。

  提昇主机与系统效能

  主机效能与反应时间,资料库的回应效率,都会影响TBT数值,所以要把主机、系统都提升到一定程度的规格跟效能。

  结论

  PageSpeed Insights(PSI) 不只对“网站速度做测试”,还包含了前端程式、主机效能、使用者体验、网站内容…,进行全面性的测试,把PSI分数优化到高分,就代表“网站符合 Google 定义的优良网站条件”,要做Google的SEO当然要按照Google的网站标准来优化,PSI的分数低不代表网站速度慢,也不代表SEO完全没有希望,但如果网站跟产业是高竞争,那PSI检测与调教肯定是不能马虎了,必须找真正可以制作PSI高分的网页设计公司。

    延伸阅读

  • PageSpeed Insights 是什麽? 对SEO有影响?

    很多SEO公司说PageSpeedInsights(PSI)跟SEO无关,其实错了,Google早已经明确表达“网站使用者体验”与“网站效能”跟SEO有关,而PSI就是在帮助网...

AIO是什么,人工智能对SEO有哪些影响?

AIO是什么,人工智能对SEO有哪些影响?

1、关键词分布

由人工智能参与的关键词分析,并不在是单一的对精准关键词的分析,更多的可能是从相关性的角度去分析,并通过用户的使用习惯自然学习:

比如,你搜索SEO教程,并没有在搜索引擎中找到心仪的网站,然后又从新搜索了SEO基础知识,你去到了一个网站,而停留了很长时间,如果大量的这种搜索习惯存在,人工智能会认为SEO基础知识这个词比SEO教程这个词更重要,那么在做相关排名的时候,它可能就会倾向性的推荐包含SEO基础知识的站点。

而传统的机器学习只做了一个相关性的推荐。

2、内容分析

从内容的角度而言,仍旧讨论的是关键词的相关性,当我们在查询“麦片”进入到一篇文章的时候,如果你没有提及像:热量、减肥、健康、谷物等关键词的话,人工智能可能会判断你这篇文章是低质量的,因此当AI介入内容读取的时候,你需要尽量拓展内容相关的词。

最好的获取方法,就是在搜索框中输入关键词,看看它推荐出什么词,然后再在参考搜索结果中的标题,以及搜索列表下面的推荐。

3、点击率

人工智能会参考跳出率、页面停留时间、点击率这些指标,特别是点击率,这也是为什么在百度近期推动惊雷算法的原因,因为点击率对关键词优化排名起着很重要的作用,它会通过AI得出行业平均点击率,如果你超过这个范围,那么你可能就会被优先推荐。

所以在有AI参与下的搜索引擎优化,你需要合理优化这几个指标。

4、外链建设

很多人在讲人工智能参与的搜索引擎优化,外链可能不在那么重要,这句话应该理解为高质量的外链以及来自权威站点的链接,还是很重要的。

AI一定会判定你的外链结构,来自权威机构的推荐数量是多少,甚至它可能判断对方给你链接的位置是否足够重要,而这一切都将会赋予人的思维逻辑,而买卖链接,将会识别的一清二楚。

喜欢 (0)or分享 (0)

CDN服务对SEO有没有影响

CDN服务对SEO有没有影响

CDN服务对SEO有没有影响

1.不可能捕捉到它吗?

对于列出的网站,蜘蛛必须直接抓取源服务器的IP地址的数据,并且在抓取之前不太可能被DNS服务器再次解析,所以我们不必担心是否会抓取更新的数据。

2.不可能获取最新数据吗?

如果蜘蛛抓取存储在CDN缓存中的CDN节点中的数据,由于CDN是一种缓存技术,其实时性能肯定是不可能的,因此其更新频率非常重要。CDN可以根据访问量和访问行为自动设置更新频率,也可以根据后台网站的不同栏目设置灵活的缓存策略和主动、被动的数据更新方法;并进行智能调节和缓存。因此,这里对搜索引擎优化的影响可以忽略。

3.不同的ip对网站权重有负面影响吗?

如果蜘蛛抓取每个节点的数据呢?一个网站会有不同的IP地址吗?搜索引擎会惩罚这种情况吗?看一下百度的官方搜索引擎优化指南,你可以看到下面的话:& ldquoBaiduspider像普通用户一样抓取网站,只要普通用户能访问内容,我们就能抓取。不管使用什么技术,只要用户能够顺利访问网站,它就不会对搜索引擎产生影响。& rdquo既然百度都这么说,谷歌在爬行和记录方面没有问题。同时,百度也提到了& ldquo建议尽可能选择强大的服务提供商和成熟的技术。不成熟的技术很容易导致不稳定的访问,这可能会影响对搜索引擎的掌握。因此,选择一个安全稳定的CDN服务提供商仍然非常重要。

第二,CDN的使用应结合个人网站的层次和需求

1.对于一个区域性网站,你的大多数访问者都是本地访问者。您购买的服务器(vps/虚拟主机)位于或靠近您的本地区域。在这种情况下,您不需要使用cdn,但如果它是一个全国性甚至全球性的网站,此时您必须使用CDN,并且节点必须广泛分布以满足用户的需求。一名美国游客在中国访问一个服务器架构的网站。如果你的网站在美国没有CDN,

2.对网站访问的需求

一个网站的每日IP小于1000,其带宽为2M,你的带宽完全可以满足用户的需求。如果你有100,000个甚至数百万个没有CDN的网站,仅仅依靠带宽是非常困难的。一般来说,5M以内的云服务器带宽更便宜。如果它超过500万带宽,你的带宽成本将成倍增加。当CDN启动时,很大一部分网站流量将通过CDN,并且不需要返回源,因此成本将会低得多。

3.网站类型

同一级别的5个站点内的文章站和资源站(图片/视频/音乐/下载站)对CDN有不同的需求。纯文章信息站流量低,不需要开通CDN,而资源站不开通CDN,图片等资源开通缓慢。打开CDN会让你的资源飞起来。

4.其他预防措施

该网站可以部分打开CDN,并通过分离动态和静态来加速网站。动态部分不打开CDN,只为网站的图片CSS打开CDN,可以有效提高网站的访问速度。这些是我对CDN的看法。我想尽我所能去玩,但是欢迎你为我的缺点打砖块。内容摘要:就爬行的速度和频率而言,CDN对搜索引擎优化的影响没有问题,甚至是有益的。

版权声明:本网站上的原创文章由秦皇岛的搜索引擎优化发布。如有转载,请注明出处。秦皇岛搜索引擎优化博客www.388m.com

喜欢 (0)or分享 (0)

css对seo有影响吗

css对seo有影响吗

css对seo有影响:1、利用css样式,可以平衡链接在内容页面与html的展示位置,会影响蜘蛛抓取的频率,以及传递的权重;2、精简代码,提高网页加载速度;3、有利于随时且快速更换模板样式,不会影响搜索引擎优化标准。

css对seo有影响吗

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS样式对SEO的影响

通常来讲:CSS用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。它是一种用于不同方式展现网站的手法,举个不恰当的例子,它有的时候更像毛坯房的精装修。

1、规范内容页面位置

立即学习“前端免费学习笔记(深入)”;

一般来讲,搜索引擎的蜘蛛爬行的顺序为:从左到右,从上到下,利用CSS样式,我们可以很好的分配重要资源在相关位置:

① 顶部导航包含核心关键词链接:从左到右,关键词指数依次递减。

② 如果你配置左侧列表,可以包含二级分类或者是TAG标签页面。

③ 改变代码顺序,假设由于页面需要,你需要把部分专题链接放到内容页面底部,但它对于搜索引擎又十分重要,那么你可以利用CSS样式调整这个链接的展示位置。

2、优化内容,CSS图片居中

UX对SEO的影响,是我们一直讨论的话题,特别是百度新增蜘蛛Baiduspider-render以后,用于对CSS与JS的解析,证明用户体验,对于搜索优化是一个十分重要的事情,合理的使用CSS它可以很好的:

① 设计内容页面字体大小,H1-H3标签的样式,超链接字体颜色等等。

② 统一调整图片位置,规范图片大小。

3、精简代码,提高网页加载速度

利用合并多个CSS样式,我们可以简化内容页面代码,减少服务器请求时间,从而提高页面加载速度,对于移动站点与电商SEO,这具有至关重要的作用。

4、有利于随时更换模板样式

我们知道CSS样式最大一个功能就是将内容与样式分离,但你的网站运营到一定时期的时候,需要变更模板,它并不会耗费大量时间,同时也不会影响搜索引擎优化标准,比如:URL的改变。

总结:

CSS样式在SEO中最重要的作用,就是平衡链接在内容页面与HTML的展示位置,它严重影响蜘蛛抓取的频率,以及传递的权重。

(学习视频分享:css视频教程、web前端)

以上就是css对seo有影响吗的详细内容,更多请关注php中文网其它相关文章!

Google Page Speed Insight显示不一致的结果

Google Page Speed Insight显示不一致的结果

使用经典的HTTP / 1.0超文本传输​​协议,将Javascript,CSS,HTML,图像等资源加载到请求/响应对中,这意味着浏览器发送请求以请求资源(例如CSS,Javascript ,等等),并在请求其他资源之前等待响应返回。即使它们以请求/响应对的形式加载,由于网络延迟,服务器响应时间,当前服务器的负载等方面的随机性,请求和响应对也不一定总是严格遵循相同的顺序。

使用HTTP协议的较新版本HTTP / 2和HTTP / 3,可以立即发送所有请求,而不必等待响应返回再发送另一个请求。我检查了您的网站,发现您的网站正在使用HTTP / 2和HTTP / 3。使用HTTP / 2和HTTP / 3协议,由于可以一次发送所有请求,因此,除其他因素外,它还会造成一定程度的“不一致”。即使使用HTTP 1,也总是存在一定程度的随机性,因为其中会涉及许多因素,例如服务器响应时间将有所不同,网络延迟将有所不同等等。

enter image description here

为了说明这一点,如果您使用的是Chrome浏览器,请通过单击浏览器右上角的三个点来打开“开发人员工具”标签,然后单击“更多工具”,然后单击“开发人员工具” ”。另外,如果您使用Windows,或者在Mac上是“ Command + Option + I”,则可以执行“ Ctrl + Shift + I”。然后转到其“网络”标签,并刷新页面。每次刷新页面时,资源的加载顺序都会有所不同:

enter image description here

在上图中,以Google跟踪代码管理器UA-174548329-1为例(我知道它可能不是Google Map),它已作为 4th 资源加载。

当我再次刷新页面时,您的Google跟踪代码管理器UA-174548329-1 Javascript已作为 11th 资源加载:

enter image description here

在加载页面或在Google的PageSpeed Insight上运行页面时,由于请求和响应的随机性,主线程有时会很忙,有时不会很忙。您的主线程还在构造DOM,并做了很多工作。有时它会被渲染阻止资源(例如Javascript)阻止。

默认情况下,JavaScript始终会阻止关键渲染路径。如果不查看Javascript SetTimeOut,很难说您使用什么实现来延迟Javascript,但是可以肯定地说,它可能无助于清除关键的渲染路径。而不是使用SetTimeOut,应该使用defer或async。

您可以在此处进一步了解Critical Rendering Path。主线程是浏览器正在运行的主要进程,它负责处理和呈现页面上的CSS,Javascript和HTML的大部分工作。关键的渲染路径是“浏览器将HTML,CSS和JavaScript转换为屏幕上的像素所经历的步骤序列”。 -引自Critical Rendering Path。关键的渲染路径是Javascript,HTML,CSS,图像以及其他资源的下载和渲染顺序。它需要大量知识来优化关键的渲染路径,这绝非易事。但是,您可以尝试在script标记中使用两个属性,即“异步”和“延迟”来控制何时执行Javascript。

看看这张图片:

enter image description here

信用:随着网络发展

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/?utm_source=lighthouse&utm_medium=unknown

如您所见,您可以尝试将async属性放在脚本中或将defer属性放在脚本标签中,看看是否有帮助。

在script标签中具有'async'属性,这意味着您的Javascript一旦下载即会异步执行。如图所示,<script async>下的蓝色条显示了在解析HTML的同时下载了脚本,因为看到绿色条和蓝色条是并行执行的。一旦脚本下载完成,便会执行脚本。此时,HTML解析将暂停,直到脚本执行完毕。而没有“ async”属性,则在下载和执行脚本时,HTML解析将被暂停(或阻止)。

在script标签中具有'defer'属性,这意味着您将Javascript的执行推迟到DOM完成解析为止。尽管它将在浏览器收到javascript资源后立即下载,但是下载不会阻止HTML解析。

总而言之,您可以在第三方脚本中使用'async'属性在一定程度上“解除阻止”您的主线程,以便在渲染DOM时将它们在后台下载并执行。这将加快主线程的速度。然而,一个警告是执行仍将是渲染阻止的。需要注意的非常重要的一点是,通过使用'async'属性,可以准备好查看页面可能出现的不稳定行为,因为由于现在可以在渲染路径中的任何位置执行Javascript,因此可能会发生更多的“不一致”。在脚本之前或之后需要进行某些操作,您可能会破坏流程及其逻辑。

或者您可以在第三方脚本中使用“ defer”属性来告诉您的脚本仅在DOM完全加载后才能执行。这只会非常缓慢地加快处理过程,因为只能在进行HTML解析的同时并行进行脚本的下载,而不使用不指定defer或async的默认脚本标签,因此只能加快执行的速度,但是执行仍然会在主线程上增加开销。

根据Google的支持文档,在How do you load third-party script efficiently?上有一节,介绍了几种方法:

  • 使用async或defer属性加载脚本,以避免阻止文档解析。

  • 如果第三方服务器运行缓慢,请考虑自托管脚本。

  • 如果脚本没有为您的网站增加明显价值,请考虑删除该脚本。

  • 考虑诸如<link rel=preconnect><link rel=dns-prefetch>之类的资源提示,以对托管第三方脚本的域执行DNS查找。

其他方法:

查看如何将各种Javascript文件压缩,最小化或合并为一个文件(如果您以文件形式使用Javascript)。使用GZIP compression压缩Javascript,CSS。此外,还要了解如何使用CDN(内容分发网络/内容分发网络)加载第三方脚本。

2020年8月12日更新

为回应您的评论,由于您提到第三方脚本来自无法将'async'或'defer'属性编码到脚本标签中的插件,因此您可以考虑在其他脚本之前添加此脚本:

<script>
// If your script tag has an id,use either one below:
document.getElementById("your_script_tag_id").async = true;
document.getElementById("your_script_tag_id").defer = true;

// If your script tag has a class name,use either one below:
document.getElementsByClassName("your_script_tag_class_name")[0].async = true;
document.getElementsByClassName("your_script_tag_class_name")[0].defer = true;

// If for once and for all scripts,use either one below:
document.getElementsByTagName("script")[0].async = true;
document.getElementsByTagName("script")[0].defer = true;
</script>

您还可以查看以下内容:Async JavaScript,这使您可以延迟或异步Javascript(包括第三方Javascript)。

,

据我所知,您已将Facebook Messenger聊天的“延迟”设置为3秒。但是,您的网站加载初始内容所需的时间要长得多。

由于网络延迟,服务器负载等原因,您的网站通常在3秒钟之内不会加载“首屏”内容。

由于这个原因,Facebook Messenger聊天脚本在CP​​U可能忙碌或可能不忙的时候被加载。对于“ Total Blocking Time”(总阻塞时间)之类的内容,这一点很重要,因为它要侦听CPU在页面可用时的第一个静默期进行计算。

对于计算“第三方代码的影响”,它正在查看CPU在工作时尝试呈现“折叠之上”内容的原因,因此为什么有时有时会显示为影响而有时却不显示您的首屏内容在Facebook Messenger初始化之前已充分加载。

此外,您还必须考虑何时加载包含超时的主JS文件,有时它会根据延迟等情况而更快地加载,因此这也会影响添加fbDiv的时间。

要覆盖答案,有很多内容可以简化答案(因为有很多要解释为什么会发生这种情况)是增加Facebook Messenger上的延迟或仅在单击按钮时加载它。

例如,您可能有一个显示“与我们聊天”的按钮,然后使用click事件加载Facebook Messenger(并隐藏“与我们聊天”按钮)。 这是我的推荐

或者查看您网站上的加载速度,您可以将延迟设置为大约7秒,然后(可能)保持一致。

今天的关于PageSpeed Insights 是什麽? 对SEO有影响?pages啥意思的分享已经结束,谢谢您的关注,如果想了解更多关于AIO是什么,人工智能对SEO有哪些影响?、CDN服务对SEO有没有影响、css对seo有影响吗、Google Page Speed Insight显示不一致的结果的相关知识,请在本站进行查询。

本文标签: