title: Load third party iframe in React after page load, so that the iframe does not affect PageSpeed score
body: <p>I have an <code>iframe</code> that loads a third party widget. I only want to display this <code>iframe</code> after my page has loaded, because I don't want to slow down my page load speed. I followed a <a href="https://medium.com/@josh.j.pearson/handling-iframe-loading-in-react-57f044a9d0fa" rel="noreferrer">medium article</a> which describes how to do this, but their solution doesn't work because the <code>onload</code> function, <code>finishLoading</code>, is never called</p>
  <pre class="lang-js prettyprint-override"><code>export default ({src, width, height}) =&gt; {
  
    const [loading, stillLoading] = useState(true)
    const finishLoading = () =&gt; {
        alert('finished loading')
        stillLoading(false)
    }
    ...
    return(
      {loading ? '' : 
        &lt;iframe
          src={src}
          width={width}
          height={height}
          scrolling=&quot;no&quot;
          onLoad={finishLoading}
        &gt;
          className={`tpwidget flex-center-row`}&gt;
        &lt;/iframe&gt;
      }
    )
  }
  </code></pre>
  <hr />
  <p><strong>Update</strong></p>
  <p>By using useEffect, I can get the iframe to load after everything else(theoretically) but I find that removing the iframe completely improves my PageSpeed score, and that just loading the iframe after(using useEffect) doesn't have much of a positive effect on PageSpeed.</p>
  <hr />
  <p>If it helps, the domain is <a href="https://suddenlysask.com" rel="noreferrer">suddenlysask.com</a> and the third party widget is the amazon ads.</p>