レンダリングを妨げるリソースの除外？Autoptimizeで簡単に解決！

まろ

Autoptimizeの設定ってどうすればいいの？レンダリングを妨げるリソースの除外の改善に有効だって聞いたんだけど・・・

GoogleのPageSpeed Insightsでサイトのスコアを測った時に『レンダリングを妨げるリソースの除外』という項目が出て来ませんでしたか？

今回は、改善項目をプラグインAutoptimizeを使ってサクッと解決してしまう方法をご紹介します！

この記事でわかる事
Autoptimizeで出来る事
Autoptimizeの設定方法
Autoptimizeの注意点

なお、サイト高速化の方法『ブログ高速化の方法と重要性！【wordpress初心者】』についてはこちらの記事をどうぞ

: ブログ高速化の方法と重要性！【wordpress初心者】
続きを見る

Contents

1.Autoptimizeで出来る事
2.Autoptimizeの設定方法
3.Autoptimizeの注意点
- 表示に不具合が発生する
  - 解決方法
- CSSが反映されない
  - 解決方法
まとめ

1.Autoptimizeで出来る事

ずぼら主婦から言わせると、急なお客さんが来たからとりあえず見える範囲だけバババーっと片付けてくれたり、日常的に散らかってる棚の整理をスッキリしてくれる整理収納アドバイザーみたいなありがたいプラグインです！

活用ポイント

GoogleのPageSpeed Insightsでサイトのスコアを測った時に改善項目としてあがる『レンダリングを妨げるリソースの除外』に非常に有効です！

どういう事かというと

『レンダリングを妨げるリソースの除外』の改善項目に、下記の改善方法を検討して下さいと表示されたと思います

ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。

これの意味は、ざっくり言うと画面で最初に見える範囲関係するJavaScript や CSS を最初にして、関係ないものは後から読み込みしましょう！って事です

急なお客さんが見えた時、テーブルの上をパパッと片付けてとりあえず見える範囲を片付けるなんてことありませんか？お客さんが入らない部屋をいきなり片付け始める事はしないと思います。

そんな感じで、先にサイトに表示される所だけ集中してJavascriptなどを動かして、関係のない部分はその他の処理が終わってから動かしましょうという意味です

また、日々散らかりがちな棚、おもちゃ箱や衣装ケースを定期的にきれいに片づけてくれるみたいな感じで、コードを最適化してくれるのがAutoptimizeです

なお、プラグインをインストールする前にはバックアップを取ることをおすすめします。wordpressのバックアップと復元をする方法『【初心者も超簡単】wordpressバックアップ＆復元する方法！』についてはこちらの記事をどうぞ

: 【初心者も超簡単】wordpressバックアップ＆復元する方法！
続きを見る

2.Autoptimizeの設定方法

手順

インストールと有効化
JS,CSS＆HTMLの設定
追加設定

ポイント

プラグインで表示に不具合が生じる場合があるので、設定前にバックアップを取っておくと安全です！

インストールと有効化

手順①

①左のメニューからプラグイン新規追加Autoptimizeで検索
②インストール有効化

JavaScriptオプションの設定

手順①　設定画面へ

①左のメニューから設定Autoptimize　または、プラグインAutoptimize設定画面へ

手順②　JavaScript オプション

①JavaScript コードの最適化とJS ファイルを連結するにチェックを入れる

各項目の説明

①JavaScript コードの最適化

ファイル内の改行などを取り除いてJavaScriptファイルを圧縮してくれます

②JS ファイルを連結する

リンクされているJavaScriptファイルをブロッキングしないよう非レンダリングとしてロードするように集約するかどうかの設定

③インラインの JS を連結

HTMLからJavaScriptを抽出して連結するかどうかの設定

警告: これにより、Autoptimize のキャッシュサイズが急速に増加することがあります。何をしているのか理解している場合のみ有効化してください。

表示や動作に不具合が生じる場合があるので、ご注意ください

④<head> 内へ JavaScript を強制

<head>内へJavaScriptを強制的に配置し、JavaScriptを早めに読み込みをさせるかどうかの設定

注意コメントがあるようにレンダリングブロックが発生するのでチェックはおすすめしません

⑤Autoptimize からスクリプトを除外:

Autoptimizeのコード最適化を適用しないスクリプトを設定します

⑥try-catch の折り返しを追加

エラーを検知できるようにするかどうかの設定。通常はチェックする必要はありません

CSSオプションの設定

手順①　CSS オプション

①CSSコードを最適化、CSSファイルを連結する、インラインのCSSを連結にチェック
②すべてのCSSをインライン化は必要な場合のみチェック

①CSS コードを最適化

CSSコードが最適化されます

②CSS ファイルを連結する

リンクされているCSSファイルをひとつに圧縮するかどうか。読み込むファイル数を減らすことによって、通信回数が減り、サイト読み込み速度の向上が見込めます。

②にチェックを入れると、③インラインの CSS を連結、④データを生成 : 画像を URI 化、⑥すべての CSS をインライン化にチェックを入れる事が出来るようになります

③、④、⑥は単体でなく②と併用で有効となります。

③インラインの CSS を連結

HTML内に記述されているCSSも対象にするかどうかについてです。チェックを入れると、HTMLファイル内のCSSも連結します。

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

個別に画像をダウンロードせず、CSS自体に小さな背景画像を含めることができます。これによりサーバーリクエスト数を減少させページ表示速度の高速化が望めます

表示に不具合が生じる場合があるのでご注意ください

⑤CSS のインライン化と遅延

HTMLページの読み込みの後にCSSを遅延してロードするかどうかの設定です

Autoptimizeの有料サービスと組み合わせる場合のみ有効

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

CSSコードをHTMLファイルと別ファイルにせず、埋め込むかどうかの設定

『HTMLのサイズが大幅に増加するため、一般的にはお勧めできません』とありますが、私の場合こちらのチェックを外すとスコアが落ちたので、チェックを入れています。不具合が出るか確認しながらチェックするか判断してみて下さい。

⑦Autoptimize から CSS を除外

Autoptimizeのコード最適化を適用しないCSSを設定します

HTMLオプションの設定

手順①　HTML オプション

①HTMLコードを最適化にチェック

HTMLコードを最適化

HTMLコードを最適化処理の対象にするかどうかの設定

HTMLコメントを残す

HTML内のコメントを残すかどうかの設定

コメントを削除し転送容量を減らしたい場合はチェックを入れません

CDNオプション以降の設定

手順①　CDN オプション以下

①デフォルトのままで変更は不要です

CDN のベース URL

CDNとは「Content Delivery Network」の略です。同一のコンテンツを、多くの配布先、例えば多くのユーザーの端末に効率的に配布するために使われる仕組みです

CDNを利用していない場合は、特に記述する必要はありません

連結されたスクリプト / CSS を静的ファイルとして保存

コメントの通り、正しく処理しない場合は、このオプションのチェックを外してください。

除外されたCSSファイルとJSファイルを縮小する

最適化から除外した.jsファイル、.cssファイルについて、独立性を維持した状態で（＝他の同種のファイルと連結させないで）コードの最適化だけおこなうことができます。

除外してもうまくいかない場合は、このオプションを外してください。

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

ダッシュボードにログインしているユーザーも、Autoptmizeに設定した最適化を有効にするかどうかの設定

その他ユーザーと同じ環境にした方が、不具合の発見が容易になるかと思うので、チェックは入れておいた方がよいかと思います

手順②

最後に変更を保存してキャッシュを削除をクリック

画像（Images)の設定

画像（Images)の設定は、特に必要ありません

遅延ロード系のプラグインを使っている場合は、不具合が生じる場合があるのでこちらにはチェックを入れないでください。

追加設定（追加の自動最適化）

ポイント

チェックする項目は、環境によって異なるので適用させたい項目のみチェックしましょう！

Google フォント

Googleフォントを使用していない場合は、Googleフォントの削除にチェック

使用している場合は、下記のどちらか

webfont.js で非同期にフォントを結合して読み込む
結合してヘッドにプリロードします（フォントのロードは遅くなりますが、レンダリングをブロックしません）display:swap。

私は上の非同期の方へチェックを入れていますが、動作を見ながら適用してみて下さい

絵文字を削除

Twitterなどで使われている絵文字がwordpressでも使用できますが、これを使っていない場合は削除にチェックを入れます

静的リソースからクエリー文字列を削除

クエリ文字列は理由があって付けるものである為、チェックはおすすめしません

サードパーティのドメインに事前接続する (上級ユーザー向け)

PageSpeed Insightsの診断に第三者コードの影響を抑えてくださいと出た場合などに使用します

特定のリクエストをプリロードする（上級ユーザー）

事前読み込みしたいリソースのURLをカンマ区切りで指定する

非同期 JavaScript ファイル (上級ユーザー向け)

非同期でロードする必要がある場合の設定（プラグインAsync Javascriptを使用すると細かな設定が出来る）

YouTube 動画の最適化

プラグインWP YouTube Lyte を使ってyoutubeの最適化ができます

3.Autoptimizeの注意点

注意点

表示に不具合が発生する
CSSが反映されない

必ずしも発生するわけではないですが、そういうコメントが多数ありました

表示に不具合が発生する

具体的な例は

レイアウトが崩れる
画像が表示されない
広告が表示されない
モバイルのみメニューボタンなどの表示が小さくなる

解決方法

JavaScript オプションの<head> 内へ JavaScript を強制へチェックを入れる

または

CSSオプションのCSS コードを最適化のチェックを外す

ポイント

表示の改善とPageSpeed Insightsのスコアを見ながら、一つ一つ確認してみて下さい

CSSが反映されない

自分でCSSを追加し、カスタマイズしたが反映されない！

解決方法

step
1コードの記述に間違いないか確認する

step
2キャッシュを削除する

Autoptimizeをインストールすると上のメニューバーの所にAutoptimizeのメニューが追加されます

これにマウスを持って行くとメニューが開くのでキャッシュを削除をクリックする

それでも反映されない場合

step
3オプションのチェックを外す

CSSオプションのインラインの CSS を連結
すべての CSS をインライン化
JavaScript オプションJSファイルを連結するのチェックを外す

こちらもどれが対応するかは、使っているテーマや環境によって変わって来るので一つ一つ確認してみて下さい

まとめ

GoogleのPageSpeed Insightsでサイトのスコアを測った時に出てくる『レンダリングを妨げるリソースの除外』をプラグインAutoptimizeを使って改善する方法について解説しました

サイトの高速化として非常に有効とされているプラグインAutoptimizeですが、環境によっては不具合が発生する場合があるので、使用する場合は必ずバックアップを取ってから実行しましょう！