シェアする

CSSとJavascriptを非同期化して高速化する「Async JS and CSS」を使ってみる

シェアする

CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる00

 

サイトの高速化について色々試す機会は増えたものの、あまり成果がみられない結果になっておりました。

しかし、今回はかなり有効そうな手段となりそうですよ!

スポンサーリンク

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

…ということを「PageSpeed Insights」は提案なさっています。
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる01

 

ならばそうしてみようではありませんか。と見つけてきたプラグインが「Async JS and CSS」で御座います。

「Async JS and CSS」は上記の問題を解決するのにおすすめされているプラグインのひとつです。

「Async JS and CSS」をインストール

おなじみ「プラグイン」→「新規追加」で、「Async JS and CSS」を検索して恐れず…とここまではいつもの流れですが、「最終更新:2年前」で私の使用しているWordPressのバージョンではテストされていないとのこと…
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる02

 

今回は経験も兼ねてインストールしてみます。
うまくいけば儲けものくらいの意気込みで行きます。

「Async JS and CSS」をインストール後の検証

CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる03

 

プラグインを有効化したデフォルト設定のままで計測してみました。

「Async JS and CSS」インストール前
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる04

 

「Async JS and CSS」インストール後
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる05

 

「スクリプトリソース」が無くなり、CSSリソースの数も少し減っています。
モバイルだと変化はみられませんでしたが、パソコンだと「2」快適に。

これは一応成功と見てよいのでしょうか?

「Async JS and CSS」設定画面

「プラグイン」→「インストール済みプラグイン」から「Async JS and CSS」を見つけて「Settings」をクリック。
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる06

 

こちらが「Async JS and CSS」の設定画面。
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる07

 

注目するポイントは2箇所です。

Load Javascript asynchronously

チェックを外すと自動的に下二つもチェックが外れたのと同じ状態になり、「Async JS and CSS」がjavascriptに対して手出しをしなくなります。
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる08

 

それじゃあプラグインを入れた意味が…となりますが、ここをチェック入れた状態にしているとjavascriptによって機能していたものがカットされ、画像表示などに不具合がでたりするのです…

たとえば私のところだと、画像をクリックしたら下図のようにスライド表示されていた機能が、生の画像表示になってしまいました。

なんとなく分かってはいましたがJavaScriptを排除すればいいというものでもないようです。うーむ。

CSS loading method

(default)Inserting all CSS styles inline into the document HEADER

になっているところを一番上の

「Using tags on the foot of document」

に変えることで、CSSファイルをインライン化させずにCSSファイルの処理を後回しにします。
CSSとJavascriptを非同期化して高速化す「Async JS and CSS」を使ってみる09

 

CSSファイルをインライン化を避けたい場合はこちらの設定にします。

まとめ

結果的に現在私のところでは

「Load Javascript asynchronously」のチェックを外し、
「Using tags on the foot of document」にチェックを入れる。

に留まりました。

これだとJavascriptに関してはノータッチになってしまいますが、せっかく導入した画像のスライドショーなどの機能が失われてしまうのは寂しいので仕方なし。です。

Javascriptによる負担は別のプラグインの導入を検討しております。

スポンサーリンク

シェアする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)