ウェブメディアを立ち上げると必ずと言って必要となってくるのが
サイト高速化ですが様々な手法がありその分だけ最適化する箇所があるのは
ご存じでしょうか?

今回は、そんな難しい手法とかは抜きにしてサイト高速化と言うものが
どいう物なのかを理解してもらえればと思いす。

目次

なぜやるの?「ネットは速くないから」

なぜやるの?「ネットは速くないから」です。
えっ?ネットは速くないてどいうこと?と思う人が居るかもしれません。

確かに、インターネットは技術の進歩によって10Gbpsなどの様に数値上では
速くなりましたが、実はネットて速くないんです。

ネットが速くない理由は、

  • 非効率的なルーティング(無駄な通信の道づくり)
  • パケットロス(通信データの欠損)・遅延(通信の遅れ)
  • 輻輳(道路の渋滞)

これらが挙げれます。

輻輳なんかは帯域保証の専用回線を用いれば解決できると言う意見もありますが、
一般回線では輻輳は切っても切れない存在と言えます。

10G回線を使っていても常に10Gで通信できる
わけじゃないですよね?
ネットは速くないてそいう意味なんです。

ちなみにこれを最初に提唱しているのはCDNでおなじみの
アカマイテクノロジーズです。

ただアカマイは法人向けで導入コストが大きいので
個人なんかは無料で使えるCloudFlareで十分です。

非効率的なルーティング(無駄な通信の道づくり)

インターネットは、ルーターと呼ばれる道を設計する装置同士の通信によって
相手のネットワークの区切り(セグメントと言う)までの経路を互いに確認し合っています。

この時、次の通信先となるルーターはネクストホップルーターまたはホップと呼んでいます。

空いてのサーバーや端末が自身のネットワークやISPのルーターに近ければ、
近いほど経由するホップ数は減ります。

しかし、海外などを拠点にするサーバーなどに通信をしようとすると
自ずと経由するホップ数が増えます。

これによって生じる遅れが遅延(レイテンシー)と呼ばれる現象です。

パケットロス(通信データの欠損)

パケットと言うのは、ネットワーク通信におけるデータを小分けの箱に詰めた状態を指します。
1パケット=128バイト

この時ネットワークはパケットごとにデータの欠損状況を確認できるようにヘッダと呼ばれる
タグをつけて送信しています。

しかし、断線や通信不良・遅延による劣化でデータが欠損を起こし正常に送信できなくなる時が
あります。これがパケットロス(パケロス)と言う現象です。

輻輳(道路の渋滞)

ネットワークに関わってると必ず出てくる用語ですが、最近ではモバイル通信の障害などの
理由を説明する時にもトラフィックの輻輳ふくそうと言う表現を使われることがしばしあります。

意味はアクセス過多による、回線が渋滞を起こした状態と言うもので通信設備の不具合や
自然災害によるパニックからの過剰な情報収取が通信事業者の設備が処理し(裁)きれなくなる。

ことによって通信が一行に進まない状態を言います。

これは、自然災害による自然的要因と、設備調整時の手違いによる人的要因
設備の劣化による障害など様々な要因があるため切っても切れない存在であると言えます。

サイト高速化って?

サイト高速化って聞かれて連想するのはPSI(ページスピードインサイト)ではないでしょうか?

しかしサイト高速化って言うのは、ただPSIを改善したりCore web vitalsと呼ばれる
サイトのバイタル指標を改善するだけではないと言えます。

ではサイト高速化てどいう物なのか?
答えは、無駄を省き・軽量化していく→最適化と言う作業になります。

サイト高速化をすることで・・・

サイト高速化することで、受けれる恩恵は様々かと思いますがウェブメディアのパブリッシャー
としては、やはり検索順位上昇・コンバージョン数/回遊率上昇が一番の目的でやっていると思います。

なぜ検索エンジンに影響を与えるのか?

それは検索エンジンがユーザーの利便性を一つの評価指標(シグナル)として
観ているからです。

ちょっと専門的な話をするとGoogleは統計結果からスマートフォンユーザーの
半数近くがサイトへのアクセスから3秒以内に何かしら表示されてスクロールなどの
操作が出来る状態にないと離脱(回帰)すると言われています。

でもこんなのはあくまでもパブリッシャーサイドの目的であって本質ではありません。

3秒を超えると半分以上が離脱

グーグルは、スマートフォン向けサイトを対象に同様の調査を実施したそれによると、モバイルサイト表示速度の改善は進んでいるものの、PC向けサイトに比べるとまだ時間がかかり、15秒という値だそうだ。

ショックなことに、読み込みに3秒以上かかるとアクセス者の53%が閲覧を止めてしまうという。直帰率は読み込み完了時間が長くなるほど高くなり、3秒だと1秒の32%増、5秒だと同90%増、6秒だと同106%増、10秒だと同123%増になる。


出典:グーグル / Find out how you stack up to new industry benchmarks for mobile page speed

無駄を省く

サイト高速化の大前提は、無駄を省き軽量化を目指していくと言いました。

この数十年の間にウェブサイトはよりリッチ(美しく)によりヘビー(大容量)
になったと言えます。

