パフォーマンス50から90超へ。サーチコンソールを見ながら、しらみつぶしに直した話

今回は、自社サイトのページ速度改善について書いていきます。スコアの話をすると聞いて「数字を追いかけているのかな」と思われるかもしれませんが、動機はもっとシンプルなところにありました。もっさりしたWebサイトが、自分自身すごく嫌いなんです。逆に、サクサク動くサイトを使っていると、それだけで楽しい気持ちになります。その感覚が、そのまま今回の改善の出発点でした。

---

最初の画面に映っていたもの

改善活動を始めたとき、Googleのパフォーマンス診断ツールを開いて確認した画面があります。パフォーマンスが91、ユーザー補助・おすすめの方法・SEOがいずれも100——今でいえばそういうスコアが並んでいますが、最初にこの画面を確認したときは、パフォーマンスが50くらいの状態でした。

50という数字は、ページの表示がはっきりと遅いことを意味します。自分で使っていても「重いな」と感じるレベルです。そのまま放置する気にはなれませんでした。

ただ、焦って手あたり次第に直そうとしても意味がありません。何が問題でどこから手をつけるかを整理しないと、かえって時間がかかる。だから、Googleサーチコンソールのデータをベースにしながら、根本的に問題のある箇所をひとつずつ特定していくことにしました。

---

何を、どの順番で直したか

改善の対象として見えてきたのは、大きく二種類の問題でした。

ひとつは、無駄なユーザー取得関数の往復です。ページを表示するために必要なデータを取りに行く処理が、効率的でない形で繰り返されていました。これはページの表示を重くする直接的な原因のひとつで、整理することで読み込みの速さが変わってきます。

もうひとつは、ページの読み込み順の非効率さです。何をどのタイミングで読み込むかという順番が整理されていないと、ユーザーが最初に見る部分の表示が遅れます。これも地道に見直していきました。

「しらみつぶし」という言葉がしっくりくるくらい、一度に全部解決できるわけではありませんでした。データを確認しながら問題を特定し、修正し、また確認する、という繰り返しです。勘や感覚で動いていたわけではなく、サーチコンソールの情報を根拠にして修正を進めたので、改善されたかどうかを自分で確認しながら進められました。

こうした作業を積み重ねた結果、4つの評価項目すべてで90以上のスコアになり、一安心しました。

なお、こうした「使っていて迷わない・引っかからない」という感覚を大切にする考え方は、ページ速度だけでなくUIの設計にも共通しています。ダッシュボードの操作感についても以前書いていますので、あわせて読んでもらえると、僕が何を基準に設計の判断をしているかが伝わると思います。→ ダッシュボードはシンプルであるべき——情報量とボタンを絞ることで導線は変わる

---

コントラスト調整だけは、まだ悩んでいる

技術的な問題のほとんどは解決できましたが、ひとつだけ今も完全には決着していない部分があります。コントラストの調整です。

背景色と文字色の差が小さすぎると、読みにくくなります。これはアクセシビリティの話で、ユーザー補助のスコアにも関係してきます。ただ、コントラストを上げようとすると、メインカラーが自分の好みから離れていく感覚があって、そこが正直難しいところでした。

読みやすさとブランドカラーの好みが、完全には一致しないんです。

今のところは、見やすさを優先する方向で調整しています。どちらかを完全に諦めたくはないのですが、ユーザーが読みにくいと感じるサイトを作りたいわけではないので、ここは見やすさを軸に置くことにしました。まだ改善の余地があると思っているので、引き続き調整を続けていきます。

---

今回の改善活動を終えて、自分で Insight Cast を開いてみると、かなりサクサク感が出たと思います。適当に直したわけではなく、データを見ながら根拠のある修正を積み重ねてきた結果なので、改善されたという手応えがあります。

スコアの数字はあくまで目安です。それよりも、このサイトを開いてくれた事業者の方が、ページが重くてストレスを感じることなく、記事を読み進めてもらえる——そのためにやってきたことだと思っています。

---