かずきち。の日記

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

トップ > Web > 個人で重いはてなブログを高速化するためにGoogleタグマネージャー(GTM)でやった施策

個人で重いはてなブログを高速化するためにGoogleタグマネージャー(GTM)でやった施策

Web
はてなブログは重い

はてなブログは基本的に重たいと言われている。
この重たいと言われる理由は基本的にはてなブログに機能を詰めすぎてしまっているので動作が遅くなる。
そして基本的にホームページ（ブログ）を早くするには、

サーバを増強する
回線を早くする
いいパソコンに変える
コードを最適化する
画像を軽量化する

などがあげられる。
これら対策は大きく分けると、「ハードウェア的か？」「ソフトウェア的か？」に大別される。
サーバを増強するなんてことは個人ではできないので、
ソースコードを工夫することでブログの読み込み速度をあげるのが一般人でできる対策になる。

はてなブログはjavascriptが重い

javascriptでさえすでに重たいのに、そこにGoogleAnlytics,GoogleAdSenseなどの
サードパーティーのソースを流し込んでしまえば、ウェブページはどんどん重たくなる。
ウェブページを軽くするためには機能を削ぎ落としていけばいいんじゃない？というのが素人目の発想なのだが…

言い換えると第二次世界大戦中に零戦の航続距離を伸ばすにはどうすればいいか考えたときに

エンジンを良いものにする
機体を軽くするために余分な部品は取り除く
デブな軍人は乗せない
鉄は重たいので軽い木などで飛行機を作る

などの様々な対策が出てくる。
とはいってもそれら施策を全部行っていたら、戦争には負けるわけである。
ブログも同様でコンテンツを載せまくったサイトを公開するとサイトが重たいなんて状況が起きてしまう。

読み込み遅延が最適解

コンピュータの世界では間引き運転のようなことが行われる。

最近では人身事故などがおきると駅の入場制限がかかり、混雑緩和に努めたりする。
ウェブサイトも同様で表示の準備ができていないのなら、表示遅延やタグのカプセル化を行うことで見た目上スピードが早くなる。

このブログには実は様々なタグを仕掛けてある。
利用者が特定の動作をしたときに発動するようにしてある。

Googleタグマネージャーのサマリーを使うと、きちんと設定したタグがヒットして発動しているかの確認ができる。

  • GoogleAdsenseを読み込み遅延で配信する
  • GoogleAnlyticsを読み込み遅延で配信する
  • アクセスもとのユーザー種別を判定して、広告の配信を決定する（=特定のトラフィックは利益が見込めないので除外）
  • Googlebotに適切なサイト情報を配信できるようにマークアップ用のリッチリザルトと検索スニペットを配信する
  • ウェブページのスクロール量が80%を超えたら、トップに戻るページをアイコンを配信する
  • ウェブサイトのヒートマップ解析のタグを配信する
データレイヤーを設定して、Googleアクセス者から得た情報を横流しする

このタグをヘッダに埋め込むことでユーザから取得したIPアドレスをGoogle側に横流しして、タグの発火の判定をしてもらう。

<script type="text/javascript">
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'IP':'アクセスしたIPアドレス'
  });
</script>

developers.google.com
引用：
https://developers.google.com/tag-platform/devguides/datalayer?hl=ja

データレイヤーとはアクセス者によって、ウェブサイトの挙動を変える仕組みである。
大人が美術館に入ろうとしたら2000円で、中学生が美術館に入ろうとしたら1,000円みたいなのは
人間が判断して料金設定をしているが…
ウェブの世界ではコンピュータが自動判定して挙動を切り分ける。
そのためウェブの世界では「なりすまし」の概念がある。
本当はWindowsのアクセスなのに、Macのアクセスになりすます。
本当はリピーターなのに、初回購入者のようになりすます。
本当は日本からのアクセスだが料金が高いので、ベトナムからのアクセスになりすます。
みたいなことが可能だ。
悪用は厳禁だが、技術的には簡単である。

いろいろな対策をすることで

ウェブに関する指標はすべて合格基準を満たすことができた。
タグマネージャーはタグをマネージするツールと言えばそれまでだが、
何なのかよくわかっていない人に簡単に説明すると
利用者が必要だと思ったときにタグを発火させられるツールのことで、サイトの高速化・簡素化するのに役立つツールと言える。
難しかったのはタグマネージャーという概念が学問のように体系だっていないので初見でチャレンジするのは少しハードルが高い。

注目記事