記事内に広告が含まれています。

Async JS and CSSでPC表示は速くなった

wordpress表示速度改善 wordpressでブログを作ろう

 webサイトの表示速度は大事だ。

 表示速度が遅いページは見る気しないし。

 webサイトの表示速度を分析するPageSpeed Insightsで必ずでてくるのが「スタイルシートのブロッキングリソースを削除してください」という警告。

 スタイルシートのブロッキングリソースを削除するプラグインでよく紹介されているのがAsync JS and CSS。

広告

Async JS and CSSを検索して説明を見ると

注意: このプラグインは現在使用している WordPress のバージョンではテストされていません。
最終更新: 9か月前
WordPress の必須バージョン: 2.6以上
対応する最新バージョン: 3.7.1

 うーん、やっぱりちょっと不安。

 でもインストールしてみる。

広告

Async JS and CSSを有効化したら

 やっぱりモバイル表示のメニューが展開しなくなった。

 しかし、このプラグインも詳細設定がある様子。

Async JS and CSSの詳細設定

1、「Settings」をクリック。

2、「Load Javascript asynchronously」のチェックをはずして「変更を保存」

 今度は、モバイル表示のメニューはちゃんと展開できるようになった。

Async JS and CSS導入後の表示スピードをPageSpeed Insightsで測定

 トップページのモバイル表示速度が77点、PCの表示速度が82点。

 点数変わらず。

 が、さらにAsync JS and CSSの設定を変えてみるとPageSpeed Insightsの点数が上がった

「Using <link rel='stylesheet' ...> tags on the foot of document」にチェックを入れてみるとトップページのモバイル表示速度が76点、PCの表示速度が87点。

「Using @import url(...) css rules on the foot of document 」にチェックを入れてみるとトップページのモバイル表示速度が81点、PCの表示速度が87点。
 PC表示、モバイル表示とも問題なし。

「Creating <link rel='stylesheet' ...> tags using javascript afted document loaded」 にチェックを入れてみるとトップページのモバイル表示速度が81点、PCの表示速度が87点。 
 PC表示、モバイル表示とも問題なし。

「Inserting all CSS styles inline into the document FOOTER」にチェックを入れてみるとトップページのモバイル表示速度が76点、PCの表示速度が87点。

「(default)Inserting all CSS styles inline into the document HEADER 」にチェックを入れてみるとトップページのモバイル表示速度が80点、PCの表示速度が87点。

 モバイルページの表示は変わらないがPC表示はわずかにアップという結果になった。

コメント

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