SEO対策

PageSpeed Insights で低成績を目の当たりにしてから環境改善に向けて舵を切り、100点 まで改善しました。

以下は、個人的に試行錯誤した内容の覚え書きと、その後プロの人に改善してもらった項目について記載、「レンダリングを妨げるリソースの除外」編。

「レンダリング」と「レンダリングを妨げるリソース」とは

「レンダリング」とは

レンダリング(Rendering)とは、サーバーから受け取った情報を元に、Web ブラウザが画像・動画・音声などを作る作業の事。

この時関係してくるのは、主に下記3点。

  • HTML
  • CSS
  • Javascript

このイメージを、「白い犬がしっぽを振る」というイメージでざっくり説明すると、

  1. HTML で「何? → 犬」と記述し、
  2. CSS で「どんな犬? → 白い犬」と修飾し、
  3. Javascript で「何をしている? → しっぽを振る」と動きをつける

という感じ。

 

基本は「HTML」を読み込み、「CSS」と「Javascript」は外部ソースとして読み込まれます。

「レンダリングを妨げるリソースの除外」とは

上記のように「レンダリング」してブラウザに表示するけれど、

ここでポイントとなるのが、「ブラウザはコードの上から順に読み込んでいく」ということ。

つまりブラウザは、

  1. <head> タグ
  2. <body> タグ

の順に読み込んでいき、各行の処理が終了するのを待ってから次の行の処理に移ります(同期処理)。

ここで、<head> タグ内での各行の処理が多くて処理時間が遅くなると、ページ全体の読み込みが遅くなる、という問題が生じます。

<head> タグ内では、ページを構成する色々なソースを読み込みますが、

主に外部ソースの「CSS」と「JavaScript」の読み込み処理に時間がかかる事が多く、

これが「レンダリングを妨げるリソース」になります。

 

なので、具体的に下記のような対策をとると、「レンダリングを妨げるリソースの除外」が可能となります。

レンダリングを妨げるリソースの除外
  1. CSS や Javascript を圧縮・最適化する
  2. ファーストビューにでてくる画像以外は、後から読み込んでもらう(遅延読み込み)
  3. <head> タグじゃなくてもいいものは、後ろに移動させる
  4. ファーストビューに関係のある CSS は外部ソースからではなく、インライン配信にする。

このうち、1-3 はプラグインなどで対応し、4(必要なCSSのインライン配信)は、プロの人にお願いしました。

CSS や Javascript の圧縮と非同期処理

最初に行ったのが、CSS や Javascript の圧縮と非同期処理です。

スクリプト要素の非同期は、「async」属性や「defer」属性をつけるだけで簡単に付与することができます。

ただ、できるだけ手間を省きたかったので、私は「Autoptimize」と「Async JavaScript」の2つのプラグインを導入しました。

プラグイン「Autoptimize」

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

「Autoptimize」では、改行やスペースを削除してくれたり、複数のファイルを結合して圧縮してくれたりと、色々と便利な機能が備わっています。

Autoptimize の使い方

「プラグイン → 新規追加 → Autoptimize で検索 → インストール → 有効化 → 設定」
Autoptimize インストール
CSS と Javascript の最適化

上にあるタブの中から、「JS, CSS & HTML」タブを選択します。

(1)「Optimize JavaScript Code」のボックスにチェックを入れる
JavaScript コードの最適化
(2)「Optimize CSS Code」ボックスにチェックを入れる
CSS コードの最適化

他はデフォルトでOK。

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

 

Google フォントの削除

PageSpeed Insights で時々警告がでてくる、「Google フォント」の設定も可能。

(1) 上の「追加」タブを選び、

(2) 「Googleフォントの削除」を選択。

Google font の削除

(3) 忘れず「設定を保存」。

Autoptimize; 保存

プラグイン「Async JavaScript」

Async JavaScript は、Javascript を非同期してくれるプラグインです。

上述の「Autoptimize」と同じ製作者です。

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

Async JavaScript の使い方

「プラグイン → 新規追加 → Async JavaScript で検索 → インストール → 有効化 → 設定」

