from :: Asahikawa Hokkaido

passer-by198

primetime pencil

2012/12/01


Posted

Bloggerの読み込み遅延の元凶「widget css bundle」を削除して高速化する

所謂…「SEO対策」など微塵も興味が無いのですが…

Blogger でテンプレートを好みのデザインにするため…

JavaScript を多用すると…いかに非同期読み込みにしようとも…当然ながら…

ページのロードスピードは低下して行きます…これは我慢できません…

しかしながらデザイン優先でやっていますから…

JavaScript との兼ね合いでバランスを取る事になる訳です…

…で…他の…様々な読み込み遅延の原因を調べて…

Remove the following redirect chain if possible:

…とか叱られムカツキながらも…

ページのロードスピードを少しでも速くするため個別に対応して行く訳ですが…

その過程の中で必ず行き当たるのが…

Blogger から自動的に付与されてしまう「widget css bundle」です…

仕様だからと…サイト開設から3年以上放置して来ましたが…

朗報は…突然舞い込みました…

How to remove blogger CSS reset stylesheet (widget bundle) / Damzaky

素晴らしい …長年の懸案事項が…いともアッサリと

このチュートリアルのおかげで外部 ファイル化していた自前の CSS を元に戻しても…

読み込み速度が…1秒以上改善されました…

上記サイトでは…中身をカラにして直下に自前の CSS を記述していますが…

中身をカラにしなくても問題無さそうですので…一応…手順を記載しておきます…

ちゃんと…バックアップしてから作業して下さいな…

「デザイン」「HTMLの編集」から…

「Ctrl + F」で「<b:skin><![CDATA[」を検索すると…該当部分は…
<b:skin><![CDATA[
ご自身のスタイルシート
]]></b:skin>
…ってな感じになっていますので…

黄文字部分を以下のように書き換えます…
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/
ご自身のスタイルシート
]]></b:skin>
「プレビュー」でサイトが正常に表示されたら…

「テンプレートを保存」して完了です…

サイトを表示してページのソースを見てみると…
<style type="text/css">
<!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=ご自身のブログID"/>
<style id='page-skin-1' type='text/css'><!--
*/
ご自身のスタイルシート
--></style>
…ってな感じに…CSS が2つコメントアウトされています…

ブラボー~~

2013.08,10 追記

コメントで…universe さんにご指摘いただいた通り…
テンプレートデザイナー対応の CSS ではカラム落ちします…
CSS を独自に構築して下さい…m(_ _;)m


17 Comments :

View Comments :: Click!!

