アフィリエイトブログの始め方-月収100万円稼ぐまでの道のり

アフィリエイトブログの始め方から月収100万円以上稼ぐまでの記録を綴ったブログ。

ランキングに参加中です♪応援クリックをいただけると とても嬉しいです♪
人気ブログランキングへ

SEO

「画像を最適化する」を修正する方法:PageSpeed Insights

更新日:

こんにちは、孔雀です。

今日は、PageSpeed Insightsでブログの表示速度を診断した後に出てくる「画像を最適化する」の修正方法について書いていきたいと思います。

PageSpeed Insightsの「画像を最適化する」を修正する方法

画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます。

「画像を最適化する」とは、Wordpress内にある画像を圧縮させて表示速度を上げるというものです。

WordPressでは便利なプラグイン「EWWW Image Optimizer」というものがありますので、それを使います。

スポンサーリンク

WordPressのメディアライブラリにアップロードした画像を最適化する

この圧縮は「EWWW Image Optimizer」というプラグインをインストールして、すべての画像を一括で行うことができます。

「EWWW Image Optimizer」は、画像をアップロードした時に自動で圧縮してくれるプラグインです。

WordPressを使っている人は、入れておいたほうがいいプラグインですね。

「EWWW Image Optimizer」の設定方法

まず、WordPressの[プラグイン]→[新規追加]から「EWWW Image Optimizer」を検索してインストールします。

インストールが完了したら、[有効化]してください。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[設定]→[EWWW Image Optimizer]をクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[基本設定]の[メタデータを削除]にチェックをいれます。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[高度な設定]の[無効にするpngout]にチェックを入れます。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[変換設定]の[コンバージョンリンクを非表示]にチェックを入れます。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[変更を保存]をクリックします。

これで「EWWW Image Optimizer」の設定は完了です。

次に、今までアップロードした画像を一括で最適化します。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[メディア]→[一括最適化]をクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[最適化されていない画像をスキャンする]をクリックするとスキャンが開始されます。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[最適化を開始]をクリックします。しばらくすると[完了]になります。

以上で「画像を最適化する」を修正する方法は完了です。

EWWW Image Optimizerで圧縮してもまだ最適化できる画像がある場合

「EWWW Image Optimizer」で一括最適化をしてもまだ修正する画像がある場合は、手動で圧縮する方法もあります。

私もなぜか一括最適化しても圧縮されない画像がありました。

テンプレートの中にある画像とツイッターで設定した画像(なぜかツイッターのサーバーにアップしてる画像が表示される)が表示されました。

ツイッターで設定した画像(https://pbs.twimg.com/~)の修正方法は調べても解決策がみつからなかったので、今回は放置です。

それでは、手動で圧縮する方法を教えます。

手動で画像を圧縮する方法

この方法は一つずつやらないといけないので、とても面倒です。

修正できなかった画像だけをピックアップしてやっていきましょう。

まず、画像のアドレスを調べます。

PageSpeed Insightsの「画像を最適化する」を修正する方法

例えば、上の画像で修正できなかったアドレスを使って実際に圧縮してみます。

ドメイン~/wp-content/uploads/2016/11/book-1760993_640-500x300.jpgという画像を例にしてやってみます。

サーバーから一度画像をダウンロードしてから圧縮します。

圧縮が済んだらまた元の階層に戻すという流れです。

ここではエックスサーバーを例にして進めていきます。

エックスサーバーにログインして「サーバーパネル」を開きます。

PageSpeed Insightsの「画像を最適化する」を修正する方法

複数のドメインで運用している方は、ドメインを設定します。

[FTP]の[FTPアカウント設定]をクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法
[ログイン]をクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法

使用するドメインをクリックします。

画像が格納されているフォルダは「public_html」内にあるので「public_html」をクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法
探す画像:ドメイン~/wp-content/uploads/2016/11/book-1760993_640-500x300.jpg

public_html」の後は「wp-content」という階層なので「wp-content」フォルダをクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法
探す画像:ドメイン~/wp-content/uploads/2016/11/book-1760993_640-500x300.jpg

wp-content」の後は「uploads」という階層なので「uploads」フォルダをクリックします。

探す画像:ドメイン~/wp-content/uploads/2016/11/book-1760993_640-500x300.jpg

uploads」の後は「2016」という階層なので「2016」フォルダをクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法
探す画像:ドメイン~/wp-content/uploads/2016/11/book-1760993_640-500x300.jpg

2016」の後は「11」という階層なので「11」フォルダをクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法
探す画像:ドメイン~/wp-content/uploads/2016/11/book-1760993_640-500x300.jpg

11」の後は「book-1760993_640-500x300.jpg」という画像ファイルです。

book-1760993_640-500x300.jpg」という画像ファイルを探してクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法

画像ファイルをクリックすると、ダウンロードされます。

次に、ダウンロードした画像を圧縮します。

圧縮するためには「Online Image Сompressor」というオンラインイメージ最適化ツールを使います。

PageSpeed Insightsの「画像を最適化する」を修正する方法

ダウンロードした画像をページ下の赤枠の中に直接放り込みます。

すると、圧縮が始まります。

PageSpeed Insightsの「画像を最適化する」を修正する方法

圧縮が完了したら、[全てダウンロード]をクリックします。

PageSpeed Insightsの「画像を最適化する」を修正する方法

ダウンロードした画像フォルダを開きます。

PageSpeed Insightsの「画像を最適化する」を修正する方法

これが圧縮された画像になるので、この画像を再びサーバーの同じ階層に入れて上書きします。

しかし、圧縮された画像のファイル名に「-min」という文字が加えられています。

圧縮された画像のファイル名が変わってしまったので修正します。

「book-1760993_640-500x300-min.jpg」→「book-1760993_640-500x300.jpg」

修正したら、エックスサーバーのFTP画面に戻ります。

PageSpeed Insightsの「画像を最適化する」を修正する方法

画像が格納されていた階層に戻り、[ファイルを選択]をクリックします。

修正した画像を選び、[開く]をクリックします。

[ファイルのアップロード]の欄に画像のファイル名が記入されたのを確認したら、[アップロード]をクリックします。

手動で画像を圧縮する方法はこれで終わりです。

まとめ

PageSpeed Insightsの「画像を最適化する」を修正する方法を書いてみました。

WordPressの場合だと非常に楽に画像を最適化できてしまいますね。

「EWWW Image Optimizer」というプラグインを入れれば解決してしまいますが、中には解決できずにそのまま表示される画像もあります。

あと、管理しているドメインではないアドレスの画像まで表示される場合もあるし、ここまでくるとちょっと自分の知識で解決できるレベルではありませんね。

でも今回説明した方法をやるだけでも、PageSpeed Insightsの点数は上がると思います。

4/8のPC作業時間は10時間00分

スポンサーリンク

最後までお読みいただき、ありがとうございました♪ 応援クリックをいただけると励みになります♪
人気ブログランキングへ

-SEO
-,

Copyright© アフィリエイトブログの始め方-月収100万円稼ぐまでの道のり , 2018 AllRights Reserved Powered by AFFINGER4.