Async JavaScriptとAutoptimizeと高速化
- Async JavaScript（非同期JavaScript）
- Autoptimize（CSS、JS、画像、Google フォントなどを最適化プラグイン）
Async JavaScriptとAutoptimize の必要性は、PageSpeed Insightsでパフォーマンスをテストしてみればわかりますが、CSS、JS、画像、Google フォントなどを最適化非同期JavaScriptが必要だと感じます。閲覧者にとってはページの表示速度は速い方がいいですから。
PageSpeed Insights
PageSpeed Insights で閲覧者にページが快適に表示されるのかテストできます。
PageSpeed Insights では、ページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0～100 の値として算出します。次の 2 つの項目について、ページのパフォーマンスが改善できるかどうかを評価します。
スクロールせずに見える範囲のコンテンツの読み込み時間
PageSpeed Insights
ページ全体の読み込み時間
非同期 JavaScript
非同期 JavaScriptJavaScript はどのような働きをするのでしょうか。
同期処理と非同期処理について
同期処理
同期処理
ソースコードは上から順番に処理され、1つの処理が終了して次の処理を行う。
非同期処理
非同期処理
処理の終了を待たずに、次の処理を行う。
同期処理の場合
非同期処理の場合
Async JavaScript の設定
- Async 非同期
- Defer 遅延
- Exclude 除外
Autoptimize の設定
「JS、CSS & HTML」タブの設定
| 最適化 | チェックを入れる項目 |
|---|---|
| JavaScriptオプション | JavaScript コードの最適化 連結しないで遅延 |
| CSS オプション | CSS コードを最適化 CSS ファイルを連結 インラインの CSS も連結 |
| HTML オプション | HTML コードを最適化 |
その他のオプション
| 項目 | チェックを外す場合 |
|---|---|
| CSSを静的ファイルとして保存 | CSS を静的ファイルで圧縮されない場合や有効期限が正しく処理されない場合はチェックを外す |
| 除外されたCSSファイルとJSファイルを最小化 | 上の設定で除外してもサイトが壊れている場合はチェックを外す |
| 404フォールバックの使用 | 存在しないページに404を表示する機能によりサイトが崩れることがある |
| ログイン状態の編集者 管理者にも最適化を行う | 編集者 管理者に最適化を行いたくない場合はチェックを外す |
| 投稿/ページごとに設定 | 投稿/ページごとに最適化の設定をしない場合はチェックを外す |
Async JavaScriptとAutoptimize による不具合
webサイトはシンプルに快適に閲覧できる方がいいと思います。Async JavaScriptとAutoptimize による不具合がありますので、それを下記リンクにまとめています。
Autoptimize と Jetpack by WordPress によるエラーについて
モバイルページでスライドショーが表示されないエラーを修正
