ページロード後の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>
    }
  )
}
_

更新

UseEffectを使用することで、IFrameが他のすべてのもの（理論的に）後にロードすることができますが、IFrameを削除すると、PageSpeedスコアが完全に改善され、その後（USEEffectを使用）したばかりのIFrameをロードするだけではないことがわかります。 PageSpeedについて.

それが役立つならば、ドメインは突然Sask.com とサードパーティのウィジェットはAmazon広告です。

javascriptreactjsiframegatsbypagespeed

2020/07/13Sam

Window.onload関数を使用して、実行時にiframeをロードできます。

function loadDeferredIframe() {
    // this function will load the Google homepage into the iframe
    var iframe = document.getElementById("my-deferred-iframe");
    iframe.src = "./" // here goes your url
};
window.onload = loadDeferredIframe;
 _

最初に、空白を指すiframe要素を持つことができ、実行時にSRCを変更できます。

<iframe id="my-deferred-iframe" src="about:blank" />
 _

2020/07/27divyesh Puri

useEffect()フックを使用する必要があります。

_useEffect(() => {
  stillLoading(false)
}, [])_

この場合、stillLoading(false)コンポーネントがマウントされた後にのみ適用されます。したがって、終了時にはページのロード後にあなたの状態が機能します。

2020/07/13AskMen