ねほり.com

何もないから何かみつかる

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を見つけた。

bootstrap.light

なかなかの秀作で、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を用意する

jQueryなしのTwitter Bootstrap

凄く素晴らしい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

result

2秒ルールをクリアした。

が、体感的にはメチャクチャ遅い。

結局、時間を計測の結果を調査する限り、

遅いのはGoogle Adsenseの非同期表示

という結論でした。

広告の表示が遅い。最近は動画が出てくることもあって遅すぎる。

表示される前に、ユーザはサイトの文章を読み進めてしまってる。

何か対策は出来ないかなぁ・・・。

 - 2015年(社会人11年), Web技術, 副業, テクノロジー

  関連記事

「ネットランナー」のトレーディングカード「ねとらん者」を大人買い(1/2)

もしも 童話世界に 2ch を作ったら ‥‥?  ■掲示板に戻る■ 全 …

Kaggle の Titanic Prediction Competition でクラス分類(Keras Functional API編)

データサイエンティストの転職サイトを見ると年収 600万 ~ 1,200万円ぐら …

ドラえもんVRで垣間見た新しい視覚体験

バンダイナムコエンターテインメントが製作したVRアトラクション『ドラえもんVR「 …

尾崎豊が30歳まで生きてたら・・・・

会社に寝泊まり&土日出社で担当業務の認証試験に合格するために実装修正してました。 …

スターリング、オーパスワン@ナパ (Sterling Vineyards、Opus One)

ワインの産地といえば「フランス」「イタリア」「スペイン」「ドイツ」などヨーロッパ …

女性ファッション雑誌系統図のまとめ作成

2007年05月20日(土) 要は暇人です・・。誰か遊んで 一つぶの砂に 一つぶ …

Amazonで使えるアドオン3選(最安値判定、図書館検索、不正レビュー除外)

アドオンは、アプリケーション等に追加機能として組み込むプログラムのことです。「ア …

ペット家電は日本メーカも取り組むべき

掃除が面倒なので「ルンバ780」を購入しました。 思っていたよりルンバは賢くない …

Yahoo!ニュースのコメント欄の一覧化

2010年12月12日(日) Yahoo!ニュースのコメント欄の一覧化 Pyth …

「ネットランナー」のトレーディングカード「ねとらん者」を大人買い(2/2)

偽MADニュース: 高校生、無断コピーで逮捕 京都市右京区に住む高校生が遺伝子の …