どうもイトサル(@itosaru)です。
wordpressで立ち上げたブログのスマホのレスポンスを改善させたいです。
どのような対応を入れればいいか教えてください。
こうったお悩みをお持ちの方向けに書いています。
私も手探りでいろいろと試してみてある程度のレスポンスが出るように改善できたのでその方法をお伝えします。
レスポンス改善前の状態
ここからはイトサルブログのレスポンス改善前の状態を書きます。
改善案だけ知りたい方は読み飛ばしてください。
レスポンスの評価はGoogleのPageSpeed Insightsを使って行いました。
このブログのレスポンス改善前のスコアは下の図の状態でした。
携帯電話：35
デスクトップ：94
携帯電話（スマホ）のレスポンスが壊滅的のため、とりあえず及第点の50以上を目指しました。
改善できる項目
PageSpeed Insightsではレスポンスのスコアに加えて改善できる項目を挙げてくれます。
ここに書かれた項目をつぶしていくことでレスポンス改善ができると考え修正を実施しました。
ここから下で実際に修正したことについて説明していきます。
使っていないプラグインの無効化
まずはレンダリングを妨げるリソースの除外の内容を確認します。
中を見てみるとレスポンス改善のために導入したプラグイン「jetpack」が挙がっていました。
jetpackはセキュリティ向上や高速化を実現する人気のwordpressプラグインです。
ただレスポンス悪化につながっているということで今回アンインストールしました。
プラグインアンインストール後の携帯電話のスコアはこちらです。
少し改善しましたがまだ十分と言えません。
jQueryの読み込み設定
次にレンダリングを妨げるものに挙げられたのはjavaScriptを簡単に扱える部品のjQuery。
このjQueryがレスポンスに悪影響を与えていることが分かりました。
ブログ立上げ後に手動でjQueryを導入していませんでしたが、調べてみるとjQueryは
- WordPress管理者画面で使用している
- 問い合わせフォームのプラグイン「contact form7」で一部使用している
そうです。
jQuery自体を読まないようにするのは少し危険なので、phpのコードで読み込むタイミングをずらすことにしました。
記述したコードは下のものです。
function deregister_jquery() {
//jquery.min.jsとjquery-migrate.min.jsの読み込み解除
wp_deregister_script('jquery');
wp_deregister_script('jquery-core');
wp_deregister_script('jquery-migrate');
//後読みでjquery.min.jsとjquery-migrate.min.jsを設定する
wp_enqueue_script('jquery-core','https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '1.12.4', true);
wp_enqueue_script('jquery-migrate', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js', array(), '1.4.1', true);
}
add_action('wp_enqueue_scripts', 'deregister_jquery');【注意点】
・コードを追記する前にfunction.phpのバックアップを取っておいてください。
→最悪の場合ブログがうまく動かなくなります。
※php初心者なのでもっとうまい書き方があるかもしれません。
上のコードを追加したところ、携帯のスコアが「51」まで改善しました。
スマホで使っていないスクリプトの停止
最後に使用していないjavascriptの削減を確認したところ、ブログに埋め込んだTwitterウィジェットがレスポンスに影響を及ぼしていました。
スマホではTwitterウィジェットは出していないので読み込まないように設定します。
調べてみたら「Widget Logic」プラグインを使えば簡単に設定ができました。
「Widget Logic」はウィジェット編集画面で条件分岐コードを記入できる便利なプラグインです。
プラグインを導入するとウィジェット画面に「ウィジェットのロジック」の項目が追加されます。
スマホでウィジェットを表示させないために下のコードを追加します。
!wp_is_mobile()
このロジックを追加したところ、スコアが「58」まで改善しました。
まとめ：レスポンス改善の際はPageSpeed Insightsを使いましょう
PageSpeed Insightsの改善できる項目に挙がったものを修正したところ、スマホのスコアが「35」から「58」まで改善しました。
ほかにも改善できる点がありそうですが、今回は及第点の50以上をゴールにしたため良しとします。
PageSpeed Insightsは具体的に修正すべき項目が分かるため非常に優秀です。
レスポンスを改善したいときには積極的に使うようにしましょう。
コメント