PRPR

Zenback非同期コードをBloggerブログに貼る方法

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年11月15日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。
スポンサーリンク

スポンサーリンク

スポンサーリンク
カスタム検索
スポンサーリンク

平均20%+高速化!​Zenbackのスク​リプトコードが新しく​なりました。

とのメールタイトルで本日夕刻に、
メールを受信していました。

スポンサーリンク

変わった内容としましては、

■ 変わったポイント
・もっと素早く ページ読込完了速度向上
・もっと優しく 非同期読み込みに対応

他にユーザの実測値など、

スポンサーリンク

以下内容のようなものがZenbackブログには掲載されています。

■ 20%以上の速度向上?
 弊社での調査でも平均27%以上の速度UPが見られました。
ユーザ様がご検証いただいたデータでも28.2%、25.7%、20.9%と
軒並み動作速度が向上したとのご連絡を頂いています。
 皆さまのお手元でも簡単にビフォーアフターの速度検証できますので、
ぜひお試しください。
そしてソーシャルなどでご報告いただけましたら、弊社ブログでも
 ご紹介させていただきたいです!
コードの差し替え、動作速度検証について詳しくは、こちらの記事をご参照ください。
> 平均20%+高速化!Zenbackのスクリプトコードが新しくなりました
> http://blog.zenback.jp/2013/11/20zenback-0a1e.html

はてさて、
それならばと、

スポンサーリンク

私もサイト表示速度は気にしていた方なので、

早速、
Zenbackサイトにて非同期コードを入手しまして、
Bloggerブログの記事直下に今まで通り挿入…。

スポンサーリンク

以下に非同期コード全容を記載します。

<!-- X:S ZenBackWidget --><div id="zenback-widget-loader"></div><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var r=Math.ceil((new Date()*1)*Math.random());var j=d.createElement("script");j.id=i;j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A(Blogger名).blogspot.com/&nsid=112351448469097807%3A%3A112589542933953795&rand="+r;d.body.appendChild(j);}}(document,"zenback-widget-js");</script><!-- X:E ZenBackWidget -->

うまくいくはずもなく…。

以前に記載した記事で、
zenbackコードを記事下に綺麗に貼る方法

というのがあります。

そこで、
また、コード内に

// <![CDATA[
// ]]>

どこかに挿入してあげなければなりません。

それがどこかというのは、

スポンサーリンク

以前とほとんど変わらずの位置です。

上記がZenbackより提供された元々の非同期コードです。

しかし、
これをそのまま記事内に挿入するだけでは、

スポンサーリンク

Bloggerブログからエラーを吐かれて、プレビュー・保存すらできません。

なので、

以下の様に
// <![CDATA[
// ]]>

を追加します。

<!-- X:S ZenBackWidget -->
<div id="zenback-widget-loader"></div>
<script type="text/javascript">// <![CDATA[
!function(d,i){if(!d.getElementById(i)){var r=Math.ceil((new Date()*1)*Math.random());var j=d.createElement("script");j.id=i;j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A(Blogger名).blogspot.com/&nsid=112351448469097807%3A%3A112589542933953795&rand="+r;d.body.appendChild(j);}}(document,"zenback-widget-js");// ]]>
</script><!-- X:E ZenBackWidget -->
  • 3行目の最後に// <![CDATA[
  • 4行目の最後に// ]]>

を追加します。

すると、

スポンサーリンク

以前のようにBloggerブログさんに怒られることもなく、

プレビューもできるし保存も可能となります。

そして、

スポンサーリンク

サイト表示速度はいかに…!!

ということですが、
今のところ私は測定していません。

若干、
サイトが表示される時にチラチラするかなという感じがしました。
(すぐに元に戻りますが…。)

スポンサーリンク

他のユーザの方々の検証結果が、

Zenbackブログに掲載されているようなので、
紹介しておきます。

平均20%+高速化!Zenbackのスクリプトコードが新しくなりました - Zenback ブログ

なお、

スポンサーリンク

2013年11月7日16時以降にZenback管理画面から入手したコードは、

全て新しいコード(非同期コード)に、
切り替わっているとの事です。

ただ…、

スポンサーリンク

同じBloggerブログでも記事内(記事下)にZenback表示されているのに、

コードの追加していなくても普通に表示されているBloggerブログもあったりする…。
テンプレートが違うからなのかな・・・。

スポンサーリンク

スポンサーリンク

Bloggerブログで記事内に表示したいけれど、

Zenbackコードが以前と変わって(非同期コード)使いたいけれど、
記事内に挿入するとエラーを吐かれる。

という方は、
試してみてください。

This session is using  IPv4  is established in
スポンサーリンク
本ページはプロモーションが含まれています。
Bloggerzenbackカスタマイズ
スポンサーリンク
ioをフォローする
スポンサーリンク
スポンサーリンク
〜備忘録〜

カテゴリー

スポンサーリンク
タイトルとURLをコピーしました