I have written an article in wordpress and have used google iframe to load country maps of 35 countries. In other words, i am loading 35 iframes of google maps along with 100 other 640px medium size images. The size of the article i wrote is about 31 mb.
It takes about 15 seconds for the article to load, even worse in mobile browsers. Sometimes google maps causes the article content to stop loading for a long time.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5662268.557666768!2d-2.2908874246415487!3d46.135220605972364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54a02933785731%3A0x6bfd3f96c747d9f7!2sFrance!5e0!3m2!1sen!2shu!4v1483719195954" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
How do i speed up the loading? Is there any simple way to do this?
I have used wordpress plugins like lazy load, but it only makes loading even worse and gets stuck. I a supe using supercache for wordpress.
Your code should work. I've tested this and also added a timeout before each frame load so you can see the change.
var URLs = [
'http://localhost/a.htm',
'http://localhost/b.htm',
'http://localhost/c.htm',
'http://localhost/d.htm'
];
function loadNext(){
var frameWindow = document.getElementById('test').contentWindow;
if(URLs.length > 0){
setTimeout(function(){
frameWindow.location.replace(URLs.shift());
}, 1000);
}
}
<iframe id="test" onload="loadNext();"></iframe>
Use the <img> tag instead of <iframe>!
Example:
<img src="https://maps.googleapis.com/maps/api/staticmap?center=London&zoom=13&scale=false&size=600x300&maptype=roadmap&format=png&visual_refresh=true"></img>
Outputs:
Learn more
I think the only solution to load 100 images and 35 iframes is to use Lazy Load.
Lazy load supports iframes and images also. You can try one of free lazy load plugin:
https://wordpress.org/plugins/bj-lazy-load/
I hope it help.
Related
On my page here:
https://www.wikijob.co.uk/content/aptitude-tests/test-types/aptitude-tests
Using mobile pagespeed insights, I get a 'Defer offscreen images' suggestion on mobile only:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.wikijob.co.uk%2Fcontent%2Faptitude-tests%2Ftest-types%2Faptitude-tests&tab=mobile
All images on the page are loaded with loading="lazy" or loading="eager".
According the source code in Lighthouse, if an image has a lazy/eager tag, it should be passed automatically:
https://github.com/GoogleChrome/lighthouse/blob/d0d2ca04c80af8f0443f63072415e34d79a205cc/lighthouse-core/audits/byte-efficiency/offscreen-images.js#L85
What could be the issue here?
I'm working on some websites that are using the WPBakery video background on rows. These should autoplay, and did until recently. Sometimes they do, and sometimes they don't. Typically it happens where they don't work more when I'm looking at them via Incognito mode on Chrome. I'm aware of the changes a couple years ago for autoplaying needing to include muted, and I've tried to hack this to add muted to the allow, but because it comes in via an iframe, it adds it too late for the autoplay to start.
Example Sites:
https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/
I haven't seen other questions on this, but the fact that I'm seeing it on three totally different sites means that it is likely a larger issue.
Below is a bit of code that I tried, but wasn't successful in getting it to actually autoplay. It gave me an error of .play() is not a function.
<script type="text/javascript">
jQuery(function($) {
$(window).load(function(){
$('#widget2').attr('allow', 'muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
$('#widget2').play();
});
});
</script>
I think there's two parts of the WPBakery plugin's video background not working properly.
Video's with a Youtube-embed link are not working properly.
Video's stop autoplaying when using the same URL.
The first one is fixable by only using the URL's without embed. Something like: https://www.youtube.com/watch?v=XXXXXXXXX
The second one is fixable by creating a unique URL every time you load the page. This can be done by the following code:
function startVideo() {
const date = $('.video-wrapper').data('date');
let src = $('.video-wrapper iframe').attr('src');
src = src + '&autoplay=1&randomVar=' + date;
$('.video-wrapper iframe').attr('src', src);
}
This will take the existing url of the iframe, add the current date which is available on the wrapper and regenerate the video's url. This way the URL is always unique and will autoplay. You can also just generate a date manually and add that as a random param on the URL.
Hope this is of any help!
After installing and configuring a few plugins to optimize the cache and increase my score, my images refuse to appear on client pages. Even in the library they are not displayed. however the links of his images are very real and they lead to the images in the folder. I then uninstalled these plugins and clear the cache but still nothing.
Here are the plugins:
GT metrix
WP fastest cache
Shortpixel image optimize
Lazy load - optimize images
Lazy load - optimize images
Hey Giovani, this is probably messing up something, you should just remove it. (Just a wild guess, with no code nor link to your website, no wizards tricks)
Lazyloading has since been incorporated as a default feature on most major web browsers.
You can use loading="lazy" in you image tag <img src"" alt="" loading="lazy" >
No library needed, by using loading="lazy" if an image need to be lazy loaded, the browser knows it and will to it by default
https://web.dev/native-lazy-loading/
https://caniuse.com/#feat=loading-lazy-attr
Hope this will help you
I am using lazy sizes for the lazy load of my youtube videos. On every page the lazy load does work, but not on these two, more precisely, the whole video just disappears/is not displayed. The two pages are in the same folder as all other pages, which do work. The link to lazysizes.js is there <script src="lazysizes.min.js" async></script>
Here is the iframe on one of the working pages with the video being displayed:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/xxx?rel=0" importance="low" loading="lazy" frameborder="0" class="lazyload" allow="encrypted-media" allowfullscreen></iframe>
and here the iframe that just won't work/does not display the video - it's identical:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/3FOZ2CTaaWk?rel=0" importance="low" loading="lazy" class="lazyload" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
I know this just doesn't make sense, but my hope is that one of you stumbled upon the same problem. I have tried copying and pasting (swapped them, so it is not really the iframe code) and changing it, reloading the js etc. but nothing helps. The iframe is identical with the other pages. I have no idea how to find out what's missing here.
I'm stupid, the console revealed it: the lazysizes.min.js was loaded into the directory of this particular URL. Since this URL (and its /.../ directory) is artificially created the lazysizes.min.js could not be found in that directory (though on the FTP server the js file is in the same directory as the source php file that loads it) it could not be loaded.
A simple line of extra code that includes the lazysizes.min.js above the iframe embedment with an absolute URL to the js file solved the problem!
I tested lazy loading youtube videos on my site and the page speed improves by 3 seconds. I load a javascript and changed the src attribute for a data-src one.
Ex:
<iframe data-src="http://www.youtube.com/embed/VID" height="360" width="550"></iframe>
But I don't know if the iframe code can be modified and if this goes against Youtubes' terms and conditions: https://www.youtube.com/t/terms.