ホーム WordPress Autoptimizeを使ってレンダリングを妨げるリソースを除外する方法

Autoptimizeを使ってレンダリングを妨げるリソースを除外する方法

GoogleのPageSpeed InsightsでWebサイトのパフォーマンスを計測した時に、ほとんどの方が遭遇する改善項目「レンダリングを妨げるリソースを除外」は、WordPressのプラグイン「Autoptimize」を使って比較的簡単に対処できます。 この記事ではプラグインで設定すべき項目の解説に加え、ページ表示が崩れた場合の対処として役立つ最適化除外項目の指定方法や除外した項目のレンダリングブロックを回避する方法をガイドします。

Autoptimizeプラグインについて

Autoptimizeは、WordPressが出力するJavaScript、CSS、Htmlからページのレンダリング(≒表示)に不要な改行やコメントなどの要素を除去するなどしてコードを縮小(≒minify)したり結合(≒combine)することで、レンダリングを高速化することができるプラグインです。また最適化されたコードを読み込ませる場所やタイミングを変更して JavaScriptやCSSによるレンダリングブロックを回避(=レンダリングを妨げるリソースを除外)することができます。

Autoptimizeでレンダリングブロックを回避するために必要な設定は、「プラグイン設定画面JS,CSS & HTMLタブ」にある JavaScriptオプションと CSSオプションの2ヶ所でおこないます。

JavaScriptオプション

下記画像のように項目にチェックを入れ、必要に応じて除外するスクリプトを指定します。

Autoptimize JavaScriptオプション
JavaScript コードの最適化

この項目にチェックを入れるとJavaScriptコードが最適化されます。

Aggregate JS-files?

この項目にチェックを入れると、下で除外指定したJavaScriptを除いて、該当するページで読み込まれるJavaScriptファイルを非同期(defer)属性を追加した一つのファイルに連結して</body>の直前で読み込ませることで、JavaScriptコードのレンダリングブロックを回避することができます。

インラインの JS を連結

HTML内に直接出力されているJavaScriptコードを抽出して上記のJavaScriptファイルと一緒に連結させることができます。

内へJavaScriptを強制

レンダリングブロックが発生するのでチェックしません。上記の連結によるエラーを回避するには次の除外オプションを使用しましょう。

Autoptimize からスクリプトを除外

コードの最適化や連結の対象から、指定した.jsファイルを除外してエラーを回避することができます。個別の.jsファイルだけでなく、テーマやプラグインに含まれる.jsファイルを丸ごと除外したり、インラインのJSのうち特定のコードだけを除外することも可能です。除外方法についてはこの後詳しく説明します。

try-catch の折り返しを追加

プラグインの画面で説明されているとおり。通常はチェックする必要はありませんが、エラーが出る場合は上記の除外オプションを指定する前に試してみても良いかもしれません。

Autoptimize からスクリプトを除外する項目と指定方法

除外するべきスクリプトは、お使いのテーマやプラグインによって異なりますが、デフォルト値でサイトの表示が崩れるなどの不具合が生じる場合は、以下の手順を参考に除外するべき項目を指定してみてください。

「JavaScript コードの最適化」のチェックを外して、いったん最適化前の状態に戻してから 「ブラウザでページのソースを表示」します。$

ページのソースを表示する方法

Chromeの場合は右クリックで表示されるメニューから「ページのソースを表示」をクリックします。

ページのソースコードを表示したら、~内で読み込まれている.jsファイルを探します。$

レンダリングをブロックするCSSとJavaScriptの例

当ブログの場合、WordPressに内蔵されている.jsファイル(ピンク色)と、テーマに内蔵されている.jsファイル(水色)が~内で読み込まれていることがわかります。

上記の.jsファイルを除外項目の入力欄に、~内で読み込まれている順番どおりに.jsファイルを指定します。$

除外する項目を複数指定する場合は、各項目をカンマ「,」で区切って記入します。指定方法は以下のとおり。

  • ファイル名+拡張子で指定する方法
    例:modernizr.min.js, tc-script.min.js
  • 特定フォルダ+ファイル名+拡張子で指定する方法
    例:js/jquery/jquery.js, js/jquery/jquery-migrate.min.js
    ファイル名+拡張子だけで指定した場合に、プラグインなどに含まれるものと重複してしまう可能性がある場合は、該当のファイルが含まれる上位のフォルダを指定します。
  • テーマやプラグインに含まれる.jsファイル全部を指定する方法
    例:themes/customizr-pro, plugins/nextend-smart-slider3-pro
  • 上記の組み合わせ
    例:seal.js, js/jquery/jquery.js, modernizr.min.js, tc-scripts.min.js, plugins/nextend-smart-slider3-pro

