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

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

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

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

そこで登場するのが

「Smush Image Compression and Optimization」は簡単設定でアップロード時の画像を自動で最適化してくれるプラグインです。もちろん過去にアップロードした画像も最適化する機能を持っています。

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この場合には

【WP Scripts & Styles Optimizer】はコードの読み込み順をカスタマイズすることで効果のある表示速度の高速化をプラグインでやっちゃおうというもの。不要なファイルは読み込まないようにしたり、ヘッダーに出力されていて最初に読み込まなくてもいいものをフッターに移動して読んでるうちに読み込んでもらおうという動作をします。

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

それから、Wordpressは

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

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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

4,104 円 (税込) 送料込
Rakhitha Nimesh Ratnayake プライム・ストラテジー オライリー・ジャパンワードプレスニヨルウェブアプリケーションカイハツ ラーキサ ニーメシュ ラーネヤク プライム ストラテジー 発行年月:2014年11月26日 予約締切日:2014年11月25日 ページ数:364p サイズ:単行本 I..
【中古】 WordPress 3サイト構築スタイルブック 作例で学ぶ、WordPressのCMS的活用術 / エ・ビ / [単行本(ソフトカバー)]【メール便..

【中古】 WordPress 3サイト構築スタイルブック 作例で学ぶ、WordPressのCMS的活用術 / エ・ビ / [単行本(ソフトカバー)]【メール便..

279 円 (税込)
著者:エ・ビスコム・テック・ラボ出版社:毎日コミュニケーションズサイズ:単行本(ソフトカバー)ISBN-10:4839935416ISBN-13:9784839935412■通常24時間以内に発送可能です。午後3時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,50..
楽天ウェブサービスセンター CS Shop
トップへ戻る