飽き性な男のムダ話

飽き性な男のムダ話

飽き性な男のムダ話

アプリ・ソフト

2020/05/06

【画像圧縮・SEO】表示速度の評価が26点のブログを80点超えに改善した話

こんにちは~Taku(@takumuda_1093)です。

皆さんは「PageSpeed Insights」を知っていますか?
ブログやサイトを運営している人なら誰もが知っていると思います。
今回は「PageSpeed Insights」での評価とサイトの改善策についてまとめていきます。

PageSpeed Insightsについて

「PageSpeed Insights」はGoogleが開発したサイトの表示速度をチェックするツールです。
使い方は簡単で、チェックしたいサイトのURLを入力するだけで、100点満点中何点かを評価してくれます。

PageSpeed Insightsのサイトへ行く▶︎

サイトの表示速度をこまめにチェックすることはとても大切なことです。
理由はユーザビリティとSEOに大きく影響してくるからです。
せっかくユーザーが訪問してくれても、表示速度が遅いと離脱率が上がり、サイトから出て行ってしまいます。
SEOにも悪影響で、検索エンジンからの評価が下がり、検索してもヒットしないという悲しい現実に追い込まれてしまいます。

過去の記事でも話したことがあるけど、自分は重いサイトがあるとすぐにイライラしちゃうな…。
Taku
Taku
リュウイチ
リュウイチ
俺は待つ方だが、待つ時間は勿体ないかもしれないな。

モバイル版の評価を重視する

この「PageSpeed Insights」で特にチェックしたいのがモバイル版の評価です。

皆さんもご存知の通り、現在はパソコンよりもスマートフォンが主流の時代です。
「モバイルフレンドリー」という言葉がある通り、Webサイトはレスポンシブ対応するのが当たり前になりました。
Googleをはじめとする大手テクノロジー企業もWebサイトのモバイル対応を強く推奨しています。

なので、スマートフォンでサイトを見たときに、表示速度が遅いということは大問題ということになります。

と、偉そうに書いてみたけど、実際にこのブログの評価がどうなのかを調べてみたよ!
Taku
Taku
リュウイチ
リュウイチ
嫌な予感しかしねーな。

驚愕の評価◯◯点

実際に自分のサイトがどうなのかを調べると、パソコン版は74点

こっちはまあまあの評価ですが、モバイル版は…

驚愕の26点…!!

 

リュウイチ
リュウイチ
これはひでーな。
それな…逆にどうしたらこんな点数が取れるのか驚いたよ…
Taku
Taku

本来ブログ制作の段階で確認しておくべきだったのですが、つい速度チェックの存在を忘れてしまっていました。
とりあえず、なんとかしないとSEO的にも悲惨なので、何が原因か調べてみることに。

画像が一番の原因だった

ページ下部を見てみると「改善できる項目」という箇所があります。
そこを見てみると画像に関しての項目が多いのです。

このブログは画像は勿論、イラストの画像も多く扱ってるからね…
Taku
Taku
リュウイチ
リュウイチ
重い理由もよくわかるな。

とりあえずやれることはやって、少しでも表示速度が上がるようにすることに。

元々対策していたこと

「TinyPNG」

これは元から対策していたツールになります。

「TinyPNG」は画像を目では分からないレベルで圧縮してくれるWebサービスになります。
登録等は不要で、圧縮したい画像をドラッグ&ドロップするだけで、圧縮画像を作成してくれます。
なんとも言えない外見のパンダが特徴のこのサイトは知っている方も多いかと思います。

TinyPNGのサイトへ行く▶︎

これは専門学生時代に担当の先生から教えてもらって、ずっと愛用しているよ!
Taku
Taku
リュウイチ
リュウイチ
簡単に圧縮してくれるのはいいな。難しい設定もいらないみたいだしな。

改善策① 画像サイズを見直す

まず、思い当たる節があるとするなら「画像サイズ」たった1つでした。
「画像は大きい方が高画質になる」という単純な考えでやたら大きい画像サイズにしていたからです。
そのためリサイズは考えずに1000px以上の画像をポンポン置いていました。

