テックブログ

2021.4.6

MSP サーバサーバーサーバーエンジニアサーバ保守サーバ構築サーバ監視サーバ管理サーバ運用セキュリティネットアシスト

【開いて3秒が分かれ道】Webサイトの表示速度の重要性

皆さん、こんにちは。
サーバー保守・監視などの運用管理からセキュリティ対策まで、MSPサービスをまるごとお任せ！
【ネットアシスト】のSUZUoです。

実は私、Webマーケティングを中心としたマーケターなので、Google先生の動向には常に目を光らせていなければいけないのですが、Google先生が2021年5月から「優良なWebサイトであるという基準のひとつに表示速度も追加する」と公式に発表したため、たまにはマーケターらしい情報もご提供したいと思います。

【目次】

　Googleのアルゴリズムがどう変わるの？
　LCP＝サイトの表示速度を中心に見てみよう
　サイトの表示速度を高速化するために
　まとめ

Googleのアルゴリズムがどう変わるの？

コアウェブバイタル（Core Web Vitals）を強化していきます

元々、Google先生は公式にウェブバイタル*を掲げており、Webサイトを管理する人たち（我々のようなマーケターです）が、各々でユーザビリティーやUXを研究しては改善を重ねていたものを、膨大なデータ量の中からある程度Googleが指針を提示してくれるようになったわけです。

ただし、この指標もそれはもう膨大な量になるため、ある程度シンプルに特に重要視するものとして3つの指標にまとめたものがコアウェブバイタルです。

書いて字のごとく、「Webの核となる重要な指針」ですね。

*簡潔に言うと「Googleがこれまで得たユーザーデータを解析し、明確にした数値目標」です。

コアウェブバイタル（Core Web Vitals）とは

前述したコアウェブバイタルの３つの指標とは、下記のとおりです。

LCP（Largest Contentful Paint）＝サイト表示時間（読み込み時間）

FID（First Input Delay）＝ページの反応速度

CLS（Cumulative Layout Shift）＝レイアウト変動数（視覚的な安定性）

今回1番お伝えしたいのは、「LCP（サイト表示速度）」のため、それ以外のFID/CLSを詳しく知りたい方は、次の機会かまず1回ググってみましょう。

自身の管理しているWebサイトのコアウェブバイタルスコアが知りたい場合は、「Google Search Console」や「PageSpeed Insight」などを活用してみましょう。

LCP＝サイトの表示速度を中心に見てみよう

Googleの提唱する指針は、さまざまなユーザーの体験（UX）などを元に分析されているものなので、基本的にはこのGoogleの指標にのっとって対策を講じることで、Webサイトを閲覧される皆さまにとって「見やすい」「わかりやすい」「ストレスのない」サイトになるはずです。

”3秒を過ぎると57％のユーザーがしびれを切らし、訪問を諦める”
マイナビ　3秒が許容範囲 – Webサイトのパフォーマンスが重要な理由 | TECH+ (mynavi.jp)より引用

その中で、特にユーザーにとってストレスたりえる「Webサイトの表示速度」を改善しましょう。というのが、LCPというわけですが、ページを表示するまでの時間が長いと起きるデメリットについてご紹介します。

昨今はスマートフォンの普及により、ビジネス・プライベートを問わず日常生活のあらゆるところでインターネット通信を利用する機会が増えました。

5G通信などは、従来の4GLTEに比べると約10倍の速度で動画などの映像をダウンロードできるようになりました。もはや電波が悪くてガラケーのアンテナを伸ばして上下左右に振っていたことなど今の10代の子は知らないのでしょうね…。

私自身もNetflixやAmazonプライムなどのサブスク動画配信サービスを利用していますが、くるくる砂時計が回って止まってしまうと本当にイライラしてしまいます。

たかが3秒、されど3秒…。確かに近くのおいしいランチを検索しようと思って、既に会社を出て歩き始めているときになかなかサイトが表示されなかったら、検索画面に戻って次のサイトに移ってしまうかもしれません。弊社の社長に至っては2秒待たされるのも嫌だそうで、「阿部寛級の表示速度を目指せ」と常々言っています。

