ブログのページスピード(表示速度)高速化！画像を完璧に圧縮する方法

みなさんこんにちは、雑記ブロガーねこきじ(@netkijiblog)です。

今回お届けするのはブロガーさん向け

「画像圧縮によるページスピードの改善方法」です。

ねこカノ
ねこカノ
いまさら何言ってんの？みんなもうとっくにやってるでしょ┐(｡・ε・｡)┌
ねこきじ
ねこきじ
それが見てるとやってない人が結構いるんですよ(;^ω^)

 

みなさんもご存知のように、Googleも「スピードアップデート」というページ読込速度を、ランキングの要素に含める事を繰り返し発表してきました。

実際ページの読み込みに必要な時間が3秒以上の場合、約40％のユーザーがストレスを感じて離脱してしまうと言われています。

 

きっとみなさんも経験があると思います、中々サイトが表示されず

「遅いからもういいや」

「つぎつぎー！どうせ他でも書いてあるし」

そんな風にたった数秒の違いでも、ユーザーさんは離れてしまうんですよね(´・ω・｀)

 

そこで今回はページスピード(読み込み時間)について、以下の2つについて書いてみたいと思います。

  • ページスピードが与える悪影響
  • ページスピードＵＰ(主に画像の圧縮)

 

今回紹介する画像の圧縮にはプラグインは使いませんが、地道な作業が必要です。

「ページスピードを本気で改善したい人」以外は、読む価値がない事を先に伝えておきます(;^ω^)

今回の方法は、PageSpeed Insightsを使って画像をダウンロードする方法です。

知ってる方には何の価値もないのでお帰り下さいｗ

 

ごたくが長いので、具体的な方法だけ知りたい人は

目次から「ページスピード(読み込み速度)高速化の方法」に飛んでください。

ページスピードが与える悪影響とは

グラフの画像

ページスピードが遅いとページランキングって落ちるの？

Googleが2018年7月に導入した、スピードアップデートはみなさんもご存知ですよね。

「モバイル検索ランキング決定要因としてモバイル向けページの表示速度を利用する」

 

詳細を分かりやすくまとめるとこうなります。

  • モバイル検索 → モバイル向けページの表示速度データで判断
  • デスクトップ向け検索 → デスクトップ向けページの表示速度データで判断

 

つまり、モバイル/デスクトップ それぞれのページスピードで判断しますよ！って事ですね。

理想としては、モバイル/デスクトップ両方のページスピードが速いに越したことはありません。

 

ただし、ページスピードがランキングに影響するのはごく一部のものすごく遅いページだけです

ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。

検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。

 

具体的な数字を調べていた所、こんな情報に行きつきました。

Googleのコンテンツ開発者Paul Lewis氏による「PageSpeed Insights」に関する発言です。

デスクトップで90以上、モバイルで85以上が好ましい

 

 ページスピードがページランキング以外に与える影響

先ほどの通り、ページスピードは余程遅いページではない限り、ページランキングに影響はしません。

ねこカノ
ねこカノ
じゃー別にやらなくてもいいじゃん！

Kissmetricsが公開している、サイトのパフォーマンスが購買行動に与える影響の結果ではこうなります。

  • 3秒以上かかるページは40％が離脱する
  • パフォーマンスに不満を持ったサイトは79%が再び利用しない
  • 読み込みが1秒遅れるごとに16％のユーザーの満足度が失われていく
  • ページの表示速度が1秒遅れることで、7％のコンバージョンの縮小

たとえページランキングが下がらないとしても、他にこれだけ影響が出ちゃうんです(;^ω^)

 

その他にも

「ユーザーの47％が2秒以内のWebページを読み込みを望んでいる」

「モバイルインターネットユーザーの73％が、ロードが遅すぎるWebサイトに遭遇した」

とも書かれているので、最低でも2秒以下(表示されるまで)にする必要があると思います。

 

モバイル向けの高速表示が可能な「AMP」があるのも、まさにユーザーの為ですよね。

ねこカノ
ねこカノ
ごたくはいいから、早くやり方教えてよ！

 

ブログやサイトの表示スピードを確認する

最適化前後の変化を確認する為に、まず現状がどうなってるのかを把握しておく必要があります。

まずは3つの計測ツールを使って調べてみて下さい(*´ω｀*)

いずれも自分のサイトのURLを入力して、クリックするだけでOKです。

他にもChromeデベロッパーツール使う方法やプラグインを使う方法もありますが、これが一番簡単です。

 

ウェブページのコンテンツを解析し

モバイル/パソコン 種類別にページスピードや改善する方法が分かる「PageSpeed Insights」

 

モバイルの速度、推定離脱率、業種別の速度比較が出来る 「TestMySite」

 

Googleの提供するPageSpeed Insightsと、Yahoo!の提供するYSlowを使ってサイトのパフォーマンスを解析&改善する方法が分かる「GTmetrix」

 

何度か計って平均的な数値を記録しておくと良いと思います(時間帯でも差が出ます)

ちなみに私が使用しているレンタルサーバーは「JETBOY」

月額290円と格安ですが、上の画像の通り十分なスピードが出ています。

 

ページスピード(読み込み速度)高速化の方法

今回お伝えするのは画像の圧縮ですが、ページスピードを上げるには他にも方法があります。

例えば「PageSpeed Insights」で解析すると、改善余地がある項目には修正方法が表示されますよね。

これを1個ずつ潰していけば高速化されますが・・・

