EA作成サービスの詳細はこちら

WordPressのHuemanテーマの表示速度高速化のチューニング

huemanのテーマ

WordPressのHuemanテーマの表示速度高速化のチューニング

突然ですが、

誠に申し訳ありませんでした。

ブログのパフォーマンスチューニングを実施中に、

一時的にですが当ブログの表示がおかしくなったり、画像が表示されなくなったりしておりました。

しかし、苦労したかいもあり、約2倍ほど表示速度がアップしております!

今回は、そんなWordPressのテーマ「hueman」でのパフォーマンスのチューニングについて、

注意点を踏まえご紹介いたします。

まずは現状の表示速度を把握しよう

現在の表示速度とボトルネックを把握しましょう。

サイト表示速度を計る際のオススメは「GTMetrics」というサイトです。

[browser-shot width=”150″ url=”http://gtmetrix.com/”]


【おすすめ】サイトの表示速度を計るサイト | GTmetrix

URLに表示速度を計りたいサイトのURLを入力し、GOを押すだけ。表示速度やGoogleでのランクやYahooでのランクを表示してくれるためとっても参考になります。

当ブログは以下のような結果になりました。

サイトの表示速度計測結果

※メンテナンス後の表示です。(メンテナンス前はEランクとかで11s表示に掛かっていました。)

一番の注目するポイント

Page load time :表示速度 です。

理想は1~2秒。Huemanテーマの場合は、画像がたくさんあるために難しいかも。

Gradeは表示速度が速くても「C」とかになる場合があります。

勿論、AAランクで表示速度が1秒であれば申し分ありません。

ボトルネックの把握

Huemanテーマの場合、ボトルネックはやはり画像のサイズと数です。

イメージサイズに伴うロードタイムの遅延 image-size

 

ということで当ブログでは画像に対してなにかしらの対策を行わないといけない!とわかるわけです。

 チューニングの前にバックアップをとろう

WordPressとPHPのバックアップを『BackWPup』の導入により、

当ブログではバックアップを1週間に一度とるようにしています。

表示速度を改善する前に必ず、バックアップを取得してください。

■ロリポップサーバーを利用している方は注意です

ロリポップサーバのPHPの設定がデフォルトですと、『BackWPup』でのバックアップ実行時にエラーが出ます。

ロリポップサーバーのPHPのバージョンを5.3(デフォルトこれ)から5.4に変更してください。

5.4にバージョンアップすることによりエラーがなくなり、正常にバックアップ取得可能になります。

ロリポップサーバのPHPのバージョン変更

PHPのバージョンを5.4に変更

PHPのバージョンを5.4に変更

 おすすめプラグインと注意点

Huemanの場合は画像を多く表示するため、その対応を行っていきます。

当ブログで導入している表示高速化のための、おすすめプラグインは下記となります。

・EWWW Image Optimizer

画像圧縮により表示時のロードタイムを減少させてくれます。

・BJ Lazy Load

スクロールなどして画像表示部分に差し掛かったときに、画像をロードするため初期表示が普段より速くなります。

おすすめ設定は以下です。400にすることによりスムーズに画像が読み込まれるようになります。

BJ Lazy Loadのおすすめ設定

・Head Cleaner(検証中)

javaScriptをhead内から追い出してbodyタグの最後に読み込むように最適化してくれます。

※HuemanにHead Cleanerを適用するとTOP画面の画像が表示されなくなります

まだ、検証中ですが、どうやらJavaScriptの統合により、

スライドするJavaScriptがおかしくしている可能性があります。

Huemanで適用している方おりましたら設定方法を教えていただければ幸いです。

・W3 Total Cache

初回表示によりサーバー側でキャッシュ(一時記憶)により、次回同じURLを表示した際は、キャッシュにより表示がかなり高速化されます。

※しかし!WPtouch Mobile Pluginを導入していると、

モバイルで表示した際のキャッシュが残ってしまう場合があります

パソコンで見てもモバイルでの表示になってしまう・・・

この解決方法は、

『performance』⇒『User Agent Groups』で以下の赤枠のように設定する。

Enbledにチェックし、モバイルの端末を入力しよう

User agentsの入力値は以下を設定してください。

acer\ s100
android
archos5
bada
bb10
blackberry9500
blackberry9530
blackberry9550
blackberry\ 9800
cupcake
docomo\ ht\-03a
dream
froyo
googlebot-mobile
htc\ hero
htc\ magic
htc_dream
htc_magic
iemobile/7.0
incognito
ipad
iphone
ipod
kindle
lg\-gw620
liquid\ build
maemo
mot\-mb200
mot\-mb300
nexus\ 7
nexus\ one
opera\ mini
s8000
samsung\-s8000
series60.*webkit
series60/5\.0
sonyericssone10
sonyericssonu20
sonyericssonx10
t\-mobile\ mytouch\ 3g
t\-mobile\ opal
tattoo
touch
webmate
webos

※ObjectキャッシュのEnbledはチェックをはずしてください

上記設定によりモバイルでの表示はモバイル表示でのキャッシュ、

パソコンでの表示はパソコン表示でのキャッシュを利用するようになります。


今回ご紹介した設定はHumanが抱える画像のロードタイムを高速化する方法です。、

Hueman以外のテーマでも上記を行うことにより、

パフォーマンスが2倍以上表示速度が速くなるので是非導入してみてはいかがでしょうか。

コメントを残す

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