【WordPress】テーマ「Simplicity」の高速化+ポカミス修正

このサイトはスクラップブック的な意味合いが強いためあまり気にしていなかったのですが、Webサイトの表示スピードを確認してみると激遅。
ちょっとこれはマズイということで対策をしました。

スポンサーリンク

対策前の状況

まずgoogleのPageSpeed InsightsのPCは50/100で真っ赤に。

20150411_site_speed_03

モバイルに至っては41/100と見たことがない数値に。

20150411_site_speed_02

GTmetrixもPageSppeedGradeでEという散々な結果に。

20150411_site_speed_04

これを改善していきましょう。

コピペで一発高速化

Simplicityの作者「わいひら」さんが公開している手法です。

詳しくはこちらから

コピペ一発でSimplicityを結構高速化する方法(Simplicity公式)

インストールしたルートの.htaccessにコピペするだけという簡単な方法です。
早速やってみた結果はこちら。

googleのPageSpeed InsightsのPCは50→64に改善

20150411_site_speed_06

モバイルは41→55とこちらも改善。

20150411_site_speed_05

GTmetrixもE→Cとまずまずの評価。

20150411_site_speed_07

それにしてもテーマをほぼ無垢で使っているのに何故こんなに遅いのでしょう。
実はそこにはポカミスがあったのです。

原因はアイキャッチ画像だった

PageSpeed Insightsの「修正が必要」の項目はPCでは「画像を最適化する」だけになりました。
ここに大きな原因があることがわかります。

これを詳しく見てみると、

20150411_site_speed_08b

アイキャッチ画像の削減率がやたらと高い・・・、と言うか削減できるデータサイズのほぼ99%がアイキャッチ画像じゃないですか。

そうです、アイキャッチ画像のフォーマットとサイズを間違えていたのです。
というかこのサイトの立ち上げ当時は画像に関して無知だったため、気づかなかったのです。
いやはやお恥ずかしい。

間違えた点をまとめると

・イラストレータで作った2色の画像なのにJPEGで出力していた。せめてPNGにすべきだった。
・JPEG出力も圧縮率が低く最高画質を選んでいた。
・サイズが500×500pxと巨大。現在は150×150pxでしか使っていないため無駄に大きい。

とため息しか出ません。

WordPressのアイキャッチ画像はメディアライブラリーで小さなサムネイルが生成されていても、それを使わずに大きな画像を縮小表示するという特長があるようです。

20150411_site_speed_12

あらら、これは気が付きませんでした。

早速修正をしましょう。

フォーマットとサイズによるデータサイズの変化をまとめてみましょう。

フォーマット 500px 150px
JPEG(高画質) 141K 36.1K
JPEG(高圧縮) 47.5K 28.8K
PNG 16.7K 4.91K
GIF 45.3K 7.83K

データサイズはPNG画像の150pxが最も小さくなり、現状から96%ほど圧縮出来るようです。
アイキャッチは全てこの条件に切替えましょう。

その結果はこちら。

googleのPageSpeed InsightsのPCは50→64→82に改善。

20150411_site_speed_10

モバイルは41→55→68。
まだ「修正が必要」が残っていますがこれは追々ということで。

20150411_site_speed_09

GTmetrixもE→C→Bと大きく改善。

20150411_site_speed_11

かなり改善出来ましたね。
まずはこんなところではないでしょうか。

いやーまさかアイキャッチ画像が原因だったとは・・・。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA