Bloggerの「ヘッダー」「人気の投稿」で読み解く「HTML」の問題点「inline css」「comment out」「未使用の条件分岐」

概要

Header1

Popular Posts

Blogger のヘッダーガジェット「Header1」や…

人気の投稿ガジェット「Popular Posts」って…

なんとなく…こんなもんだろう…的な感じで…

検証が疎かになりがちです…

まぁ…例によって自分基準ですが

でも考えてみれば…表示方法を設定出来るって事は…

それだけの「HTML」を内包しているって事です…

裏を返せば…設定した以外の「HTML」は…

単に…ページレンダリングの足を引っ張るだけの…

無用な存在に他なりません…

なので…ガジェットの中でも「ヘッダー」「人気の投稿」という…

Blogger で書いている管理者なら…

ほぼ…導入しているであろうガジェットを中心に…

カスタマイズというよりは…チューニング的な感じで進めて行きます…

あれ…「ブログ アーカイブ」は

…と…疑問に思われた方もいらっしゃるでしょうが…

「Popular Posts」と「Recent Posts」を実装すれば…

 最近の投稿「Recent Posts」の構築と自動生成するスクリプトのリスクについての考察


「ブログ アーカイブ」は不要というのが持論ですので解説は無しです…

先ずは…基本的なチューニングポイントを書いておきましょう…

「HTML」のチューニングポイント

必ずバックアップしてから作業を行って下さい

コメントアウト「comment out」の削除

デフォルトのテンプレートやサードパーティ製のテンプレートでは…

カスタマイズ時に分かり易くするためでしょう…

漏れ無く…説明用の「コメントアウト」が付いてきます…

代表的なのが…ガジェットを追加すると必ず含まれている…

　<!-- only display title if it's non-empty -->

…です……迷わず削除しましょう…

もし…タイトルを空欄のまま使用している場合は…

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

…の記述ごと削除しましょう…他の様々なコメントアウトも…

意味を理解出来るのなら…「HTML」には全くもって不要ですので…

「HTML」のダウンサイジングのために削除しましょう…

インラインスタイル「inline css」の削除

「HTML」には…先生が「PageSpeed Insights」で…

HTML コード（コード内のインライン JavaScript と CSS を含む）を縮小すると、データ サイズを大きく削減でき、ダウンロードや解析の速度を向上させることができます。

…と言っているにも拘らず「inline css」がガッツリと含まれています…

所謂…「style='……:……;'」…ってやつですね…

コレね…ハウツー系の記事を書く場合…便宜上…頻繁に使うんですが

例えば…画像などの回り込み解除…などなど…で使うこれらは…

　<br style='clear:both;'/>
　<div style='clear:both;'/>

導入する場合は…ちゃんと「CSS」にまとめてから…

br.clear,div.clear{clear:both}

このように…「class」で呼び出すのが基本です…

　<br class='clear'/>
　<div class='clear'/>

あなたのテンプレートにもたぶん「inline css」が驚くほど潜んでいる事でしょう…

これを機に…徹底的に見直してみては如何でしょう

「inline JavaScript」の削除と圧縮

インラインのスクリプトに関しては過去記事をお読み下さい…

 Bloggerのページレンダリングをブロックする…その「inline JavaScript」は本当に必要ですか？

「未使用の条件分岐」の削除

下記で…「ヘッダー」「人気の投稿」に絞って解説します…

ヘッダー「Header1」の検証

「Header1」の「HTML」

<b:widget id='Header1' locked='true' title='Dégustation?: Sepia (Header)' type='Header'>
  <b:includable id='main'>
    <b:if cond='data:useImage'>
      <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
        <!--
Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth vs scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-widths worth of pixels being cropped. If the user is not using shrink to fit then we expand the header.
-->
        <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
          <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl +   &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        +   data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                          + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                          + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
        <b:else/>
        <!--Show the image only-->
        <div id='header-inner'>
          <a expr:href='data:blog.homepageUrl' style='display: block'>
            <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId +   &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
          </a>
          <!--Show the description-->
          <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
            <b:include name='description'/>
          </b:if>
        </div>
      </b:if>
      <b:else/>
      <!--No header image -->
      <div id='header-inner'>
        <div class='titlewrapper'>
          <h1 class='title'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>
  </b:includable>
  <b:includable id='description'>
    <div class='descriptionwrapper'>
      <p class='description'>
        <span>
          <data:description/>
        </span>
      </p>
    </div>
  </b:includable>
  <b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <data:title/>
      <b:else/>
      <a expr:href='data:blog.homepageUrl'>
        <data:title/>
      </a>
    </b:if>
  </b:includable>
