みなさんはWebサイト、Webアプリのパフォーマンスは気にしていますか？

「ある程度遅くなければいいかな」「そんなに影響ないだろう」

と軽視していると、知らない間に顧客を逃すことに繋がり兼ねません。

 

今回はページのパフォーマンスが与える影響、そしてパフォーマンスを上げる技術をご紹介していきます。

 

1. パフォーマンスの影響

読み込み速度の違いが顧客の動きに如何に影響を及ぼすか、調査してみました

以下に2つご紹介します。

◼︎Think with Google

(出典)

Think with Google

上記はGoogleが調査したものですが、ページ離脱率の「増加率」が4パターン表示されています。

例). 読み込み1秒で100人離脱するとした場合

読み込み3秒 … 132人離脱

読み込み5秒 … 190人離脱

読み込み6秒 … 206人離脱

読み込み10秒 … 223人離脱

 

◼︎Reffine

(出典)

Reffine

上記はReffine社より、読み込み速度と離脱率の相関グラフです。

横軸が読み込み時間 (秒)、縦軸が離脱率 (%) になっています。

 

また、世界の企業の成功例もいくつか紹介されていましたので、日本語訳して掲載します。

・ルノーの例

「世界最大級の自動車メーカーであるルノーが、ウェブサイトパフォーマンスの最適化に着手したところ、劇的な成果が得られました。

最大のページ要素の読み込みに必要な時間を1秒未満に短縮したことで、離脱率が14%低下しました。同時に、ルノーではコンバージョンが13%増加し、この相関関係がビジネスの成功に直結することを実証しました。」

・エコノミックタイムズの例

「インドにとどまるエコノミック・タイムズ紙は、毎月4,500万人以上のユニーク・オーディエンスにビジネス志向のニュースを報道している。しかし、同社のウェブサイトはレスポンスに問題を抱えていました。

この問題に対処し、ウェブサイトの平均ページ速度を改善することで、同紙は読み込み時間を80％短縮することに成功しました。この結果、離脱率が43%低下し、ページスピードが再びユーザーの維持に一役買うことになりました。」

 

2. パフォーマンスを測る方法

ここまで読んでくださった方、ご自身や会社のサービスがどのくらいのパフォーマンスなのか、気になっているかと思います。

Google提供で、URLを入力するだけで誰でもパフォーマンスを測定できるページがありますのでご紹介します。

https://pagespeed.web.dev/

サンプルとして試しに松山市のサイトを測ってみました。

結果が以下です。

 

上記のようにモバイル表示とPC表示それぞれでスコアを出すことができます。

 

パフォーマンス：Googleからの総合評価スコアです。0〜100で判定され、90以上だと緑色になります。

First Contentful Paint：最初にテキストや画像が表示されるまでの時間

Largest Contentful Paint：最大サイズのコンテンツが表示されるまでの時間

Total Blocking Time：ユーザー操作が効くようになるまでの時間

Cumulative Layout Shift：突然のレイアウト変更 (例えば画像の読み込み遅れによるテキストの位置変動など) による不安定さ

Speed Index：テキストや画像がすべて表示されるまでの時間

 

ページの単純な読み込み速度は、左下の「Speed Index」に当てはまるかと思います。

 

3. パフォーマンスを最適化する方法

ページの読み込み速度を向上させるためには、以下のような方法や技術を使用することが効果的です。

◼︎画像の最適化

画像はWebページのデータの大部分を占めることが多いため、これを最適化することが重要です。具体例を挙げます。

・圧縮ツール（例えば、TinyPNGやCompressor.io）を使って画像のファイルサイズを削減する。

・写真にはJPEG、透明な画像にはPNGを使用するなど、適切なフォーマットを意識し、WebPなどの次世代フォーマットも検討する。

・自動的に最適化してくれるWebフレームワークを使用する。

例) … Next.jsのnext/imageコンポーネント、Gatsby.jsのgatsby-imageプラグイン、Nuxt.jsの@nuxt/imageモジュール

◼︎ブラウザキャッシングの活用

ブラウザキャッシングを利用すると、ユーザーが再度ページを訪れたときに、以前ロードしたリソースを再ダウンロードせずに済むため、ページの読み込み速度が向上します。

