QooQとSmartテンプレートをPageSpeed Insights（ページスピードインサイト）でスピード比較！

　SEO対策としてサイトの読み込み速度が昨今、重要になってきたそうです。

　そこで、Bloggerのテーマとして使用できる外部テンプレートのQooQとSmartを使用した場合、どのくらい読み込み速度が変わるのか興味が湧きました。 

　ということで、今回はQooQとSmartのPageSpeed Insights（ページスピードインサイト）スコアを比較し結果がどう変わるかを具体的にわかりやすくまとめて記事にしています。

QooQとSmartテンプレートをPageSpeed Insights（ページスピードインサイト）でスピード比較！

　今回は、無料テンプレートQooQとSmartをGoogleが提供するPageSpeed Insights（ページスピードインサイト）のスコアで比較します。

テンプレートとは

　テンプレートとは、ウエブページを表示する雛形のことで、ホームや記事ページ、固定ページなどのデザインを生成する方法を制御する（Bloggerのルールに従って記述された）XMLファイルです。

　また、Bloggerの標準テーマはXMLドキュメント一つで構成されています。

　したがって、Bloggerでは、テーマとテンプレートは同じものと考えてよいようです。

　もし、Bloggerの標準テーマにカスタマイズを行いたいと考えた時、”Blogger　テンプレート”のキーワードで検索すると、これから紹介するBloggerで使用できる外部テーマともいえるテンプレートを入手することができます。

　今回、紹介するQooQとSmartもBloggerで使用できるテンプレートです。

QooQとは

　QooQとはくうく堂様で無料で配布されているBloggerで使用できるテーマです。
　特徴は、”シンプルで速い日本語bloggerテンプレート”とのことです。

　テンプレートは、QooQはタイル型の記事一覧（QooQ）のタイプとリスト状の記事一覧（QooQ_LIST）の２つのタイプがあります。

　どちらもレスポンシブ ウェブデザインに対応しておりPC表示とスマホ表示でデザインが変わります。

　レスポンシブ ウェブデザインとは、 ユーザーのデバイスの種類に依存せず、同じ URL で同じ HTML コードを配信し、ユーザーのデバイス画面サイズに応じてウエブページのデザインを変更する仕組みです。

　Googleが、レスポンシブル ウェブデザインを推進していますのでSEOとしても昨今重要な（もう当然？）仕組みになっています。

　当ブログでの導入記事もありますのでご興味があればご覧ください。

　次にQooQ_LIST版の表示例を示します。

PC画面

スマホ画面

　くうく堂様のサイトでは、デモサイトが準備されていますので、ご興味があれば確認ください。

Smartとは

　Smartとはふでたまご様が運用するBLOGGER LABO様で配布れているBloggerで使用できるテーマです。
　特徴は、”日本語対応の国産テンプレートで、カスタマイズ初心者でもコードの意味が分かりやすく工夫されており、一方で、そのままで十分使える機能を備えた造り”とのことです。

　テンプレートは、目次機能の有無、Bloggerのテーマデザイナー対応の有無で4パターンあります。

　補足ですが、Smartの目次機能は、現在のBloggerの投稿ページと相性がよくありません。

　具体的に問題点をお話します。

　Smartの目次自動生成の条件は、”<!--more-->タグ”と”<h2>タグ”がある場合に目次が自動で生成される仕様になっています。

　一方、Bloggerの記事を書く、投稿ページで”<!--more-->タグ”を挿入するには、エディター上のリボンにある”追記を挿入”のボタンを押下することになります。
　しかし、このボタンでは、”<span><!--more--></span>”が挿入される仕様とないます。

　また、Smartは”<span><!--more--></span>”を”<!--more-->タグ”と解釈しない仕様となっているそうです。

　このため、Bloggerの投稿ページの作成ビューで記事を作成すると、結果的に目次機能が正常に目次が表示されないようです。

　目次を表示させるには、手動でHTMLビューで、上記の”<span>”と”</span>”を削除する必要があります。

　以上の状況から、Bloggerの標準テーマですでに作成済みの記事を修正する手間や、記事投稿時に毎に手直しする手間を考えると、Smartの目次機能ありは、Bloggerの投稿ページと相性が合わないと考えています。

　ここでSmartを使用する場合の提案があります。

　目次機能が必要な場合は、スケ郎のお話様の[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）で配布されているコードを導入をお勧めします。

　このコードとSmartの目次無し版を使うと上記の問題が解決します。

　参考までに、このサイトでスケ郎のお話様のコードの導入記事もありますので興味があればご覧ください。

　尚、スケ郎のお話様の目次自動生成はQooQでも、Smartの目次無しでも使用できました。

　閑話休題。

　もちろん、Smartもレスポンシブ ウェブデザインに対応しています。

　個人的な意見ですが、QooQよりSmartの方がデザインやユーザーインターフェースが好きです。

　次に、Smartの表示例を示します。

PC画面

スマホ画面

　ふでたまご様が運用するBLOGGER LABO様にはサンプルページがありますので、ご興味があればご確認ください。　

PageSpeed Insights（ページスピードインサイト）でスピード比較結果

　PageSpeed Insights（ページスピードインサイト）でスピード比較結果を記載します。

　対象は、このサイトのトップページで比較します。

　QooQ ：　PC画面　スコア９９　スマホ画面　スコア９４
　Smart：　PC画面　スコア９０　スマホ画面　スコア５６

　次に詳細を記載します。

PageSpeed Insights（ページスピードインサイト）とは

　Google PageSpeed Insights（ページスピードインサイト）とは、Googleが提供する無料サービスの一つで、ウェブページのコンテンツを解析し、ページの読み込み時間をスコア化してくれます。
　また、読み込み時間の短縮方法をレポートしてくれます。

　このサイトでも、そのスコアで比較しています。

QooQのスコア詳細

PC画面

スマホ画面

Smartのスコア詳細

PC画面

スマホ画面

まとめ

　QOOQはかなり良い数字です。

　ただ、調べた限りではスマホ画面はスコア４０前後で平均的な数字になるようです。
　ですので、BloggerのSmartテンプレートはスマホでも十分な早さを持っているといえそうです。

　むしろ読み込み速度にこだわったQooQが凄すぎるといったところなのだと思います。
　※ちなみにはてなブログでは、PCでスコア４２，スマホ画面でスコア39ですのでSEO対策として読み込みスピードにこだわるならBloggerが有用ということがわかります。

• QooQもSmartもスピード面では十分な速さ

であると思います。　

編集後記

　わたしはSmartのほうがデザイン面やユーザーインターフェースなどの作りが好みです。

　ですが、こちらの記事にあるようにGoogle構造化データテストツールの結果が気になっていました。

　ですので、QooQに出戻りしてます。

　テンプレートは一度カスタマイズしてバックアップしていれば、いつでも復元して差し替えが可能です。

　気分で変えられるわけですね。

　みなさんがこのブログを見た時、どのテンプレートを使っているかチェックしてみてください。

　ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします！