Seesaaブログのデザイン画面から「何気なく」コンテンツを追加していませんか？

新しい部品を追加するんだからデザインコンテンツを追加するのは当たり前じゃない、と「何気なく」追加しているとブログの表示速度がどんどん遅くなります。

そんなことは言われなくても分かっているけどデザインコンテンツを追加する以外に方法がない、という固定概念は捨てて別のやり方を試してみましょう。

モバイルデバイスからのアクセスが増え、SEOではモバイルフレンドリーがここまで浸透してくると、既存の考え方のままではライバルに勝てません。アクセスユーザにとって何が何でも必要な記事内容ではない限り、モバイル端末での表示速度が遅いと相当数のユーザが直帰・離脱する可能性もあります。

Google AdSense 広告を掲載しているブログの読み込み速度が遅いともっと悲惨です。サイドバーの最上部に配置するパターンが多いですが、記事の表示と同時くらいにアドセンス広告が表示されていますか？

１・２・３・４・５...ハイ表示されましたというタイミングだと恐らく閲覧者の目に留まることはないです。もうとっくにスクロールダウンして記事本文を読み進んでいるはずですから。

よろしければ、このブログのブログタイトルをクリックしてトップページを表示してみてください（記事ページにはサイドバートップのアドセンス広告は配置していませんので）。サイドバートップのアドセンス広告が各記事のアイキャッチ画像と同時か、もしくはアドセンス広告のほうが先に表示されていませんか？

アドセンス広告をアクセスユーザの目に留まるタイミングで表示させるためには、アドセンス広告コード以外のブログ全体の読み込み速度を高速化する必要があります。

どうすればブログ全体の表示速度を高速化できるのか。

そのひとつの解決策が、「デザインコンテンツの追加は最小限に留め、複数のデザインコンテンツを結合する」ことです。これが今回の Seesaaブログ高速化のメイントピック。それではボクがどうやってコンテンツを追加しているのか具体例を挙げてご紹介して行きます。

無駄な空白や改行を排除しHTMLを軽量化するためにデザインコンテンツは結合する

冒頭の画像はこのとある秘密ブログの更新うぇぶろぐのデザインコンテンツ画面のスクリーンショットです（拡大画面）。

使っているデザインコンテンツは「記事」「最近の記事」「コメント」「タグクラウド（キーワード）」「Powered By」の５つだけです。サイドバーに限れば２つだけ。

フッター部分のフッター左、フッター中央、フッター右など複数コンテンツは「タグクラウド（キーワード）」ひとつの中にまとめています。

デザインコンテンツの無駄な空白や改行がHTMLを重くしている

冒頭で失礼ながらコンテンツを「何気なく」追加していませんかと問いました。デザインコンテンツをどしどし追加すると何が悪いのかというと使う必要のない変数や無駄な空白・改行がたくさん含まれているからなのです。

例えば新しいデザインコンテンツ「自由形式」を追加するケースでどれだけ無駄なバイト数が浪費されているか検証してみましょう。

<% content.header -%>改行
<% content.free.text %>改行
<% content.footer -%>改行
意味不明の改行
意味不明の改行
意味不明の改行

<% content.header -%> や <% content.footer -%> はデザインコンテンツの上下に挿入する任意の文字やHTMLですが自由形式では使われていません。また前から気になってはいましたが、最後に無駄な改行が３つ入っていますが何でしょうね？これだけで４バイト（ひとつ上の改行も含む）無駄にしています。

無駄な content.header や content.footer 変数、空白改行を合計すると実に48バイトも浪費されており、その分 HTMLを大きくしてページ読み込み速度を遅くしています。また、書き出された HTML を見るとわかりますがコンテンツとコンテンツの間に更に無駄な改行が入ります。追加したコンテンツのヘッダー部の次、コンテンツ HTML 本体の次、デザインコンテンツ全体の最後、ここに最低３つの改行（最低３バイト）が増えます。

例えばサイドバーに自由形式コンテンツを５個追加したらそれだけで 250バイト以上も HTML に負担を掛けていることになる。更にこの記事を読みながら、変数 content.header や content.footer、空白改行などこれまで気にしたことも無かったというのであれば、自由形式コンテンツ内にあなたが追記している文字列や HTML は空白改行だらけでしょうから実際にはもっと重くなっているはずです。

<% content.free.text %>

自由形式コンテンツのHTMLはこれだけでオッケーです。もちろん行末の改行も削除しておきます。

変数に限って言えば実際にはこれらの変数が HTML に書き出されるわけでありません。正確に言えばこれらの変数に代入されるべき記述があるのか探しに行く内部処理の時間が無駄になるということです。コンマ数秒でも積み重なれば１秒遅くなっているかもしれません。２秒遅いと50％が直帰すると言われていますから１秒の差はとても大きい。

いずれにしても無くても問題がない変数や改行は削除してしまうに限ります。

デザインコンテンツを結合してHTMLをさらに軽量化

「最近の記事」「タグクラウド」「コメント」「トラックバック」、最近追加された「人気の記事」。これらのデザインコンテンツと自由形式コンテンツの違いがありますが分かりますか？

これらのデザインコンテンツはコンテンツの設定画面で任意の変数を選択しなくてはなりません。「最近の記事」であれば何件表示するのか任意に選択しますし、「コメント」コンテンツではコメントの表示件数や表示形式を選択します。

我々には見えない触ることができない JavaScript があるデザインコンテンツ群。絶対にそれを使わないと代用が利かないものです（以降、これらのデザインコンテンツを仮に「オプション変数付きコンテンツ」と呼ぶことにします）。

