雑記

SEO対策|設定を変更するだけでワードプレスの表示速度が上がる

メディア運用をされている方であれば、誰もが一度は考えるSEO対策について、紹介させていただきます。

設定自体は3分で終わりますので、ぜひお試しください。

表示速度について

最近ではページの表示速度がこれまでよりもより重要視されていて、
PageSpeed Insightsを活用する方も増えてきています。

PageSpeed Insights

⇒運営しているメディアの「ページの統計情報」や「最適化についての提案」などを調査して、教えてくれる便利なツールです。

最近では、C CHANNELkurashiruなどのように動画コンテンツのメディアが増えたり、年々メディアの表示速度は遅くなっています。

最近では下記のような表示速度を上げる施策を実施している方は多くなってきていると思います。

  • キャッシュプラグイン
  • 画像の軽量化

※ただ、これだけでは不十分なのです。

JavaScriptとCSSを排除する

「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除するという項目を解決する方法をご紹介います。

ポイントは2つのになります。

  • 「レンダリングをブロックするJavaScriptを除去」
  • 「次のCSS配信を最適化」

レンダリングをブロックするJavaScriptを除去

WordPressで構築されたウェブサイトの場合、下記のJavaScriptを指摘されます。

https://webkikaku.co.jp/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4
https://webkikaku.co.jp/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1

実はこの二つ、WordPressがwp_headに自動で呼び出すJavaScriptです。
解決方法はとても簡単で、function.phpに以下を追記するだけです。

1
2
3
4
5
6
7
8
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;       //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url;       //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8";                      // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

実施することは3つです。

  • 管理画面以外で適用する
  • jquery.min.jsは非同期の対象外にする
  • それ以外のJavaScriptはasync属性を付与して非同期にする

async属性は、

<script type=”text/javascript” src=”〜〜
こうやって記述されているJavaScriptを、
<script async type=”text/javascript” src=”〜〜

このように記述することで、非同期で読み込むことができる方法です。
もしこれで解決しないJavaScriptがあれば、直接asyncをソースに記述することで解決します。

次のCSS配信を最適化

こちらは難しいのでプラグインを使うことをオススメします。

Autoptimize

Autoptimizeというプラグインを今回は使用します。

Autoptimize の設定方法

まずプラグインの設定画面に移動します。

 

「高度な設定を表示」をクリック。

高度な設定を表示

 

「CSS オプション」からオプションにチェックしていきます。

この3つにチェックを入れて、最後に「変更を保存してキャッシュを削除」を押して完了です。

  • CSS コードを最適化
  • インラインの CSS を連結
  • すべての CSS をインライン化

 

このプラグインでは、HTMLやJSも最適化することができます。
最適化することで高速化をすることができるのですが、場合によってはウェブサイトの表示が崩れてしまうこともありますので、試す際は、表示や動作に影響が出ていないかよく確認するようにしてください。

まとめ

とても簡単な方法でワードプレスの表示速度があがりますので、

ぜひJavaScriptとCSSを排除して、表示速度をあげてユーザビリティの高いメディアを作りましょう。