WordPressで画像が表示されなくなった時の解決方法とモバイル表示速度が上昇した要因

ブログのこと

Pagespeed Insights(ページスピード インサイト)のことを知り、ブログ運営にはサイトスピードが重要なことが分かり、スコアが悪かったモバイルのページ表示速度上げる対策をしました。

プラグインで対策した直後は目標には届かなかったのですが、数日経ってモバイルのページ表示速度が上がっていました。

そして「EWWW Image Optimizer」のプラグイン導入後、WordPressで画像が表示されなくなったのです。

今回はモバイルのページ表示速度が上がった要因と、WordPressのプラグイン導入後画像が消えた原因と解決方法を解説します。

先にモバイルの表示速度が
上昇したことについてお話するよ。

モバイル表示速度が上昇した要因とは

モバイル表示速度の今までのスコア

Pagespeed Insights(ページスピード インサイト)の計測ツールことを知り、早速計測してみるとモバイルスピードが「29点」でした。

Pagespeed Insightsでモバイルスコアが悪い時の改善方法と対策 
↑Pagespeed Insightsで計測した記事はこちらから

ページの表示速度が重要だと知らず、計測してモバイルのスコアが悪くて、ページ表示速度を上げるプラグインが必要だと分かりました。

「EWWW Image Optimizer」「TinyPNG JPEG, PNG & WebP image compression」

改善のため上記の2つのプラグインを導入、画像の読み込みに時間が掛かることがページの速度を遅くしている原因で、2つが画像圧縮をするプラグインだったからです。

すると「29点」から「61点」までスコアが上がり効果はありましたが、これより点数は上がりませんでした。

数日後Pagespeed Insights再計測してみる

2つのプラグイン導入された方がパフォーマンスが「80点」を超える中、私の目標でもある「80点」にはほぼ遠く、解決策を調べているところでした。

けれども数日後再計測すると「61点」→「78点」、一時は「83点」まで点数が上がっていたのです。


                       ↓(一時、83点まで上昇)


圧縮出来なかった画像を圧縮する

「TinyPNG JPEG, PNG & WebP image compression」のプラグインが月500枚まで無料で画像を圧縮出来るため、61点の時は500枚を超える画像は圧縮出来ていないのもありました。

モバイルのページ表示速度が上昇した考えられる要因は、圧縮出来なかった画像を月が新しくなり、圧縮を掛けることが出来たからだと思います。

先月の500枚は大きいサイズの画像から圧縮に掛けて、今月は小さいサイズの画像を圧縮に掛けましたが、今まで使っていた画像を全て圧縮出来たことで効果あったようです。

今月圧縮して思いましたが、結構小さいサイズの画像を使っているんだと思いましたね。


確認のため本日計測してみると、モバイル表示速度「81点」でした。


そしてデスクトップのページ表示速度のスコアは、変わらず継続して良かったです。

導入したばかりの時は画像の圧縮が全て終わっていなくて、目標には届きませんでしたが圧縮を続けてスコアが上がって行きました。

アップロードでブログを重たくしていた画像を、2つのプラグインを導入して全て圧縮することによって整理していくと、ページ表示速度が目標まで改善出来ることが分かりました。

プラグインを導入してから本日まで目標は保たれていますが、これから画像も増えていくことは明らかなので、この他にもページ速度を改善する対策が必要になってくるでしょう。

<br>

モバイル表示速度が上がってほっとしていたら
画像が消えていて驚いたよ。

次はWordpressでブログのアイキャッチ画像が、消えてしまった時の解決方法について解説します。

WordPressで画像が表示されなくなった時の解決方法

アイキャッチ画像が突然消える

Pagespeed Insights(ページスピード インサイト)でモバイルの表示速度が遅く、画像を圧縮するプラグイン改善し解決出来ました。

モバイルの表示速度が「61点」まで上がった日に安心していると、下の画像のように記事のアイキャッチ画像が消えていたのです。


知らない間に、画像が消えてる!


画像圧縮のプラグインを導入したり、画像を圧縮掛けている間に消えていたと思うのですが、圧縮作業が終わるまで気が付きませんでした。

それもいつから消えていたのか分からず、焦りましたね。

記事作成の画面では「アイキャッチ画像を設定」で設定した画像が見えているため、表示されていないことに気が付かず気を付けなければいけません。

直ぐに画像が消えた原因を調べたよ。

画像が表示されなくなった原因

結論を言うと画像が表示されなくなった原因は、WordPressのプラグインを導入した影響からでした。

これが他のプラグインの機能との相性によって、不具合が生じることなんだと痛感しました。

不具合の原因を調べるため一つ一つプラグインを無効化して、どのプラグインが影響を及ぼすのかを調べる必要があり、消えた要因は「EWWW Image Optimizer」だと分かったのです。

次は画像が消えてしまわない「EWWW Image Optimizer」の設定方法を解説します。

一つの設定変更でが画像が戻ったよ。

「EWWW Image Optimizer」設定方法

WordPress管理画面の設定から、「EWWW Image Optimizer」をクリックします。

「遅延読み込み」
⊡画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します。の☑チェック外すし、変更を保存します。

の「遅延読み込み」のチェックをはずすと、画像が表示されているはずです。


一つの設定を変更するだけで、画像が表示されるようになりました。

画像表示された元に戻って良かった!

設定を変えることでアイキャッチ画像が表示されて、心から良かったと思いました(笑)

画像が表示されない原因はWordPressの他の機能やプラグインで、遅延読み込みが重複していて影響を受け合うようです

画像が突然消えて解決方法をすぐに調べた時に、「wordpress 画像 表示されない」での検索がたくさんヒットしたので、同じ悩みを抱えている方が多いのだろうと思いました。

私のようにWordPressの画像が突然表示されなくなる不具合が起きた場合の、プラグインの設定で解決出来ることがあるので試してみて下さいね。

まとめ

今回はモバイルのページ表示速度が上がった要因と、WordPressのプラグイン導入後画像が消えた原因と解決方法を解説しました。

「EWWW Image Optimizer」「TinyPNG JPEG, PNG & WebP image compression」の2つのプラグインを導入しても、思ったよりページ表示速度の改善がされなかった時、画像の圧縮を続ければ効果が出て来ます。

そして「EWWW Image Optimizer」の導入で、画像が表示されなくなる不具合が起こることが分かりました。

プラグインはとても便利でサイト運営の手助けをしてくれますが、プラグインの相性によって不具合が起こることを経験して、気を遣いながらプラングインと付き合って行こうと思います。

画像圧縮を繰り返し続けると効果が出て来るし
画像表示に不具合出た時は解決方法を試してみてね。

タイトルとURLをコピーしました