こんにちは。takuです。
サイトを運営している方は、
自分のサイトの画像の読み込みが遅くて
「なんで?!」ってなったことは
ないでしょうか。
ページの立ち上がりの
重さの原因の一つは実は画像のデータ容量にあります。
今日はそれを無料で一気に改善するための方法を
お伝えしますね!
サイトページの読み込み時間を短縮する方法【動画講義】
サイトの読み込み時間が遅くなる理由は画像容量!
画像の読み込みに異常に時間がかかった事例
僕の経験談ですが、
ある時から自分の運営しているサイトのうちの一つが
一生懸命デザインしたのはいいのですが、
ページ画面の立ち上がりが異常に
遅いのを疑問に思っていました。
最初はWifiの電波の具合が悪いからかと
思っていましたが、場所を変えても、
回線を変えても、他の人のPCでみても
やはり読み込みが異常に遅い。
そして調べまくった結果、
自分がサイトで使っていた
画像が全部超絶重いものばかりだったことが
原因であることがわかりました。
[say name=”taku” img=”https://takudlc.com/wp-content/uploads/2018/06/吹き出し用taku(焦り顔)_03.png”]がーん![/say]
まさに素人ならではの盲点ですよね。
高画質の画像を使っていたのにはそれなりの
理由がありまして、それは
[say name=”taku” img=”https://takudlc.com/wp-content/uploads/2018/06/吹き出し用taku(嬉し顔)_03.png”] ただただサイトを綺麗に見せたい![/say]
という思いからでした。その思いが「重すぎ」ました。笑
高画質のjpeg画像や、大きな画像素材を使いまくっていました。
そして、さらにはphotoshopなどで加工した写真なども
png加工して大量に生産していました。
ちなみにpngはjpegよりもさらに容量が大きくなります。
それらの重い画像がそれがサイトの全体的な
読み込み速度を遅くし、さらには、サーバー自体の
制限容量をかなり占拠してしまっていたことに
気がつきました。
解決策は単純です。
実はサイト上に表示させる画像はそんなに
大きいサイズの画像を使う必要は全くありません!
なので、高画質の画像の大きさを単純に
画質を保ちながら縮小すればいいのです。
さらに503エラー頻発事件発生
僕は現在一つのサーバー(エックスサーバー )を
レンタルし、複数のサイトを運営しているのですが、
ある時、サーバーからこんなエラーメッセージが
頻繁に表示されるようになりました。
![](https://takudlc.com/wp-content/uploads/2018/07/スクリーンショット-2018-07-08-15.16.02.png)
自分のサイトのページを開いた際に
これになるわけですから、
これは大問題です!
運営していたトレンドサイトのアクセスPVが
爆発した時には必ずといっていいほど
頻繁に表示されるようになり、
一体何が原因なのかがしばらくわかりませんでした。
ブログ記事が2日で23万PVとかの時も
ありましたし、そういった場合はアクセス集中
によるサーバーの干渉とういことでまだ納得も
いくのですが、
ある時を境に、リアルタイムでのアクセスが
400−500PVでもこのエラーが頻発するようになり、
これが何か原因があると調べて見たところ、
わかりました。
やはり、重い画像が原因だったんです。
先ほども説明した通り、
ぼくは1つのサーバーをレンタルしていて
その中で複数のサイトを運営していたので、
一つのサイトの画像類が重すぎたことにより
サーバープランの制限容量の上限に近づいており、
それが原因で、同じサーバー内の別のサイトの
アクセス状況にまで影響を及ぼしていたという
ことなんです。
[say name=”taku” img=”https://takudlc.com/wp-content/uploads/2018/06/吹き出し用(汗顔)taku_03.png”]なんてこった・・ [/say]
サイトの読み込み時間を改善する方法
ではここから本題になります。
ではその読み込みが異常に遅い
サイトのページをどのように改善していくのか
ということなのですが、
それは単純な話、
アップロードする画像の大きさを縮小(リサイズ)すれば
いいんです。
縮小するといっても、トリミングしたり、
画質を落とすということではなく、
縦横比を保ちながら単純に縮小(リサイズ)すればいいのです。
サイトに表示させる画像サイズは、1Mあれば
十分綺麗なものを表示することができます。
例えば高画質の大きな横幅5000pxの画像素材であれば
2000px(全画面表示)もしくは、1200pxあれば
十分です。
リサイズすることで大幅に容量を小さくできます。
ただし縦横比は保つよう気をつけましょう。
ネット上で僕が愛用していた、無料画像
の素材サービスに関してはこちらを
参照ください。 ↓
![](https://takudlc.com/wp-content/uploads/2018/05/georgie-cobbs-467923-unsplash.jpg)
どれも素晴らしいサイトで、
僕自身大変お世話になっているのですが、
どの素材もファイルサイズが大きくなることに
あまり注意を払っていませんでした。
実はpngなんかは8Mものもとかを
普通にアップしたりしていました。
jpegでも7MBとか4MBとか普通にありました。
これはいくら何でもやりすぎです。
サイトの立ち上がりが遅くなるのは当たり前です。
サイトのサイズを変更するためには
では使用する画像を適切なサイズに
縮小するための方法をお伝えします。
まず無料画像編集のおすすめサイトとしては、
「Canva」photo Editor があります。
![](https://takudlc.com/wp-content/uploads/2018/10/スクリーンショット-2018-10-04-14.09.38-1024x515.png)
早速そのページ上に、
リサイズしたい画像素材をアップロード
します。
そして「サイズを変更」箇所を選択すると
このように簡単に画像をリサイズすることが
できます。
![](https://takudlc.com/wp-content/uploads/2018/10/スクリーンショット-2018-10-04-14.14.31-1024x574.png)
有料の画像編集ソフトPhotoshopの場合
有料のものであれば、
もちろんPhotoshopなどでも
「ファイル」タブから→「書き出し」→
[Web用に保存]を選択すると、
保存する際に、サイズ変更が可能ですし、
ウェブ用に適した
解像度で保存することが可能になります。
僕はPhotoshopを愛用しているので、
そちらで調整するようにしました。
![](https://takudlc.com/wp-content/uploads/2018/10/スクリーンショット-2018-10-04-14.19.34-1024x767.png)
![](https://takudlc.com/wp-content/uploads/2018/10/スクリーンショット-2018-10-04-14.21.51.jpg)
Photoshopのダウンロード方法に関してはこちら↓
![](https://takudlc.com/wp-content/uploads/2018/06/Adobe-Photoshop-アイキャッチ画像.jpg)
画質を保ちながら容量を大幅に圧縮する無料ツール
さらに、今ある画像を画質への影響なくさらに容量を
大幅に小さくできるものすごく優れたツールがあります。
これに幾度となく助けられ、僕のサイトは無事に
サイトの読み込み速度は改善されました!
画像ファイルの形式によって、使うツールを選択して
利用してくださいね。
まとめ
今回、このような自分のサイトの読み込みが
遅くなることで痛感したことは、
質の高い画像を使用することはとっても重要なのですが、
必要異常に高画質のものは、「ページの読み込み速度」を
著しく遅くしてしまう場合があるということ、
そして、その場合は画像をリサイズしてウェブに適した
大きさに編集してからアップロードすることが
おすすめだということですね。
綺麗な画像をたくさん使いたいと思っておられる
方は多いと思うので、
この辺りに気をつけてぜひ参考にしていただき
よいサイト作り、サイト運営を心がけていきましょう。