Morning&Lunch
配信とインテリアの実話映画
PCとスマホとゲーム
WordPressを簡単に
Morning&Lunch
Morning&Lunch

モーニング&ランチ

配信とインテリアの実話映画
配信とインテリアの実話映画

Style Note

PCとスマホとゲーム
PCとスマホとゲーム

webNote

WordPressを簡単に
WordPressを簡単に

WordPress

previous arrow
next arrow
Shadow

非同期処理と同期処理 Async JavaScriptとAutoptimizeの利用

Async JavaScript 非同期処理WP 設定
Async JavaScript 非同期処理
WP 設定

Async JavaScriptAutoptimizeと高速化

  • Async JavaScript(非同期JavaScript)
  • Autoptimize(CSS、JS、画像、Google フォントなどを最適化プラグイン)

Async JavaScriptAutoptimize の必要性は、PageSpeed Insightsでパフォーマンスをテストしてみればわかりますが、CSS、JS、画像、Google フォントなどを最適化非同期JavaScriptが必要だと感じます。閲覧者にとってはページの表示速度は速い方がいいですから。

PageSpeed Insights

PageSpeed Insights で閲覧者にページが快適に表示されるのかテストできます。

PageSpeed Insights では、ページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0~100 の値として算出します。次の 2 つの項目について、ページのパフォーマンスが改善できるかどうかを評価します。

スクロールせずに見える範囲のコンテンツの読み込み時間
ページ全体の読み込み時間

PageSpeed Insights

非同期JavaScript

非同期JavaScript はどのような働きをするのでしょうか。

同期処理と非同期処理について

同期処理

同期処理

ソースコードは上から順番に処理され、1つの処理が終了して次の処理を行う。

非同期処理

非同期処理

処理の終了を待たずに、次の処理を行う。

同期処理の場合

Async JavaScript 同期処理
Async JavaScript 同期処理

非同期処理の場合

Async JavaScript 非同期処理
Async JavaScript 非同期処理

Async JavaScriptとAutoptimize による不具合

webサイトはシンプルに快適に閲覧できる方がいいと思います。Async JavaScriptとAutoptimize による不具合がありますので、それを下記リンクにまとめています。

Autoptimize と Jetpack by WordPress によるエラーについて

モバイルページでスライドショーが表示されないエラーを修正

タイトルとURLをコピーしました