◼︎サーバー応答時間の短縮

サーバー設定を最適化したり、高速なホスティングサービスを選択するなど。

また、サーバーキャッシングやDBのクエリの最適化も有効です。

◼︎SSR (サーバーサイドレンダリング)

クライアントサイドレンダリング（CSR）では、ブラウザがJavaScriptを解析してHTMLを生成しますが、SSRではWebページのHTMLがサーバー側で生成されてブラウザに送信されるため、初回のページ表示が迅速になります。

SSR採用例

… Nuxt.js (デフォルト)、Next.js (デフォルト)、Angular (SSR機能追加ライブラリ有)

◼︎Prefetching (プリフェッチ)

バックグラウンドでリンク先のページをあらかじめ読み込む技術です。

ユーザーがリンクをクリックしたときにはページがすでにロードされているため、読み込み時間なしで即座に遷移ができます。

Prefetching採用例

… Next.jsの<Link>タグ、Gatsby.js：デフォルト、Nuxt.js：「nuxt-link」使用

 

4. 最後に

いかがでしたでしょうか。

 

文字を読む時代から動画の時代へ。YouTube動画からShort動画の時代へ。…

と、より短いものがウケる傾向が強まっているように思います。

 

昨今はスマホ内に興味を引くものがたくさんあるため、昔と比べて読み込みを待ってくれない、すなわち “地球人総せっかち時代” に突入していると言っても過言ではないかもしれません。

そんな今だからこそ、パフォーマンスの見直しは意味があるのではないでしょうか。

また気になることを記事にしていきますので、よろしくお願いいたします。

最後までお読みいただきありがとうございました！

先日、情報通信月間参加行事として、弊社開催で「『未来を創る』AIツール活用セミナー」を行いました！

たくさんのご参加ありがとうございました。

生成AI、およびそれに関連するツールを受講者の皆さんと一緒に使用しながら、これからの未来について考えることができました。大変嬉しく思っています。

 

高知、松山、それぞれ4日間に渡り、開催いたしました。

 

AIはただの便利ツールではなく、人間の可能性をサポートしてくれる “コラボレーションツール” でもあります。

様々なワークショップを通じてみなさんにそれを体感していただきました。

 

また、AIがAIを評価するといったこれまでになかった概念について、今の時点からイメージを持ってもらうこともできました。

 

これからのAI技術

生成AIを普通に使うだけでなく、たっぷり時間をとり、これから一般層でも話題になっていくであろうRAG (検索拡張生成) も体験していただきました。

個別のドメインにも対応でき、個人データ・企業データを活用していく上での現実的なイメージを持っていただけました。

 

また、直近で出たOpenAIのモデル「GPT-4o」を用いた音声対話を使うことで、音声入力による手間のなさ、そして応答のスムーズさも体験していただきました。

マルチモーダルにより、AIと人との間の距離が格段に縮まったことを体験ベースで感じていただけたかと思います。

 

受講者の声

◼︎受講者レビュー

40代男性：「一人では新しいものに面倒でなかなか手が出せないので、新しいツールを実践的に教えてもらえて分かりやすかったですし、すごく楽しかったです。」

20代男性：「生成AIも使い方次第で色々使えることが分かったので、何に使おうかと今頭がグルグルしてます。」

40代女性：「今後も継続して、このようなセミナーを続けてほしい。」

 

◼︎受講者満足度

◼︎内容について

◼︎受講理由

◼︎受講して良かったと思った点

 

さいごに

各地開催で1ヶ月以上に及んだセミナーですが、開始時と終了時を比較しても生成AI周りはかなり技術が進んでいます。

進化が速いというのは、逆に言えばチャンスの回数が多いという風にも捉えられるかと思います。

皆さんがAIテクノロジーに積極的に触れていき、市民の側から世の中を変えていく ( = シビックテック) ことができればなという願いのもと、スタッフ一同尽力いたしました。

 

またなんらかの形でセミナーを開催したいと思いますので、その時は是非ともよろしくお願いいたします。

私たちと一緒に未来を創っていきましょう！