概要
テンプレートをカスタマイズするような方は…一度は…例えば…
Google Chrome のコンテキストメニューの「ページのソースを表示」や…
「要素を検証」で自身のサイトを見た事があるでしょう
その際…必ず感じる事は…どうして
<head> 内にこんなにコンテンツが
…ってな感じでしょう…なにせデフォルトの状態では「CSS」を除けば…
テンプレートには…この程度しか記述されていないのですから…
<b:include data='blog' name='all-head-content'/>
<title>
<data:blog.pageTitle/>
</title>
なので…今回は…
<head>～</head> の中身を考察してみましょう…
<head>～</head> 内に呼び出されるコードの検証
Blogger のテンプレートの
<head>～</head> にある一行のコード…
<b:include data='blog' name='all-head-content'/>
…で参照されて…
<head>～</head> 内に呼び出されるコードは…
コンテンツが最大になるように…コメントのあるページで…
「OpenID」も設定してソースを見てみると…
<head>～</head> 内に呼び出されるコード
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var b=window,f="chrome",g="tick",k="jstiming";(function(){function d(a){this.t={};this.tick=function(a,d,c){var e=void 0!=c?c:(new Date).getTime();this.t[a]=[e,d];if(void 0==c)try{b.console.timeStamp("CSI/"+a)}catch(h){}};this[g]("start",null,a)}var a;b.performance&&(a=b.performance.timing);var n=a?new d(a.responseStart):new d;b.jstiming={Timer:d,load:n};if(a){var c=a.navigationStart,h=a.responseStart;0<c&&h>=c&&(b[k].srt=h-c)}if(a){var e=b[k].load;0<c&&h>=c&&(e[g]("_wtsrt",void 0,c),e[g]("wtsrt_","_wtsrt",h),e[g]("tbsd_","wtsrt_"))}try{a=null,
b[f]&&b[f].csi&&(a=Math.floor(b[f].csi().pageT),e&&0<c&&(e[g]("_tbnd",void 0,b[f].csi().startE),e[g]("tbnd_","_tbnd",c))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,e&&0<c&&(e[g]("_tbnd",void 0,b.external.startE),e[g]("tbnd_","_tbnd",c))),a&&(b[k].pt=a)}catch(p){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[k].load[g]("aft")};var l=!1;function m(){l||(l=!0,b[k].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",m,!1):b.attachEvent("onscroll",m);
})();</script>
<meta content='blogger' name='generator'/>
<link href='//passer-by198.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='//passer-by198.blogspot.com/2012/02/htmljavascript_21.html' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Dégustation?: Sepia - Atom" href="//passer-by198.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Dégustation?: Sepia - RSS" href="//passer-by198.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Dégustation?: Sepia - Atom" href="//www.blogger.com/feeds/1928111535560437263/posts/default" />
<link rel="alternate" type="application/atom+xml" title="Dégustation?: Sepia - Atom" href="//passer-by198.blogspot.com/feeds/4535265074150256510/comments/default" />
<link rel="me" href="//www.blogger.com/profile/01335705951158932473" />
<link rel="openid.server" href="//www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="//passer-by198.blogspot.com/" />
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9qzTDKSjtYdCfA6W9ZUTZBiDixz0x62D3lkJQmbv6hpBnDAhoxlx5jGKoW2NAunvLUhAo-jF_p0YALCqmH_LyhZ8MfUqLghXXuXQzufoA4rNUDZIWf8w18tL__y_4H3mKjHu5ZnMC-DX/s200/Google+Chrome%252C+Japan.jpg' rel='image_src'/>
<meta content='様々なHTML要素をクリックで開閉するための少量の「JavaScript」' name='description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
■JavaScript
「データ収集用」「
Internet Explorer 用」
■「meta」要素
「文字コード用」「出力情報用」「説明用」
■「link」要素
「ファビコン用」「URL 正規化用」「フィード用」「プロフィール用」「OpenID 用」「画像用」
…ってな感じで…結構…大袈裟な量です
過去記事で対処済みの「CSS」…
Bloggerの読み込み遅延の元凶「widget css bundle」を削除して高速化する
「widget_css_bundle」「dyn-css/authorization」や…
これもまた…対処済みの「JavaScript」…
Bloggerの読み込み遅延の元凶「widgets.js」「plusone.js」を削除して高速化する…非推奨
「widgets.js」「plusone.js」と同様に…
一見…必要なものばかりと思い込みがちでしょうが…
はたして…そうでしょうか
…必要だとしても…
レンダリングブロックしてまで呼び出す…というのも如何なものでしょう
<head> 内に多くのコンテンツを置くのは…よろしくないと思われますので…
熟考して…不要な要素は削除すべきです
…なので…
展開して…必要なものだけ残すために個別に見てみましょう…
「JavaScript」に関する考察
2行目～4行目のスクリプトは「データ収集用」…かな
17行目のスクリプトは「
Internet Explorer 用」ですね…
私は…どちらも…不要ですので削除していますが…
展開した上で残す場合は…最初のスクリプトは…
<script type='text/javascript'>// <![CDATA[ここにスクリプト// ]]></script>
…ってな感じで記述します…
「meta」要素に関する考察
「meta」要素は…かなりシンプルで好みですね…
「
http-equiv='Content-Type'」と「
name='description'」は無問題ですが…
「
name='generator'」には…ご遠慮いただきたいですね…削除
です…
「
http-equiv='Content-Type'」は…呼び出されたコードのままで OK
です…
「
name='description'」は…当然ながら呼び出す必要があります…
「description」を呼び出すコード
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " | " + data:blog.title' name='description'/>
</b:if>
…ってな感じで記述します…まぁ…お好みで…
「SEO」大好きな方々が勧める
山盛りの「meta」要素を記述したい方には…
どうぞ…お好きに…
…としか言いようが無いです… (￣ー￣) 邪笑®
「favicon」に関する考察
ファビコンは…ブラウザに見つけてもらうだけの「link」要素とは違い…
「HTTP リクエスト」が発生しますので問題あり
です…
現実に「WebPageTest」では…
ファビコンも含めて判定されます…
Blogger でも「レイアウト」からファビコンを設定出来るようになりましたが…
逆に…「base64」変換での生データ記述をするためには…
このような形で一旦展開しなければならなくなった…という事です…
そのためだけに…この記事を書いているようなものです…
呼び出しませんから「expr:」を外して…こんな感じで記述します…
<link href='「base64」変換の生データ' rel='icon' type='image/x-icon'/>
画像をbase64エンコードするツール / Syncer
尚…このように生データ記述をすると…記事作成中のプレビューで…
ファビコンが表示されなくなりますが
サイトでは問題なく表示されます…
参考程度に…6行目で呼び出されているファビコンのコードが…
どのようなデータタグで呼びだされているのだろう
ってな方のために…
たぶん…こんな感じ…ってのを置いておきます…
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
「link」要素に関する考察
「
rel='canonical'」の「URL 正規化用」の「link」要素は必要ですね…
<link expr:href='data:blog.url' rel='canonical'/>
…ってな感じで呼び出します…
「
rel='alternate'」が含まれる…3個の「フィード用」は…
「フィードリーダー」に見つけてもらうためだけに記述する訳ですから…
私的には…全くもって不要
です…全て削除
して…
記事下に…「Feedburner」を置いています…
先生謹製なのですから…もう少し力を入れて欲しいものですね…
呼び出したい場合は…こんな感じで記述します…
「フィード用」の「link」要素を呼び出すコード
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"//www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
「プロフィール用」は…サイドバーに「About」を置いていますし…
「OpenID 用」は…実際には設定していませんので…不要
です…
記述するなら…ソースコードのまま記述すれば良いでしょう…
「画像用」は投稿ページでサムネイル画像が収得出来る場合に出てきます…
まぁ…不要って言えば不要…なんですが…
タイトルも含めて…こんな感じで呼び出しています…
「画像用」の「link」要素を呼び出すコード
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<title>
<data:blog.pageName/> | <data:blog.title/>
</title>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<title>
<data:blog.title/>
</title>
<b:else/>
<title>
<data:blog.pageName/> | <data:blog.title/>
</title>
</b:if>
</b:if>
お好みのスタイルに弄って下さい…
将来的には…「画像用」も削除する方向かな
…たぶん… (￣。￣) 弱笑®
展開後の「<head>」内の状態
「<head>」内の…実装状態は…「CSS」を除くと…こんな感じになります…
「CSS」を除いた「<head>」内の実装状態
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " | " + data:blog.title' name='description'/>
</b:if>
<link href='「base64」変換の生データ' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<title>
<data:blog.pageName/> | <data:blog.title/>
</title>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<title>
<data:blog.title/>
</title>
<b:else/>
<title>
<data:blog.pageName/> | <data:blog.title/>
</title>
</b:if>
</b:if>
おわりに…
Blogger の高速化・最適化の作業も終盤にさしかかり…
ほぼ…完成しましたが…ラベルは…1個しか付与しない主義なので…
「Customize」カテゴリーの中に埋没して解り辛くなっているでしょ
なので…ヘッダーのナビゲーションの「Blogger」に「Optimization」を置いて…
主な記事だけ抜き出してインデックスしましたので…ご利用下さいな…
あくまでも…直書きしたほうがページ読み込みは速い
という事を忘れずに…
スコアと速度のバランスをとりながらカスタマイズする事を強くお薦めします…
以上
です…最後までお読みいただきましてありがとうございます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