Page Speed Insights

Google Page Speed InsightsにてDrupalで作成したページのスコアを確認してみます。

Benchmark.

作成したホームページの構成が適正であるかと、表示性能の問題を判定してくれるツールをGoogleが一般公開しています。今回はこのツールを使用し、DrupalとBootstrap5のテーマで作成したページの性能評価をしてみます。

Page Speed Insights -> https://pagespeed.web.dev

1. Page Speed Insights.

-- ”PageSpeed Insights では、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。” --

Page Speed Insightsより

概要説明より

  • ”スコアは「Good」、「Medium」、「Low」のいずれかに分類されます。この計算は、デベロッパーがページの外観と機能の変更を検討していないという前提で行われます。”
  • ”Good: ページには、パフォーマンスに関するおすすめの方法が最大限適用されており、最適化の余地がほとんどありません。ページのスコアは 80 以上になります。”

80点以上が良好なスコアとなります。

今回、Page Speed Insightsにて作成したページの判定をして行きます。

1-1. 判定に使用するページ.

判定を行うページは2種類のページを用意します。

  1. テキストのみで構成した長文でボリュームのあるページ
  2. 画像を使用し枚数を多めに入れたページ

1. テキストのみのページは#C08 Contact FormとSESを使用します。長文と複数のテーブルを使用していますので判定を行うには最適と考えて選択しています。

2. 画像を使用したページは#L17 Leica SL2-Sを使用します。画像を4枚使用しており、画像サイズも縦構図が3枚と大きめの画像を配置していますので今回の判定を行うには最適と考え選択しています。

早速、Page Speed Insightsにて判定を行います。

以下が判定結果になります。

Page Speed Insights判定結果
Page Speed Insights判定結果
Page Speed Insights判定結果
Page Speed Insights判定結果

1枚目がテキストのみ携帯、2枚目がテキストのみデスクトップ、3枚目が画像ありの携帯、4枚目が画像ありのデスクトップの判定結果になります。

1-2. 判定結果.

テキストのみ携帯

  1. パフォーマンス // 99
  2. ユーザー補助 // 100
  3. おすすめ方法 // 100
  4. SEO // 100

テキストのみデスクトップ

  1. パフォーマンス // 100
  2. ユーザー補助 // 100
  3. おすすめ方法 // 100
  4. SEO // 100

画像ありの携帯

  1. パフォーマンス // 99
  2. ユーザー補助 // 100
  3. おすすめ方法 // 100
  4. SEO // 100

画像ありのデスクトップ

  1. パフォーマンス // 100
  2. ユーザー補助 // 100
  3. おすすめ方法 // 100
  4. SEO // 100

テキストのみで長文のページ

  1. 携帯 399/400
  2. テスクトップ 400/400

画像ありのページ

  1. 携帯 399/400
  2. テスクトップ 400/400

の予想以上に優れたスコアになっています。

1-3. 判定結果の考察.

Page Speed Insightsの説明で80点以上がGoodの判定であり、スコアを上げる最適化の余地がないと説明されています。DrupalがSEOに強いと言われる意味がこのスコアから良くわかります。Drupalのレンダリング性能や構造の最適化が非常に優れている事が証明されるスコアでもあります。

Drupalの設定もほぼデフォルトで、Drupal、AWSともにキャッシュ機能はオフの状態でのスコアになっています。サイトが構築されたばかりで、アクセスもほとんど無く、コンテンツの数も少ないとは言え、30記事程度はあり、リスト化されたページも30程度はあるので、全く空の状況ではありません。

WordPressのページを測定すると、デスクトップはそれなりのスコアになりますが、画像を入れたページの携帯のスコアでパフォーマンスが80点以上にするのは結構難しく、今回判定したスコアは非常に優れたスコアであります。

今回のスコアを出した要素はDrupalだけでなく、BootStrap5のテーマを使用していることの影響も相当大きく、BootStrapが当初から上げる、Mobile Firstの理念は、BootStrapを使用して構築されるページの構造化を最適化しており、レスポンシブと言われる要素もページの表示を妨げないよう構成されています。

