Wordpress

PageSpeed Insightsで、低成績を目の当たりにし、環境改善に向けて舵を切った私。

まずは、「レンダリングを妨げるリソースの除外」に挑戦。

そもそも、レンダリングを妨げるソースというと、通常、CSSかJavaScriptとの事。

けれど、すべてのCSSやJavaScriptがレンダリングを妨ぐわけではない。

 

現時点で実行 or 検討中の操作 ▼

プラグイン「WP Rocket」の導入

WP Rocketというプラグインがかなり優秀だとか。

これ一つで高速化における様々な機能が付属され処理できる上に、セットアップも簡単!

と、海外ではずっと高い評価をうけている様子。

時間をかけずに効率的に高速化したいなら、導入すべきプラグインのよう。

ただ…有料なんだなぁ…。

サポート & アップデート ウェブサイト
$ 49 /年 1年間 1つ
$ 99/年 1年間 3つ
$ 249 /年 1年間 無制限

 

機能面で考えるとかなりコスパがよさそうだけれど、

私にはまだちょっと手が出しづらい…

もう少しブログ収入があがってきたらサイド検討予定。

 

…とゆーわけで、以下からはWP Rocktを使わずに色々工夫する方法。

async属性で非同期処理

ブラウザは、HTMLファイルを上から順番に解析する。

HTMLにCSSファイルやJavaScriptファイル、写真 etc.のURLが合った場合、その都度サーバーからファイルをダウンロードすることになる。

 

async属性を付与すると、スクリプトを非同期で読み込むことができる。

非同期でjsを読み込むと、スクリプトをバックグラウンドでダウンロードできるので、ページのレンダリングを速くすることができる。

マニュアルでasync属性を付与

async属性は、HTMLに書くだけで簡単に付与することができる。

通常▼

<script
src="http://hogehost.com/hoge-hoge.js">
</script>

 

script-injectedを利用する場合▼

<script>
var script = document.createElement('script');
script.src = "http://hogehost.com/hoge-hoge.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

 

async属性▼

<script
src="http://hogehost.com/hoge-hoge.js" async>
</script>

 

……と、簡単なんだけど、毎回追記するのはちょっと面倒なので、

上記はもう少し慣れてから。

今回はプラグインを導入。

プラグイン「Async JavaScript」

今回は「Async JavaScript」というプラグインを導入した。

1) 上部にある「Enable Async JavaScript」チェックボックスをオンにする

2)「Quick Settings」ボックスで「Apply Async」または「Apply Defer」を選択

 

※ どちらが良いかは場合による。

defer の特徴

  • HTMLパーサを停止しない
  • HTMLのパースが終わり次第実行される
  • defer 属性をつけたスクリプトが全て実行されるまで DOMContentLoaded イベントは発火されない
  • 実行順序はHTMLの記述通り

async の特徴

  • スクリプトのダウンロード時にHTMLパーサを停止しない
  • スクリプトファイルのダウンロードが終わり次第、HTMlパーサを停止し、実行される
  • async 属性をつけたスクリプトが全て実行されるまで load イベントは発火されない
  • 実行順序は不定(ダウンロードが先に終わったものから実行される)

 

AsyncとDeferの使い分け

  • 他のスクリプトファイルに依存される場合は defer(jQueryなど)
  • 他のスクリプトファイルに依存する場合も defer(jQueryプラグインなど)
  • DOM要素をいじる場合も defer(document.querySelectorとかを使う場合など)
  • 上記以外は async(Google アナリティクス用スクリプトなど)

defer と async の大きな違いの一つとして、実行順序が決まっているかどうか。

deferの場合、HTMLで先に書いたほうが先に実行される。

async の場合は実行順序は決まっていないため、依存関係にあるスクリプト同士を読み込む場合は defer を使ったほうが安全。

けれども、場合によってはasyncの方がよい場合もある。

HTML. CSS. JavaScriptを圧縮

HTML, CSS, JavaScriptを圧縮することで、軽量化を図る。

今回はプラグインで。

プラグイン「Autoptimize」の導入

Autoptimizeは、CSSやJSなどのリソースを圧縮し、軽量・最適化してくれるプラグイン。

開業やスペースを削除してくれたり、複数のファイルを結合して圧縮してくれたりと、色々と便利な機能が備わっている。

1)「Optimize JavaScript Code」のボックスにチェックを入れる

2)「Optimize CSS Code」ボックスにチェックを入れる

他はデフォルトでOK。

上級者の場合は重要なCSSを手動でインライン化することも可能だが、知識がない場合はそのままで。

 

 

以上の2つを試みた時点で、

PageSpeed Insightsの結果は、

  • モバイル:17 → 37
  • PC:60 → 88

まで改善。

 

First Contentful Paintがそれぞれ

  • モバイル:2.0s
  • PC:0.6s

と大幅に改善した。

Javascriptファイルをフッター行に移動

Webページの読み込みはHTMLの上部から行われるので、HTMLの記述の最初の方にJavascriptファイルがたくさんあると、その読み込みに時間がかかり、ページの表示速度が遅くなる。

そこで、このプラグインをつかって、Javascriptファイルをヘッダー行からフッター行に移動させ、ページの読み込み速度をアップさせる。

 

使用したプラグインは、「Speed Up- JavaScript To Footer」というプラグイン。

使用方法は、

プラグイン
 ↓
新規追加
 ↓
JavaScript to Footer を検索
 ↓
インストール
 ↓
有効化

これだけ。

 

なんだけど、これだけで、PageSpeed Insightsの評価が

メインドメイン:

  • Mobile :36 → 51
  • Desktop : 76 → 82

サブドメイン:

  • Mobile :40 → 55
  • Desktop : 80 → 90

に向上。

これは入れる価値あり!

Font Awesomeのコードをフッター行に移動

私は、アイコンに「Font Awesom」を使用している。

Fontawsomeを使用するにあたって、下記コードをヘッダーの中に入れていた。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css" rel="stylesheet">

 

けれども、ヘッダーにあると、CSSなのでレンダリングを妨げる事になる。

 

…ということで、上記コードをヘッタ-から削除し、

フッターの</body>タグの直前に移動させた。

 

 

 

以上、色々試してみてある程度改善したが、まだ道半ば。

 

……次の課題に挑戦。

References

にほんブログ村 科学ブログ 脳科学へ
にほんブログ村 子育てブログ 海外ワーキングマザー育児へ
PVアクセスランキング にほんブログ村