ココブログ-新米パパの子育て奮闘記-

赤ちゃんに関わるイベントや生活の知恵などをリアルな体験談を交えて紹介します(*'ω'*)!

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

こんにちは。ココです。

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

 

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

 

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

 

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

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

 

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

 

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

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

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

 

 

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

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

 

こんな記事もあります↓

www.koko269.com

 

 

 

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

インターネット上では色々な速度を調べる方法が掲載されていますが、一番信頼できるのはやはり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が便利
  • 画像圧縮が上手くいけば大幅に表示速度を改善できる

 

 

この記事で

ブロガーさんも

読者さんも両方

幸せになれます

ように(*'ω'*)♪

 

 

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

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

 

 

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