Page Speed Insightsの判定に、ユーザー補助やSEOとあり、ページ構成のルールなどのチェックが入りますが、この項を全てクリアしていることもDrupalの基本構成が優れている事の証明になります。

Conclude.

今回の判定結果は、予想以上に優れたもので、DrupalとBootstrap5のテーマで構築するWEBサイトを、第三者であり非常に厳密にWEBサイトを評価するGoogleが最高得点と評価する判断を下している結果となっています。

今回のスコアは、DrupalとBootstrap5をほぼデフォルトで使用し、必要最低限の要素で構成しているページにも起因しています。パフォーマンス以外のスコアにページの作り方やMetaTagなどの要素もありますので、この辺りの内容は、別途記事にて説明できればと考えています。

Page Speed Insightsの評価は、コンテンツの優劣を判断するものではないので、SEOにおいてこのスコアが高ければ良いというものではないのですが、Googleがシステム的にWEBサイトの評価を行う判断基準の一つではあるので、高いスコアを出していることは決して無駄ではありません。

Page Speed Insights本来の目的は、Googleが検索インデックスに登録し、スコアをつけていくに値するWEBサイトの基準の一つとして公開されており、基準を満たしていない場合、何を修正していくかを提案する事を目的としています。今回、高いスコアが出ており、修正の必要がない形ではありますが、逆にスコアが低く、問題があるようであれば、ガイドに表示される修正案を調べ対応する事で、スコアが上がって行きます。

当WEBサイトは商用でもなく、広告収入を目的としているわけではないので、SEOを積極的に行う事は考えておりませんが、Googleという巨大テック企業が作り上げた検索による情報配信システムに、Googleが評価し掲載を行うに値するコンテンツであるという評価を受ける事はWEBサイトを運営している身からすれば決して悪い事ではなく光栄でもあります。

DrupalとBootstrap5のテーマの基本構成の優秀さが第三者により厳密に評価された事が今回の記事の結論になります。

Next article

Drupal の管理画面.

次項はDrupalを理解するために管理画面の概要をまとめてみます。

投稿日
2024-10-18
投稿者
S.Takeda
タグ
記事内容
関連記事.

DrupalやWebサイト構築の関連記事になります。宜しければご覧ください。

Drupal で使用しているモジュール.

当WEBサイトで実際に使用しているDrupalのバージョンと使用テーマ、使用しているモジュールについてまとめます。ご覧の通りデザインも含め、最低限のカスタマイズと最低限のモジュールのインストールになっています。

Drupal Articles.

Lightsail 設定に関わる記事の要約.

5回に渡り書いた、Amazon Lightsail関連の記事が長文でわかり難くなってしまったので簡潔にまとめてみます。

AWS Articles.

Bootstrap5.

Drupalのデザインテーマとして選択したBootstrap5の基本設定を行います。

Mac Articles.

Welcome

WordPressでCMSの面白さに触れDrupalに挑戦中です。

Drupal初学者のBlogです。

Drupalは構造化されたルールの理解が必要なCMSです。その為設定の自由度が高く初学の敷居は高いですが慣れると他のCMSより柔軟な構築が可能です。

堅牢なセキュリティ、優れたスケーリングなど大規模なWebサイトの構築に向いているため、個人より公共機関や法人での利用が多く、開発もベンダーが行うケースが多いのですが、個人での利用も可能な可用性を持つ非常に優れたCMSです。

Creation

DrupalやWEBサイト構築についての記事になります。

記事内容

  全ての記事

  Drupalに関わること

  WEBサイト構築

  Macの環境

  AWSに関わる事

Life Style

古着やファッションについての記事になります。

記事内容

  全ての記事

  古着について

  Fashionについて

  時計について

  写真について

  お勧めのお店

Environment

Core Drupal 10.5.1

Theme Bootstrap5 4.0.5

Thanks to

  Drupal

  bootstrap5

  Bootstrap

  Font Awesome

  Amazon Web Service

  Amazon Lightsail

  Bitnami

  Google reCAPTCHA