</b:widget>

もし…ヘッダーに画像を使っていなかったり…

私のように…「画像」「検索フォーム」「リボン」などを…

別途…「position」プロパティで配置している場合は…

赤文字部分が不要です…バッサリ削除しましょう…っていうか…

私的には…「Header1」で画像を指定するのは…

読み込み遅延に直結する「HTTP リクエスト」が発生するので……非推奨です

別途…こんな感じで…領域を設定して…

<div id='header-top'>
<b:section class='header-top' id='header-top' showaddelement='yes'/>
</div>

「HTML/JavaScript」ガジェットを追加してから…

「position」プロパティで「base64」変換した画像を配置すべきです…

画像をbase64エンコードするツール / Syncer  

人気の投稿「Popular Posts」の検証

ガジェットのタイトルに過去記事のエフェクトを適用させていますし…

 jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト


回り込み解除は…上記…『インラインスタイル「inline css」の削除』の通り…

クラス名で呼び出していますので…

デフォルト状態とは…多少違いますが…ご勘弁を…　σ(^_^;)

「Popular Posts」の「HTML」

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='side-r'>
        <span class='light light-r'>
          <a title='人気の投稿'>
            Popular Posts
          </a>
        </span>
      </h2>
      <br class='clear'/>
    </b:if>
    <div class='widget-content popular-posts ui-corner-bottom'>
      <ul>
        <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'>
                  <data:post.title/>
                </a>
                <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'>
                  <a expr:href='data:post.href'>
                    <data:post.title/>
                  </a>
                </div>
                <div class='item-snippet'>
                  <data:post.snippet/>
                </div>
              </b:if>
              <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'>
                    <a expr:href='data:post.href'>
                      <data:post.title/>
                    </a>
                  </div>
                </div>
                <div class='clear'/>
                <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'>
                    <a expr:href='data:post.href'>
                      <data:post.title/>
                    </a>
                  </div>
                  <div class='item-snippet'>
                    <data:post.snippet/>
                  </div>
                </div>
                <div class='clear'/>
              </b:if>
            </b:if>
          </li>
        </b:loop>
      </ul>
    </div>
  </b:includable>
</b:widget>

4パターンに分類して条件分岐していますね…

それぞれの条件分岐で表示されるコンテンツは…

(1) No snippet/thumbnail　　「title」
(2) Show only snippets　　「title」+「snippets」
(3) Show only thumbnails　　「thumbnails」+「title」
(4) Show snippets and thumbnails　　「thumbnails」+「title」+「snippets」

…ってな感じです…… 当サイトでは…

「title」+「snippets」で表示させていますので…

赤文字部分が不要で…バッサリ削除しています…　(￣ー￣) 邪笑®

おわりに…

Redirects

GTmetrix

「HTML」のダウンサイジングのためには…

チューニングはマストです…

ガジェットを追加すればゴミが溜まります…

WordPress などで…よく見かけるでしょ

Plugins を入れすぎて欠伸が出る程遅いサイトを…

そんな事態に陥らないためにも…

チューニングは常日頃から心に留めておきましょう…

「.com」でアクセスすると例外なく…

「.ca」にリダイレクトされてしまいますので

「.jp」アドレスでアクセスして「Waterfall」を見てみると…

「Blocking」が激減して…カスタマイズ好きとしては…地味に嬉しい

以上です…最後までお読みいただきましてありがとうございます…

Tips Header Sidebar Main Footer Current-Label : Universal