一方、自由形式コンテンツの場合はどうでしょう。オプション変数はありません。例えば外部のブログパーツなどを追加するときに自由形式コンテンツを追加する必要があるでしょうか？

その必要はありません。先に挙げた「最近の記事」「タグクラウド」「コメント」などのオプション変数付きコンテンツのコンテンツHTML部分に追記すればよい。

代用の利かないオプション変数付きコンテンツのコンテンツHTML部分 ＝ 自由形式コンテンツ

これが今回ご提案するデザインコンテンツの結合のポイントです。

具体例：「コメント」コンテンツにその他のコンテンツを結合する

もう一度、冒頭のスクリーンショットを確認して下さい。サイドバーに追加しているデザインコンテンツは２つ。代用の利かないオプション変数コンテンツである「最近の記事」と「コメント」だけです。でも実際にはコメントの上には「人気の記事」「カテゴリ」、下には「オススメのトピック」「Googleカスタム検索」、記事によっては「追尾メニュー」や「レスポンシブ移動用広告」のコンテンツがあります。

このコメントを挟んだこれらのコンテンツは下のスクリーンショットのように全て「コメント」コンテンツ HTML に結合して実装されています。

コメントのコンテンツ HTML 編集画面を開くと以下のような構成になっています。

<h4 class="sidetitle">人気の記事</h4>
<div class="side">人気の記事のHTML</div>

<h4 class="sidetitle">カテゴリ</h4>
<div class="side">カテゴリのHTML</div>

<h4 class="sidetitle"><% content.title %></h4><div class="side"><% if:content_recent_comment.type==0 -%><ul><% loop:list_article_child -%>
中略
<% /if -%></div>

<h4 class="sidetitle">オススメのトピック</h4>
<div class="side">オススメのトピックのHTML</div>

<div class="side"><div id="searchBox" role="search"><!-- カスタム検索 -->
<gcse:search></gcse:search>
</div></div>

<div class="fixedmenu"></div><!-- 追尾メニュー -->

<div class="sbIndex"></div><!-- レスポンシブ移動広告 -->

※改行や<!-- カスタム検索 -->などのコメントが入っていますが説明のための便宜上のもので、実際にはベタ入力で改行もコメントも１つも入れていません。

赤文字の部分が元々のコメント用HTMLで、それを挟んで前後に別コンテンツのコードを追記しています。結果、コンテンツ間の無駄な改行が入ることもありません。

人気の記事やカテゴリのコンテンツはHTMLを手入力して更に高速化

上記の例で疑問が出てくると思います。人気の記事や特にカテゴリはどうやって結合したのかと。カテゴリのコンテンツもオプション変数付きコンテンツのはずだけど。

確かに。その通りなんですが、それはちょっと頭が固すぎです。

サイドバーのカテゴリや人気の記事は手入力でHTMLを書くだけで、デザインコンテンツは利用しません。

手入力にする理由は更新頻度です。例えばカテゴリはどれくらいの頻度で更新しますか？ 月イチ？ 半年に１回、最初の設定のままで今まで追加したことがない？

少なくとも週イチでカテゴリを追加編集しているというブロガーはそうそういないでしょうし、それだけ頻繁にカテゴリを変更しているということは、そもそもカテゴリ分類の構想自体が不安定です。

頻繁に更新しないカテゴリや、週１回の頻度で更新すればよい人気の記事に JavaScript バリバリで表示速度を遅くするデザインコンテンツを使うのはブログ高速化に逆行します。サクサク読み込める生のHTMLのほうがページ表示の負担を圧倒的に軽減できるはず。

Seesaaブログの提供する枠組みにとらわれずに、もしかすると手打ちのHTMLで代用できるのではないかという発想の転換でコンテンツはどんどん結合できます。

まとめ

テンプレートレベルでブログのページ読み込み速度を速めるには、

• 無駄な空白や改行を極力排除する
• テンプレートの説明用 <!-- --> コメントはすべて削除する
• 手入力のHTMLで代用できそうであればデザインコンテンツを使わない
• 複数のコンテンツを代用の利かないオプション変数付きコンテンツのコンテンツHTMLにまとめて記述する

などでHTMLの軽量化を図ることです。

そうは言っても HTMLで最もボリュームがあるのは記事本体。記事本体に無駄な改行を入れていませんか？ ブログ記事作成やカスタマイズに便利なオンラインツール15選でご紹介した HTML の圧縮ツールを使って記事の改行を削除するだけで１記事当たり100バイトくらいは軽量化できます。

ただ HTMLを軽量化しページ読み込み速度を高速化するために最も効果があるのは画像の圧縮です。オンラインツール15選でご紹介した TinyPNG を使えば、画像を 50〜80%くらいは軽くできますから、こちら方が効果大ですね。

そういう意味では文字ベースの圧縮軽量化というのは、試合前のボクサーがあと100g軽量したいという状況のようなものです。画像は圧縮した、JavaScriptを使うコンテンツは手入力の生のHTMLにした、でももっと軽量化・高速化する方法はないだろうか、というときにコンテンツの使っていない変数や無駄な改行の除去、それからコンテンツの結合は最後の手段として効果があると考えています。

デザインコンテンツの HTML をテキストファイルとしてバックアップするにも少ないほうがラクですし。

このカスタマイズでのスコアアップは？

このカスタマイズでアップする Google Pagespeed Insights のスコアは２〜５。９０越えの道のりはまだまだ長いのであります。