今回はサイトスピード編！

こんにちは。A-ROOM編集部です。
本記事にアクセスいただき、ありがとうございます！

多摩地域にあるWEB制作会社・エーウイングが運営する情報発信メディアとして、
少しでもWEBサイトご担当者様のお役に立てる情報発信ができればと思っております。

前回の記事では…

これからWEBサイトに関わる方向けにSEOについての記事を書かせていただきました。

いまさら聞けない！SEOって何？抑えておきたい３つのポイント【2021年度版】

上記記事ではGoogleの検索エンジン対策をすることが、
SEO対策になる事をお伝えしました。

今回はそのSEO対策の1つであるページの表示速度の改善について、
記事を書かせていただきます。

サイトスピードを改善をする理由

Googleが行った調査によると

2018年にGoogleが行ったモバイルページの速度に関する調査によれば、
サイトの表示までに3秒以上かかると40％以上のユーザーが離脱し、
さらに表示が1秒遅れるごとにコンバージョン率は７％減少すると言われています。

直帰率の関係

その他に直帰率について以下のようなデータがあります。

Source: Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

筆者も読み込みが遅いサイトは5秒くらい経過すると待てなくなってしまいます。
やはり調べ物をしていて、早く情報を知りたい！となっている時なので、
なんだかとても納得のデータです。

表示スピードはリピート率にも影響！

また、ページの表示スピードはユーザー体験に大きな影響を与え、
パフォーマンスが劣ったサイトと認識されてしまうと
79％のユーザーが再びサイトを利用したくないと感じるという調査結果もあります。

つまり表示スピードを改善するだけで、
ユーザーの直帰率・コンバージョン率・リピート率が改善できるということが分かりますね。

さてここからが本題です。

検索エンジンに評価されるサイトとして、ページの表示速度は重要となってきます。
表示速度の計測ツールは、いくつかありますが、弊社では以下ツールを活用しています。

Google提供「PageSpeed Insights」

 

本記事はGoogleが提供しているページ速度計測ツール「PageSpeed Insights」にて
スピードスコアを計測し、そこから分かった改善点を実際に筆者が反映した過程をご紹介します。

PageSpeed Insightsの特徴

はじまりは絶望的な数値から

今回対象としたサイトは、とあるBtoC向けサービスのランディングページです。
１ページもののサイトで、ファーストビュー・概要・特徴・料金表・お申し込みのセクションで
構成されたとてもシンプルなサイトでした。

主なサイトの仕様

初回のスコアは…

 

ななな、なんと14！ひぃぃ…。
一般消費者向けのサービスサイトなので今回はモバイルの数値を基準に改善を進めていきます。

ちなみにスコアの見方ですが、
50点が中央値で、50点以上なら世の中のサイトのページ表示速度より速いページであるという評価になるそうです。

100点は世界中のサイトのトップ10に入る速さと認識されるようです。
是が非でもトップ10になってみたくなりますが、まずは50点以上を目指して改善を進めていきます！

改善点と対策

スコアを計測した後は、改善できる点について計測結果画面で教えてくれますので、
それらを参考に進めていきます。

今回実施した改善点

上記の改善項目を踏まえ、実施した改善点は主に以下の４点です。

※今回は少し長めの記事となっておりますので、読み飛ばせるように上記見出しにリンクをつけております。

改善策１：ブラウザのキャッシュを活用

キャッシュとは過去に利用したデータを一定期間保存し、再利用する仕組みです。

WEBサイトの変更点がキャッシュの影響で反映されるまで時間がかかった経験はありませんか？
その場合は、キャッシュを強制クリアすると反映されたりしましたよね。

キャッシュを活用するメリット

WEBサイトはサーバーからデータを読み込んでページを表示する仕組みです。
サーバーの応答を待ってサイトが表示されるので、データ読み込みが遅くなればなるほどページの表示速度に影響を及ぼします。

そこでキャッシュの設定をしていると一度表示されたWEBサイトのデータをブラウザが保存してくれるので、
2回目以降の表示はサーバーを介さず表示をしてくれます。

つまりWEBサイトを表示するためのデータ通信が必要最低限になるので、
表示スピードの改善につながります。

キャッシュの設定はどこから？

主に「.htaccess」というファイルに記述をします。
サイトへのアクセスに関する様々なコントロールができるファイルです。

Google先生のキャッシュの推奨期間は、

です。基本的には7日以上の指定が良いとされています。

※更新頻度の高いコンテンツは、
更新したにも関わらず変更が反映されない現象が起きてしまうので、
コンテンツを見極め、期間設定をしましょう。

