【簡単】WordPressサイトで画像圧縮して、サイトを軽量化する方法
WordPressで画像圧縮と軽量化をしたい人「WordPressの画像圧縮や軽量化ってどうすればいいんだろう？ とりあえずWordPressでブログ運営しているけど、画像の最適化とかって、よく分からないです。具体的なやり方を、必要最低限の情報で教えて欲しいです。」
こういった疑問に答えます。
本記事の内容
- WordPressサイトで画像圧縮して、サイトを軽量化する方法
- WordPressサイトで「アップ済みの画像」を軽量化する方法
- 重たすぎるページは「アナリティクス確認→個別修正」でOKです
この記事を書いている僕は、プログラミング歴５年ほど。
WordPressが得意分野でして、WordPress制作事業で稼いできました。
» 参考：フリーランスエンジニアとして月収100万円を稼いだ方法
今回のテーマは「WordPressの画像軽量化・圧縮」です。
サイトが速いことは、読者満足度の向上に繋がり、かつSEOにも影響します。本記事を読みつつ、画像が軽くて、読み込み速度の速いサイトを目指しましょう。
※基本的にはMacユーザー向けで解説します。
WordPressサイトで画像圧縮して、サイトを軽量化する方法
手順は次のとおり。
- 手順①：Automatorで画像を自動リサイズ
- 手順②：JPEGminiで軽量化したあとにアップロード
手順①：Automatorで画像を自動リサイズ
これはMac限定ですが、初期インストールされている「Automator」というアプリを使います。そして、下記画像のように設定します。
具体的な手順は「Automatorのアプリを起動→アプリケーションを選択→写真：イメージをサイズ調整を選択→1,200pxに設定」という流れです。
ダウンロード完了したら、アイコンに画像をドラッグ＆ドロップするだけです。
なお、「なんで1,200pxなんですか？」と聞かれそうですが、その回答は「1,200pxくらいだと、PCで画像が綺麗に見えて、かつ、重たすぎないから」です。
もちろん、リサイズ作業は自分でやってもいいですが、毎日やることなので、自動化した方が良いですね。
更新情報：2018年8月5日
Automatorで画像をリサイズを自動化しなくても、JPEGminiで自動リサイズできることに気が付きました。なので、手順①は、不要となりますm(_ _)m
» 参考：JPEG画像を劣化なしで圧縮・リサイズしてくれるMacアプリ「JPEGmini」
手順②：JPEGminiで軽量化したあとにアップロード
JPEGminiというアプリがおすすめです。
JPEGmini | Download the Free Mac App
Put Your Mac through the JPEGmini Diet!
無料でも使えるのですが、複数画像を一括で軽量化するには、有料版のダウンロードが必要です。
3,000円ほどしますが、「本気でブログを頑張るぜ」って方は投資として購入するのもありだと思いますよ。
なお、画像の種類には「JPG・JPEG・PNG」などがありますが、基本的には「JPG・JPEG」を使いましょう。JPGとJPEGはほぼ同じでして、PNGだけはちょっと性質が異なります。
詳しくはググっていただけたらと思いますが、結論だけ書くと「PNGは重たいからNG」です。なので、PNG画像を使いたくなったら、JPGに変換してからWordPressにアップロードしましょう。
※PNG→JPGの画像変換は、Macのプレビューアプリで変換できますよ。
補足：技術に詳しい方向け
技術に詳しい人からは、「WordPressの自動リサイズで良くないですか？」といわれそうですが、結論はそれでもOKです。 とはいえ、無駄に重たい画像をサーバーアップしまくるのは、あまり良くないかな、というのが僕の考えです。
リサイズ＆軽量化した方が、サーバーにも優しいですし、自動リサイズ後の画像も軽量化されるわけなので、やったほうがいいと思っています。
WordPressサイトで「アップ済みの画像」を軽量化する方法
方法は２つあります。
- 方法①：EWWW Image Optimizerを使う（簡単です）
- 方法②：サーバーから直操作で画像軽量化する（すこし難しい）
方法①：EWWW Image Optimizerを使う（簡単です）
プラグインを使う方法です。
» EWWW Image Optimizer | WordPress.org
具体的な設定方法は下記の記事をどうぞ。
» EWWW Image Optimizer の設定方法と使い方
なお、このプラグインだと完全に軽くなる訳じゃないので、さらにできれば方法②がおすすめです。しかし、方法②はちょっと技術者向けなので、「技術は分かりません」って人は後述する「重たすぎるページは「アナリティクス確認→個別修正」でOKです」の章をどうぞ。
方法②：サーバーから直操作で画像軽量化する（すこし難しい）
ここはWordPressの内部構造を知っている人限定でよろです。
※バックアップしてから操作してください。ミスると画像がバグります。
WordPressでは上記の階層部分に画像ファイルがありますので、そこから画像を一括DLして、リサイズ＆軽量化して、上書きしてアップロードという流れです。
なお、ファイル名に「-1024×683」とかって書かれているのはWordPressで自動リサイズ済みなので修正不要です。※繰り返しですが、技術わからない人はやらなくてOKです。
重たすぎるページは「アナリティクス確認→個別修正」でOKです
日頃から画像軽量化を意識すべきですが、「過去記事が多いので、修正が大変です…」という人も多いはず。
そういった場合は「アナリティクスを見つつの個別修正」でいいかなと思います。
Googleアナリティクスの「速度についての提案」を確認する
上記画像の通りでして、画面の右側に「PageSpeedスコア」が見えますよね。
ここが60点以上なら、とりあえずOKかなと。
このあたりこだわりすぎると泥沼にハマりますので、ほどほどでOKです。
なお、「60点って低くない？」と思われるかもですが、僕の場合は「60点のページでもビッグキーワードで上位表示できている」という事実があるので、別に問題ないかなと思っています。
極端に点数が低いページがあるなら、個別修正していけばいいかなと思います。
オマケ：PHPのバージョンはPHP7にしましょう。
過去に僕がTweetした内容ですが、下記のとおり。
エックスサーバーを使っているWordPressブロガーは、「PHPのバージョンアップ」がおすすめです。これだけでサイトが高速化できます。
変更方法はスクショ参照のとおり。サイトが高速だと、読者の離脱が減りますので、ぜひ設定すべきですね😌 pic.twitter.com/AXo6bgP8L4— マナブ@バンコク (@manabubannai) March 28, 2018
PHPのバージョンを変更するだけで、さくっと速度アップできますので。
そして、実際に試した方のTweetが下記のとおり。
……！！これやっただけでPageSpeed Insightsの評価が9ポイントもアップしました！！
マナブさん、ありがとうございます！！神！！
面倒なサイト高速化がまさかこんなに簡単にできるとは……。 pic.twitter.com/UrksKxz9VD— タケダノリヒロ（ルワンダノオト代表） (@NoReHero) March 29, 2018
※PageSpeed InsightsとはGoogleが提供する速度計測ツールですね。
PHPバージョンが7じゃない人は、7に変更しておくと良いですよ。
なお、古いサイトとかだとバグる可能性もあるので、バグにはご注意ください。なんかおかしくなったら、PHPバージョンを元に戻せば直ります。
最後に：ページ速度は気にしすぎなくて良い
今回の記事はここまでなのですが、最後にアドバイスがありまして、それは「ページ速度とかは、そこまで気にしなくてOK」ということです笑。
画像軽量化とかは簡単なのでやっておくべきですが、その他の部分は、すこし難易度が高いですし、頑張りすぎると、泥沼にはまりますので ※過去に僕が経験済み。
ある程度は画像を軽量化して、それが終わったら、気にしすぎないようにしましょう。 サイト改善に時間をかけまくるより、記事に命をかける方が大切ですので…。
というわけで今回はおわりです。
読者にとって有益な記事を書きたいという方は、下記記事もあわせてどうぞ。
ブログで文章構成を作る３つの手順【ブログ歴６年の僕が徹底解説】
「ブログで文章構成を作るのが難しいな…。 頑張ってブログを書きたいけど、なんかモヤっとした記事しか書けない…。具体的な方法を教えてください。」←こういった疑問に答えます。本記事の内容：１．ブログで文章構成を作る３つの手順／２．ブログで文章構成を作る際の注意点／３．文章構成を作る上で一番大切なこと