レンダリングブロック JavaScript/CSS を排除してみる

WordPress のページ表示高速化の中でも

難関箇所ですが

すこし頑張ってみましょう♪

 

今回は

スクロールせずに見えるコンテンツの

レンダリングブロック JavaScript/CSS を排除する

 

を実践してみます。

 

今回は3つのプラグインを使用し

できるだけ簡単にまとめてみます。

 

今回もGoogle公式の読み込み速度ツール

PageSpeed Insights

を使用し現状を確認してみましょう。

 

 

プラグイン導入前の画像がこちらです

renda1

 

 

このページには、ブロッキング スクリプト リソース が 5 あり、ブロッキング CSS リソースが 8 あります。これが原因で、ページのレンダリングに遅延が発生しています。

 

この原因を少しずつ解消していきます。

 

まず始めに使用するプラグインは

Async JS and CSS

を使用します。

 

いつもの通りプラグインをインストールして下さい。

 

実はこの Async JS and CSS を一つ導入するだけで

下の画像のように原因を減らすことができます。

 

renda2

 

ブロッキング スクリプト リソースが 3 減り

ブロッキング CSS リソースが 2 減りましたね♪

しかしこのAsync JS and CSSを使用する場合

注意が必要なんです。(対策法も説明します)

 

Async JS and CSSをデフォルト設定のまま使用すると

javascriptで動いているプラグインとの相性の問題で

表示に不具合がでる可能性がでてきます。

 

その他

CSSファイルはインライン化したせいで

逆に遅くなる危険も。

 

なので 設定を変更しましょう。

 

settings

 

プラグイン画面から settings をクリックし設定変更をします。

 

2014225

 

上記画像のように

Using tags on the foot of document」にチェックを入れます。

 

これで CSSファイルはインライン化させないよう設定できます。

 

次に

設定画面上部の部分

 

settings2

 

 

画像赤丸の部分のチェックをはずします。

 

これでAsync JS and CSSはjavascriptに作用しなくなります

よってjavascriptが関係している

表示の不具合等は解消されます。

 

しかし 現時点でPageSpeed Insightsを使用し

分析してみると

 

syuusei

 

 

先ほどの数値より原因の数が増えてます。

 

これは

javascriptに作用しない設定に変更した事が原因です。

 

ですので変わりのプラグイン

 

Asynchronous Javascript

でレンダリングブロックjavascriptを削除

 

WP Deferred Javascripts

でjavascriptを遅延ロードさせます。

 

上記2点のプラグインは特に設定は必要ありません。

 

有効化するだけで

 

renda2

 

 

始めのAsync JS and CSS導入直後の状態まで戻りました(#^.^#)

 

さらに設定変更&追加したプラグインのおかけで

具具合対処もできました♪

 

ここまでできましたら あなたのサイトもかなりスピードアップ

できたのではないでしょうか(^^♪

             夢実現プロジェクト・メールマガジン講座

AYUMI&HIROの夢実現プロジェクト始動
あなたは現状に満足されてますか?


magajin

本気で稼ぐ気があるのならご参加下さい。
アフィリエイトで稼ぐためのメールマガジン講座

btn043

この記事はお役に立てましたでしょうか? また他の誰かの役に立ちそうだと思っていただけたら、下のボタンから共有をいただけましたら運営者のモチベーション維持にもつながります。

ブログランキング・にほんブログ村へ
にほんブログ村

3 Responses to “レンダリングブロック JavaScript/CSS を排除してみる”

  1. […] を使用します。 詳細は、以下サイトが参考になります。 レンダリングブロック JavaScript/CSS を排除してみる […]

  2. […] http://affiliate-dream.net/javascriptcss-%E3%82%92%E6%8E%92%E9%99%A4%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/ (レンダリングブロック JavaScript/CSS を排除してみる) […]

  3. […] ているサイトがこちら(2014 年 5 月 20 日公開)。 レンダリングブロック JavaScript/CSS を排除してみる […]

コメントを残す

サブコンテンツ

このページの先頭へ