こんにちは。ノッツです(^o^)/
WordPressのアイキャッチ画像に「Pixabay Images」というプラグインを使用して画像を導入することが多いのですが、このプラグインが原因でサイトがヘビーな状態になっていました。
この状態ではユーザービリティ的にも、SEO的に良くないということで、サイトの改善を試みました。
サイトが重い原因と改善方法を記録として書いていこうと思います。
Pixabay Imagesというプラグインを使っている場合は一読することをおすすめします。
追記：Pixabay Images Ver.2.12から仕様が変更されました。そのため、以下で説明する方法では解決できず、Pixabayから直接ダウンロードしないといけないかと思います。
サイトのスピート測定
Googleの「PageSpeed Insightsed」と言うツールでサイトのスピードを点数として評価するサービスがあります。
このツールを使ってトップページのスピードを測定してみました。
モバイル表示の場合
モバイル表示の場合は「21/100」という低速度という結果になりました。
パソコン表示の場合
パソコン表示の場合も「24/100」という低速度という結果になりました。
低速度結果に
私が学生のころのテスト結果でよくとっていた「赤点」並みの低速度結果になりました 苦笑
実は、以前にも計測したことがあってこの低速度結果は前々から気付いていましたが面倒臭かったのでなかったことにしていました。
この重い状態のサイトは「SEO」的にもよろしくないです。
また、モバイル回線などではサイトの表示速度が遅くなり、さらにユーザの通信料に負担を与えるなど「ユーザービリティ」的にに良くないです。
ということで、低速度結果から改善されるように試行錯誤してみることにしました。
サイトが重い原因
GoogleのPageSpeed Insightsedの計測結果を見てみると、警告を発しているのはどれもURLのところにPixabayの記述がありこれに関係していそうです。
色々と試行錯誤をした結果、サイトが重い原因は「Pixabay Images」というプラグインが原因だということが分かりました。
Pixabay Imagesプラグインとは
「Pixabay Images」プラグインとは、Pixabayという無料写真サイトのサービスを利用したプラグインです。
簡単に画像を導入することができ大変便利で当サイトでもよく使っています。
Pixabayには、42万以上の写真、ベクター、イラストレーションなどがあり無料で使え、Pixabayの画像はデジタル媒体であっても印刷媒体であっても、また商用であっても、帰属表示もなく使うことができます。
そのPixabayの画像をWordPressのWeb上で、数クリックで簡単にブログにPixabayの画像を導入することができるプラグインです。
このプラグインを使用すると自動的に自分のサイトのサーバーにも保存されるので、リンク切れの心配なくとても便利で気に入って使っています。
詳しい説明や使い方などは以下のサイトを参考にしてください。
Pixabay Imagesプラグインが原因だった
私は記事の一番最初にその記事にあってそうな画像を選んで導入しています。
この画像は上記で説明した「Pixabay Images」というプラグインを使用して画像を導入する場合があります。
また、この画像はアイキャッチ画像として、トップページの一覧表示などで表示される小さめな画像のサムネイル画像として使っています。
このサムネイル画像が原因でサイトが重い状態になっていたのです。
確認
サムネイル画像が原因でサイトが重い状態を確認してみます。
このサムネイル画像を右クリックして「新しいタブで画像を開く」をクリックします。
通常ならば（プラグインを使わずに画像をアップロードすると）150×150の小さなサムネイル画像が開きますが、生データそのままが開きました。
そして、このファイルのサイズを確認してみると「412kB」でした。それは重いわけですわ。
原因
つまり、トップページのサムネイル画像は、生データそのままの画像を縮小して表示していたので、サイトが重い状態だったのです。
画像のURLを確認すると、Pixabay Imagesプラグインを使用て導入した画像は、pixabayというプラグイン専用のフォルダ内に保存されています。
当サイトのWordPressのテーマでは150×150のサムネイル画像が自動生成されるようになっていますが、pixabayフォルダに保存されているため正しく認識せずに150×150の画像が生成されていないためだと思います。
または、テーマ内でリンク先が正しく認識していないのかもしれません。
ちょっとこの詳しい原因はよく分かっておりません。
同じようなプラグインとして「Flickr – Pick a Picture」を使っていますがこちらは問題ありません。通常通りのアップロード先に保存されるためだと思います。
サイトが重い状態の改善方法
今回のサイトが重い状態から改善する方法は以下が考えられます。
WordPressのテーマのソースコードを変更する
当サイトのテーマは「Simplicity」を使用していますが、このテーマのソースコードを変更する方法です。
Pixabay Imagesというプラグインを使って画像を導入した場合は、画像がpixabayフォルダにアップロードされます。
そのため、プラグインを使った場合でも150×150のサムネイル画像を作成させ、作成された画像をトップページなどのサムネイル画像として表示させればできると思います。
だだ、ちょっと大変そうなので諦めました。
Pixabay Imagesのプラグインのソースコードを変更する
Pixabay Imagesのプラグインのソースコードを変更する方法です。
上記と同様に、Pixabay Imagesというプラグインを使って画像を導入した場合は、画像がpixabayフォルダにアップロードされるので、通常のアップロード先に保存されるようにソースコードを変更するとできると思います。
ただ、プラグインのソースはワケワカメなので諦めました。
Pixabay Imagesプラグインの設定で保存先を変更することができればいいのですが……現在はできません。
Pixabayのサイトから直接ダウンロードしてアップロードする
Pixabayのサイトから直接ダウンロードしてブログにアップロードする方法です。
これが一番シンプルな方法だと思います。
Pixabayのサイトから直接ダウンロードしてブログにアップロードすれば、pixabayフォルダ内には保存されずに通常の画像のアップロード先に保存されます。
これにより通常通り150×150のサムネイル画像が生成されるので改善することができます。
いや、どうしてもPixabay Imagesのプラグインを使いたい
いちいちPixabayのサイトにアクセスして、ダウンロードして、アップロードする手順が面倒くさいので、やっぱりPixabay Imagesのプラグインを使いたいのです。
このようにどうしてもPixabay Imagesのプラグインを使いたい場合は以下のようにすると改善されると思います。
ただし、当ブログで使用しているテーマのSimplicityのみで有効な方法かもしれません。
ブログを書いているときに一番上にある画像をアイキャッチ画像として自動的に登録してくれる方法を応用します。
この方法を使用する前提条件として、テーマがSimplicityであること、Simplicityのカスタマイザーにある「画像」の「アイキャッチを自動設定」をオンにしておく必要があります。
Pixabay Imagesプラグインを使ってサイトの重い状態の改善方法
Pixabay Imagesのプラグインを使っても画像のサイトが重くならないための画像の導入方法です。
この方法では、前提条件がありますので上記をご確認ください。
画像の導入から確認
でわ、説明していきます。
Pixabay Imagesのプラグインを使って画像を導入する際、「ビジュアル」でわなく「テキスト」を利用します。ここ重要です。
あとはいつものようにPixabay Imagesのプラグインを使って画像を導入していきます。
「Pixabay」をクリックします。
画像を探したいキーワードで検索します。
任意のサイズを選択します。私の場合は、画質が良い画像も保存しておきたいので、一番大きなサイズをいつも選択しています。
必要事項を記入して、サイズは任意で設定します。
「投稿に挿入」をクリックすると、ソースコードが記述されます。
ここで一旦「下書きとして保存」をクリックして保存します。
続いてアイキャッチ画像を確認するとアイキャッチ画像が設定されていることが確認できます。
これは、Simplicityのテーマ内で、一番最初の画像が自動的にアイキャッチ画像として設定されるためです。
アイキャッチ画像をクリックしてメディアのライブラリ内を確認してみると、2つの同じ画像があることが確認できます。
この2つの画像で何が違うかですが、大きく保存先が異なっています。
左の画像は通常のアップロード時と同じ保存先に保存されていますが、右の画像はpixabayというフォルダ内に保存されています。
つまり、左の画像はSimplicityのテーマ内で自動的にアイキャッチ画像として保存された画像で、右の画像はPixabay Imagesのプラグインを使って導入された画像です。
同じファイルが2つあるのはサーバーの容量を圧迫するので、必要に応じてPixabay Imagesのプラグインを使って導入された右側の画像を削除します。
最初に導入したソースコードはPixabay Imagesのプラグインを使って導入された画像のリンク先となっています。
そのため上記で削除した場合はリンク切れとなってしまうので、Simplicityのテーマ内で自動的にアイキャッチ画像として保存された画像を新たに挿入し直す必要があります。
そして、記事を公開してトップページのサムネイル画像を新しいタブで開きます。
すると、150×150の小さいサムネイル画像として保存されていることが確認できました。
この方法のデメリット
この方法のデメリットがあるので説明します。
ファイル名が長いランダムな英数字になることだと思います。気にならなければ問題ありません。
あと、画像を削除するなどの手間がかかることです。
こう考えると、Pixabayのサイトから直接ダウンロードしてブログにアップロードする方法と手間がそんなに変わらないかもしれません。
改善後のサイトスピード結果
当サイトの全ての画像ファイルにおいて上記の修正を行いました。
その結果、以下のように点数が大幅に上がり改善することができました。
モバイル表示の場合
モバイル表示の場合は「62/100」という結果になりました。
改善前が「21/100」だったので、「41」上がったことになります。
パソコン表示の場合
パソコン表示の場合は「75/100」という結果になりました。
改善前が「24/100」だったので、「51」上がったことになります。
さいごに
サイトが重い重い状態だったのですが、改善することができました。
ユーザービリティ的にも、SEO的にも、軽いサイトのほうがいいと思うので改善できて良かったです。
SimplicityやPixabay Imagesの仕様が変わればこの方法は使えなくなりますが、それまでの間はこの方法でPixabay Imagesのプラグインを使っていこうと思います。
もし、説明してきた以外に簡単な改善方法があれば教えてくださると嬉しいです。
トップページなどの小さいサムネイル画像の場合を説明してきましたが、記事に導入する画像の容量が大きい場合は、GoogleのPageSpeed Insightsedの計測結果では警告が出てしまうことがあります。
そのため、ブログに記載する画像は、100kB以下の小さめな画像を使用したほうが無難だと思います。
コメント