キャッシュ設定をした結果

スピードスコアの数値が14→26まで上がりました。
赤い枠で囲んだ数値が改善されたことが分かります。

 

 

平均の50点には、まだまだです！引き続き対策を進めます。

改善策２：動画の読み込み改善

Youtubeの埋め込みにしていましたが、診断結果の改善項目を見ていると
明らかにYoutubeが原因で遅くなっていると言われています・・・。
外部機能の埋め込みはどうしても重くなり、SEOの表示スピードの評価に響いてしまいます。

動画改善策として実施した３つのこと

26→34に向上

本当に若干の変化ですが、以下赤い枠部分の数値が改善できました。
まだまだですね。引き続き、改善を進めていきます！

 

改善策３：WEBフォントの読み込み改善

今回「Noto Sans JP」というWEBフォントを使用したサイトでした。
結論から言うと、今回サイトの表示スピードの評価を著しく下げていた原因はこの「Noto Sans JP」でした。

試しにフォントの読み込みを解除した数値がこちら・・・

赤枠部分が大きく改善しました。

「Noto Sans JP」はデザインで人気のフォント

無料で使える日本語フォントは英語フォントと比べて選択肢が少なく、
その中でも「Noto Sans JP」は知名度も高く、フォントの太さが6種類もあり、
いろんなデザインテイストに合わせやすいプレーンなフォントとして人気です。

しかし日本語フォントはアルファベットに比べ、ひらがな・カタカナ・漢字など取り扱う文字数が
非常に多く、データ容量が必然的に大きくなるというデメリットがあります。

また、フォントの太さの種類が豊富＝データ容量がさらに大きくなる要因となっていました。

デザイン上、代替できない場合

サイトスピード改善だけを優先すれば、フォントを変える・使用するウェイト数を減らすという選択が
できますが、デザインはユーザーを惹きつける重要な要素です。

デザインの世界観も大切にしつつ、表示スピードも改善させたい・・・！
という至上命題を突きつけられました。。

「Noto Sans JP　サイトスピード　改善」などとキーワード検索をすると、
デザイナーさんには人気だが、開発の現場では不評という面白い現象が起きていました。

そして対策について色々調べた結果、以下の２つのいずれかで対応ができることが分かりました。

２の先行読み込みを採用

今回は複数のフォントウェイトを使用していたため、
サブセット化の手間がかかると判断し、2の方を先に試してみました。

するとフォント解除した時と同じスコア「91」という結果を得られました。
サブセット化はまた別の機会にやってみたいなと思っています。

改善策４：画像周りの改善

スコア「91」まで来ているので、十分かなとも思ったのですが、
まだまだ改善点が出ているので、さらに高みを目指して画像周りの改善に着手をしました。

次世代フォーマットとは？

Webサイトで使用されている画像はjpg、png、gifなどが一般的ですが、
Googleが開発している「webp（ウェッピー）」という拡張子のフォーマットがあります。

webpは、jpgやpngをそれぞれ30％程度ファイルサイズを圧縮できると言われています。

次世代フォーマット仕様の記述へ変更

webpへの変換は、WEBサイト上に様々な無料の変換ツールがありますので、
それらを活用し、以下のような記述で次世代フォーマットでの画像設定をします。

その他の画像周りの最適化

ちなみにwebpへの変換以外に、以下のようなことも同時に対策しました。

全ての対応が完了したら

スコア100になりました！

ちなみにその他の画像周りで実施した「画像の幅と高さを設定」に関しては、
これまでの読み込み速度に関する改善とは別でCLS（Cumulative Layout Shift）の数値改善を行いました。
上図の赤枠の数値です。

さいごに

いかがでしたでしょうか？
おさらいになりますが、今回は以下のようなステップで数値が変わりました。

今回のサイトの場合、使用しているWEBフォントが評価を下げる要因になっていたことが分かります。
表示スピードに関わる原因はサイトによって異なりますので、
計測ツールを使用しながら、一つずつ問題点を解決していくことで表示スピードを向上させることができます。

まずは自社サイトの調査から！

まずは自社サイトのスコアがどれくらいか、ぜひ調べてみてください。
Googleが提供しているページ速度計測ツール「PageSpeed Insights」はこちら。

もし不明点や改善したいことなどありましたら、
お気軽にご相談いただければと思います。

WEBサイトを管理するご担当者様のお役に少しでも立てれば幸いです！
引き続きA-ROOMをよろしくお願いいたします。

お問い合わせ