Bloggerの読み込み遅延の元凶「widget css bundle」を削除して高速化する
…という… Blogger から自動的に付与されてしまう「widget css bundle」を…
削除する方法を記事にしましたが…同様に…ガジェットを構築するための…
「widgets.js」も困りものですね…こんなヤツです…
<script type='text/javascript' src='//www.blogger.com/static/v1/widgets/○○○○○○○○○○-widgets.js'></script>
「Website Speed Test」で…
「Waterfall」を見てみると…
まず…「widgets.js」と…
「plusone.js」が…
並列で読み込まれ…完了後…更に…関連する「plusone.js」のスクリプトと…
「Feed」ガジェットに変更したので…そのスクリプトが読み込まれています…
特に…「plusone.js」は…普通のユーザーは複数回読み込まれ…
「Navbar」を削除しても「plus1 button」をリンクだけにしても…
「widgets.js」とセットで読み込まれますから質が悪いですね…
…とは言え…「widgets.js」はガジェット形成に欠かせない…と勝手に思い込み
実際…「by Google」系では…全て試した訳ではありませんが…
「Feed」ガジェットが動作しなかったので…
上記…過去記事で紹介したサイトで…
「How to remove blogger widget javascript / Damzaky」
…という…「削除トリック」…は…あったのですが
Blogger も仕様変更に勤しんでいる時期でしたし…
ソーシャルブックマークのボタンも「てんこ盛り」でしたので…
2014年の大カスタマイズまで…
【2014 Customize】デザイン変更や削除したガジェットの備忘録
1年半…定期的に「削除トリック」を試しながら検証してきました…
結果は…導入予定だった「Feed」ガジェットは動作せずじまいだったので…一旦は…
FeedBunerの最新記事(Recent Posts)ガジェットのクレジット画像が気に入らない
…という記事を書いて「削除トリック」よりも「Feed」ガジェットを選びました…
しかしながら…最新記事が…5件というのが…意外にも
友人から…すこぶる評判が悪く…
「FeedBuner」に戻して「削除トリック」を導入する事にしました…
上記…4個のスクリプトを読み込まないメリットの方が大きそうですしね…
特に「plusone.js」は必要な人だけ読みこめば良いだけで…
そのほうが…健全だと思いますがねぇ…
とは言え…冒頭の過去記事のように…カラム落ちなど
Blogger のテンプレート デザイナーを使っているサイトでの挙動などは…
全くもって…分かりませんので…非推奨とさせていただきます…
必ず…テンプレートをバックアップしてから行って下さい…
「削除トリック」は…
</body> </html>…を…
<!-- </body> --> </body> </html>…に…書き換えるだけです…ではでは～
2 Comments :
View Comments :: Click!!
2 Comments :
passer-by198さん、お久しぶりです_(._.)_
いつも、有用なカスタマイズ方法参考になります。(^^)
javaの非同期化コードも参考にさせて頂きました。
が、
なぜか、SyntaxhighlighterだけChromeでは動作せずでした…。
が、IEユーザが多いので当面現在の非同期化（async属性）にて対処中です。
今回の記事内容も試させて頂きました。
そしたら、
問題なくできたぁ(^O^)
と思っていましたら、
passer-by198さんの言うように、
私のブログなどでは、
画像のlightbox機能が働きませんでした(^_^;)
>Blogger のテンプレート デザイナーを使っているサイトでの挙動などは…
>全くもって…分かりませんので…非推奨とさせていただきます…
↑
とありますように、
passer-by198さんのように詳しくない私みたいな者では、
削除トリックは使えますが、
代わりに、
画像がlightbox表示されないということが起こりました。
できれば、
Syntaxhighlighterのjavaだけでも、
非同期処理にてIEのみではなくChrome系でもうまく表示できるといいのですが…。
誠に勝手で申し訳ないのですが、
googleのPageSpeed Insightsでpasser-by198さんのサイトを確認させて頂いたら…。
なんと、
100点満点！！
passer-by198さんのサイトは、
素晴らしいですね(^^♪
>universe さん
いつも閲覧させていただいてますよ…
「lightbox」系は数多のスクリプトがあって一概には言えませんが…
今回の削除トリックは「</body>」「</html>」部分に関与しているので…過去記事の…
Bloggerの画像ポップアップ機能が失われた件の顛末
で紹介したスクリプトが使えるかも？ですね…
軽量なライブラリ「jQuery」が全盛ですから…
サードパーティのスクリプトは使い過ぎると依存関係が難しいですね…
読み込む順序や「loading」などでも動作しませんしね…
「Syntaxhighlighter」の件は…私的には…
「Syntaxhighlighter」のような重量級のスクリプトを導入してまで…ってな感じの…なんちゃって…知識しかありませんし…
導入しているハイライターも軽量な「google-code-prettify」なので…
ちょっと分かりませんが「IE」は独自解釈が多いので「Chrome」の解釈が正しいと思います…
空白・インデント・エンティティ…などなどで私もよく「Google」先生に叱られます…
「inline-block」「tabindex」「table」などでも…アレレ？…ってな事がしばしば…
なので…今回の大カスタマイズで私は…ほぼ…スクリプトを直書きにしちゃいました…
トップページは記事も表示させていませんし…
カスタマイズ結果の確認の為に広告も表示していませんので…
ソコソコは速いですが…「100点満点！！」…は…大袈裟ですね…
ありがとうございます…
…ってか…
なんの役にもたってないですね…申し訳ありません…σ(^_^;)
Post a Comment :: Click!!
コメントを投稿