(参照：阿部寛のホームページ　http://abehiroshi.la.coocan.jp/)

生き急いでますよね。もっと余裕をもってのんびりいきたいものです。笑

サイトの表示速度を高速化するために

さて、ここまでは表示速度が遅いとユーザー（閲覧者）の方のストレスになります、というお話をしてきました。ここからは、ではどうしたら表示速度を向上させ、快適にWebサイトを閲覧することができるのか、という部分について解説いたします。

1.まずは現状を把握しよう

「PageSpeed Insights」

PageSpeed Insights (google.com)

Google先生が公式に提供しているチェックツールです。表示速度を採点するだけでなく、どこを改善したら良いのかアドバイスもしてくれます。こちらで、少なくとも70点以上をキープしたいところ。おそらく一般的にパソコン版の方が点数がいいのではないでしょうか。ネットアシストでも96点いただいてます…。あと4点…。結構モバイルの点数が低くなるパターンも多く、モバイルの改善点はよくチェックしておきたいところです。

特に2021年3月末にモバイルファーストインデックスが施行されたことにより、よりモバイル面のUI/UXをはじめ、スピードなどを重点的に対策することが求められています。そのため、ネットアシストも出遅れましたがレスポンシブ対応を進めております…！

Google Search Consoleの併用

マーケターにはおなじみのサーチコンソールから、改善の必要があるページを特定して対策するのがオススメです。

PageSpeed Insightsでモバイルスコアの低さにげんなりするパターンが多いかと思いますが、ほとんどの方はトップページのみの検索で終わっていませんか？

SEOに力を入れているWebサイトですと、ページ数も多くなかなか全ページをチェックするのは難しいですよね。そういったときには、サーチコンソールの「ウェブに関する主な指標」の中にある「不良」もしくは「改善が必要」なページを優先してチェックしてみるのが効果的です。

2.サーバーのスペックを見直そう

Webサイト高速化において、根本過ぎて見過ごしてしまいがちなのがWebサーバーです。レンタルサーバーのように多数のユーザーが1つのサーバーを共有して使っている状態とクラウドサーバーや専用サーバーのように１つのサーバーを独占して使用できる環境とでは、インターネット回線の安定性や通信速度にも差が出てくるといわれています。

Webサーバーのソフトウェア設定を確認しよう

だんだんこの辺りから専門的な話になってきます。が、Googleの指標にスピードが掲げられた以上マーケターやフロントエンドエンジニアもサーバーサイドの知識が必要不可欠になってきました。

私もわからないなりにかみ砕いて解釈していますので、サーバーサイドのエンジニアの方々にとっては基本中の基本でもするっと聞き流してください。

さて、本題ですが「Webサーバー」とはいったいなんでしょう？と聞いたときになかなか的を射た回答ができるマーケターは少ないのではないでしょうか。

Webサーバーとは、IEやChrome・SafariなどのブラウザからWebサイトにアクセスしたときに、HTMLやCSS・画像などWebサイトを構成する必要な情報をブラウザに渡すソフトウェアのことです。

漠然とWebサイトの情報が入っている箱だと思っていましたが、厳密には高速でデータの受け渡しが行われている中の1つのソフトウェアだったんですね。

Webサーバーのソフトウェアにも、いくつか種類があります。大きくわけると下記の3つです。（Windowsの場合はIISもあります。）

Apache（アパッチ）
Nginx（エンジンエックス）
LiteSpeed（ライトスピード）

現在はApacheのシェア数が1番多い状況ですが、Nginxもシェアを拡大し続けています。そして最近徐々に人気が出てきているのがLiteSpeedなのですが、2015年頃に誕生していたにもかかわらず設定の難易度（面倒度？）からあまりメインで使われてはいなかったようです。

ネットアシストでは、最も人気の高いApacheの実績が多くノウハウも豊富となっています。

例えば、Apacheをインストールするだけではなく、ミドルウェアに合わせた環境構築と「表示スピードに特化したい」という希望に合わせた設定を組み合わせることで、ご期待に沿った能力を発揮することができます。

こういったApacheの駆動方式やミドルウェアのモード選択などの組み合わせは専門的な知識が必要となるため、サーバーのソフトウェアの設定でお困りの際は、ぜひネットアシストまでご相談ください。

HTTPのバージョンを確認しよう

HTTP/0.9やHTTP/2といったHTTPのバージョンを意識したことはありますか？

2021年3月時点で1番最新のバージョンはHTTP/3となっています。

レンタルサーバーなどでもHTTP/3が利用できるところも増えているようですが、ファイアーウォールなどのセキュリティ設定で不要なポートを閉じていたりとマメな会社の方がバージョンを上げるのに苦労するかもしれません。なお、HTTP/3は常時SSL化も必須です。

LiteSpeed・Nginxは対応しているようですが、Apacheは公式に対応したという発表がないのもなかなかバージョンアップが進まない原因の1つかもしれません。

このように、HTTP/1よりはHTTP/2、HTTP/2よりはHTTP/3と確実にバージョンが上がれば上がるほど通信速度が早くなるため、SEOにも有利になる可能性が高くなります。

少なくともHTTP/2以上のバージョンになっているかは確認してみましょう。

サーバー以外の要素も確認しよう

下記は「PageSpeed Insights」が一般的になってきたときに、マーケターかいわいでもよく話題に挙がる内容のため、ご存じの方も多いかと思いますので、さらっと。

・画像ファイルのサイズを小さくする

解像度の高いレティーナディスプレイの対策と並行しては結構難しいところですよね。

・新しい画像フォーマット（SVGやWebp）を使用する

Webpをウェッピーと読むのをこないだ知りました。Safariで対応していないということで敬遠していましたが、.htaccessへ下記コードを記入すると見られるようになりました。

# BEGIN EWWWIO
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)¥.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)¥.(jpe?g|png)$ %{REQUEST_URI}.webp [T=image/webp,E=accept:1,L]
</IfModule>

まとめ

まとめますと、今回私が1番お伝えしたかったのは、「SEOの対策としてサーバーの見直しも視野に入れてほしい」ということです。

Webマーケターとして色々と試行錯誤を繰り返していく中で、一喜一憂しながら対策を行うかと思うのですが、意外と土台となるサーバーに目を向ける機会は少なかったのではないでしょうか。

これからより一層Googleはユーザー（閲覧者）に寄り添うアップデートを行うことを考えたときに、やはり通信回線の高速化は進むでしょうし、Webサイトも表層の改善だけでは限界がくるかと思います。

サーバーを変えるだけで爆速化してスコアも上がり検索順位も上がってくれたら万々歳ですよね！なかなかそこまで単純な作りではないですが、色々手を尽くしたのに…とこれからの施策にお悩みの方などに「サーバーは盲点だったな」と新たな対策のきっかけになるような記事であれば嬉しいです。

ちなみに、サブスク動画が読み込みで止まってしまう現象にイライラした私は自宅のネット環境を国内最速といわれるNURO光にしようとしましたが、住んでいるマンションが非対応だったため泣く泣く断念し、ケーブルから「光」に変え、Wi-fiルーターも変えた上で有線接続にして今ではノンストレスで最大10デバイスくらい接続しています。

TVもスマートフォンもゲームも勉強（小学校の支給タブレット）もアレクサも…と、どんどんIoT（Internet of Things）の波が来ております…！