ネコ部長のお役立ちブログ

         明日から活かせる知識・話題など何かのお役に立つブログです

【はてなフォトライフ】画像処理でサイトの読み込み速度を改善する基本的なやり方について

スポンサーリンク

f:id:nekobuchou:20190323213824j:plain

こんにちはネコ部長です。

ブログの記事が増えてくると使用している画像なんかも増えてきます。

画像が増えるとサイトの読み込み速度が遅くなってきて、見ている側は

イライラしてサイトを閉じてしまいますよね。

 

実際のところ私もここで苦戦しているところですが、まだまだ初心者なも

ので、できることから始めています。

そこで今回は、画像処理でサイトの表示速度を改善するための方法

お話ししていきます。

 

画像を改善する方法は?

画像を改善する方法には主に、

・トリミングして容量を減らす

・JPGやGIF、PNGで保存する

があります。

pr.toriaez.jp

トリミングはよくやっているのですが、JPGとかGIFとか

正直、初心者の私にはよくわからないので何かほかに簡単に

できる方法はないかと思っていました。

 

そこで気づいたのが、はてなフォトライフでした。

その前に自分のサイトの表示速度を調べておきましょう。

Googleアナリティクスを使う

サイトの表示速度を調べるのですが、今回はGoogleアナリティクス

を使ってみます。

https://www.google.com/intl/ja_jp/analytics/

調べ方

f:id:nekobuchou:20190323222318j:plain

 

アナリティクスを開いたら赤丸のところクリックして、次に青矢印を

クリックします。すると次のような画面になります。

 

f:id:nekobuchou:20190323222612p:plain

 

画面の一部を公開していますが、ここで記事の表示速度が見れます。

右上のところがサイトの平均速度になりますが、その下のグラフの

赤色のところが特に表示速度が遅いということです。

 

しかし平均が23.1秒って、サイト自体がかなり重たいということ

ですね。すいません・・・

 

次は青矢印の下にある「速度についての提案」のところをクリックします。

 

f:id:nekobuchou:20190323224431p:plain

するとページごとの提案数が出てきますので、重たい記事の

合計数のところをクリックすると、次の画面になります。

(なんかめちゃくちゃ多いですね・・・。すいません)

 

f:id:nekobuchou:20190323224711p:plain

 

すると提案事項が出てきますので、それに対しての改善をしていくわけです

が、私のサイトの問題はやはり画像にあるという事が判明しました。

 

それでは早速、はてなフォトライフで画像を改善していきましょう。

はてなフォトライフの使い方

フォトライフの使い方はいろいろありますが、今回は画像の圧縮

していきます。

 

f:id:nekobuchou:20190323232215j:plain

赤丸のところをクリックするとナビが出てきますので、

はてなフォトライフをクリックします。

するとフォルダー画面が出てきますので、上の設定のところを

クリックします。

 

f:id:nekobuchou:20190323233734j:plain

フォトライフの設定画面になるので、ここで詳細を決めていきます。

私は、画像サイズを600PXで画質は70%に設定しました。

あとは画像をアップロードしていけばいいだけです。

 

それでは写真を比べてみましょう。

圧縮後の比較

まず、画像をそのまま使用した際の写真がこちらです。

f:id:nekobuchou:20190323235234j:plain

 

圧縮前は285KBありましたが、圧縮後はどうでしょうか。

 

f:id:nekobuchou:20190323235804j:plain

 

なんと155KBになっていて、130KBも減っています!

写真も見比べてもどう変わったのかがわかりませんね。

このように取り込む画像を簡単に圧縮することができるのです。

まとめ

画像処理で読み込む表示速度を改善するには、

・自分のサイトの問題点を調べる

・はてなフォトライフの設定で圧縮する

です。

 

はてなフォトライフでは細かい設定もできますので、それについては

また次の機会でお話ししていきます。

 

しかし、今までの記事の画像を全部やり直すことを考えると

ちょっとしんどいですね。

しかし、これも私のサイトを見にきていただいている読者様の

ためにも少しづつ改善していきたいと思っています。

 

ご覧いただきありがとうございました。

 

90秒で画像加工処理してブログに投稿する方法 やり直し!アフィリエイトシリーズ

90秒で画像加工処理してブログに投稿する方法 やり直し!アフィリエイトシリーズ