グーグルマップiframeローディングは非常に遅い

Question

私はワードプレスで記事を書いており、Googleのiframeを使って35カ国の国地図を読み込んでいます。言い換えれば、私は100の他の640px中サイズの画像と一緒にGoogleマップの35 iframeを読み込んでいます。私が書いた記事のサイズは約31MBです。

モバイルブラウザでは、記事が読み込まれるまでに約15秒かかります。さらに悪化します。時にはGoogleマップによって、記事コンテンツの読み込みが長時間停止することがあります。

<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> 

ローディングを高速化するにはどうすればよいですか？これを行う簡単な方法はありますか？

私は遅延ロードのようなwordpressプラグインを使用していますが、読み込みがさらに悪くなってしまいます。私はワードプレスのためのスーパーキャッシュを使用してsupe。

Answer 1

あなたのコードはうまくいくはずです。私はこれをテストし、各フレームが読み込まれる前にタイムアウトを追加して、変更を見ることができます。

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> 

Answer 2

の代わりに<img>タグを使用してください。

例：

<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> 

出力：

Learn more

Answer 3

私は100枚の画像と35件のiframeをロードするための唯一の解決策は、遅延ロードを使用することだと思います。

遅延読み込みは、iframeと画像もサポートしています。無料の遅延ロードプラグインの1つを試すことができます： https://wordpress.org/plugins/bj-lazy-load/

私は助けてくれることを願っています。