「カスタム検索（サイト内検索）」スクリプトを除外した（cse.google.com/cse.js）

• カスタム検索のスクリプト（cse.google.com/cse.js）が重そうです。
• asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。
• 結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリンクを設置することにしました。

1. 遅延読込みのdeferとasync

まずは、スクリプトの読込みを遅延させることを考えました。

<div class="gcse-searchbox-only"></div>

<script defer src="https://cse.google.com/cse.js?cx=b8f3ee6d995f66436"></script>

<style>
	.gcse-searchbox-only {
		display: block;
		height: 60px;
	}
</style>

ところが、すでに defer で遅延読込みになっていました。

ただ、scriptの遅延読込みには、defer 属性のほかに async 属性があります。

もし、スクリプトが独立しているなら、asyncが適しています。

async 属性は defer に似ています。これもスクリプトをブロックしませんが、振る舞いに重要な違いがあります。

async 属性はスクリプトが完全に独立していることを意味します。:

スクリプト: async, defer

しかし、そうでなければHTML構築中に実行されてしまうので、deferのほうがよいです。

asyncはHTML構築中に実行される可能性があるので、deferにしてDOMcontentLoadedの直前に実行させるのがよいでしょう。

JavaScriptの読み込み方を工夫することで、表示を高速化しよう

サイドバーに表示している Googleカスタム検索 のウィジェットを

• 「script async src=”…”」か
• 「script defer src=”…”」か

で比較してみました。

1-1. async-ads.js はカスタム検索

もう一つ残るのは、「async-ads.js」です。
これは、「https://cse.google.com/cse.js?cx=〜」が読み込まれることで、自動的に追加されています。

無料版のGoogleカスタム検索を使う場合には、省力できないようです¹。

2. トップページのサイト内検索を別ページにした

カスタム検索のコードを削除すれば、headに挿入される「async-ads.js」もなくすことはできます。

そこで、トップページに限って、サイト内検索を別ページへのリンクにしました。

検索するときには一回クリックする必要がありますが、ふだんの表示は高速にできます。

こちらもどうぞ。

Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。 遅延表示による画面のガタツキ 検索バーには、Googleのカスタム検索を利用しています。 サイドバーの検索ボックスの遅延表示でズレる このように、ウェブページの画面が、後から表示される要素によってズレることを「CLS（Cumulative Layout Shift：累積的な割付の変移）」といいます。 div要素のheight属性ではうまくいかず スクリプトが非同期処理で読み込...

chiilabo.com

使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights]

ブログのページを高速化したいけど、どこを削ったらよいかわからない💦 とりあえず、「使用していないJavaScriptの削減」について、よくわからなかったことを、よくわからなかったなりにメモしておきます。 PageSpeed Insightsの使用していないJavaScriptの削減 PageSpeed Insightsをみると、「改善できる項目」に「使用していないJavaScriptの削減」があります。 PageSpeed Insights 項目の詳細をみると、Google ...

chiilabo.com

1. How can we remove Ad tracker cookie (async-ads.js) from our website via CSE. – Programmable Search Engine Community

QRコードを読み込むと、関連記事を確認できます。