これが原因だと思い、サイズの大きい画像はとにかくリサイズしていきました。
特に、記事内の画像はムダにでかかったため、横幅を660pxに統一しました。
すると評価が42点まで上がりました。(プラス16点)

やはり、画像サイズは影響していたようです。

ちなみにパソコン版は75点(プラス1点)だったよ。
Taku
Taku
リュウイチ
リュウイチ
パソコン版はほぼ変化なしか。

改善策② AMP

「改善できる項目」を見ているとやたら「AMP」という言葉が視界に入ってきました。

AMP?なんだそれ?
Taku
Taku

そう思いながら調べてみると、どうやらWordPress向けのプラグインだということがわかりました。
とりあえず、Googleがおすすめするプラグインなら間違いないと思い入れてみることに。
すると…

なんとプラグインを有効化しただけで60点まで評価があがったではないか!

パソコン版は78点と3点プラスでした。

リュウイチ
リュウイチ
モバイル版はプラス18点か。
そうそう!プラグインを入れると重くなるイメージがあったけど、逆に評価が上がって驚いたよ!
Taku
Taku

「AMP」は、GoogleとTwitterが共同で開発したプラグインです。
「モバイルでWebページを見たときに表示速度を高速化」させるために開発されたコンテンツです。
「意地でも読み込みに時間はかけさせない!」という考えで開発されているので、有効化するだけで、表示速度が速くなります。

AMPダウンロードページへ▶︎

機能の詳細等は調べるとたくさん出てくるから調べてみて!
Taku
Taku
リュウイチ
リュウイチ
ワードプレスを使ってる人は絶対入れておきたいな。

改善策③ EWWW Image Optimizer

画像リサイズとAMPを導入してもまだ60点台と良くない評価。

せめてあと10点は上げられないかと色々探索していると、あるプラグインを発見しました。
それは「EWWW Image Optimizer」というWordPressのプラグインです。

「EWWW Image Optimizer」は「TinyPNG」同様、画像を目ではわからない程度に最適化(圧縮)してくれるプラグインです。
しかも、WordPress内の「メディアを追加」にアップロードした時点で、自動的に画像を最適化してくれます。

EWWW Image Optimizerダウンロードページへ▶︎

これはマジで便利!
Taku
Taku

ちなみに、このプラグインを入れるよりも前にアップロードした画像もまとめて最適化することができます。

リュウイチ
リュウイチ
いちいち再アップロードする必要がないのは助かるな。

ユーザー評価も高かったので、早速入れて最適化してみると…

なんと評価が80点になりました!プラス20点です!!

今までさほど変化のなかったパソコン版に関しては95点まで上昇!プラス17点!!

すごくない!?すごすぎない!?
Taku
Taku
リュウイチ
リュウイチ
おう。確かにすげー上がったな。

とりあえずモバイル版を80点まで上げることができたので、訪問者の離脱やSEOの低評価はまのがれると思い今回はここで終了。
今後もさらに表示速度が上がるように工夫をしていきます。

ただ、ブログは何も触らず、チェックすると評価点が上下することがあるんだよね。
Taku
Taku
リュウイチ
リュウイチ
そのときによって評価が変わるのか。
そうそう。まぁ若干の差だけどね。だからあくまで目安として確認するのが一番かも!
Taku
Taku

まとめ

全体を通して、パソコン版で評価が高かったとしても、モバイル版は低速になりやすく、評価が悪くなることがわかりました。
画像は文字等のデータよりも容量が大きいので、圧縮は絶対に行うべきです。
もし、「サイトの表示速度が遅い…」「画像圧縮をしていなかった…」という方はぜひ上記の改善策を行ってみて下さい!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


SEARCH

検索

PROFILE

プロフィール

プロフィール画像

Taku

新米のWeb兼グラフィックデザイナー

専門学校でWebやグラフィックの技術を2年間学び、
印刷会社のデザイナーとして就職。

保育園児の頃からイラストを描くことが大好き。
オリジナルキャラクターのイラストを描いている。

ハマって得たムダな知識も、
誰かの役に立つはずだと信じてブログを開設。

好きになると誰よりも詳しくなるタイプだが、
冷めるのも凄まじく早いのが難点。