相关疑难解决方法(0)

页面加载后在React中加载第三方iframe,这样iframe就不会影响PageSpeed分数

我有一个iframe加载第三方小部件的。我只想iframe在页面加载后显示此内容,因为我不想减慢页面加载速度。我遵循了一篇中等文章,其中描述了如何执行此操作,但他们的解决方案不起作用,因为函数onload,finishLoading从未被调用

export default ({src, width, height}) => {

  const [loading, stillLoading] = useState(true)
  const finishLoading = () => {
      alert('finished loading')
      stillLoading(false)
  }
  ...
  return(
    {loading ? '' : 
      <iframe
        src={src}
        width={width}
        height={height}
        scrolling="no"
        onLoad={finishLoading}
      >
        className={`tpwidget flex-center-row`}>
      </iframe>
    }
  )
}
Run Code Online (Sandbox Code Playgroud)

更新

通过使用 useEffect,我可以让 iframe 在其他所有事情之后加载(理论上),但我发现删除 iframe 完全提高了我的 PageSpeed 分数,并且仅在(使用 useEffect)之后加载 iframe 并没有太大的积极效果关于页面速度。


如果有帮助,域名是suddensask.com,第三方小部件是亚马逊广告。

javascript iframe pagespeed reactjs gatsby

9
推荐指数
1
解决办法
2万
查看次数

灯塔上最大的内容油漆(LCP)是 ap 标签。(使用盖茨比)

我不知道为什么我的 LCP 会是 ap 标签,我也不知道我会做什么来减少它的大小。有时它会达到 2.6 秒并给出黄色评级(而不是绿色)。

在此输入图像描述

这是 p 标签。所有这些类都是引导类。

<p className="text-center mb-md-5 mt-0 mb-5">{aboutText}</p>
Run Code Online (Sandbox Code Playgroud)

这是变量aboutText

const aboutText = `Suddenly  Magazine highlights the uniqueness of Saskatchewan,  and its sudden rise in popularity and growth mentioned in publications such as USA Today and the New York Times.

Advertorials and Articles focus on its rare & particular tourism, its passionate sports, its character, and the prosperous opportunity for businesses and artists influenced by a Saskatchewan setting.

It is centred in Saskatoon, …
Run Code Online (Sandbox Code Playgroud)

pagespeed lighthouse reactjs gatsby pagespeed-insights

5
推荐指数
1
解决办法
1万
查看次数