QooQをPageSpeed Insights（ページスピードインサイト）でスピード比較！カスタマイズ前後でどう変わる？

　QooQ_LIST版（以降　リスト版）で記事一覧の画像を大きくするカスタマイズをしました。
　画像を大きくするとサイト読み込みスピードが低下すのではないかと心配になりました。
　サイトの読み込みスピードは、SEO対策としても重要です。

　そこで、Googleが提供するPageSpeed Insights（ページスピードインサイト）でカスタマイズ前後の読み込み速度を調べてみました。
　同時に、QooQのページスピードインサイトの結果もわかりますので、ご自分のサイトとの比較にもなると思います。

　ということで、今回はQooQの記事一覧画像のカスタマイズ前後でのページスピードインサイトの結果がどう変わるかを具体的にわかりやすくまとめて記事にしています。

QooQをPageSpeed Insightsサイトでスピード比較！カスタマイズ前後でどう変わる？

　さて、今回はQooQカスタマイズとして画像サイズを大きくしたときのサイトスピードの比較を行っていきます。
　順に説明していきます。

QooQとは

　QooQとはGoogleが運営するブログサービスBloggerのブログのテーマとして使用できるテンプレートです。

　くうく堂様で配布されている無料のテンプレートです。
　主な特徴は、日本語対応です。
　Bloggerは海外のテンプレートの数が多いのですが日本ではまだだまだ少ない状態です。
　ですから、すごく貴重な存在なんですよ。
　導入方法などは、QooQを導入したときの記事がありますのでよければどうぞ。

　また、SEO最適化と表示速度最適化に力を入れられています。
　わたしもGoogle構造化データテストツール（ structured data testing tool）で確認したところエラーなどもなくお勧めできます。
　同じく日本語対応のSmartとテスト結果を比較した記事がありますのでよければどうぞう。
　表示速度最適化に関しては、今回の記事でご説明しますが
”爆速”
　です。

　加えて、Bloggerの管理画面のテーマデザイナーにも対応しているので簡単にお好みの配色やデザインを変更できます。

　その他にも、うれしい機能が満載ですのでご興味が湧いた方はくうく堂様にレッツゴー！

PageSpeed Insightsサイトとは

Google PageSpeed Insights（ページスピードインサイト）とは、サイトの読み込み速度をスコア化してくれるGoogleが提供しているサイトです。

　この記事でも、このスコアで比較します。

　また、PageSpeed Insights（ページスピードインサイト）では、サイト読み込み速度のほか、サイトのコンテンツを解析することで、読み込み時間の速度の改善ポイントもレポートしてくれます。

”ウエブページのURLを入力”というところに確認したいサイトのURLを入力するだけです。

実際の解析結果は”カスタマイズ前後のスピード比較結果”を確認ください。

カスタマイズ内容

　カスタマイズ内容は記事一覧の画像を大きくします。

　カスタマイズの変更ポイントは、

• アイキャッチの画像を丸型から四角にする。
• 72px正方形から幅200px　4：3のアスペクト比の画像に変更する。
• 画像をサムネイルからBlogger標準の1枚目の画像から再度リサイズ（大きな画像に）する。

　です。

　上記のカスタマイズ後の変更詳細やサイト画像を確認したい方は、QooQの画像を四角にカスタマイズした記事がありますのでよければどうぞ。

　また、その他にもカスタマイズ済みの項目があります。
　以下の点はカスタマイズ前後で共通のカスタマイズ項目です。
　このカスタマイズの詳細は、各記事にリンクしています。
　ご興味があれば項目名をクリックまたはタップしてください。

ー共通カスタマイズ一覧ー

• タイトルを中央揃えにする。
• スマホ表示のメニューをハンバーガーメニューにする。
• 目次を自動生成する。
• HTMLサイトマップを自動生成する。
• 特定ラベルのソート一覧をナビゲーションメニューに設置
• プライバシーポリシーを固定ページで作成しナビゲーションメニューとフッターに設置
• お問い合わせを固定ページ（Googleフォーム使用）で作成しナビゲーションメニューに設置
• トップに戻るボタンを設置

カスタマイズ前後のスピード比較結果

　さて、本題に入ります。

　比較するサイトのカスタマイズ後は、”記事一覧の画像を大きく”したことが差分です。
　記事一覧はホームにあります。
　ですから、PageSpeed Insights（ページスピードインサイト）によるスピード比較はブログのホームのURLで実施しました。

スピード比較結果

　スコア結果は以下のようになります。　

• カスタマイズ前：PC画面　99　スマホ画面　94
• カスタマイズ後：PC画面　99　スマホ画面　73

　上記のように画像を大きくするとPC画面ではスピードの差は出ません。
　しかし、スマホ画面のスコアは23%程度低下します。

詳細は以降を確認ください。

カスタマイズ前

記事一覧はQooQリスト版のままになります。

PC画面

スマホ画面

カスタマイズ後

記事一覧は大きな画像になります。

PC画面

スマホ画面

まとめ

　記事一覧の画像を大きくするとサイトの読み込みスピードが23%程度低下します。
　しかし、低下したとはいえ、それでもスコア73ですので、一般的なサイトより、むしろ早い方ではないかと思います。

　また、通常は、Google検索で直接記事に流入すること考えられます。

　従って、今回の結果であれば、
　記事一覧が表示されるホームはSEO的なスピードアップより、直接記事に訪問された方が見やすいという観点でデザインするほうがよい

　と考えます。

編集後記

　QooQはSEO対策としてページスピードインサイトのサイト読み込みスピードにも力点が置かれています。
　ウエブデザインとして、”画像でっかくてきれいなほうがいい”という思いから、いろいろいろ調整しました。

　しかし、一方で画像がたくさんあるとちょっとサイト読み込み速度おそくなんじゃないかという疑問も湧き、今回の調査を行いました。

　まとめにも書きましたが、BloggerとQooQ組み合わせ自体では、サイト読み込みがそもそも早い！
　ということに尽きるという感じで、改めてQooQのすばらしさに関心しました。

　ですので、ユーザーからの可読性を重視したウエブデザインにすることに注力することが重要と感じました。

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

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