WordPress

【pagespeed insights改善】モバイル表示だけ遅いサイトを高速化する

2020年2月24日

pagespeed insights というグーグルサイト速度計測ツールを使用すると、サイトの表示速度を計測することができます。

本サイトでも計測してみると、PCの表示は90点台と高い点数で割と安定しているのですが、スマホの点数が43点とかなり低い。

実際にブラウザでの表示を確認してみると、ファーストビュー(初めに表示される範囲)が表示されるまでの動きにもっさり感を感じます。

PCよりも基本性能が低いスマホデバイスのため、遅延がより顕著にあらわれているのかもしれません。

ファーストビュー表示の遅さに最も加担していると思われるのが、pagespeed insights の解析結果でいうところの「レンダリングを妨げるリソース」の存在です。これを改善するためには、レンダリングを妨げるリソースを遅延して読み込む、非同期で読み込むなどの対処が有効です。

 

今回はスマホ表示が遅いサイトの改善方法として、WordPressプラグインの「Autoptimize」を使用し「レンダリングを妨げるリソースの除外」を実施していきます。

 

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

ブラウザがページを描画する事をレンダリングといいますが、レンダリングに優先して行われるのが、ページのデザインや処理が定義されている「CSSファイル」や「JSファイル」の読み込みです。

 

これらの外部ファイルは画面のデザインや動きを表現するのに必要な情報となるため、通常は<head>タグ内に記載しレンダリングに優先して行われます。ファイルのダウロードが完了するまでの間はブラウザは画面のレンダリングを進めることができません。

すなわち、CSSファイルやJSファイルが多くそれらの読み込みに時間がかかると、その分画面の描画処理が遅延することとなります。これをレンダリングブロックといいます。

 

レンダリングブロックによる画面表示の遅延を改善する手段としては、pagespeed insights が示すように「レンダリングを妨げるリソースの除外」を実施することで高速化が見込めます。

レンダリングを妨げるリソースを除外するためには、次のような方法があります。

レンダリングブロックの解決策

  1. JSファイルを非同期読み込みにする
  2. CSSファイルをインライン化する
  3. CSSファイルを非同期読み込みする

いずれの対策もWordPressプラグインの「Autoptimize」で設定可能です。エコシステム万歳です。

次に具体的な設定箇所を確認していきます。

 

Autoptimizeの設定方法

Autoptimizeではサイトを高速化するための様々な設定が用意されいますが、今回は本筋であるレンダリングブロックを緩和するために有効な設定をメインに紹介していきます。

※Autoptimizeの導入方法および、全体的な設定につきましては別記事にて掲載予定です。

Aggregate JS-files?

この項目をチェックONにすることで、ページで読み込まれるJSファイルを非同期読み込みにすることができます。

非同期読み込みの対象外としたいJSファイルは「Autoptimize からスクリプトを除外:」の項目で指定します。

除外の指定は基本的にデフォルトでOKですが、非同期読み込みとすることで画面表示時にエラーが発生する場合には、除外設定の追加を検討する必要があります。

 

CSS のインライン化と遅延

このチェックをONにすると入力したスタイルがインライン化され、その他のCSSファイルは非同期で読み込まれます。

インライン化とはCSSファイル内に記述されている、スタイル定義をHTML内(<head>タグ内)に直接書き込むことです。

これにより、CSSファイルをロードによるレンダリングブロックが発生しません。

一般的には画面のファーストビュー(一番初めに表示される範囲)で、使用しているCSSの内容を設定してパフォーマンスの調整を行います。

ファーストビューで使用しているCSSの事を「クリティカルパス CSS 」といい、クリティカルパスCSSは下記などのWebサービスでサイトのURL入力することで簡単に抽出することができます。

※抽出結果の先頭、末尾に出現する<style>タグは除去します。

 

すべての CSS をインライン化

前述のクリティカルパスのみインライン化する方法に対して、全てのCSSをインラインする場合にはここをチェックONにします。除外したいCSSがある場合は、「Autoptimize から CSS を除外」にて指定します。

こちらも、全ての外部ファイルの内容をHTML内に記述するため、CSSファイルのロードによるレンダリングブロックを発生させない方法です。

 

「CSS のインライン化と遅延」「すべての CSS をインライン化」の違い

どちらもレンダリングブロックを発生させない方法ではあるのですが、両者の違いは「CSSの一部をインライン化するか」、「全部をインライン化するか」という点だと思います。

「すべてのCSSをインライン化」の場合、クリティカルパスCSSの抽出漏れによる描画の崩れが発生しにくいと考えられます。設定自体もチェックONするだけで簡単なので、まずはこちらをONにしてパフォーマンスの改善と表示の不具合を確認し、納得できるレベルで調整をかけるのがよいでしょう。

CSSの量によってはすべてのCSSをインライン化した場合にHTML自体のサイズが肥大化しすぎてしまい、思ったほどパフォーマンスが出ない場合もあるようです。そういった場合はさらに高速なファーストビュー表示を期待する場合には「CSSのインライン化と遅延」の設定により、チューニングを実施していくと良いのではないでしょうか。

ちなみに、AFFINGER5を使用している本サイトの場合は「CSS のインライン化と遅延」の設定のほうが高いパフォーマンスがでました。

⇒ PC表示に不備がでていたため、最終的にはすべてのCSSをインライン化する設定としました。

 

改善結果

Autoptimizeプラグインでの対策による改善結果をみてみます。

まずは、改善前のpagespeed insights の結果がこちら(本投稿冒頭に掲載したものと同じ)

改善前

そして、改善前のpagespeed insights の結果はこうなりました。

左がAutoptimizeの設定で「すべてのCSSをインライン化」した場合。右が「CSSインライン化と遅延」でクリティカルパスCSSのみインライン化した場合。

数値見えはかなり点数が高くなっていますが、「レンダリングを妨げるリソースの除外」の対策はpagespeed insights の説明によると"パフォーマンス スコアには直接影響しない"らしいので、たまたま点数は上振れしているだけなのかもしれません。

注目すべき項目は「First Contentful Paint」や「First Meaningful Paint」のファーストビューに関するパフォーマンス。

改善前と比較して「すべてのCSSをインライン化」を設定した場合は0.4秒程「CSSインライン化と遅延」を設定した場合は0.6秒程 早くなりました。

体感としても少し早くなったことを感じられるレベルです。

 

「どちらの設定がより高速か?」「表示の不具合がでないか?」は、サイトで使用しているテーマやデザインによって異なってくと思いますので、設定を固める際には比較して各設定状態での画面表示パフォーマンスを測定して比較することをおすすめします。

 

まとめ

WordPressプラグインの「Autoptimize」を使用しを使用して、レンダリングブロック回避のための設定をすることでpagespeed insights のスコア改善とサイト表示の高速化が見込める。

本サイトでの測定結果では「CSS のインライン化と遅延」「すべての CSS をインライン化」の両設定共に「0.5秒」前後の表示速度が速くなった。

一定の効果が見込めるので、まだ試してない方は試してみてはいかがでしょうか。

WordPress

2020/5/28

AFFINGER5の設定保存で「閲覧できません (Forbidden access)」エラー

本サイトではAFFINGER5のテーマを使用しています。 WordPressの設定を変更している際に、掲題のエラー「閲覧できません (Forbidden access)」に遭遇しましたので、対処をメモしておきます。   Contents1 エラーが発生した操作2 原因はConoHa WINGサーバーのWAF設定3 WAFの設定方法(ConHa Wingサーバーの場合) エラーが発生した操作 エラーが発生した際の具体的な操作としては「AFFINGER5 管理」メニューから設定変更を行って「保存」を ...

ReadMore

WordPress

2020/5/22

【全6ステップ】コノハウィングにワードプレスをかんたん移行【高速化】

このたび、本サイトをロリポップからGMOの コノハウィング(ConoHa WING) にお引っ越しました。 ロリポップの高速プラン(ハイスピードプラン)からの変更で、 乗り換えたところで意味あるのか? って懸念もありましたが、体感できるレベルで早いし、安定してるしめちゃ満足です。 速度改善への時間投資が無くなる事を考慮するとコスパは抜群!   「PageSpeed Insights」での計測値だとこれくらい上がりました。 ロリポップ: ハイスピードプラン(乗り換え前) コノハウィング(ConoH ...

ReadMore

ブログ運営

2020/5/3

【ブログ運営】月間2万PV達成!お小遣いから副業へ

今月も月が変わりましたので運営報告をしていきます。サイトの継続期間は9か月目となります。 ほとんど読まれない記事なのでさくっと書いていきます。   2020年4月は次の2つを達成しました! 実績解除 デイリー1000PV達成 月間2万PV達成 収益5万円以上達成 収益面でフェーズが一段変わった月となりました。 特に収益面では先月比で5倍以上の伸びとなったのは大きかったです。 いうなれば「お小遣いから副業へ」といった感覚で、最低賃金割れの下積み生活から脱する事ができたのかもしれません。(来月どうな ...

ReadMore

ブログ運営

2020/4/5

【ブログ運営】8か月目のアクセス数と収益

2020年3月の活動結果報告として、今月もサイトのアクセス状況とWeb収入を記しておきたいと思います。サイトの継続期間は8か月目となります。 世界に甚大な影響を与えているコロナウイルスは日常生活だけでなく、サイトのアクセス状況にも変化をあたえています。 マスクが買えなかったり、ティッシュの在庫が不足していたりと買い出し先で見る光景にげんなりする日々ですがブログの執筆は従来通り継続していきます。   Contents1 2020年3月の記事数とアクセス数と収益2 世界的危機の影響3 ブログ収益3. ...

ReadMore

WordPress

2020/4/17

WordPressテーマ人気調査!トップはAFFINGER、Coccon、STORK

WordPress(ワードプレス)のテーマはどれを選べばいいの? SEO対策?カスタマイズ性?有料/無料? 結局のところなにがおすすめなの? こんな疑問の手助けになるかと思います。   本記事では人気ブロガーが運営している100のブログサイトで、実際に使用されているテンプレートを一挙解析・集計してみました。 『上級ブロガーに人気のWordPressテーマを選んでおけば間違いない』というアプローチで、WordPressテーマ・テンプレート選びをご提案します。   本記事では人気ブログに関 ...

ReadMore

  • この記事を書いた人
  • 最新記事

やるログの人

南国在住。30代のSES系エンジニア。 便利なWebサービスやガジェット関連の情報収集を日課としてます。 収集したライフハック術を武器にアウトプット活動と子育てに奔走中! 本ブログで月間20000PV達成しました!

-WordPress
-

Copyright© やるログ , 2020 All Rights Reserved Powered by AFFINGER5.