読者です 読者をやめる 読者になる 読者になる

Deeper & Deeper

深く、深く。

写真ブログを軽くするためにやっていること。

ブログ-ブログカスタマイズ

「ブログは軽い方がいい」というのは写真ブログにも当てはまるはず。

私がブログの軽量・高速化のために行ったことを書いてみます。

とても初歩的な内容なので慣れている方には物足りないかもしれません。ご了承くださいm(__)m


事前準備

PageSpeed Insights

URLを貼り付けるとページ読み込み速度を評価してくれるGoogleのサービスです。便利。

ただし、評価は厳しい……というか「100点」になる基準がGoogleのトップページなので、普通のサイトではあまり高い評価は出ません。

例えばはてなのトップページなんてパソコン59、モバイル29です。

なので60ぐらいあればいい方、70あれば十分だと思います。

満たない場合こういうことを気を付けようというのが今回の記事です。


ブログデザインをよりシンプルに!

まずこれは大前提です。

私のメインの方のブログ

ph0-t-0rip.hateblo.jp

サイドカラムのあるデザインを止めて、極力シンプルなテーマを取り入れたらイエローゾーンに入りました。

f:id:ot0rip604:20161006172922j:plain

写真だけでなく他の記事も書きたい! という場合、当サイトのようにサブブログで分け、写真だけに専念してしまうのもありだと思います。

その方が写真も見てもらえますし(-"-)

※追記
ブログのトップページに表示される記事数。デフォルトでは7ぐらいになっていると思いますが、やや多すぎるので減らすと多少速くなります。

ほとんどの場合これだけで十分ですので、以下は「気持ち速めに」程度の対策です。


写真を圧縮する

これも重要です。たまにですが、サイトは読み込めてるのになかなか写真が表示されないサイトがありますよね。

写真が圧縮されていないサイトです。

写真ブログなのに写真を圧縮しても大丈夫?

と思わないでもないですが、普通にPCやスマホで見る分だと圧縮してあろうがなかろうが大差ないでしょう。

私も以前は未圧縮高解像度写真を上げていましたが、ただ容量を食うだけなのでやめました。

もしどうしても高画質で見てもらいたいのならば、Flickerなどの外部サービスをお勧めします。


さて、方法です。

写真を撮られる方の多くは管理や加工に画像処理ソフトを使っていると思います。

そういうソフトにはたいてい画像を圧縮する機能があります。

例えばPhotoshop Lightroomをお使いの場合だったら、

ファイル→書き出し で、書き出し設定の中に「ファイル設定」というのがあります。

f:id:ot0rip604:20161006172923j:plain

私の場合は70%前後に圧縮して書き出しています。これだけでも大分違うと思います。

もしソフトをお持ちでない場合は、フリーソフトの「JTrim」がおすすめです。非常に軽いソフトなので、単純にトリミングしたいときなどよくお世話になってます。

forest.watch.impress.co.jp

JTrimを開いて、ファイル→保存オプション から「保存の品質」で任意の数値を入力することができます。

f:id:ot0rip604:20161006172924j:plain

これで、次回から保存する際は設定した数値で圧縮してくれます。たったこれだけです。

※JTrimの上部アイコンにある「保存」は上書き保存なので、間違えて元画像に上書きしてしまわないよう気を付けましょう。メニューの「ファイル」から「名前を付けて保存」もしくはCtrl+Shift+Sで別名保存できます。

写真をリサイズする

はてなブログをお使いの方は、はてなフォトライフを使用されている方が多いでしょう。

ここで「オリジナルサイズの画像を保存する」にチェックしていませんか?

f:id:ot0rip604:20161006172925j:plain

どれだけ大きな写真を用意しようと、実際にブログで表示されるサイズは800pxぐらいです。

つまり、それ以上大きな写真をアップロードしてもただ表示が遅くなるだけ。

だからここは外しておくべきでしょう。

フォトライフが上限いっぱいになることも減りますし、なにより大きすぎると個別の写真ページで画面からはみ出してしまいます。


まず書き出す段階で800px前後にしておくと、アップロードが速いのでおすすめです。


写真関連のポイントは以上です。ここからは人によっては必要ないかもしれませんが、細かいブログの設定になります。


シェアボタンをカスタムする

はてなブログの記事下にあるTwitter等のシェアボタン、デフォルトでは重いようです。

shiromatakumi.hatenablog.com

カスタムしちゃいましょう。


サイドバーのはてブ数を非表示に

f:id:ot0rip604:20161006172926j:plain

はてなブックマークと言えばピンクの文字のブクマ数ですが、これ、実は文字ではなくて画像なのです。一つなら大したことはないのですが、複数表示されていると、取得するのにわずかな時間が生じるそう。
だからサイト内ではなるべく非表示にしておきましょう。

参考
brian.hatenablog.jp


JQueryの取得先をはてな

これも細かいことですが、JQueryをブログに読み込んでいる方は、はてなから配布されているものを読み込みましょう気持ち若干速くなるような気がします。

参考
www.naenote.net


はてなブログProに登録している方は広告を非表示にした方がよさそうです。PageSpeed Insightsで画像を最適化しろと怒られますが、画像というのはほとんど広告です。

f:id:ot0rip604:20161006172927j:plain



スター非表示

スター画像もいちいちアイコンを表示しているので、消せるならば消しちゃいましょう。はてなにおける重要なコミュニケーション手段なので迷いもありますが……。




大体こんな感じでやっています。何だかんだでデザインの影響が一番大きいので、極力シンプルにしてしまうのが一番手っ取り早いです。

ちなみにおすすめのテーマはこちら

ZEN for Hatena Blog - テーマ ストア

余計な要素をそぎ落とした、まさに「禅」なテーマです。サイドカラムがないぶん写真も大きく見せられるので、写真ブログにもってこい。

広告を非表示にする