「JavaScript コードの最適化」のチェックを再度有効化してからサイトを表示し、表示に不具合がないかを確認します。$

この時点でまだ不具合がある場合は、~内で読み込まれているプラグイン用の.jsファイルやインラインのスクリプトコードを指定します。

特定のインラインスクリプトを除外するには、他のスクリプトで使用されていないユニークな文字列を指定します。

<script id="funky_script">funky_data="Won’t you take me to, Funky Town"</script>

上記のようなスクリプトを除外したいのであれば、funky_script または funky_data を除外項目欄に記入します。

必要に応じて上記で指定した.jsファイルを、ひとつづつ削除して表示を確認し、除外するファイルを絞り込みます。$

※テーマフォルダ内の.jsファイルであれば、後ろから順に削除するのがおすすめです。

  • 例えば、Smart Slider3(スライド用プラグイン)のように、プラグイン自体が非同期の.jsファイルを出力する場合は、プラグインフォルダを丸ごと除外指定します。
  • AdsenseやAnalitycs、Tag Managerなど<head>や<body>に直接記述しているコードをAutoptimizeの最適化や連結から除外する場合は、該当するコードを<!--noptimize-->~<!--/noptimize-->タグで囲みます。

CSSオプション

Autoptimize JavaScriptオプション

上記画像のように項目にチェックを入れ、必要に応じて除外するCSSを指定します。

CSSコードを最適化

この項目にチェックを入れるとCSSコードが最適化されます。

Aggregate CSS-files?

この項目にチェックを入れると、下で除外指定したCSSを除いて、該当するページで読み込まれるCSSファイルを一つのファイルに連結して<head>~</head>内で読み込むようになります。CSSの縮小と連結がされる分、若干の高速化が見込めますが、このオプション単品だとレンダリングのブロックは回避できません。レンダリングのブロックを回避するには、この下の「インラインの CSS を連結」オプションと併用します。

インラインの CSS を連結

HTML内に直接出力されているCSSコードを抽出して上記のCSSファイルと一緒に連結させることができます。このオプションを使用するには「Aggregate CSS-files?」オプションを有効にする必要があります。

データを生成 : 画像を URI 化

テーマやプラグインを構成するパーツなどでCSSを使ってごく小さな背景画像を指定している場合があります。それらの画像をBase64と呼ばれるテキストデータに置き換えてCSS自体に含めることで、サーバーリクエスト数を減少させます。背景画像をほとんど使用していない場合は効果はほとんどありませんが、チェックしておいても問題はありません。

CSS のインライン化と遅延

PCやスマホで最初に表示される部分(要素)で使用されているCSS(≒クリティカルCSS)を <head>~</head>内にインラインで出力し、それ以外はひとまとめにして「loadCSS」を使った非同期読み込みをおこなうことでCSSによるレンダリングブロックを回避します。Autoptimizeと提携している有料サービスと組み合わせれば、各ページのクリティカルCSSを自動で解析・設定してくれるので絶大な効果を期待できますが、無料で使う場合、クリティカルCSSをページごとに設定・運用するのは非現実的なので、基本的にこのオプションを使うことはありません。

なお、このオプションは次の「すべての CSS をインライン化」と併用することはできません(機能的に矛盾が生じるため)。

すべての CSS をインライン化

前述の「Aggregate CSS-files?」で連結したCSSファイルをリンクで読み込むのではなく、直接~内に展開(=出力)します。ページのソースを表示した時に~内がCSSの記述でいっぱいになりコードが見苦しくなりますが、レンダリングブロックの回避とパフォーマンスの向上に威力を発揮します。

なお、プラグインの解説ではパフォーマンスの低下について言及されていますが、通常は問題ないはずです。気になる場合は、PageSpeed Insightsで比較計測してみてください。このオプションを使用するには「Aggregate CSS-files?」オプションを有効にする必要があります。

Autoptimize から CSS を除外

最適化や連結の必要がないCSSを指定して除外します。デフォルトでは、キャッシュフォルダやアップロードフォルダ、ログイン時に画面上部に表示されるadminバー、管理画面用のアイコンフォントなどが指定されています。特に変更する必要はありませんが、お使いのプラグインでCSSの非同期出力に対応していいるものがあれば、該当するプラグインのフォルダを指定しても良いでしょう。指定の方法は前述のJavaScriptの箇所で書いたものと同じですのでそちらを参考にしてください。

HTML オプション、CDNオプション、キャッシュ情報について

ページのソースを出力する際に、不要な改行やコメントなどの要素を除去するなどしてコードを縮小します。ただし、Autoptimizeではページを静的ファイル(HTML)としてキャッシュしないので、パフォーマンスをさらに向上するにはページキャッシュができるプラグインを併用する必要があります。なお、HTMLオプション自体はレンダリングブロックの回避とは関係がありません。

