WordPress ACFプラグインを使用してリピーターフィールドを作成しています。リピータフィールドでは、管理者はGoogleマップに複数のマーカーを追加できます。複数のGoogleマップでワードプレスの管理が遅くなる
我々はもともとサイトを構築した場合、それは約20マーカーを処理するように設計されました。クライアントは以来、150以上のマーカーを追加しています。これは、150のGoogleマップインスタンスがバックエンドに読み込まれ、すべてが減速していることを意味します。
フィールドごとに非同期Googleマップを実装する方法はありますか？
ブラウザが従来のスクリプトタグを解析する場合、ブラウザは、後続のHTMLをレンダリングする前に、スクリプトのダウンロード、解析、実行を待機する必要があります。ただし、非同期スクリプトを使用すると、ブラウザは同期スクリプトの後に続くHTMLの解析とレンダリングをスクリプトの完了を待つことなく継続できます。スクリプトが非同期にロードされると、できるだけ早くフェッチされますが、ブラウザのUIスレッドがWebページのレンダリングなど他の操作を行うまでビジー状態になるまで、その実行は延期されます。
もう1つのトリックは、maps.googleapis.com/maps/api/jsのjavascriptファイルが動的なものです。サーバは、異なるパラメータに対して異なるjsファイルに対応します。
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
スクリプトを同期的にロードされると、それが完全にロードするために、ブラウザは、待機、スクリプトがのdocument.writeを呼び出すと、テキストがロードされている文書に添付されています。しかし、文書が完全に読み込まれると非同期呼び出しが行われます。 "callback = initialize"でjsをロードすると、自己実行関数には初期化のコールバックと、それ以上のスクリプトを非同期的にロードできる修正された関数がすでに含まれています。 Loading google maps asynchronously
私の提案は、ACFリピータフィールドから離れ、代わりにあなたは非常に多くを持っているので、カスタムポストタイプを使用することです：
は、Googleが非同期的にマッピングしロードする方法を議論し、この関連のチケットを発見しました。それは私が考えるより管理しやすいでしょう。 –これは良い解決策です、ありがとうございます。唯一の問題は、すでに存在するデータの移行にかかる時間です。何か案は？ – Squideyes