17 Comments :

  1. io さんのコメント...
  2. はじめまして、
    とても艶やかなサイトですね(^^♪

    ちょっと伺いたいのですが、
    bundleCSSのコメントアウト化ですが、
    私のBloggerブログにおいてですと、
    skin内を空にしてもskin内があっても…。


    skin部分を投稿内に記述されている
    『<style type="text/css">
    <!-- /*<![CDATA[*/』

    に変更しても、
    プレビューで正常に表示されません…。


    また、
    一応バックアップを取ってから、
    テンプレートを保存後に、
    通常表示させてみてもできませんでした。
    (´;ェ;`)ウゥ・・・

    一応、
    自動でbundleされる2つのCSS以外は、
    Googleドライブへ外部化してはあります。

    何かお分かりでしたら、
    何卒ご教授願います。
    m(._.*)m




  3. passer-by198 さんのコメント...
  4. >universe さん

    書き換える黄文字部分の記述は文字化けではありませんので…
    1行目・2行目をそのままコピペして下さい…
    保存するとBlogger側でuniverse さんがコメントで記述した形に…
    勝手にコメントアウトしてくれるという事です…
    説明不足で申し訳ありません…

    お褒めいただきありがとうございます…
    解決しない場合引き続きコメントで質問どうぞ…

  5. io さんのコメント...
  6. passer-by198さん、
    ご返信ありがとうございます。

    コメント内に記載したコメントアウト化の記述は、
    変換されているようですね…。


    投稿内にありますように、
    エンティティ変換後の記載で実施しております。


    それで前回のコメントのように、
    うまくいかない状態です。


    テンプレートによってうまく行ったりいかなかったりするものなのでしょうか?


    度々のコメントで申し訳ありませんが、
    ご教授願えましたら幸いです。

  7. passer-by198 さんのコメント...
  8. >universe さん

    ご自身で書いたCSSがちゃんと構築されていれば…
    問題ないと思われますが…
    「widget css bundle」を削除すると…
    何かしら不足しているから…
    エラーを吐くのでは?

  9. io さんのコメント...
  10. passer-by198さん、
    ご返信ありがとうございます。

    早速ですが、
    私が使用している同じテンプレートにて、
    新しくBloggerブログを作成して
    bundleCSSのコメントアウト化を実施してみました。

    以下URLです。

    http://bundlecss.blogspot.jp/


    ご覧いただけますように表示が崩れてしまいます…。

    (;´д`)トホホ…

    勝手にbundleされてしまう2つのCSSのコメントアウト化は、
    できているようですが…。


    なぜでしょう…。

    大元のテンプレートから1つの投稿のみしてみた状態です。



    該当URLもしくは、
    現在公開中の以下URLにて
    http://sekirarablog.blogspot.jp/

    何か改善もしくは追加(修正)するようなものがありましたら、
    ご教授願えませんでしょうかm(._.*)m


    何卒よろしくお願い申し上げます。
    m(__)m

  11. passer-by198 さんのコメント...
  12. >universe さん

    ざっとソースを見てみると…
    width: 100%;
    しか指定されていないかと思われますが…
    カラム指定部分のスタイル指定が不要かと…
    直書きで良いのでは?

  13. io さんのコメント...
  14. passer-by198さん、
    返信ありがとうございます。
    m(__)m


    bundleCSSのコメントアウト化は諦めます…。

    何となくおっしゃっていることは分かりそうな分からなそうな…。


    という感じです…。


    なので、
    具体的にどこをどうすれば良いのかわからない状態です。
    (w_-; ウゥ・・


    (;´д`)トホホ…

    (____△____;)モ・モウダメポ・・・


    度々のコメントすみませんでした。

    (w_-; ウゥ・・




  15. passer-by198 さんのコメント...
  16. >universe さん
    残念です…

    <style type="text/css"><!--
    「カラムレイアウトを指定しているuniverse さんのスタイルシート」
    --></style>

    ってなっていますので…

    「カラムレイアウトを指定しているuniverse さんのスタイルシート」
    の上下が不要かと…

  17. io さんのコメント...
  18. passer-by198さん、
    コメントありがとうございます。
    m(__)mm(__)m



    だけれど…、
    わからないです…。
    (;´Д`)× 
    o(><*)o



    よろしければ以下にテスト用のブログURL内のCSS記載部分をすべて書かせて頂きます
    m(._.*)mペコッm(._.*)mペコッ

    その内、
    どこを削除すればよいのか教えて頂けましたら、
    本当に幸いです。



    また、
    passer-by198さんの
    前コメントは、

    --------------------ここから-----------------------

    <style type="text/css"><!--
    「カラムレイアウトを指定しているuniverse さんのスタイルシート」
    --></style>

    ってなっていますので…

    「カラムレイアウトを指定しているuniverse さんのスタイルシ>ート」
    の上下が不要かと…

    ---------------ここまで-----------------------------------


    は、
    テスト用のブログソースの事をおっしゃっていらっしゃるのでしょうか?

    それとも、
    公開中の方
    (http://sekirarablog.blogspot.jp/)

    ソースの事をおっしゃっていらっしゃるのでしょうか?



    以下は、
    テスト用のブログ内のCSS記述部分すべてです。
    (すべてと思われます。)


    <style type="text/css">
    <!-- /*_<)…。



    長文になってしまい、
    誠に申し訳ありません。
    m(._.*)mm(._.*)m…

  19. io さんのコメント...
  20. あれっヽ(~~~ )
    CSS部分の記述内容が消えてしまっている…。

    CSS部分は、
    エスケープしてもコメントできないんですねm(__)m。


    上下と記載されていらっしゃいましたので、
    思わしき部分を削除して、
    プレビューしては見ましたが…。


    やはり、
    表示が崩れたり色が異なったりしてしまいました(>_<)…。



    長文になってしまい、
    誠に申し訳ありません。
    m(._.*)mm(._.*)m…

  21. passer-by198 さんのコメント...
  22. >universe さん
    無問題ですよ…

    テストブログです…
    479行目と526行目を削除して…
    挟まれたCSSを477行目に插入で…いかがでしょう?

    蛇足ですが…
    「Variable」指定での「$」もオススできません…
    そもそも「Variable」指定する程の頻度とも思えませんし…
    カラム記述などは…width: 100%;を…
    後から上書きしようとしている訳ですから…
    「body」から始まる1つのCSSにバラして…
    レイアウトを確認してから「widget css bundle」を…
    コメントアウトしたほうが…

  23. io さんのコメント...
  24. passer-by198さん
    早速のご返信ありがとうございます。



    記載して頂いた行数の部分を削除して、
    そこに挟まれていたCSSを477行目に挿入してみたのですが…。




    ---------------ここから-----------------------
    479行目と526行目を削除して…
    挟まれたCSSを477行目に插入で…いかがでしょう?

    蛇足ですが…
    「Variable」指定での「$」もオススできません…
    そもそも「Variable」指定する程の頻度とも思えませんし…
    カラム記述などは…width: 100%;を…
    後から上書きしようとしている訳ですから…
    「body」から始まる1つのCSSにバラして…
    レイアウトを確認してから「widget css bundle」を…
    コメントアウトしたほうが…
    ---------------ここまで-----------------------------




    やはり、
    表示が崩れてしまいます。
    (;´д`)トホホ…





    「Variable」指定での「$」…。
    というのもご指摘頂いたとおりなのだと思いますが、
    正直、全く意味がわかっていません…。
    m(_ _;)m


    先に記載していただいたように、
    479行目と526行目の削除をし、
    477行目に挿入してもうまくいかないのは、
    『Variable』
    っていうのが関係しているのでしょうか…?

    (ノ_-;)ハア…


  25. passer-by198 さんのコメント...
  26. >universe さん

    私もテストブログを作成してみましたが…
    テンプレートデザイナー対応のテンプレートでは…
    同じようにカラム落ちしますね…
    Bloggerの独自規格が邪魔をするのでしょう…
    やはりCSSを独自に組むしかないようです…

    無駄な時間を費やさせたようで…
    申し訳ありません…m(_ _;)m

  27. io さんのコメント...
  28. passer-by198さん、

    とんでもありません。


    こちらこそお忙しい中、
    テストブログまで作成して検証して頂きまして、
    ありがとうございます。


  29. io さんのコメント...
  30. passer-by198さん、
    お久しぶりです。

    こちらの記事の方法でカラム落ちしない解決策?を記事にしました。
    明確には、
    解決策か否かはわかりませんが2つの元凶はコメントアウト化されてカラム落ちもしないようにできました。

    一応URLを記述しておきますね。
    http://sekirarablog.blogspot.jp/2014/07/bloggerbundlecss.html

    1ヶ月位前に気づいたのですが、
    記事にするのに時間がかかってしまいました。
    とスケジュール機能にて投稿にしてありましたので投稿後に報告をと思いまして…。

    コメントさせて頂いています。

    もし、
    間違いや不都合がありましたらご指摘ください。

  31. passer-by198 さんのコメント...
  32. >universe さん
    1日…最低…2回は覗かせてもらっています…( ̄ー ̄) 邪笑
    解決策としてリンクを入れさせてもらおうか悩みましたが…
    CSSを独自に組んでいる当サイトでは無問題ですし…
    zerippeさんのサイトでも同様のようですので止めました…
    ただ…逆転の発想として…素晴らしいです!!

    あと…余計なお世話…なんですが…
    レスポンシブデザインの記事でナビゲーションに触れられていましたが…
    ドロップダウンナビゲーション下のアドセンスは…
    以前…誤クリック誘発で…Google先生に…
    叱られた経験がありますので…注意が必要かと思われます…
    それと…やっぱり…ナビゲーションマニアとしては…
    「・」…気になっちゃいます…σ(^_^;)

    わざわざ…お知らせをいただき…リンクまで入れていただいて…
    ありがとうございました…m(_ _;)m

  33. io さんのコメント...
  34. passer-by198さん、
    当ブログへのコメントもありがとうございます。

    >1日…最低…2回は覗かせてもらっています…( ̄ー ̄) 邪笑

    ホントですかぁw(゜o゜)w
    ハズカシイ…。
    (*´艸`*)

    zerippeさんのところで、
    >単純に無効化すると表示が崩れます。Widgetに対するCSSを全て自分で書く必要があります。
    と言われたのですが、
    自分でcssなんて書けないし…。

    (´;ェ;`)ウゥ・・・
    と思ったのと同時に、
    当初は言っている意味があまりわかりませんでした…。

    が、
    こういうことなのかな?
    と思って、
    この度やってみたところ成功した次第です(^u^)

    このことをおっしゃられてたのかなぁ。
    と…。

    違うかもしれませんが…。^^;

    >「・」…気になっちゃいます…σ(^_^;)
    やはり、気になっちゃいますかぁ。
    &誤クリック誘発はそうですね。
    修正しなくてはですね。

    アドバイスありがとうございます。

Post a Comment :: Click!!

コメントを投稿

韓国大統領 月山明博(李明博)の…天皇陛下への「不敬発言」
痛惜の念などという単語一つを言いに来るのなら、来る必要はない。
日王は韓国民に心から土下座したいのなら来い。
重罪人にするように手足を縛って頭を足で踏んで地面に擦り付けて謝らせてやる。
重罪人が土下座もしない、言葉で謝るだけならふざけた話だ。
そんな馬鹿な話は通用しない。
それなら入国は許さないぞ。
偽左翼マスメディアの情報操作手法
手法 用例 手法 用例 手法 用例 手法 用例
連想の創出 愛国者に対して「軍靴の音が聞こえそうだ」などと揶揄し否定的な印象を与える… コメント 人々を一定の方向に誘導するために「事実とは異なる解釈」をコメントさせたり「社説」にする… プレゼンス効果 現場からの中継や縮小ジオラマなどで「臨場感」を演出し「やらせ」も交えて信用されやすくする… 分類表 一部の「ネット右翼」が批判しています…のように決まった単語・フレーズで事象を分類して極小化・極大化する…
撹乱 「第三極も含めて政党が乱立して訳が分かりません…」などと連日「情報ノイズ」で溢れさせ興味自体を失わせる… 癒着提案 TBS「安倍官房長官印象操作映像事件」のように「個別の事実」を「継ぎ接ぎ」して「誤った印象」を植え付ける… 匿名の権威 「信頼すべき消息筋によれば…」のように情報元を明かす必要がない事を逆手に取り記事の内容に権威を与える… 日常会話 お隣の「韓国」では…のように本来否定的な要素「韓国」を日常会話のように繰り返し心理的習熟効果で反応を麻痺させる…
感情共鳴 コンサートで開催場所の地名を大声で繰り返し叫ぶ…などのように「デモ」「集会」などで群集を理性ではなく感情レベルで反応させる… 歴史の書き換え 民主党の「天皇制廃止」「戸籍法廃止」「夫婦別姓」などの愛国心を低下させるための国家・民族全体に対する長期的な情報操作… 感情整列 この時間にご覧になっている貴方だけに限定100セットだけ…などと「一定のシチュエーション」を用意して群集の感情を「均一化」させる… 一次効果 「朝日新聞の従軍慰安婦捏造問題」「iPS細胞での読売新聞大誤報」など「最初に発信された情報」は嘘でも捏造でも信用されやすいという原理…
ブーメラン 坂本龍一・山本太郎などの著名人を使い原発管制報道に対する「自由の闘士」を作り出し国力を削るために「愛国者」を装った抗議運動を展開する… 心理的ショック 日本は豊かなのだと錯覚させ更に絞り取るために「飢餓」を伝え…日本は悪い事をしたと日本人を自虐的に思い込ませるために繰り返し「戦争」を伝えます… 半真実 「マニュフェストが実現出来なかったのは自民党の負の遺産のせいで民主党がダメだった訳ではない…」のように嘘の中に一面的な真実を織り込み全体を真実に見せる… フィードバック 「支持政党無しの無党派層は過去最高」という結果を得るために世論調査の回答項目に「民主党もダメだけど自民党もダメ」という項目を設定し全体の意見に偽装する…
すり替え 「傷害」を「いじめ」「窃盗」を「万引き」「殺人事件」を「交通事故」「テロリスト」を「レジスタンス」「略奪事件」を「抗議デモ」など受け入れ易い言葉に置き換える婉曲手法… 脅威の創出 尖閣購入時に「中国の脅威」は民主党政権以降に尖鋭化していたにもかかわらず恰も「都知事発言以降に尖鋭化した」かの如く捏造し民主党には他に選択肢は無かったと責任転嫁… 社会的同意 首相の靖国参拝に「外国」から激しい反発が起こっている…などと…特定アジアだけの意見を恰も世界全体が同意していると錯覚させる…「人権擁護法案」「外国人参政権」などもこの手法… 側面迂回 民主党の原発事故対応では線量などの周辺情報は正確に報じられ枝野幸男の「直ちに健康に影響を及ぼすものではない…」の嘘の信憑性を高めメルトダウン・風向きなどの核心部分は隠蔽された…
虚偽類似 「視聴率低迷は若者のテレビ離れのせい…」「CDが売れないのは違法ダウンロードのせい…」「紅白歌合戦に韓流スターが出演できないのは日本の右傾化のせい…」など都合の良い「原因と結果の因果関係」を作り出す… 事実確認 原発安全神話を作り出したのも公共事業にジャブジャブ税金をつぎ込んだのも自民党です…など…「一面的な事実」を先に述べ「事実確認」させ…自民党政権に逆もどりして良いんですか?…と未来を誤認・錯覚させる… 毒入りサンドウィッチ 「白川総裁が自民党の経済政策を批判」「安倍総裁の経済政策発言を市場が好感し円安に振れ株価は年初来の高値」「一方でハイパーインフレを懸念する声も」…のように序文と結論の否定的報道で肯定的な報道を挟み肯定的な報道の意義を低下させる… 砂糖入りサンドウィッチ 毒入りサンドウィッチの逆の手法…
  偽左翼マスメディアの情報操作手法
「jQuery」と「jQuery UI」で HTML に彩りを添えよう…

「導入」「Button」「Accordion」「Tabs」「Effects/Slide」
「Progressbar」「Dialog」「Tooltip」「Menu」 「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト
Blogger Template Customize Universal / INDEX
Blogger テンプレート・カスタマイズ / 全般を解説
高速化・最適化対策の結果と備忘録
Scroll Top