GoogleのPageSpeed Insightsの結果に表示される警告、
レンダリングをブロックする javascript を除去して下さい
これをGoogleタグマネージャーを使って解消するのに、私が行った作業を書きます。
MovableTypeやSIRIUSなど静的なHTMLを生成するCMSで管理しているウェブサイトに対して作業を行いました。
今回、警告の対象になったコード
headタグ区間に書かれた下記のコードです。
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>GoogleにホストされているライブラリからJQueryファイルを読み込む記述です。
ファイルが外部サーバーになるため、Googleのレンダリングをブロックするみたいですね。
このコードを含め、以下でJQuery関係のタグをGoogleタグマネージャーに格納する作業を書いていきます。
Googleタグマネージャー側の設定
※以下は、タグマネージャー内でアカウントとコンテナが作成されているという前提で書きます。
Googleタグマネージャーのダッシュボードにアクセスし、作成したコンテナをクリックします。
コンテナの設定画面に移動したら、左メニューの「タグ」をクリックします。
タグの設定画面に移動したら、赤い「新規」ボタンをクリックします。
この画面が表示されたら、
1つ目の赤矢印、「名前のないタグ」の箇所をクリックすると名前を変更できます。任意の名前を設定して下さい。
2つ目の赤矢印、「カスタムHTMLタグ」をクリックします。
「カスタムHTMLタグ」をクリックすると、任意のHTMLタグを入力するテキストエリアが画面下方向に展開します。
展開したテキストエリア内に先の
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>このコードを入力します。このコードの下に書くことで稼働するscriptタグも一緒の記述しても大丈夫のようです。（私の環境では正常にJQueryが動作しました）
「document.write をサポートする」については、よく分からなかったのですが、私はチェックを入れました。特に問題は今のところありません、
最後に青い「続行」ボタンをクリックします。
配信するタイミングとして、「すべてのページ」をクリックします。
クリック後、All Pagesというトリガーが自動生成されるのを確認したら青い「タグを作成」をクリックします。
以上でタグの設定が完了です。最後に自サイトに設置するGoogleタグマネージャーのHTMLコードを取得します。
タグマネージャー上部のグローバルナビから「管理」をクリックします。
表示メニューから「Google タグマネージャをインストール」をクリックします。
コードが表示されるので、管理しているウェブサイト全てのページのタグの直下に貼り付けて下さい。
JQuery関係のタグを全てGoogleタグマネージャーに格納することで、下記のようにjavascript警告の解消になりました。
スコア的には4点くらい良くなるみたいです。CSSの最適化が残ってますが、画像の圧縮と組み合わせれば、それなりに高速化に対応できると思います。
あと、タグマネージャー格納後に、JQueryによって実装した機能が正常に稼働するか、必ず動作確認するようにして下さい。