【UX向上】モバイルのサイトスピードを 14点→67点 にした方法。

スポンサーリンク
スポンサーリンク
スポンサーリンク

はじめに

【UX向上】モバイルのサイトスピードを 14点→67点 にした方法。

サイトスピードの改善

ランドゥ
ランドゥ

こんにちは、ランドゥです。サイトスピードを改善しませんか?

さっそくですが、あなたのサイトの読み込み速度(=サイトスピード)を調べてみましょう。

PageSpeed Insights

こちらは、Google社によるPageSpeed Insightsというサービスです。入力したURLのサイトのスピードを点数化してくれる優れものです。

アクセスはこちらから

PageSpeed Insights

この記事の内容を実践すると…

さて、結果は何点でしたか。一般的に判断基準はこのようになっています。

  • 0点~49点 ▶ 遅い
  • 50点~89点 ▶ 平均的
  • 90点~100点 ▶ 速い

もし、あなたの点数が絶望的だったとしても大丈夫。

一般的にモバイル(スマホ・タブレットなど)の点数の方が悪く出ますが、僕のこのブログのトップページは当初14点でした。😱

しかし、この記事に書いた内容を実践した結果67点まで向上しました。53点のアップです。

シードゥ
シードゥ

なんや、満点の人も多い中、大して良くないやろ。

なんてお思いの方もいることでしょう。確かにページ速度はSEOに重要と言われていますが、このサイトのような意見もあります。

僕個人としては、画像が多いブログならやむ負えない部分もあるため、致命的な点数を脱せればいいこと、読者の体感として早いと思ってもらえる、UXの向上が目的であることを踏まえて記事を書きました。

今回の記事を書くにあたって改善には手を尽くしていますが、さらに点数があがれば追記でご報告します。

それでは、説明していきます!🙃

改善した3つのステップ

その1. 画像を圧縮するプラグインを入れた

まず、先ほど書いたように画像が多いブログを運営している場合、それらを最適化することが点数を上げる近道です。

こちらの記事で徹底的に検証したプラグインを導入するだけで、簡単に画像を圧縮して読み込み速度を上げることが出来ます。

テストサイトのアイキャッチ画像

ちなみに検証は風景写真ばかりのテストサイト(記事参照)で行ったのですが、点数が4点しか向上していないという結果に、不信感を抱かれる方も入るでしょう。

後述しますが、メディアが多い記事は仕方ないです。この記事ではトップページの速度を改善することがメインなので、とりあえず記事で紹介したプラグインをインストールして読み進めてください。

その2. 不要なリソースを除外した

トップページにおいて、これは結構効果が出ました。段階を踏んで最終的に43点。当初から29点の向上です。

詳しい手順はこの記事で紹介しています。

その3. Googleフォントの削除/全画像の最適化

残る改善できる項目は

Google fontsの削除/全画像の最適化

さて、前回記事の43点という結果ではまだ納得できませんでした。Googleから提案された改善策はこちらです。

  • 使用していないCSSの削除

つまり、GoogleフォントやプラグインのCSSが装飾として反映されていないものまで読み込まれ、結果ページのFirst Paintが遅くなっているということです。

それに加えて、全てのメディアの最適化も行ってみました。その結果がこの67点という点数につながりました。

ちなみに、パソコンではほぼ満点を獲得しています。

具体的には、その1その2で導入したプラグインの設定を変えただけです。

Googleフォントの削除

Autoptimize設定の「追加」より、Googleフォントを削除します。

全画像の最適化

それに加えて、SmushのDASHBOARDの「BULK SMUSH NOW」を繰り返し押して、ブログ内のすべてのメディアを最適化しました。

(無料版だと一度に最適化できるデータ量が限られています。)

メディアの多い記事の画像を全て最適化しても大きな改善は見られませんでしたが、アイキャッチなどが複数表示されるトップページにおいては、画像の最適化によってこのような結果が得られます。

まとめ

UX向上なら「軽い」感覚が大事

ランドゥ
ランドゥ

対策お疲れ様。点数は上がった?

向上した方、おめでとうございます!😆

表示が速いサイトが優先的に上位に表示されるという情報をもとにした、SEO対策の利点もありますが、なにより読者読み込み中に離脱したくならない軽さかということがUXの向上では大事ですよね。🙃

(文責・ランドゥ)

コメント