こんにちは、孔雀です。
今日は、PageSpeed Insightsでブログの表示速度を診断した後に出てくる「画像を最適化する」の修正方法について書いていきたいと思います。
画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます。
「画像を最適化する」とは、Wordpress内にある画像を圧縮させて表示速度を上げるというものです。
WordPressでは便利なプラグイン「EWWW Image Optimizer」というものがありますので、それを使います。
目次
WordPressのメディアライブラリにアップロードした画像を最適化する
この圧縮は「EWWW Image Optimizer」というプラグインをインストールして、すべての画像を一括で行うことができます。
「EWWW Image Optimizer」は、画像をアップロードした時に自動で圧縮してくれるプラグインです。
WordPressを使っている人は、入れておいたほうがいいプラグインですね。
「EWWW Image Optimizer」の設定方法
まず、WordPressの[プラグイン]→[新規追加]から「EWWW Image Optimizer」を検索してインストールします。
インストールが完了したら、[有効化]してください。
これで「EWWW Image Optimizer」の設定は完了です。
次に、今までアップロードした画像を一括で最適化します。
以上で「画像を最適化する」を修正する方法は完了です。
EWWW Image Optimizerで圧縮してもまだ最適化できる画像がある場合
「EWWW Image Optimizer」で一括最適化をしてもまだ修正する画像がある場合は、手動で圧縮する方法もあります。
私もなぜか一括最適化しても圧縮されない画像がありました。
テンプレートの中にある画像とツイッターで設定した画像（なぜかツイッターのサーバーにアップしてる画像が表示される）が表示されました。
ツイッターで設定した画像（https://pbs.twimg.com/～）の修正方法は調べても解決策がみつからなかったので、今回は放置です。
それでは、手動で圧縮する方法を教えます。
手動で画像を圧縮する方法
この方法は一つずつやらないといけないので、とても面倒です。
修正できなかった画像だけをピックアップしてやっていきましょう。
まず、画像のアドレスを調べます。
例えば、上の画像で修正できなかったアドレスを使って実際に圧縮してみます。
ドメイン～/wp-content/uploads/2016/11/book-1760993_640-500x300.jpgという画像を例にしてやってみます。
サーバーから一度画像をダウンロードしてから圧縮します。
圧縮が済んだらまた元の階層に戻すという流れです。
ここではエックスサーバーを例にして進めていきます。
エックスサーバーにログインして「サーバーパネル」を開きます。
複数のドメインで運用している方は、ドメインを設定します。
[FTP]の[FTPアカウント設定]をクリックします。
使用するドメインをクリックします。
画像が格納されているフォルダは「public_html」内にあるので「public_html」をクリックします。
「public_html」の後は「wp-content」という階層なので「wp-content」フォルダをクリックします。
「wp-content」の後は「uploads」という階層なので「uploads」フォルダをクリックします。
「uploads」の後は「2016」という階層なので「2016」フォルダをクリックします。
「2016」の後は「11」という階層なので「11」フォルダをクリックします。
「11」の後は「book-1760993_640-500x300.jpg」という画像ファイルです。
「book-1760993_640-500x300.jpg」という画像ファイルを探してクリックします。
画像ファイルをクリックすると、ダウンロードされます。
次に、ダウンロードした画像を圧縮します。
圧縮するためには「Online Image Сompressor」というオンラインイメージ最適化ツールを使います。
ダウンロードした画像をページ下の赤枠の中に直接放り込みます。
すると、圧縮が始まります。
圧縮が完了したら、[全てダウンロード]をクリックします。
ダウンロードした画像フォルダを開きます。
これが圧縮された画像になるので、この画像を再びサーバーの同じ階層に入れて上書きします。
しかし、圧縮された画像のファイル名に「-min」という文字が加えられています。
圧縮された画像のファイル名が変わってしまったので修正します。
「book-1760993_640-500x300-min.jpg」→「book-1760993_640-500x300.jpg」
修正したら、エックスサーバーのFTP画面に戻ります。
画像が格納されていた階層に戻り、[ファイルを選択]をクリックします。
修正した画像を選び、[開く]をクリックします。
[ファイルのアップロード]の欄に画像のファイル名が記入されたのを確認したら、[アップロード]をクリックします。手動で画像を圧縮する方法はこれで終わりです。
まとめ
PageSpeed Insightsの「画像を最適化する」を修正する方法を書いてみました。
WordPressの場合だと非常に楽に画像を最適化できてしまいますね。
「EWWW Image Optimizer」というプラグインを入れれば解決してしまいますが、中には解決できずにそのまま表示される画像もあります。
あと、管理しているドメインではないアドレスの画像まで表示される場合もあるし、ここまでくるとちょっと自分の知識で解決できるレベルではありませんね。
でも今回説明した方法をやるだけでも、PageSpeed Insightsの点数は上がると思います。
4/8のPC作業時間は10時間00分