CDNオプションは、通常何も記入する必要はありません。キャッシュ情報では、最適化されたJavaScriptやCSSが保存されているフォルダの場所や生成されたキャッシュのサイズなどを確認できます。いずれも今回のレンダリングブロックの回避とは関係がありません。

その他オプション

その他のオプションについては、下記画像のように設定します。

Autoptimizeその他のオプション
連結されたスクリプト / CSS を静的ファイルとして保存

最適化されたJavaScriptやCSSを静的なファイルとしてキャッシュすることで閲覧者がページにアクセスした際のパフォーマンスが向上します。特に不具合がない限りONにします。

Minify excluded CSS and JS files?

JavaScriptやCSSのオプションで、Aggregate(連結)させないために、最適化から除外した.jsファイル、.cssファイルについて、独立性を維持した状態で(=他の同種のファイルと連結させないで)コードの最適化だけおこなうことができます。今回はこの後の作業に支障が出るので、このオプションはOFFにしておきます。

ログイン中のユーザーも最適化しますか ?

正直どちらでもかまいません。特に問題がなければONにしたままでも良いでしょう。プレビュー時の表示速度が向上するかもしれません。

JavaScriptオプションで除外した.jsファイルのレンダリングブロックを回避する

この記事の作業例では、JavaScriptオプションでWordPressに内蔵されている「jquery.js」や「jquery-migrate.min.js」などを除外しました。Autoptimizeの最適化から除外したことでいずれのファイルも、このままの状態ではPageSpeed Insightsの改善項目「レンダリングを妨げるリソースを除外」から消えません。

これらの.jsファイルはテーマやプラグインが正しく動作するために<head>~</head>内に決められた順序で実行される必要があるのでそのままにしておきますが、以下のコードを<head>~</head>内の最初の方に記述して、読み込みだけを非同期で先行させることで、PageSpeed Insightsの改善項目から消すことができます。

例えば除外したjquery.jsとjquery-migrate.min.jsをpreloadする場合は以下のように記述します。

<link rel="preload prefetch" as="script" href="//yourdomain.com/wp-includes/js/jquery/jquery.js">
<link rel="preload prefetch" as="script" href="//yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js">

レンダリングブロックするCSSがまだ残っている場合や「キー リクエストのプリロード」で、自サーバー内のファイルが指摘される場合も、<link rel=preload> を使って改善項目から消すことができます。 なお、<link rel=preload>の記述方法は先読みさせるファイルの種類によって若干異なるので、詳しく知りたい方は検索してみてください。

ついでに、FontAwesomeも非同期で読み込む

サイトでFontAwesomeのアイコンフォントを使用している場合は、fontawesomeのCSSもレンダリングブロックの対象になります。Autoptimizeの最適化や上記の<link rel=preloadでも対処可能ですが、以下のコードを<head>~</head>内に記述する方法がおすすめです。

<!--noptimize-->
<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://yourdomain.com/wp-content/themes/your-theme/assets/shared/fonts/fa/css/fontawesome-all.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
<!--/noptimize-->
  • 上記 「href =」内のURLはご自身のサイト内のfontawesome-all.min.cssファイルのパスまたは、fontawesomeを配信しているCDNのファイルパスに置き換えてください。
  • 上記のコードがAutoptimizeで最適化&結合されるのを防ぐため、<!--noptimize-->~<!--/noptimize-->でコードを囲んでください。
  • 上記のコードでご自身のサイト内のfontawesome-all.min.cssを非同期で読み込む場合は、AutoptimizeのCSSオプションでfontawesome-all.min.cssを除外指定しておきます。

作業後のページ出力例

作業例では、最終的に以下のようなページソースになりました。下記の画像では解説に不要な部分を一部省略しています。

Autoptimizeを使ってレンダリングを妨げるリソースを除外した後のページソース例

まとめ

最後に手順のポイントをまとめておきます。

ページソースを表示して内で読み込まれるWordPress内蔵のJS、CSSファイルとテーマ内蔵のJS、CSSファイルを特定する

Awesomeでコードを最適化&連結し、JSは直前に、CSSはすべてをインライン化させる

ページの表示に不具合があるようならば、❶で特定したファイルを除外項目で指定し、絞り込む

非同期でのJSやCSSの出力に対応したプラグインがある場合は、そのプラグインもAutoptimizeから除外する

除外した項目は <link rel=preload> を使ってレンダリングブロックを回避する


いかがでしょうか。レンダリングを妨げるリソースを除外すると、Lighthouseの速度スコアの大幅な改善が見込めるので、低スコアに悩んでいる方はぜひ試してみてください。