\【12万冊】聴き放題はじまる/

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秒」前後の表示速度が速くなった。

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

\【12万冊】聴き放題はじまる/

WordPress

2020/6/26

オススメはどっち?ConoHa WINGとエックス サーバーを徹底比較

『ConoHa WINGとエックスサーバー、どちらがおすすめか?』 正直、性能については大きな差はないので一般的なブログを運営する上ではどっちを選んでも正解です。両者の比較であればどちらも高速サーバーとして期待するパフォーマンスを十分発揮してくれると思います。 あとで紹介するけど、実際にサーバー速度を比較してみるとほぼ同じだったよ   とはいっても、なかなか選びきれないのが人の性。 本記事ではそんな人に向けてConoHa WING と エックスサーバーをブロガー目線での重要ポイントを比較していき ...

ReadMore

WordPress

2020/11/6

【秒速データ投入】ワードプレスのテストサイトを作ってみよう

テーマユニットテストを使うと、WordPressに様々なパターンを想定したテスト投稿データが簡単に取り込めます。 例えばこういったシーンで非常に便利です。 WordPressテーマの変更前に、色々なデータパターンで表示確認してみたい テストサーバーの動作確認や性能調査用に、ワードプレスサイトを立ち上げたい   Contents1 テストサイトのデータをダウンロードする2 ワードプレスのテストサイトにデータをインポートする3 テストサイトの表示を確認する4 WordPressのインポートでエラーと ...

ReadMore

WordPress

2020/5/22

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

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

ReadMore

WordPress

2020/4/17

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

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

ReadMore

WordPress

2020/3/19

WordPressで画像をタイル状に並べる2つの方法【プラグイン不要】

WordPressの投稿記事内で画像をタイル状に並べて表示させたいケースがあったので、その際に検討した2つの実現方法をご紹介します。 今回の方法では「プラグイン不要」を前提として、イラストや写真などを並べたギャラリーを作成していきます。   Contents1 方法1:WordPressの標準機能「ギャラリーを作成」を使う2 方法2:HTML + カスタムCSS で画像をタイル表示する3 まとめ 方法1:WordPressの標準機能「ギャラリーを作成」を使う 間違いなく一番楽で早いのは、Word ...

ReadMore

-WordPress
-

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