アダルトアフィリエイト実践記

サムネイルを再生成して「PageSpeed Insights」の点数を改善しました

 


テレアポサイトにもグーグルのサイト診断「PageSpeed Insights」の点数改善作業を実施してみました。

thumb nail1

以前に上手くいった方法を行い、それは問題なく点数が改善されたのですが、テレアポサイトでは「修正が必要」の項目に「画像を最適化する」と診断されてしまい、高得点をとることができませんでした。

これも何とか改善できないものかと挑戦してみました。

サムネイルを再生成して画像の最適化をする

いろいろと原因を調べてみた結果、主な原因は、サムネイル画像が生成されるのを止めていたことでした。

メディアの設定について

ワードプレスでは画像をアップロードした時にアップロードした画像の他に、

  • サムネイル

と、3つのファイルが生成されます。

これは便利なようですが、アップロードする全ての画像につき、余計に3つも画像が生成されてしまうので、サーバーの容量を圧迫してしまいます。

これを止める方法は、ワードプレスの「設定」「メディア」と移動して「画像サイズ」を全て「0」にすることで生成されるのを止めることができます。

thumb nail2

ところが、この設定をしてしまうと、アーカイブページにサムネイル画像を表示してくれるプラグイン「Thumbnail For Excerpts」を使用した際、大きな容量の画像を小さなサイズで表示してしまいます。

thumb nail2

←このような感じ。
クリックすると大きな画像が表示されます。

PageSpeed Insightsではこのような表示をすると低評価になってしまうようです。

アイキャッチ画像をリサイズするプラグイン「Regenerate Thumbnails」

画像サイズが大きいまま、表示サイズだけを小さくして表示してしまうと、PageSpeed Insightsの診断では低評価になってしまいます。

なので、できればサムネイル画像を再生成したい。

ですが、これまで投稿した画像をリサイズし直すのはとても大変な作業です。

そこで「便利なプラグインはないものか?」と探してみたら、やっぱりありました。

それが「Regenerate Thumbnails」と言うプラグインです。

参考にした記事はこちら

Regenerate Thumbnails - アップロード済みのサムネイル画像を再生成できるWordPressプラグイン

ただし、一括でサムネイルの再生成をしてしまうと、アイキャッチに使用していない画像までサムネイル画像が生成されてしまい、サーバーの容量を圧迫してしまいます。

ですので「メディア」管理画面から、アイキャッチに使用している画像を選び出し、個別に再生成する必要がありました。

テーマの編集からカスタマイズ

次に「テーマの編集」から、

  • メインインデックスのテンプレート
  • カテゴリーテンプレート
  • アーカイブテンプレート
  • スタイルシート
  • スマートフォン用のスタイルシート

をカスタマイズして、なんとか上手く表示されるようにしました。

いろいろとカスタマイズしていたら、いつの間にか「Thumbnail For Excerpts」を使わなくてもサムネイル画像入りの抜粋記事を表示できるようになっていました^^;。

もう原型がわからなくなりましたw。

関連記事はそのまま

本当はTHE WORLDの関連記事機能でもサムネイルをちょうどのサイズで表示したかったのですが、そこまでこだわっても効果はほとんどなさそうだったので、元のままで妥協しました。

今後の記事更新が少し大変になった

先ほどのサムネイル再生成用の設定のままだと、次から画像をアップロードした時に、サムネイルに使用しない全ての画像までもサムネイルが生成されてしまいます。

なので、メディア設定を「0」に戻しました。

そうなると、今後は、

  • 個別にサムネイル用の画像もアップロードする必要がある
  • 「Auto Post Thumbnail」も使えなくなり、自分でアイキャッチ画像を設定しなくてはならない

と、今後の作業工程が増えることになってしまいましたorz。

まとめ

いろいろと頑張った結果、

thumb nail3 thumb nail4

モバイル86点、パソコン93点まで点数を改善することができました。

実際、節約できたのは数十~数百Kバイトで画像1枚分程度のサイズ。

しかも、PageSpeed Insightsの点数を改善してもあまり意味がないという噂もありますが、とりあえず問題解決と言うことで、良しとしておきます^^;。

 

SEO対策   0

この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: