表示速度が速いBloggerのテンプレート『QooQ』をカスタマイズした結果

1年ほど限定公開にしてしまっていたブログを再開しました。
残念なことに、Google AdSenseが使えなくなってしまいました。

シンプルで速い日本語bloggerテンプレートQooQ

新しく始めるつもりでテンプレートを探してみました。

というより、たまたまBloggerテンプレートを検索してみたら、すごく良さそうなものがあったのでブログをまたやってみたいと思ったというのが本当のところです。

それが『QooQ』です！
なんて読むかわかりません。

• 日本語対応
• SEO最適化
• 表示速度最適化
• レスポンシブデザイン

これはすごいに違いないとさっそく使ってみました。

海外のテンプレートは良さそうに思えても、いざ使ってみるとがっかりすることが多いです。
日本語にあった設定になってないからなんでしょうね。

QooQはとてもシンプルでキレイなデザインなので、ついついブログのコンテンツを充実させるよりもカスタマイズすることが楽しくなってしまいます。

思いつく限りの変更が一通りおわって満足したので、今度こそはコンテンツに力を入れていこうと思ったのですが、、、

ウェブページの表示速度を評価できるPageSpeed Insightsを試した結果が。。。


え！？
さすがに18はない。 と何度かやってもほぼ同じ結果でした。

 今はスマホでみる人が多いらしいので、これはいかんなと。

PageSpeed Insights

PageSpeed Insightsとは

ウェブページのコンテンツを解析して、読み込み時間を短くする方法を提案してくれるそうです。

結果をみてもあまりよくわかりませんでした。
みかたがわからないのです。

原因究明してみる

画像のサイズと解像度

メインページで表示される投稿が10件なのですが、アイキャッチになる画像の大きさや解像度を気にせず貼っていたので、少し修正したのですが、あまり変化がありませんでした。

10件から減らすのが良いような気がするのですが、ページナビを取り付けるときにHTMLを編集して10件にあうように設定しているので、ちょっとなーと思ってます。

検索して置き換えれば良いだけなのですが。。。

Google Fonts

Google Fontsをたくさん読み込んでいます。

英語だとそうでもないらしいですが、日本語だとかなりスピードに影響があるそうです。

対策として『&text=』をくっつけるとその文字を使用して軽くなるらしいのでタイトルと説明文はそうしています。

でもやっぱり本文でのGoogleFontsはやめた方が良いのかなーと検討中です。

Font Awesome

結果をみてみると、思ったより速度に影響しているような気がします。

みかたがわからないのでなんとなくですが。
ただいろんなところに使いすぎていて修正がかなり大変なので後回しにします。

JQueryとJavaScript

ページの上にいくボタンのためだけにJQueryを読み込んでいます。

JavaScriptでできる方法もあったのですが試してみてうまくできなかったので使用しています。

ページの上に行くだけならCSSでできるのですが、ヌルっとした感じにしたかったんです。
JQueryを読むこむのはそんなに影響するんですかねー？

 JavaScriptも外部ファイルを読み込んでいます。
スライドショーをするためです。

その他影響はないんじゃないかと思う変更点

• 引用ブログカードの追加
• 目次の追加
• ソースコードをみやすく表示するgoogle-code-prettify

CSSがあまりわからないので逆にやたらに複雑なコードになって、間違ってたり無駄が多かったりすると思うのですが、そういうのも影響があるんでしょうか。

まとめ

完成されたテンプレートはそのまま使った方が良い！