これらの原因は人の口コミに反応を示すと言う深層心理「ウィンザー効果」
によってTwitterやインスタグラムなどの外部メディアの埋め込みが多くなってきている。

長文を読む事を好まない人間に配慮して画像を多用するようになってきている。

ディスプレイ広告のテクノロジーの発展でスクリプトがより複雑で大容量となっている
と言う要因が上げれるとWeb表示スピード研究会は発信しています。

ではリッチさを保ったままサイトを軽量化するにはどうするのか?
それが無駄を省くです。

  • 同じような機能を持つプラグインを停止し削除する。
  • 極力サーバーなどで賄える機能はプラグインやテーマに頼らない。
  • 複数回の実行が不要なスクリプトは一度のみの実行にまとめる。

同じような機能を持つプラグインを停止し削除する

初心者とかのサイトを良く見ると多いケースに色んなブロガーの情報を参考に
設定したら余計に重くなってしまったと言うパターンです。

この場合は一番よくある状況として、すでに実装している物と全くもって
同じ機能を二重にして導入してしまうと言ったケースです。

画像を送らせて読み込ませる
レイジーロード(遅延読み込み)を二重でかけてしまい
一向に画像が表示されないと言う事例はよく聞きます。

こう言った状態に陥らないよう同じ機能を持つプラグインは停止しかつ削除するようにしましょう。

なぜ削除?「停止じゃだめなの?」

WordPressには機能やデザインを追加したりするための追加プログラムとして、
プラグインと呼ばれるPHPプログラムのファイルがサーバー上に保存されています。

これは停止することで機能が使用不可能になりますが停止しただけでは再度実行できるよう
にファイルが読み出されている状態となるため、サーバーのメモリーなどのリソースを消費して
しまうため今後使用することのないプラグインは削除することが望ましい

極力サーバーなどで賄える機能はプラグインやテーマに頼らない

WordPressをベースとするサイトは、ユーザーがサイトのコンテンツのURLを触れた時に
データベースと呼ばれるサーバーから記事のデータを呼び出し、プラグインの処理を通して
からHTMLと呼ばれるウェブページのデータにして訪問者に送信されている。

そのため、プラグインやテーマのfactionと呼ばれるプログラムが増えるとサーバーの
処理能力を多く消費したり、処理に時間がかかるようになってしまいウェブページの受信に
時間がかかるようになる。

その結果、

「Googleが推すTTFB:サイトの初期1バイトの受信までの時間」が悪化してしまい
サイトの評価に悪影響を与えてしまうと言う結果につながる。

複数回の実行が不要なスクリプトは一度のみの実行にまとめる

最近のサイトではコンテンツの一つとして、Twitterやインスタグラム、
アドセンスを埋め込んでいたりすることがあると思う。

これらのスクリプトにはその都度読み出す必要のある物も有れば、
一度だけ読み出せばそれ以降は必要のない物あったりする。

こう言ったものを検証し複数あるものを排除していくのもサイト高速化では
重要である。

例えば、アドセンスのadsbygoogle.jsなんかは、一度だけあれば
他の広告ユニットは全て処理され広告があるときに勝手に埋めてくれるので

手動配置するときに以下の様にheadと同じするクリプトを取り外して掲載することで
サイトの動作を軽量化することができる。

<!--ここは自動広告なので1度だけあれば済む-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2069060170317216"
     crossorigin="anonymous"></script>
<!-- GAM_336x280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-2069060170317216"
     data-ad-slot="9626707419"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

ただし、よくあるadsbygoogleを遅延させて読み込ませるのはポリシー違反
に当たる場合があるので注意が必要です。

邪魔する者を事前に読ませる

無駄を省いても邪魔をするものは必ずあります。

そう言ったもので常に使う様なスクリプトなどは事前に読み込ませると妨げにならなくなります。
そのために使うものがpreload,prefetch,preconnectと呼ばれる「リソースヒント」です。

これについては次回実装方法を解説しますので今回はそういう物があるんだなで済ませます。

ただやれば良いと言うものではない

preloadなどで読み込みを早まらせればいいと言うことで全てのリソースとかを
対象にしがちだかただやれば良いと言うものではない。

まだ、prefetchに関しては、全てやってもいいがpreconnectやpreloadは
常に使うもので優先に読み込ませなくてはならないものに限定して実施する必要がある。

これに関してはGoogleも提言しています。

サイト高速化=最適化・軽量化ともいえる作業である!

ウェブメディアが成功していくために必要なプロセスであるサイト高速化
細かい手法やテクニックが沢山あるが今回は、わかりやすく概念的なものを
紹介させてもらった。

一言でいえば「サイト高速化=最適化・軽量化ともいえる作業」です。
無駄を省いてサイトをスリムにして行きましょう!

この記事が気に入ったら
いいね または フォローしてね!

参考になったらシェア!

この記事を書いた人

爲國 勇芽(魔理沙っち)のアバター 爲國 勇芽(魔理沙っち) 自称:精肉社畜個人投資家自作erブロガーゲーマー

埼玉県在住のスーパーのフリーターをしながらAdsense広告によるマネタイズについて研究しています。

ITの様々なニュースや小技の発信とネット回線を紹介するメディアを運営しながら広告マネタイズのテクニックやアドテクにまつわる情報を発信しています。