ねこカノ
ねこカノ
何か色々書いてるけど全然分からないよ(´ཀ`)

そんな人の為に手っ取り早く点数やスピードが上がる、1番簡単な画像の最適化(圧縮)を選んだ訳です。

 

今回私がおすすめする方法では、プラグインは使いません。

 

理由は、それが一番圧縮率が高く完璧だからです。

プラグインやその他の圧縮方法は簡単な反面、圧縮率が甘くなり易いんです。

ねこきじ
ねこきじ
Google先生の基準は厳しい！(´;ω;｀)他にいい方法があったら教えて下さいm(__)m

 

プラグインを使わずに完璧に画像を圧縮する方法

画像の圧縮には、先ほどページスピードの計測に使用した「PageSpeed Insights」を使います。

え！？ってなる人もいるかもしれませんが、実はここで完璧に圧縮した画像がダウンロード出来るんです。

画質の劣化もほとんど無しと思っていいです。

 

まずは「PageSpeed Insights」でページを解析(URL入力)して、最適化済みの画像をダウンロードします。

ページ解析後、上の画像のように表示されます。

赤枠の「画像、JavaScript、CSSリソース」の部分がリンクになっているので、そこをクリックしてダウンロードします。

 

そしてダウンロードした圧縮済み画像ファイルを、元の画像ファイルと入れ替えるだけです。

入れ替えはどんな方法でも良いですが、FTPソフトを使うと作業効率が良いと思います。

ねこきじ
ねこきじ
念のため元の画像ファイルは保存しておくと安心(*’ω’*)

 

注意点としては、元のファイル名が大文字だったり日本語になっている場合、若干違うファイル名になったり変なアルファベットに置き換えられてしまいます。

※ファイル名が違う場合、当然入れ替え(上書き)にはなりませんのでご注意下さい。

 

この方法には欠点もあります。

  • 1ページごとに画像をダウンロードして画像の入れ替えをしなければならない
  • 掲載済みのページしかダウンロードが出来ない
  • クリックで拡大するような大きな画像(メディアファイル)には使えない

 

ブログトップページはもちろん、1ページごとに使用してる画像を入れ替える必要があります。

同じ画像を使い回すなら一つ最適化すればOKです。

ちなみに、Twitterを貼ったりするとそのアイコンまでダウンロードされたりしますが、意味はないので無視で構いません。

ねこカノ
ねこカノ
めんどくさ！こんな事やってられないよ
ねこきじ
ねこきじ
そう言いなさんな(;^ω^)　こういう地道な作業が、ユーザーの満足度に繋がってるんだよ

 

 画像圧縮方法の違いによるページスピード比較

試しにどれだけ点数やスピードに差が出るか、この記事を使って実験してみますｗ

  • 未圧縮の場合
  • プラグインを使って最適化した場合
  • PageSpeed Insightsで最適化した場合

 

比較に使用するプラグインは使用者も多い「EWWW Image Optimizer」を使います。

この記事のここまでの使用画像は8枚です。

 

まずは最適化前(未圧縮)

 

続いて「EWWW Image Optimizer」で最適化後

 

そして今回の「PageSpeed Insights」でダウンロードした物に入れ替による最適化後

 

モバイルの点数に関しては2～3点の差(96～99点)しか出ませんでした。

「EWWW Image Optimizer」での最適化後の点数にほとんど差がないのは、ファイルの問題かなと思います(;^ω^)

 

画像使用枚数や、使用する画像ファイルサイズが大きい(圧縮可能率が大きい)ほど差が出やすいです。

このブログは出来うる限り高速化(広告無しならモバイル/PC共に100点)してありますが、この状態でも使用画像によっては30点位は簡単に差がでます。

 

最適化がされていない程効果は大きいと思いますので、是非お試しください(*´ω｀*)

 

補足(レンタルサーバーについて)

Twitterで何人かの人にページスピードに関することを質問頂きましたが、サーバーが原因の人もいました。

 

例えばこんな風に表示されてしまう場合、画像を圧縮しても気休めにしかならなかったりします。

 

ねこきじ
ねこきじ
この画像は、エックスサーバーとロリポップ

 

こういう場合は、サーバーの項目でマイナスになるので、中々得点やスピードは出ません。

どの時間帯でもこうなる場合は、プランを変更するか、レンタルサーバーを乗り換えるしか方法はないです。

 

最近高速化で流行ってるレンタルサーバーは「ConoHa WING」みたいですね！

私は使ったことが無いので分かりませんが、検索すると評判もかなり良さげです。

 

もっと安いのが良いなら、私も現在使用中の「JETBOY」がおすすめです！

月額290円でこれなら文句なし！

ねこきじ
ねこきじ
ちなみに引っ越しは、中の人が代行作業で無料でやってくれるよ(*´▽｀*)

 

まとめ

ページスピードにどこまでこだわるかは人それぞれです。

ぶっちゃけ、より良質な記事を書いた方がページランキングも上がると思いますｗ

 

ですが、ユーザーの満足度やCVにも繋がるので、最低でも何らかの方法で画像を圧縮する事をおすすめします！

ねこきじ
ねこきじ
カメのような地道な努力が、ウサギを負かすと信じましょう٩( ‘ω’ )و

 

画像圧縮方法まとめ
  • PageSpeed Insightsからダウンロードする
  • EWWW Image Optimizerなどのプラグインやソフトを使う
  • TinyPNGやOptimizillaなどのオンラインサービスを使う

ブログ運営