こんにちはネコ部長です。
ブログの記事が増えてくると使用している画像なんかも増えてきます。
画像が増えるとサイトの読み込み速度が遅くなってきて、見ている側は
イライラしてサイトを閉じてしまいますよね。
実際のところ私もここで苦戦しているところですが、まだまだ初心者なも
ので、できることから始めています。
そこで今回は、画像処理でサイトの表示速度を改善するための方法を
お話ししていきます。
画像を改善する方法は？
画像を改善する方法には主に、
・トリミングして容量を減らす
・JPGやGIF、PNGで保存する
があります。
トリミングはよくやっているのですが、JPGとかGIFとか
正直、初心者の私にはよくわからないので何かほかに簡単に
できる方法はないかと思っていました。
そこで気づいたのが、はてなフォトライフでした。
その前に自分のサイトの表示速度を調べておきましょう。
Googleアナリティクスを使う
サイトの表示速度を調べるのですが、今回はGoogleアナリティクス
を使ってみます。
https://www.google.com/intl/ja_jp/analytics/
調べ方
アナリティクスを開いたら赤丸のところクリックして、次に青矢印を
クリックします。すると次のような画面になります。
画面の一部を公開していますが、ここで記事の表示速度が見れます。
右上のところがサイトの平均速度になりますが、その下のグラフの
赤色のところが特に表示速度が遅いということです。
しかし平均が23.1秒って、サイト自体がかなり重たいということ
ですね。すいません・・・
次は青矢印の下にある「速度についての提案」のところをクリックします。
するとページごとの提案数が出てきますので、重たい記事の
合計数のところをクリックすると、Page speed insightsの画面に移ります。
すると、自動的に分析しくれてそのサイトに対しての提案事項が出てきますので、
それに対しての改善をしていくわけですが、私のサイトの問題はやはり画像にある
という事が判明しました。
それでは早速、はてなフォトライフで画像を改善していきましょう。
はてなフォトライフの使い方
フォトライフの使い方はいろいろありますが、今回は画像の圧縮を
していきます。
赤丸のところをクリックするとナビが出てきますので、
はてなフォトライフをクリックします。
するとフォルダー画面が出てきますので、上の設定のところを
クリックします。
フォトライフの設定画面になるので、ここで詳細を決めていきます。
私は、画像サイズを600PXで画質は70％に設定しました。
あとは画像をアップロードしていけばいいだけです。
それでは写真を比べてみましょう。
圧縮後の比較
まず、画像をそのまま使用した際の写真がこちらです。
圧縮前は285KBありましたが、圧縮後はどうでしょうか。
なんと155KBになっていて、130KBも減っています！
写真も見比べてもどう変わったのかがわかりませんね。
このように取り込む画像を簡単に圧縮することができるのです。
まとめ
画像処理で読み込む表示速度を改善するポイントは、
・自分のサイトの問題点を調べる
・はてなフォトライフの設定で圧縮する
です。
はてなフォトライフではこれ以外の細かい設定もできますので、
それについては、また次の機会でお話ししていきます。
しかし、今までの記事の画像を全部やり直すことを考えると
ちょっとしんどいですね。
しかし、これも私のサイトを見にきていただいている読者様の
ためにも少しづつ改善していきたいと思っています。
ご覧いただきありがとうございました。
９０秒で画像加工処理してブログに投稿する方法 やり直し！アフィリエイトシリーズ
- 作者: 秋田秀一
- 出版社/メーカー: サクセスキユーブ株式会社
- 発売日: 2016/03/21
- メディア: Kindle版
- この商品を含むブログを見る
