<通知>本ブログ記事には広告が含まれる場合があります

【初心者向け】ブログの表示速度が遅い?画像を一括で軽くした結果

こんにちは。ココです。

今回はあなたのブログの内容をしっかりと読んで欲しい方向けに、ブログ毎(記事毎)の表示速度の確認の仕方と、画像を一括で軽くする方法について紹介したいと思います(*’ω’*)!

 

皆さんもインターネットで色々なサイトを見て行く中で、表示速度が遅くてイライラしてしまったことはありませんか?同じように、皆さんのブログをせっかく読者の方が見に来てくれても、表示速度が遅いとまともに内容を見ることなく帰ってしまいます。

 

一般に表示に3秒以上かかるサイトは40%の人が帰ってしまうなんてデータもあります。

 

実は僕自身もブロガー仲間のさいちゃんに教えてもらうまで、自分のブログが遅いだなんて気づいていませんでした。

 さいちゃん、その節はお世話になりました(*’ω’*)♪

 

頑張って書いた記事が読まれることなく閉じられるなんて、そんな悲しいことが無いようにこの記事を読んで、自分のブログを快適サクサクブログにしちゃいましょう(∩´∀`)∩

 

実際にこの方法を使った結果、

ページ表示速度のスコアが2倍以上の

32点→65点にアップしました!

 

 

この記事はこんな方におすすめ!

  • 頑張って書いた記事をたくさんの人に読んでもらいたい
  • 読者の方をイライラさせたくない
  • 初心者の内から基本を学んでおきたい

 

こんな記事もあります↓

 

 

 

ページの速度を調べる方法

インターネット上では色々な速度を調べる方法が掲載されていますが、一番信頼できるのはやはりGoogle純正のページ速度計測サイトであるでしょう。

リンクを貼っておきます。

 

PageSpeed Insights

 

使い方は至って簡単です。一番上の検索バーのところに、自分のブログの調べたいページのURLを貼り付けて分析を押すだけ。

f:id:koko2525:20180704214548p:plain

 

すると、ページのスコアが100点満点中何点なのかを表示してくれます。モバイルとパソコンの両方のスコアを確認して、改善の余地があるかを確認しましょう。もちろん、スコアは高ければ高いほど良いです。

f:id:koko2525:20180704214553p:plain

 

 

初心者が簡単にできる速度向上方法

僕のような初心者の場合、なかなかサーバに関する事やブラウザに関わる事についてはハードルが高くて手を出しづらいと思います。

 

そこで、初心者でも割と簡単にページ表示速度の改善ができる方法として、画像の圧縮が考えられます。読者の方がページ上の画像を見るには、当然その画像データがダウンロードされる必要がありますよね?

 

その画像データが大きいとダウンロードに時間がかかり、結果、ページ表示速度が遅くなってしまうわけです。

 

 

画像圧縮ソフト

画像を圧縮するには、Windows純正のアプリケーションであるペイントを使うこともできますが、複数の画像を一括して処理することができないので、かなり手間がかかってしまいます。そこで活用して頂きたいのが、以下のフリーソフト

 

Ralphaです。

 

ページにアクセスして頂き、ダウンロード→展開(解凍)→Ralphaのアイコンをダブルクリックで起動できます。

 

 

Ralphaの使用方法

アプリケーションを起動したら以下の手順で進めていきます。

 

①画像をフォルダにまとめて置く

変換したい画像を一つのフォルダにまとめておきます。その方が、後でブログに貼る時にも作業性が良いです。

f:id:koko2525:20180704220332p:plain

②Ralphaの初期設定

画像の赤丸部分2か所について設定を行います。ブログの画像だと、横幅が600pxあれば十分と言われてます。

大きさ:長編基準(px)

長編:600(px)

f:id:koko2525:20180704215636p:plain

 

③画像の入ったフォルダからRalphaの画面に画像をドロップする。

フォルダとRalphaの画面を以下のバランスで配置します。このくらいのバランスでないと、後ほど説明する画像変換ボタンが隠れてしまいます。

すべての画像を選択するにはコントロールボタンとAを押せばいいです。

画像を選んで選択するには、コントロールボタンを押したままで左クリックすればいいです。

変換したい画像が選択し終わったら、フォルダからRalphaの空白部分へ移動します。

f:id:koko2525:20180704215835p:plain

 

④変換ボタンを押す

画像の丸印の緑色のEnterに似たマークを押します。

f:id:koko2525:20180704220216p:plain

 

⑤フォルダを確認する

先程画像を入れていたフォルダに、新しくResizedという名前のフォルダが増えているはずですから開いてください。

f:id:koko2525:20180704220911p:plain

 

⑥画像を確認する

圧縮された画像が表示されますから、それをブログで使用してください。

ちなみに圧縮前は6000キロバイト以上あった画像が

f:id:koko2525:20180704221222p:plain

 

圧縮後は63キロバイトまで圧縮されています。100分の1ですね。

f:id:koko2525:20180704221228p:plain

因みにそれほど画質にこだわりのない方は、画像を保存する際にJPEGを選んでください。画像を軽くできますよ。

 

ページ速度の変化

先日公開した扇風機に関する記事でテストを行いました。

 

圧縮をせずに画像を使用した場合

モバイル:77点

f:id:koko2525:20180704221426j:plain

パソコン:32点

f:id:koko2525:20180704221324j:plain

パソコンの速度はLOW(遅い)と判定が出ていますね。

 

圧縮した画像を使用した場合

モバイル:79点

f:id:koko2525:20180704221650j:plain

パソコン:65点

f:id:koko2525:20180704221643j:plain

モバイルについては2点アップに留まりましたが、

パソコンについては32点→65点

2倍以上のポイントアップとなりました。

 

 

まとめ

  • ブログに載せる画像が重いと表示が遅くなる
  • 画像圧縮はRalphaが便利
  • 画像圧縮が上手くいけば大幅に表示速度を改善できる

 

 

この記事で

ブロガーさんも

読者さんも両方

幸せになれます

ように(*’ω’*)♪

 

 

今回も最後までお読みいただき

ありがとうございました!

 

 

コメント大変喜びます(/・ω・)/

 

 

コメント

タイトルとURLをコピーしました