Async JavaScript:インストール
設定
  • Enable Async JavaScript にチェックを入れる
  • Async JavaScript Method で Defer を選択する
  • iQuery も Defer を選択、でも不具合が生じたら Exclude に

Async JavaScriptの設定色々
Enable Async JavaScript にチェックを入れる

上部にある「Settings」タブを選択し、「Enable Async JavaScript」チェックボックスをオンにします。

Async JavaScript Method で Defer を選択する

Enable Async JavaScript の次の項目に「Quick Settings」があります。

ここで「Apply Defer」を選択すると、

  • Async JavaScript Method: Defer
  • jQuery: Exclude

が選択されます。

Async JavaScript の設定: Apply Defer

もちろん、その後手動でセッティングを選ぶ事もできます。

iQuery も Defer にした方が良いけど、不具合が生じた場合には Exclude しないとしょうがないですね。

Defer と Async のどちらを選択した方がよいか

以下に、Defer と Async の特徴の違いを挙げておきます。

どちらが良いかは場合によるけれども、両方試して PageSpeed Insights で確認した時、Defer の方がスコアが良かったので、Defer にしました。

Defer と Async の特徴の違い

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

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

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

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

defer の特徴
  • HTML パーサを停止しない
  • HTML のパースが終わり次第実行される
  • defer 属性をつけたスクリプトが全て実行されるまで DOMContentLoaded イベントは発火されない
  • 実行順序は HTML の記述通り
async の特徴
  • スクリプトのダウンロード時に HTML パーサを停止しない
  • スクリプトファイルのダウンロードが終わり次第、HTMlパーサを停止し、実行される
  • async 属性をつけたスクリプトが全て実行されるまで load イベントは発火されない
  • 実行順序は不定(ダウンロードが先に終わったものから実行される)
Defer と Async の使い分け
  • 他のスクリプトファイルに依存される場合は defer(jQueryなど)
  • 他のスクリプトファイルに依存する場合も defer(jQueryプラグインなど)
  • DOM要素をいじる場合も defer(document.querySelectorとかを使う場合など)
  • 上記以外は async(Google アナリティクス用スクリプトなど)
最後に「Save Settings」

セッティングが終了したら、一番下にある「Save Settings」を忘れずにクリックし、セッティングを保存します。

Save Settings

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

PageSpeed Insights の結果は、

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

まで改善しました。

必要外のコードをフッター行に移動

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

特に必要のないものはヘッダー行からフッター行に移動させた方が読み込みが早くなります。

上述の「Async JavaScript」で Javascript を非同期処理するというのも一つの方法ですし、「Speed Up-JavaScript To Footer」で Javascript をヘッダー行からフッター行に移動させる、というのもアリです。

プラグイン「Speed Up- JavaScript To Footer」

「Speed Up- JavaScript To Footer」というプラグインは、Javascriptファイルをヘッダー行からフッター行に移動させ、ページの読み込み速度をアップさせます。

使用方法は、

プラグイン
 ↓
新規追加
 ↓
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> タグの直前に移動させました。

 

他にも 外部からのソースで可能なものは、</head> の前から </body> の前に移動 せました。

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

それ以外にも、下記のような対策をとり、

    モバイルは 70 前後、デスクトップは 90 前後にまで改善しました。

     

    ただそれ以上は自分で改善が難しかったので、プロの高速化サービス「よっし~ずウェブサービス」 さんにお願いしました。

    よっし~ずウェブサービス さんには、とても迅速かつ丁寧に対応していただき、その後、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・スマホで別々にキャッシュできないため
    • Async JavaScript: 別の方法で最適化するため
    • Autoptimize: 別の方法で最適化するため

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

    • Lazy Loader
    • WebP Express
    • YWS lazy loading

    Lazy Loader

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

    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埋め込みについて

    画像の軽量化。

    おまけ:プラグイン「WP Rocket」について

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

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

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

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

    ただし、有料……

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

    機能面で考えるとかなりコスパがよさそうだけれど、サブスクリプションは避けたいので、今回は見合わせました。

    References