【バックエンド向け】ページの高速表示の為にできることをまとめました

Webサイトの表示速度向上について、さまざまな方法が存在しますが、本稿ではWebサイトの表示の仕組みから、どのような高速表示対応が効果的かを考えていきたいと思います。

本稿はバックエンドの知識に長けた方にとっては知っていることも多い内容かもしれませんが、あまりコーディングにも興味をもてない方にとっては読み進めることも難しい内容になっているかと思います。一般向けのページ読込み速度改善方法はこちらをご覧ください。

しかし、自ら実装するに至らなくとも、対応可能なエンジニアに対して、技術的な会話ができるようになるだけであっても充分に貴重な知識といえます。ページの高速表示対応をより丁寧に対応したいというニーズがありましたら是非ひとつづつ読み進めていただけたらと思います。

ページの表示速度がユーザーの動向に影響を与えます。詳細は次の通りです。

• ページの表示に3秒かかると40％を超えるユーザーが離脱してしまう。
• 80％のユーザーが、表示パフォーマンスに不満を感じると再びサイトを利用しようと思わなくなる。
• ECサイト（通販サイト）の利用者の50％以上がサイトの高速表示をロイヤリティとして求めている。

実際にWebページの表示速度はユーザーに対して大きな影響を及ぼします。ユーザーの利便性を高めることを目的としたGoogleなど検索エンジンが、サイトの表示速度を評価要因として採用するのも当然です。よって、SEOの観点からもページの高速表示は意味がありますので、これを期にひとつ意識をもって自身のコンテンツを見直してみてください。

単に表示速度が速ければよいということでもありませんが、コンテンツの質・量と表示速度のバランスをチューニングするという視点はしっかりともつべきだと思います。

ページの表示速度は以下のツールでチェック可能。対応をする前後で確認をするとよいでしょう。

・PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
※URLを入れるだけなので手軽に確認できます。

・Lighthouse
https://developers.google.com/web/tools/lighthouse/
※Google Chromeの拡張機能、Chrome Dev Tool、コマンドラインツールの3種類の使用方法があります。

高速化するべきプロセスについて

Webサイトがユーザーのブラウザに表示されるまでが高速化のターゲットですが、主に3つの処理をいかに高速化するか？ということになります。

• レンダリング処理
• ネットワーク処理
• サーバー処理

今や、表示速度の高速化はWebコンテンツ制作者においても一つの武器となる要素です。SEOなどと違い、ごく単純なファイルの修正だけでは対応できません。
ひとつずつ解説していきます。これら3の要素をそれぞれ高速化できると、末端のページ表示速度も良化するでしょう。

レンダリング処理

サーバーからネットワークを通じて送られてきたデータを読み解き、ブラウザ（画面上）に表示させる処理のことです。レンダリング処理を高速化させるためには色々なアプローチがありますが、手ごろなところではCSSの調整をすることで、できることがあります。

CSSファイルを他の処理が始まる前に読み込ませる

シンプルな方法ですが、head要素の先頭にCSS要素を記述します。

ファーストビューに無関係なCSS読み込みは分離してフッターに記述する。

ユーザーが体感する速度というのはファーストビューに関するものです。よって、ファーストビューに関連するCSS要素のみheaderで読み込み、残りの要素を他のものが読み込まれた後のフッターにて読み込みます。
CSSの読み込み量を減らしているのでファーストビューの描画速度が改善します。

しかし、この方法は正確にファーストビューに関連するCSSを分離する必要があります。作業コストに対して速度向上しない懸念もありますので、この方法に取り組むかどうかは少し検討が必要です。

CSS解析スピードを意識してマークアップする

• 使用していないセレクタは削除
• セレクタはなるべく短く

ということを意識するとブラウザのレンダリング負荷を軽くできます。詳細は省きますが、CSSの書き方一つで変わるということは頭の片隅に置いておきましょう。

JSの記述箇所をBODY要素の最後にする

JSの読み込みが終わらないことでHTMLがレンダリングされないとファーストビューに影響があります。なのでHTMLの最後の要素としてJSを読み込むとファーストビューの描画が早くなります。

注意が必要な点は、アクセス解析のJSは先に読み込まないと動作に問題があるかもしれない点です。

JSを非同期で読み込ませる

JSには高負荷を与えるものがあるので、HTMLの読み込み後にJSを読み込むように調整することでファーストビューの描画速度が向上します。HTML5においては、scriptタグに、asyncまたはdefer属性を付与することで、これらの読み込みがHTMLを妨害しないようにできます。これにより、サイトのメインコンテンツの読み込みがある程度高速化することが期待できます。

詳しい話は割愛しますが、気になる方は参考サイトをご覧ください。

例）

<script src="./script.js">
<script src="./script.js" async>
<script src="./script.js" defer>

▼参考（WHATWG 規格）
https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async

scriptタグにasyncまたはdefer属性も付けないと、scriptタグにたどり着き次第、HTMLの読み込みを一時停止し、JSファイルのダウンロードと実行を行います。JSファイルの実行が完了するまで、描画が再開されません。

scriptタグにasync属性を追加することで、非同期に JS ファイルをダウンロード・実行します。scriptタグにdefer属性を追加することで、HTML描画完了後、DOMContentLoadedイベントの直前にJSファイルを実行します。

ネットワーク処理

物理的に離れた場所にある、パソコン（Webブラウザ）とサーバーを繋げている通信処理のことです。このプロセスにアプローチして高速化を目指します。

通信量を抑える

