ガチ重要!サイトページ【表示速度】調べ方と画像圧縮方法!

Googleさんが

「スマホページ向けのインデックスも検索順位の評価をします!」

と発表しちゃったもんだから、これから私たちはモバイルサイトにも十分気を付けなきゃいけなくなりましたよね。

Googleサーチコンソールから届いたメール『モバイルファーストインデックス』とは?!

そこで、読者さんが1番ストレスを覚える

サイトの表示速度の調べ方と改善方法について書いていきたいと思いますよ。

あなたのサイトの表示速度を調べよう

表示速度を調べるツールはいくつかありますが、

ここは王道でいきましょう。

PageSpeed Insites

自分のブログのURLを「 https://~ 」の形で入力しましょう。

「私のサイト、まだhttpだ!」って人、httpsの重要性をちゃんと知ろうね

入力してから右の【分析】をクリックすると1分弱程度で結果がでます。

「モバイル」「パソコン」の両方が緑色で Good が出れば問題なし。

ユーザーにストレスなくサイトが表示されていることになります。

で、これはある方のサイトを調べた結果です。

パソコンサイトの方は緑で問題ないですが、モバイルサイトが赤でLOWとなっています!

↑ 「 いったい誰のサイト?!」って、そうあなたです。

ヤバたん!ヤバたん!!

では、いくつか改善方法があるので順番にやっていきましょう!

これらの作業を済ませると、表示スピードが上がっているハズですよ。

Googleアナリティクスで速度が遅いページを調べる方法

まずGoogleアナリティクスを開きましょう!

ホーム画面から【 行動 】→【 サイトの速度 】→【 ページ速度 】の順にクリック。

すると右側にページごとの速度表が出てきます。

1つだけ赤いグラフがありますよね?これが表示速度の遅いページということになります。

問題のページを確認したい場合は、左側にある小さな▢から矢印が出ているアイコンをクリックすればOK。

だいたいは、その記事に貼られている画像だったり動画だったりするので圧縮してあげればいいです。

今さら聞けない画像の圧縮とは?

「よし、わかった!画像を小さくすればいいのね!」

と、画像のサイズを小さくしようとしたあなた。

気持ちはわかるよ。

でもせっかくの画像を全部小さくしてしまうとサイトの魅力が半減してしまいますよね。

つまりこういう事です ↓ ↓ ↓

わかりますか?

じゃあ20枚くらい画像を一気に圧縮してくれるサイトを次で紹介します~

Tiny PNGの使い方と圧縮方法

私がよく使っているおススメのサイトです。

https://tinypng.com/

違和感半端ないパンダさんがメインキャラです。

赤枠をクリックして自分のパソコンフォルダに入ってある画像やイラストなどを選びます。

例として、さっきの変なおじさんの画像を圧縮してみましたよ。

いきなりパンダが「フーレイ!!」とばかりに、持っていた花火を打ち上げます。

194.4KBから48KBにまで圧縮されました!

75%の圧縮率になります。

で、【download】をクリックして圧縮された画像を再び自分のパソコンに入れます。

このサイトは20枚まで一気に圧縮してくれるようになっています。

EWWW Image Optimizer画像圧縮するプラグイン

圧縮してくれるプラグインで有名なのは

EWWW Image Optimizer です。

これはワードプレスのメディアに入ってある画像を一括で最適化してくれるプラグインです。

インストールして【有効化】をしたら設定に入っていきましょう!

設定する箇所は2つのみ!

まずは【BASIC】タブを開いて

Remove Metadataのところにチェックを入れます。

これは「メタデータを削除する」という意味で、不要なテキストを自動で削除してくれます。

次に【Convert】を開きます。

1番上の「コンバージョンリンクを非表示」にチェックを入れます。

これは圧縮することで画質が落ちすぎないようにしてくれます。

では早速画像の圧縮をしていきましょう。

このプラグインはすでにアップロードされてある画像に効果があります。

自動で圧縮をしてくれないので時々、この作業をする必要がありますよ。

【ダッシュボード】から【メディア】をクリックし、【一括最適化】をクリックします。

すると下のような画面になります。

青いバナーに書かれてある【最適化されていない画像をスキャンする】をクリックし、

スキャンが始まり、画像の最適化が始まります。

まとめるとこうなる

正直、EWWW Image Optimizer は使い勝手がいいですが、

このプラグインで処理した画像をTiny PNGはさらに圧縮をはかってくれます。

なので私は、かなり大きめの画像やイラストがを利用するときは

Tiny PNGを使うようにしています。

めんどくさいけどね。

以上、サイト表示速度の調べ方と画像圧縮についてでした!

関連記事

  1. スマホで出来る!フェイスブック登録方法

  2. 【モバイルファーストインデックス】って何?いつから?

  3. 自分のブログを採点してみよう

  4. 最新!ブログの記事修正の方法!そのゴミ記事どうすんの?

  5. 「とにかく更新さえすれば、いいんだよね!ね?」という考えは捨ててくださ…

  6. ブログ初心者が考える、4つの悩みと解決方法は?

  7. Googleに記事がインデックスされているか確認する方法

  8. ブログは【キーワードが全て】と言っても過言ではない

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。