bootstrapの軽量化Part2 不要なCSS定義を削除する
2017/04/27
前回までで軽量化に関しては終了・・・。と思っていたが、やっぱり重たい。
- bootstrap.min.css ・・・・ 116kb
- bootswatch.js ・・・・・・ 1kb
- bootstrap.min.js ・・・・・ 68kb
- zepto.js ・・・・・・・・・9.6kb (jquery-1.10.2.min.jsは32.4kb)
レイアウト表示に、これだけの無駄なCSS/JSを呼んでる。
CSSの知識あるのに、bootwatch/bootstrapを両方使う意味ないよね・・・。
そして、jqueryの代わりにzeptoを使ったら、navbarが動作しなくなった・・・。
bootstrap以外のCSSを検討する
通常サイトに不要な機能をそぎ落とした軽量CSSフレームワークと噂の高い「Papier」を使ってみた。
「Responsive Grid System」には3つの大きな特徴があるそうだ。
- 100行以下の軽量サイズ
- モバイルファースト志向の設計
- 12~24のグリッドに対応
グリッド設計は評価するけど、CSSを見る限りゴミでしょ・・・。自分で作ってるCSSの方が優れてる。
レスポンシブデザインも2通りで、一般のCSSに求める機能が何もない。。
Bootstrap.Light.CSS
bootstrapの機能を100行程度にしたCSSを見つけた。
なかなかの秀作で、customizeして ある程度 自分がBootstrapで使っていたデザインに近づいた。
が、そうなってくると
- 複数のレスポンシブデザイン
- 素敵なnavbar
というbootstrapの利点が惜しくなり、途中で断念。
bootstrap.css の不要な定義を削除する
結局、bootstrap.css から不要な定義を削除することにした。
- glyphicon
- tooltip
- carousel
- col-xs
- col-sm
- modal
- hidden
- visible
- panel
機械的に上記を削除すれば、60%~70%程度の軽量化に成功した。
削除前「116kb」から削除後「80kb」となり、3割程度だけど軽量化に繋がった。
一行ずつ見て削除すればサイズも半分にはなると思うけど、version updateに追従が面倒なので、まぁ良いや。
bootstrapのためのJSを用意する
凄く素晴らしいJSを見つけてしまった。日本人の方です感謝。
ここからnavbarに関する部分だけ拝借。
zepto.jsから必要箇所だけを利用する
その他
Facebookのプラグインを読み込んでいたが中止した。これは結構大きな差ができた。
結果
再度速度を測定した結果
【修正前】
(4.20+3.93+2.42+3.78+3.16)/5 = 3.498
【修正後】
(2.35+1.35+2.42+1.50+2.25)/5 = 1.974
2秒ルールをクリアした。
が、体感的にはメチャクチャ遅い。
結局、時間を計測の結果を調査する限り、
遅いのはGoogle Adsenseの非同期表示
という結論でした。
広告の表示が遅い。最近は動画が出てくることもあって遅すぎる。
表示される前に、ユーザはサイトの文章を読み進めてしまってる。
何か対策は出来ないかなぁ・・・。
関連記事
-
-
Amazonアフィリエイトの結果をまとめました
2011年11月30日(水) Amazonアフィリエイトの結果をまとめました 今 …
-
-
サラリーマンのための「会社の外」で稼ぐ術
インドネシア人看護士「日本人は時間を守りません。遅刻に対しては大変厳しいのに、仕 …
-
-
知人がダイヤルQ2に繋ぎっぱなしで3万円支払い
眠たい… 大学が春休みになってからテレホの時間になったら眠たいぞ、畜 …
-
-
twitterの蔑称「バカ発見器」を活用する
2011年08月16日(火) twitterの蔑称「バカ発見器」 「サイトを10 …
-
-
推薦論文の査読結果&キッズGooでWebサイトが表示されるために
推薦論文 「推薦論文」の査読結果が返ってきた・・・・ & …
-
-
ベジタリアン料理(Vegetarian House/Veggie Grill)
日本でベジタリアンが和風料理が食べたいというので、創作寿司(野菜など魚介類を使わ …
-
-
NFL リーバイススタジアムで49ers vs ベンガルズを観戦する
「アメリカン・フットボール」は、アメリカでは不動の一番人気なスポーツです。 この …
-
-
NW-X1060のフォルダ再生が公式対応された
2010年02月28日(日) NW-X1060フォルダ再生対応 昨年「MP3のタ …
-
-
VBScriptのスクリプトをアイコン変更してEXEとして公開
2010年08月18日(火) Windowsフリーソフト公開 EXEファイルを初 …
-
-
ドラえもんVRで垣間見た新しい視覚体験
バンダイナムコエンターテインメントが製作したVRアトラクション『ドラえもんVR「 …