ブログは読み込みの重さで離脱されがち!重い画像をキレイに圧縮しよう

Pocket

ブログの読み込みが重い原因と直し方

 

 

日々の作業やお勉強、お疲れさまです!

アネオトです。

 

 

 

読者さんがあなたのブログ記事から
すぐに離脱してしまう原因として、
かなりデカイのが……ページの重さです。

 

 

読者さん
全然表示されない~!イライラする~!

もういいや!他の軽いページさがそ!

 

 

お客さんは『さっさと情報を知りたい』
『ムダな待ち時間が大嫌い』ですので、
重いページの表示は待ってくれません!

 

 

 

 

しかし普段、回線の安定した
自宅などでブログを書いていると、
自分のブログが軽いのか重いのかって
気づきにくいんですよね!

 

 

 

だけど実は外出先から見ると
(不安定なWi-Fiを利用していると)

 

意外と重くてなかなか繋がらなかった!

 

 

なんてこともあります。

 

 

 

そして読み込みに2~3秒ほどかかると
半数の人が離脱するというデータも出ています!

 

 

 

アネオトもスタバのWi-Fiを使っていて
ちょっと調べものがしたくなったとき、
「うお~~全然表示されね~~!」という
ページには5秒もガマンできませんでした……

 

 

 

そんな中、表示の速い軽いサイトはありがたかったです!

 

 

 

家で閲覧するぶんには問題なくても、
なるべくページを軽くさせる努力は
しておいたほうがいいでしょう!

 

 

 

 

あなたのブログがPCやスマホから見て
重いと感じるようでしたら、
以下のことが原因かもしれません。

 

画像が重いのかも?

 

たいてい、画像がムダに重くて
読み込みに時間がかかっていることが多いです。

 

 

軽量化は意外とカンタンなので、
以下の3点を踏まえて
軽くした画像を掲載するようにしましょう!

 

 

  • 画像自体のサイズを小さくする
  • 画像の重さを軽くする
  • 画像の拡張子を適切なものにする

 

 

詳しく見ていきましょう。

 

 

 

 

 

大きい画像を小さくリサイズする

 

スマホで撮影した写真をそのまま貼り付けると、
メチャクチャでかいはずです。

 

(※「iPhone 6s」の場合、横4032px・縦3024px)

 

 

 

画像素材サイトで配布されている画像も、
モノによっては2000pxくらいの
大きいサイズになっていたりしますよね。

 

 

 

ブログに掲載する画像は、
だいたい横幅700pxほどでじゅうぶんです!

 

 

 

元のまま載せると無駄に大きくて重いので、
縮小しちゃいましょう!

 

 

たいていの画像作成ソフトに、
サイズ変更機能は備わっているはずです。

 

 

 

「ふだん画像編集ソフトを使わないから不安」
でしたら、Web上で画像サイズ変更が
手軽にできる便利なサービスがおすすめです~!

 

 

便利サイト icon-chevron-right 画像リサイズツール

 

 

 

 

 

画像の容量を圧縮する(軽くする)

 

画像の大きさには問題なくても、
画像が高画質すぎて重いケースもあります。

 

 

見た目のクオリティはそこそこ保ったまま、
容量を軽減させたいところです!

 

 

 

画像作成ソフトで圧縮率を調整して
書きだす(=保存する)やり方が一般的ですが、
見た目が劣化してしまう(汚くなってしまう)
ことが多いのが悩みどころです。

 

 

 

画像を見た目キレイなまま容量圧縮してくれる
Web上のサービスがあるので、ご紹介します!

 

 

.jpg画像を軽く icon-chevron-right JPGイメージをオンライン上で圧縮する

 

.gif画像を軽く icon-chevron-right オンラインでGIFとアニメーションGIFを圧縮

 

.png画像を軽く icon-chevron-right TinyPNG または PNGイメージをオンラインで圧縮する

 

 

 

 

 

拡張子(jpg、png、gif)は最適か?

 

Web上で使える画像の拡張子はこの3種類です。

 

それぞれこのように使い分けましょう。

 

.jpg(.jpeg)

色数が多いもの
(写真、グラデーションを使った複雑な絵など)

.gif

色数が少ないもの
(カンタンな図など)

 

アニメーション

.png

画像の一部が透過されているもの
(背景を透過させたいアイコンなど)

 

劣化させたくない、キレイに見せたい画像

 

 

 

 

ブログに掲載する画像は、
たいてい「.jpg」になると思います。

 

 

 

「キレイになるなら全部pngにすれば間違いないじゃん!」

 

と思うところですが、
色数の多いものをpngにするとかなり重くなるので、
写真などはjpgにしておきましょう!

 

 

写真ほど色数は多くないけど、
gifにするには色数が多いかなという
画像(イラストの場合が多いです)は
pngでいいでしょう。

 

 

 

はてなブログの場合、pngは使わないほうが吉!

はてなブログでは何故か、
「.png」画像をアップロードすると、
元より大きい容量サイズになり、
やたら重くなってしまいます。

 

参考 icon-chevron-right 【画像圧縮】はてなブログでPNG形式はNG!ファイルサイズが勝手に増加して重いページに…

 

 

 

 

 

youtubeなどの埋め込みが多いのかも?

 

YouTube動画やツイッターの投稿など、
埋め込み機能を使って1ページの中に
バンバン貼りまくると重くなってきます。

 

 

「無駄に貼り付けすぎかな~」と
思うものがあれば外したり、
埋め込みではなく普通のリンクに変えるなど、
工夫してあげましょう!

 

 

 

ちなみに、動画の埋め込みを
軽くさせるテクニックもありオススメです。

 

(はてなブログ用に書かれていますが、
ワードプレスでも似たようにできます)

 

参考 icon-chevron-right はてなブログにYouTube動画を埋め込むと重くなる!ので軽くする方法を紹介

 

 

 

 

 

スクリプトが複雑なのかも?(上級編)

 

ちょっとこれは上級者向けのお話なのですが……

 

不必要なHTMLCSSのソースが混ざっていたり、
重いjavaScriptが入っているというケースです。

 

 

 

ブログのテンプレート自体が
複雑すぎて重いものだったり、
無駄な機能を読み込みまくっていたりするなら
見直した方が良いかもしれません。

 

 

 

 

また、ワードプレスをお使いの場合、
契約しているサーバーのスペックによって
ページスピードが変わってきます。

 

 

あまりよろしくないサーバーを使っている場合、
良いものに乗り換えるのも手かもしれません!

 

 

 

 

信頼できるサーバーのまとめはこちらです。

 

 

 

 

 

いろいろご紹介しましたが、
画像の点検が第一優先ですね。

 

 

読者さんにありがたがられる、
軽くて親切なブログを目指していきましょう~!

 

 

 

 

最後まで読んでくださってありがとうございます!

自由化メルマガ無料講座はこちら。好きなこと×ブログ×メルマガ=自動収入!趣味ブログと秘伝の技で成功し、社畜を脱出したノウハウを全て教えます!ネットビジネス自動化のしくみ&始めかたガイドブック計3冊、200ページ以上をメルマガ限定無料プレゼント
Pocket

アネオト

元社畜デザイナーのゲーマー姉弟ふたり組です。
会社で人生に絶望……
そこからネットビジネスで生活が一転し、
今はノンストレスで好きなことをして日々すごしています。

どうやって変わったのか、詳しい経緯はこちら!

あわせて読みたい