Wordpress

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

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

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

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

 

以下は、個人的に試行錯誤した内容の覚え書きと、その後プロの人に改善してもらった項目について記載。

 

なお、今回の項目を含め、PageSpeed Insight が100点になるまでに取り組んだサイトの改善内容を下記にまとめた ▼

プラグイン「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 に書くだけで簡単に付与することができる……なんだけど、毎回追記するのはちょっと面倒なので、

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

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

プラグイン「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」を使用している。

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

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

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

 

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

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

プロの人に改善してもらった内容

この記事を書いていた時には、自分で試行錯誤していたけれど、後日、自分では改善が難しかった内容について、よっし~ずウェブサービス さんにお願いした。

とても迅速かつ丁寧に対応していただき、その後、PageSpeed Insights のスコアは、

メインドメイン:

  • Mobile :98
  • Desktop : 100

サブドメイン:

  • Mobile :97
  • Desktop : 99

と、両ドメインとも90超えで、なんとデスクトップでは満点を記録!

デスクトップ

他にも、CLS イシューなどについても、丁寧に相談にのっていただいた。

ありがたすぎる……😭今後も長らくお付き合いしていただきたい。

以下、改善していただいた内容。

プラグインの停止と追加

使っていたプラグインのうち、以下のプラグインを停止。

  • Accelerated Mobile Pages: AMP 化が不十分だったため
  • Speed Up - JavaScript to Footer: 別の方法で最適化するため
  • WP Fastest Cache: PC・スマホで別々にキャッシュできないため
  • Smush: 別の方法で最適化するため

そして、以下のプラグインを追加。

  • Lazy Loader
  • WebP Express
  • YWS lazy loading

Lazy Loader

画像、iframe などを遅延読み込みするプラグイン。

私は「Smush」というプラグインを使って、遅延読み込みとアップロード画像の最適化を行っていた。

こちらに関して問い合わせたところ、Lazy Loader や YWS lazy loading などで遅延読み込み、既に入れていた WP-Optimize で画像の最適化をするよう、設定を変更していただいた。

WebP Express

画像を.htaccessのリライトルールにて webp 対応する。

ソース上は.jpg、.pngのままだけど、webp 対応のブラウザには .webp で認識されるようになる。

既存の画像の webp 変換に関しては、(自サーバー上にある画像のみ).webp が自動的に生成される仕組みになっている。

YWS lazy loading

よっし~ずウェブサービスさんの独自プラグイン

テーマはプラグインの状態に合わせて CSS, Javascript の読み込みを制御。

その他、一連の PHP コードはこのプラグインにまとめて記述。

CSS や Javascript 等の遅延読み込み

以上のプラグインを用いるなどして、下記対応頂いた。

CSS

  • CSS の遅延読み込み
  • CSS の圧縮&インライン読み込み

Javascript

  • Javascript の遅延読み込み
  • 絵文字 Javascript の削除

ウェブフォント

テーマが読み込んでいるウェブフォントをマウスやキーボード操作、スマホ操作などのユーザーアクションをきっかけに読み込む遅延読み込みに設定。

ファーストビューに表示されているアイコンは CSS で datauri を指定。

Google アナリティクス

3秒後に読み込む遅延読み込みに設定。

追従する SNS ボタン

3秒後に読み込む遅延読み込みに設定。

Google アドセンス

スマホ時はファーストビューに存在しないので、マウスやキーボード操作、スマホ操作などのユーザーアクションをきっかけに読み込む遅延読み込みに設定。

PC時は3秒後に読み込む遅延読み込みに。

トップページのメインビジュアル画像

マウスやキーボード操作、スマホ操作などのユーザーアクションをきっかけに読み込む遅延読み込みに設定。

YouTube埋め込みについて

画像の軽量化。

References