かずきち。の日記

サーバサイドエンジニアのつぶやき

ホームページの表示を早く?ウェブエンジニアに非同期処理をGoogleタグマネージャーでわかりやすく解説する!


今回は非同期タグについて解説していきます

非同期タグとは何?から当然始まると思います。
今回はまずはプログラミングは置いておいて、レストランを例に非同期処理を勉強していきましょう。

まず個人経営のレストランで「フレンチのフルコースを頼んだとしましょう」
すると1人しかいない店主が、サラダを作って、スープを作って、前菜を作って、魚料理を作って、肉料理を作って、デザートを作ってと
1つ1つの工程をそれぞれ行っていきます。
しかもお客が20人もいたら、1人1人の料理の提供が遅れるのは目に見えています。

でもマクドナルドをはじめとするファストフードは注文したら、バーガーもポテトもジュースも10秒ほどで提供されます。
その理由は単純です。
オーダーと同時にハンバーガーを作り、その間にポテトを運び、なおかつジュースもセットするからです。
だからファストフードは提供が早いんです。
当然、店舗で店員の人数を増やせばいいとか反論もあるでしょうが、同一人数で早くお客様に商品を提供するにはこのような同時処理が重要です。
さて話は戻ります。

今回はあくまでもホームページの表示の話です


引用:
https://medifund.jp/seo/heavypage/

ホームページのレンダリングプロセスを理解しなくてはいけません。
URLにアクセスをすると、ブラウザがせっせとホームページの中身を表示しようと頑張ろうとするんです。

サイトのヘッダー、ロゴ、サイドバー、コンテンツ、フッター等々です。

当然サイトのコンテンツは早く見えたに越したことはありません。
でもサイトの作者の情報とかロゴとかってぶっちゃけ早く見える必要はありませんよね?
極論、なくてもいいレベルです。
つまりインターネット上には利用者が早く見たい情報もあれば、別に見えなくてもいいよっていうコンテンツ・サイトの部品もあります。

DOM Readyで遅延読み込みを実装する

「DOM Ready」…
また意味不明な言葉が出てきました。

DOM Ready: ブラウザで HTML のページの読み込みが完全に終了し、ドキュメント オブジェクト モデル(DOM)が解析できる状態になった後に発動します。 DOM に対応して変数に値が入力されるページベースのタグの場合は、タグ マネージャーで正しい値が使用されるよう、このタイプのトリガーを選択してください。

なんですが、まだわかりづらいと思います。

簡単に言えば、DOM Readyは居酒屋でいう「スピードメニュー」です。

居酒屋に行って料理の提供が遅いとお客は嫌です

それと同じことで、ホームページに訪れる読者もまずはホームページの本文を読ませてほしいんです。

サイトのロゴとか、アクセス解析タグとかは利用者にとってはどうでもいい。
むしろ早くサイトのコンテンツが読みたいんです。
あなたが鳥貴族に行って、つくねを注文したのに、全然運ばれてこない。
だからお客様を満足させるために、キャベツとかスピードメニューを提供しています。


引用」
https://torikizoku.co.jp/menu/speed/

これと同様にウェブサイトもユーザを満足させるためにとりあえず、ウェブページの出始めの読み込み速度を早く設定しておきます。
それが「DOM Ready」に当たるとことです。

ホームページもページの何%まで読み込まれたら、このタグを発火させる
まずはホームページが読み込まれたら、アクセス解析タグだけは優先的に発火させる

のような仕掛けを埋め込むことが重要です。
読み込みは遅くてもパーツはわざと読み込みを遅らせることができます。

タグマネージャーは何を選べばいいの?

タグマネージャーはつまり、サイトに埋め込むタグを外部で一括で管理できます。
ホームページの管理者権限がなくても、タグマネージャーの操作権限さえあれば簡単にタグの更新などが行なえます。
なので、大企業など複数のホームページを管理しているとこは、タグマネージャーの操作権限のみを与えて、実際にそのタグが実行許可になるかどうかは「承認」制にすれば良いわけです。

support.google.com

外部ベンダーにはタグマネージャーの操作権限だけ与えて、タグの公開権限は本社の人間だけが持っている。
そうすれば、日本でホームページ管理をしている人も、日本全国、海外のエンジニアに委託することができるようになります。

タグマネージャーには不正なソフトウェアの検出機能もある

support.google.com

タグマネージャーというのは確かにサイト運用の手間を外部に委託でき、管理できるので便利なんですが…
当然不正なソフトウェアを埋め込まれてしまうリスクもあります。
そのためタグマネージャーには不正なソフトウェア検出機能があり、危険なソフトウェアが発見された場合メールが飛んできます。


引用:
https://lemonade-lemon.com/archives/402

こんな具合にエラーなどが飛んできますので、直してあげることもできます。
Googleタグマネージャーの欠点は対応タグの少なさでしょうか?
まぁ主要タグは対応しているし、していないとしてもカスタムHTMLで自分で書いてしまえばよいです。
そんなわけで自サイトの読み込み速度を上げたい人はぜひタグマネージャーを使ってみてください。

注目記事