レンダリングをブロックするJavaScriptを排除する方法とCSS配信の最適化

PageSpeed Insightsを使えば、サイトのスピードを確認できるだけでなく、どこを修正すれば良いのかも知ることが出来ます。もしもここにある最適化についての提案に「レンダリングをブロックしているJavaScript/CSSを排除する」と表示されていたら、この方法で対処してみて下さい。

今回は、レンダリングをブロックするJavaScriptの除去のしかたとCSS配信を最適化する方法を紹介します。

このページの目次

1 アナリティクスで問題のページを特定する
2 CSS配信を最適化するAutoptimizeの設定方法
3 レンダリングをブロックするJavaScriptを排除する方法
4 さいごに

アナリティクスで問題のページを特定する

PageSpeed Insightsを使えば、サイトのスピードがわかるだけでなく、読み込み時間を短縮する方法なども特定することが出来ます。

通常、PageSpeed Insightsでサイト全体のスピードを測定しているかと思います。でも、Googleアナリティクスなら、ページ別に表示速度の確認をすることができます。

ページによって明らかに速度が遅いこともあるので、効率的にスピードアップを目指すならアナリティクスのPageSpeed Insightsで速度の測定をしたほうがよいかもしれません。

なので、アナリティクスを使ってページ別に速度を確認してみて下さい。やり方は簡単です。

まずはアナリティクスにログインします。「行動」をクリックしてから「サイトの速度」をクリックします。

次に「速度についての提案」をクリックします。

ページ別の平均読み込み時間が表示されるので、ほかのページに比べて異常に読み込み速度が遅いページがないかチェックします。

もし該当するページがある場合「PageSpeedの提案」をクリックします。すると、pageSpeed Insightsのページに飛びます。

このブログをドメイン名だけで測定した場合はスコアが70～80くらいなので、ページ別で確認した方がより確実に問題点を特定できるかもしれません。

ちなみに、Googleが奨励しているスコアは85以上です。

最適化についての提案にある「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」の「修正方法の表示」をクリックします。

「このページには、ブロッキングCSSが1あります。これが原因で……」と続き、CSS配信の最適化が提案されていることがわかります。この対処にはAutoptimizeというプラグインを使っていきましょう。

CSS配信を最適化するAutoptimizeの設定方法

管理画面にある「プラグイン」から「新規追加」をクリックします。

キーワードに「autoptimize]と入力して検索したら「今すぐインストール」をクリックします。

「有効化」をクリックします。

プラグインの画面から「設定」をクリックします。

メインでは、HTML、JavaScript、CSSのオプションにチェックマークを入れます。

「変更を保存」をクリックします。

次に画面右上の「高度な設定を表示」をクリックします。

画面をスクロールして「CSSオプション」に来てください。ここで、次の2つにチェックを入れます。

CSSコードを最適化
インラインのCSSを連結

すべてのCSSをインライン化にはチェックを入れないで下さい。全部をインライン化してしまうと大きなデータURLもインライン化されてしまいます。

それによってスクロールしなくても見える範囲のCSSサイズが大きくなり、ページが表示されるまで時間がかかる可能性が高くなります。

Googleは、大きなデータURLとCSS属性のインライン化は避けることをすすめています。

最後に「変更を保存してキャッシュを削除」をクリックすれば完了です。

ただし、この設定をした場合、サイトの表示が崩れてしまうことがあります。万が一のときのために、この設定をするときはバックアップを取って下さい。

レンダリングをブロックするJavaScriptを排除する方法

レンダリングをブロックするスクリプトソースが表示されることがあります。この場合は、下のようなリンクが表示されると思います。

これはワードプレスが自動的に呼び出すジャバスクリプトで、次のコードをfunction.phpに追記してみて下さい。

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;       
if ( strpos( $url, 'jquery.min.js' ) ) return $url;       
return "$url' async charset='UTF-8";                      
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

if (!(is_admin() )) {

function add_async_to_enqueue_script( $url ) {

if ( FALSE === strpos( $url, '.js' ) ) return $url;

if ( strpos( $url, 'jquery.min.js' ) ) return $url;

return "$url' async charset='UTF-8";

}

add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );

}

function.phpは外観から「テーマの編集」をクリックします。

function.phpをクリックします。

コピペで上のコードを貼り付けます。

最後に「ファイルの更新」をクリックします。

これでJavaScriptの削除は完了です。

ただし、この設定をするとページを上にスクロールするボタンの表示が消えてしまうことがあるかもしれません。というのは、このブログに上のコードを追記した場合、スクロールボタンが消えてしまったからです。

ですので、このコードを追記した時には、スクロールのボタンが消えていないか確認してみて下さいね。

さいごに

Autoptimizeは、インストールしているプラグインによってうまく機能しないことがあります。もしも、このプラグインを使用するなら、設置してから数日くらいは様子をみたほうが良いと思います。

そうすれば新しい機能を追加したりして不具合が生じた場合、それに問題があるのかそれともAutoptimizeが原因なのか、推測するのが簡単です。

それから新しくプラグインをインストールするときは、複数まとめて有効化することはおすすめ出来ません。できれば、一つひとつ確認しながら導入してみて下さい。

プラグインが原因で不具合が発生してしまうことはよくあります。でも、一つずつ設置していけば、問題が生じたときでも、修復がよりスムーズになるかと思います。