SEO対策

レンダリングを妨げるリソースの除外を改善Async JavaScriptの設定方法

レンダリングを妨げるリソースの除外

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、「Async JavaScript」の設定方法についてまとめています。

 

初心者ブロガー
初心者ブロガー
レンダリングを妨げるリソースの除外ってどうやって改善したらいいの?

 

こういった方に向けて、書いています。
 

\このサイトの表示速度/
WP Fastest Cache

モバイルでの表示速度が97点に達しているので、参考になると思います。

レンダリングを妨げるリソースの除外に使うプラグイン

レンダリングを妨げるリソースの除外

レンダリングを妨げるリソースの除外には、「Async JavaScript」を使います。

 

「Async JavaScript」は、外部リソースのJavaScriptファイルの読み込みを非同期化して読み込み速度を高速化してくれます。

 

姉妹プラグイン「Autoptimize」と合わせて使用することで、より最適化に貢献できます。

「Autoptimize」の設定方法は、⬇︎下記記事にまとめてあります。
 

\Autoptimizeの設定方法/

 

JavaScriptとCSSは、プログラミング言語のことです。

 

Async JavaScriptのインストール

まずは、「Async JavaScript」をインストールしましょう。

 

インストールするには、「プラグイン」➡︎「新規追加」を押しましょう。

 

キーワードに、「JavaScript」と入力すれば出てきます。

レンダリングを妨げるリソースの除外

インストール後は、有効化することを忘れないようにしましょう。

レンダリングを妨げるリソースの除外

パソコンにダウンロードして取得したいという方は、⬇︎下記リンクより取得できます。

 

\Async JavaScriptをダウンロード/

 

Async JavaScriptの設定

レンダリングを妨げるリソースの除外

Async JavaScript」の設定するには、「Settings」を押しましょう。

設定すべき箇所は、「Settings」に揃ってるので他は、変更しません。

 

設定さえしておけば、あとは入れておくだけなので設定をしっかりしておきましょう。

 

Enable Async JavaScript

レンダリングを妨げるリソースの除外

「Enable Async JavaScript」は、非同期JavaScriptを有効にするチェック項目です。

ここにチェックを入れないと機能しないので、チェックしましょう。

Async JavaScript Method

レンダリングを妨げるリソースの除外

Async JavaScript Methodは、async or deferのどちらかを選択します。

 

  • async:非同期
  • defer:遅延

 

筆者は、deferを選択しています。

おすすめはないので、早い方を選択しましょう。

jQuery

レンダリングを妨げるリソースの除外

jQueryはJavaScriptのためのライブラリです。

jQueryを使用することでシンプルにJavaScriptを記述できるようになり、数十行にわたるコードが数行で実行できるようになります。

 

  • async:非同期
  • defer:遅延
  • Exclude:除外

 

筆者は、deferを選択しています。

jQueryは表示に問題も出やすいので、deferで問題があればasyncにしましょう。

Async JavaScript For Plugins

レンダリングを妨げるリソースの除外

こちらは、「Autoptimize」を使っている場合は設定しましょう。

「Enable Autoptimize Support to allow you to override AO’s default “defer” flag」にチェックを入れます。

Autoptimize Javascript Methodのどちらかに、チェックを入れて保存しましょう。

これで設定は完了です。

まとめAsync JavaScriptとAutoptimizeはセットで使おう

Async JavaScript」は、レンダリングを妨げるリソースの除外のJavaScriptファイルを改善するのに役立ちます。

「Autoptimize」とあわせて使うことで、より最適化に貢献できます。

 

\Autoptimizeの設定方法と使い方/

 

最後まで見ていただき、ありがとうございました。
 

ABOUT ME
りゅうのすけ
高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
PS.

記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
 

\1円からのドネーション/

仕事依頼

 

\WordPress開設依頼/

公式LINE

 

\公式LINEもやってます/
公式LINE無料プレゼント

 

  • ワンクリックで登録可能
  • 個人情報はこちらからわからないようになっているのでご安心を

 

こんな人におすすめ
  • ブログを進めていく上でわからないことがある
  • 設定など誰か相談できる人が欲しい
  • 記事ネタに困った時に情報収集したい
  • ブロガー仲間が欲しい

 
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
 

登録者特典

 

公式LINE@無料プレゼント
  1. 限定公開記事の共通パスワード配布
    • ブログ内の限定公開記事のパスワードを配布してます。
  2. サイト作成依頼クーポンコード
    • サイト作成依頼時に使えるクーポンコードを配布します。
  3. ブログスターターキット
    • ブログに必要な便利ツール、イラストなど随時更新
  4. 完全個別無料相談
    • ブログについて、1日1人限定で無料相談を受けてます。
      (営業を仕掛けるのはやめてください。)

 

\友達追加しますと、下記のメニューが表示されます。/
公式LINEリッチメニュー

 
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!