Menu
I have a website (wordpress) which has a few thousand posts on it. A post will look like this:
[tab:source1]
<iframe width="560" height="315" src="https://www.youtube.com/embed/U3rKPexoEcA" frameborder="0" allowfullscreen></iframe>
[tab:source2]
<iframe src="https://player.vimeo.com/video/60718161?title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/60718161">HOW TO SHARPEN PENCILS</a> from <a href="https://vimeo.com/pricefilms">Pricefilms</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
[tab:source3]
<iframe width="640" height="360" src="http://www.worldstarhiphop.com/embed/100588" frameborder="0" allowfullscreen></iframe>
My page load times are sometimes in the double digits. I understand why this occurs but I'm not sure how to fix it. I want to fix it with either:
Iframe setTimeout()
Or: Dynamic Asynch Iframe that looks like this:
<script>
(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="' +
'var d = document;d.getElementsByTagName(\'head\')[0].' +
'appendChild(d.createElement(\'script\')).src' +
'=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
</script>
With either method how would I apply this globally to all iframes across the entire website? I don't think it's possible to change each iframe individually.
924
Register now or log in to answer. Definitely iframe affects the page load performance and also it is not recommended to use iframe for many page security issues perspective. SEO companies strongly discourage iframes.
iframes are going to be slower because there is an additional overhead for the browser (rendering it, maintaining it's instance and references to it). The ajax call is going to be a bit faster because you get the data in and you then inject it, or do whatever you want with it.
It shouldn't block. If you want the main page to fully load first (eg, main page's images before iframe content) then you'll have to use a bit of javascript to set the url of the iframe, like <body onload="javascript:..."> Main document's onload won't fire until all iframes have been loaded.
I guess you better replace all iframes with your desired loading solution in php template before output. Use regexp, like this <iframe.*src="([^"]*)".*\/iframe>. I suppose replacing iframes width div containing loading gif and data-src attribute with real iframe url is good solution. Then use js load iframes inside div, after page loaded.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
