【WordPress】画像をプラグインなどで圧縮(最適化)してるはずなのにサイトの表示が重いときのチェックポイント

公開日: 使い方など
Knowledge Base トラブル 対処

WordPressで作成したに限らずサイトを運営していると気になってくるのがページの表示スピード。「Google PageSpeed Insights」でスコアを計ってみると・・・38/100といったびっくりするような低スコア。経験上では本当に意味のある(需要のある)記事であればそれほど気にすることでもないような・・・という感じにはなるものの、やっぱり気になるといてもたってもいられなくなりますよね?

最近の画像はスマホでもデジカメでも結構な容量があり、Wordpressのメディアアップローダーでは特に何もしていなければアップロードすると巨大なファイルが保存されることになります。

ファイルのサイズが大きいのはやはりページの表示速度に影響しますし、何より閲覧する方がスマホだった場合などはパケット量が・・・(あんまり気にしません??)ちょっと迷惑なサイトかもしれませんね。

そこで登場するのが

といったアップロードした画像を自動で圧縮(最適化)してくれるプラグイン(有名なものにIEEE Image Optimizerというのがありますがこちらの方がおすすめ)。簡単に設定しておけば、アップロード時にはもちろんバッググラウンドで自動的にサイズを小さくしたり、ウェブページとして見た時にそれほど影響のない程度に粒子を粗くしたりしてサイズを縮小してくれます。

これで大丈夫!!と再度速度を計ってみたら・・・やっぱり改善されてない!!このクソプラグイン!!と思うかもしれませんね。でもこれちょっとした勘違いかもしれません。

実際のページでチェックして間違った使い方をしてないか検証してみましょう。

最適化された画像が使用されているかのチェック方法

まずは表示速度に問題があるページの画像を試しにダウンロードしてみてください。そしてパソコン上でその画像のプロパティを見てサイズを確認してみてください。

・・・・どうですか??アップロードする前の画像と比べて小さくなってますか??オリジナルと酷似してる、または同じサイズではないですか??

WordPressのテーマは誰でもいい感じに表示できるようになっていて、もちろん画像も自動で拡大・縮小されるようになってるものが多いです。この機能のおかげですごく大きい画像を挿入してもいい感じに表示され、さらにはスマホなどの小さな画面でもいい感じに表示されるようになってます。

実はこれが諸悪の根源(ファイルサイズに気づけない原因)になっているのです。

まあそれは置いといて、何でプラグインで最適化したはずなのにファイルサイズが変わらないのか??

答えは簡単!!圧縮された画像を挿入していないだけなのです。

画像の最適化をするプラグインの多くはオプション等で特別に設定しない限りオリジナル(アップロードした)画像そのものは何もしないようになっています。

WordPressではこのオリジナル画像をfullサイズと呼び、large、mediumといった別のサイズの画像を同時に保存するようになっています。プラグインが行うのはfullサイズ以外の画像に対する最適化なのです。

それを知らずにfullサイズで画像を本文へ挿入していると・・・なんだ!圧縮されてないじゃん!このクソプラグイン!!となるのです。

【WordPress】「Code Snippets」プラグインでエラーが出たときの対処方法

画像の一括アップロード時に時々httpエラーが出るのは?改善できる?

突然ログイン(管理画面の操作)だけができなくなったときの対処 ~さくらサーバー編~


圧縮された画像を確実に挿入する方法

画像を挿入するときには投稿編集画面から「メディアを追加」ボタンをクリックして画像を選択、挿入ボタンをクリックというのがいつもの手順ですよね?

その時画像をクリックした右側の情報を見たことありますか??

そこには画像のサイズが設定できるようになっています。サイズはどうなっていますか?

「フルサイズ」になっていませんか?これは前述したオリジナル画像という意味なので、圧縮プラグインの設定でフルサイズの画像の圧縮が無効であればアップロードした画像そのものになります。つまりビッグで巨大(おんなじか・・・)なファイルが本文に挿入されてしまうのです。

通常サイトの本文は700ピクセル程度の幅なことが多いので「大」サイズを選べば問題ありません。「大」サイズはきちんと圧縮されていますからファイルサイズはかなり小さくなります。

これに気づかないのは誰でも簡単にきれいに表示できるテーマの機能の弊害なのかもしれませんね。

これを本文上で確認するには画像を挿入したときに追記されるタグを見て「size=”〇〇”」の〇〇の部分がどうなっているのかを調べます。「full」になっていればオリジナル画像です。これを「large」にすれば「大サイズ」の画像になります。

これである程度画像をばんばん入れたページでもそれなりに速度が速くなります。きちんと圧縮されている場合には次の項を参考にされるとさらに改善できるかもしれません。

画像の多いページの表示速度改善策

画像の圧縮はばっちり、圧縮された画像を使ってる、なのにスコアは・・・という場合に試してみていただきたい項目です。

画像の遅延読み込みをしてみる

スコアが悪くても、訪問した人が遅いと感じにくくなるテクニックがあります。それが「lazy load」です。これは実際にその画像を表示する段階になるまで画像を読み込まなくする機能です。スピード計測ではすべてを読み込むまでの速度が表示されるかもしれませんが、実際にページを表示してみて問題がなければ訪問者に対しては親切なページになります。

テーマに機能が搭載されている場合もありますし、プラグインもありますから是非試してみてください。

他の要素に原因があるかも

そもそも画像そのものがスピードを落とす大きな原因になるのか・・・という問題です。「Google PageSpeed Insights」では速度を改善するための方法が効果の高い順に表示されます。

一番上位にあるのは「画像の圧縮」ですか?その他の項目ではありませんか??

「サーバーの応答速度を改善する」となっている場合には本当にサーバーが貧弱なのか、アクセス数がサーバーの能力に見合ってないのか、はたまたサイト構造の問題なのか・・・理由はさまざまです。

「レンダリング・・・」となっている場合には後から読み込んでも問題ないコードをわざわざ先頭に書いてあるのでそれを読んで後を読んで・・・としているから遅い(すごく簡単に書いてます)という内容になります。

この場合には

https://www.momosiri.info/wppi/wp-script-optimizer/

などを使って、後で読み込んでも表示に問題ないコードをページの最後に記述するようにすることで劇的に改善できます。

それから、Wordpressは

  1. ページに誰かがアクセスする
  2. ページを作れ!!と命令される
  3. サーバーがデータから必死にページを作る
  4. 表示される

という複雑な段取りで表示が完了するツールですから、キャッシュプラグインを使うのも手です。キャッシュ系プラグインを使うと

  1. 一旦ペラページ(出来上がったページ)としてどこかに保存しておく
  2. ページに誰かがアクセスする
  3. ペラページを表示する

となり、サーバーが必死にページを作る段取りがなくなるので表示速度は速くなります。ここでは詳しく紹介しませんが、これもメリット・デメリットがありますからいろいろ調べて検討してから導入することをおすすめします。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏【合計3000円以上で送料無料】

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏【合計3000円以上で送料無料】

1,738 円 (税込)
著者石川栄和(著) 大串肇(著) 星野邦敏(著)出版社インプレス発行年月2019年08月ISBN9784295006664ページ数280P9784295006664内容紹介Webサイトをはじめて作る初心者でも安心!大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報