googleカスタム検索を導入するとサイトの動作が重くなる

よろしくお願いします。
yahooのカスタムサーチがなくなるとのことで、
googleカスタム検索を今いろいろと試しているのですが、

googleカスタム検索をページに埋め込むとページ遷移が遅くなります。
リンクをおすと一瞬ページ全体がふわっと白けた後で、
その後ページが読み込まれていく、という感じです。

googleカスタム検索をはずせば、もとのようにさくさくとページ遷移ができます。

また、当方、FireFoxを使用しているのですが、その症状はFireFoxの場合だけで、
他のブラウザでは問題がありませんでした。

FireFoxとの相性がわるいのでしょうか。。。

上記症状につきまして解決方法をご存知の方がおられましたら、
ご教授いただけますと幸いです。

質問者からの補足コメント

• ttps://www.plusdesign.co.jp/blog/?p=6390
  
  上記URLより、googleカスタム検索を適用すると読込速度が遅くなるのはjavascriptを読み込みにいくことが原因だと分かりました。そこで、記事内の記述通りカスタム検索をHTML化にしサイトに適用したのですが、例えば「チョコレート」と検索しても、hidden値である「UTF-8」が検索結果として挙がってしまい、もちろん何もヒットしません。
  
  指定した検索語句を正常に検索結果に反映するにはどのようにすればよいでしょうか。
  ご存知の方がおられましたらご教授いただけましたら幸いです。

    補足日時：2019/02/14 17:30

• 下記がHTML化したフォームです。
  
  <form id="cse-search-box" action="https://google.com/cse">
  <input type="hidden" name="cx" value="自社ID" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="31" />
  <input type="submit" name="sa" value="Search" />
  </form>
  <img src="http://www.google.com/cse/images/google_custom_s …
  
  ※当方の使用しているサーバーはサクラのレンタルサーバーです

    補足日時：2019/02/14 17:34

No.3 ベストアンサー 回答者： fujillin 回答日時： 2019/02/15 16:52

No2です。

No2の補足でご提示のスクリプトは、HTMLソースに相当するものだと思いますが、
『通常の状態で追加・作成されるDOM』と申し上げたのは、それのことではなく、ロード時にそのスクリプトが実行されることによって追加生成される要素を意味しています。

ロード後、検索窓が表示された状態で、ブラウザの開発ツールを用いて調べてみるのが宜しいと思います。
（最近のブラウザであれば、大抵F12キーで開発ツールが表示されます）
生成後のDOMを参照するには、Element（又はDOM、HTMLなどブラウザによって異なる）のタブを表示して、検索窓等に相当する部分を確認してみるのが良いでしょう。

勝手な想像ではありますが、多分、ご質問文の補足でご提示のHTMLフォームとは似ても似つかないものになっているのではないかと思います。

この回答へのお礼

ありがとうございます。
頂いた情報をもとにGoogle Chromeの開発ツールで見てみたのですが、このjavascriptは裏でこんなにも値を吐き出していたのかとびっくりした次第です。

これでは読み込み速度が遅くなる訳だと納得できましたが、折角いただいたアドバイスですがこれをどうHTMLのフォームに結びつければよいか
当方ではさっぱり掴めそうにありません。。。

お礼日時：2019/02/15 17:47

No.2 回答者： fujillin 回答日時： 2019/02/15 11:00

こんにちは

以下は、補足の内容に関してです。

カスタム検索も何種類かあるようなので、どれを利用なさっていらっしゃるのか存じませんが、参考に挙げておられる記事とは違っていませんか？
ひとまずの簡単なチェックとして、
　通常の状態で追加・作成されるDOMと、質問者様が「HTML化」したHTMLを比較
多分、これがかなり異なっているのではないかと想像します。

種類によっては（全種類かも知れませんが）、検索結果を表示するための要素も先に用意してセットしているようですが、ご提示のHTMLにはそのような要素はありませんよね？

参考になさっているサイトの記事は「2017/05/23」付けとなっていますが、Googleの検索手法が、それ以後のヴァージョンアップ等で変わっているのではないかと懸念します。

※ 上記の内容は想像だけで、ちゃんと確認した内容ではありませんので、まずは、そのあたりをご自身で確かめてみられるのが宜しいかと思います。

この回答へのお礼

ご回答、誠にありがとうございます。

>通常の状態で追加・作成されるDOMと、質問者様が「HTML化」したHTMLを比較

諸々を登録したあとで発行される初期値スクリプトは以下のものになるのですが、内容は把握できないものの一致していない気がします。httpsなど。
当方、javascriptを勉強しておらず中途半端な回答になり申し訳ございません。

<script>
(function() {
var cx = '自社ID';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div class="gcse-search"></div>


検索結果を表示するための要素等、調べてみないと分かりませんので、調べてみます。
以上、取り急ぎの御礼までにて失礼致します。

お礼日時：2019/02/15 16:37

No.1 回答者： あつしノリノリ 回答日時： 2019/02/14 15:00

市役所などの自治体が行っているパソコン相談で相談したほうが良いと思います。