メールを送信するときをイメージするとわかりやすいかと思いますが、大きな画像ファイルなどを添付する時に送信に時間が掛かります。Webページも同じで、ページの各要素において容量が大きいものを使うと、その送受信に時間が掛かってしまいます。適切な画像サイズを用意するなど配慮をすることで通信量を抑えることが可能になります。

Webページにおいてはテキストファイル（HTML、CSS、JSなど）、画像一つひとつの容量削減に取り掛かる必要があります。

以下に具体的な方法も書いていますのでよかったら参考にしてください

通信回数を抑える

ファイルを呼び出すリクエストは基本的に1回ずつ順番に行われます。1つ目のファイルを呼び出し、その処理が完了してから2つ目のファイルが呼び出されます。通信回数を抑えられていないと、複数の処理が滞り、ページの表示速度にも影響がでてしまいます。制作側が通信回数を抑える努力をすることも大事ですが、通信プロトコル(※1)が発展することで、ネットワークの処理が遅延することが軽減されているという側面もあります。もしかしたら、ある程度の通信回数まではユーザーの表示速度に対しては影響がないという未来も来るのかもしれません。

(※1)通信プロトコルとは、ネットワーク上でデータを通信するための手順や規約の集合のこと。

これは今の段階では新しいプロコトルでもあるHTTP/2を導入することが一番の対策かと思います。

▼【図解】HTTP/2って？HTTP/1.1との違いと導入メリット・課題まとめ
https://www.kagoya.jp/howto/webhomepage/http-2/

HTTP/2は導入できない環境もあるので、実行するにはサーバー環境の見直しが必要な方もいるかもしれません。

HTTP/2の導入以外には、

• CSS,JSなどのファイルを一つにまとめる
• CSS,JSなどをHTMLファイルにインライン記述をする
• 画像をLaxy Loadなどを使って遅延読み込みさせる（ファーストビュー読み込み後、スクロールをきっかけに後半の画像を読み込むなど）
• ファーストビューに影響ない外部ファイル（CSS、JS）はフッターで読み込む

などの方法が考えられます。

CSSで読み込む画像をスプライト画像にしたりも効果的でしょう。
※現状スプライト画像に含まれたものは、SEO上無視をされるのでアイコン程度のものにとどめておく方がよさそうです。
※SEO的意味合いを持たせたい場合は通常の画像としてALTなどをしっかり指定する。

通信距離

データは多くのルーターを経由して通信されます。ルーターを経由する数をHOP数ともいいますが、その数が通信速度に比例すると考えられています。また、ルーター間の物理的な距離も速度の大して影響を及ぼします。海外のサーバーにデータを置いて表示させる場合、もたつきを感じるのは通信距離の影響が大きいということです。国内向けのコンテンツは国内サーバー、海外向けのインバウンドメディアであれば各国に近いところに置くという対応になります。

また、CDNの導入も効果的です。CDNとはコンテンツデリバリーネットワークのこと、コンテンツ配信用のネットワークサーバーのことです。有料サービスではAkamaiさんがfastryさんが有名でしょうか。世界中のどのサーバーに元のデータをおいていてもキャッシュして高速で表示させてくれます。

キャッシュって？という方は以下を参考にしてください。

CDNは高額なサービスも多いのですが、無料プランがあるサービスもいくつかあります。なにそれ？という方は一度お試ししてください。そこそこの規模になると無料で使う範囲を超えてしまうと思いますが、速度を体験して効果的だと思われたら導入してみるとよいでしょう。

・CloudFlare
https://www.cloudflare.com/ja-jp/
・Rapid START
https://cdn.tokyo/
・imperva
https://www.imperva.com/

同じキャッシュを使った対応にはもう少し身近な以下のような方法もありますね。サーバーやWPプラグインで設定することが可能です。

• ページキャッシュ
• データベースキャッシュ
• オブジェクトキャッシュ
• ブラウザキャッシュ etc…

にそれぞれ対応するという方法です。サーバー内設定やWordpressであればプラグインで実装可能なものが多くありますが、以下のプラグインが色々とまとめて設定できます。

・W3 Total Cache

サーバー処理

HTML、CSS、JSなどWebページの材料となるデータを作成する処理のことです。高度な専門知識が必要なので本稿ではあまり参考になることは書けませんが、よりハイスペックなレンタルサーバーに移管するとここの処理が高速化されることになります。

サーバーのスペックアップにはいくつか方法がありますが、サーバーの処理台数を増やして役割分担（画像用、HTML用、データベース用など）をする方法と、単純にサーバーの処理速度を向上させるシステム増強があります。レンタルサーバーであればより上位プランに乗り換えるということで済みますが、社内にサーバーを抱えている場合はエンジニアと相談の上、システムに投資する必要が出てきます。

どうしてもコストが掛かってくる部分ですが、必要な投資でもありますので、定期的に検証を行い段階を追って増強をしていくようにしていきましょう。定期的なシステムメンテナンスはトラブルリスクを下げる効果も期待できます。

どのプロセスについて対策したかを把握すること

高速化についてはさまざまな記事が紹介されていたりしますが、とりあえずプラグインを入れてなんとなく過ごしてるという人も多いのではないでしょうか。プラグインを導入するにしても、どのプロセスに対応しているプラグインかを把握できていないと、相性の良し悪しについて判断することが難しくなります。

高速化といっても対応方法は多種多様。これまでまったく手を付けていないアプローチだと効果が大きくあるということもあるでしょう。これを期に自分のサイトに対してどのようなアプローチで高速化対応を施しているか確認をしてみてください。もしかするとまだまったく手付かずの高速化対応を導入することで、劇的な効果を手に入れられるかもしれません。