Googleで検索すると、Webサイトのパフォーマンス改善のための便利なツールが数多く見つかります。 サイトの画像最適化から独自のCDN設定にいたるまで、さまざまです。
しかし、デザイナーの中でコード最適化について考える人はほとんどいません。
コード最適化とは、総HTTPリクエスト数を減らしたり、ファイルを軽量化したり、表示スピードアップのために最適なカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしいデザインですが、残念ながら最も重いフレームワークの１つです。
そこで今回の記事では、重いBootstrapの代わりに軽いWebフレームワークを厳選しリスト化しました。リストにあるフレームワークがいかに優秀で、ページサイズを軽くしてくれるか驚くことでしょう。
１. Topcoat
Topcoatはスピードのために最適化されたフレームワークです。 このフレームワークの開発者は、他のフレームワークと比較するためにベンチマークを設定・検証しつつ、すべてのモジュールをテストしてます。
この無料のフレームワークはどんなスピードテストもパスするでしょう。どんなWebサイトで使用するにも素晴らしく、カスタマイズも簡単です。
言うまでもなくフレームワーク全体がモバイルレスポンシブであり、このCSSはBEMネーミングを使用しているため、簡単に編集して独自のスタイルシートに落とし込むことができます。
２. Milligram
もう１つの最もミニマルなフロントエンドフレームワークは、現在バージョンv1.3のMilligramです。 必要最低限のUIライブラリにしてはかなり細かい作りになっており、非常に人気のあるフレームワークです。
Yarn、Bower、npmなどの主要なパッケージマネージャーのいずれかを使用してMilligramをインストールできます。 MilligramはNormalize上で動作し、CSSライブラリ全体の軽量版もパッケージされています。
Milligramには、Bootstrapのようなコンポーネントやダイナミックな機能はありません。 高度な機能は不要で、素早くレイアウトを作成したい開発者に向けたものになります。
３. Pure CSS
Pure CSSの最も良い点は、フレームワーク全体がモジュールスタイルである点です。 テーブルデザイン、カスタムメニュー、ボタン、フォーム、様々な組み合わせでスタイルシートをカスタマイズできます。
グリッドのような容量の小さなライブラリサンプルを使用したい場合も、個別にダウンロードすることができます。 Pureのグリッドセクションサイズの合計は約0.8KBで、BootstrapやFoundationに比べてはるかに軽量です。
Pureはページコンポーネントもサポートしているので、ちょっとした機能も追加することができます。
機能追加した場合でもBootstrapよりも容量を取らない、実現可能な代替フレームワークです。
４. Mincss
私はこの記事のためのライブラリを探すときに、まずGitHubのMin CSSライブラリに立ち寄りました。正直なところ、Min CSSはこれまで使ったことがありませんでしたが、コードを調べ始めてすぐにその素晴らしさがわかりました。
Min.cssはBootstrapの軽量版代替品として宣伝されています。 実際、コードを圧縮したときに合計990バイト（1KB未満）にしかならない、最も軽量なフロントエンドフレームワークであると力説しています。
Mincssは、主要なブラウザすべてで動作可能で、IE 6+などの古いレガシーブラウザもサポートしてます。
短いロード時間を望むならば、Mincssを試してみるべきです。
５. Petal
PetalはユニークなUIライブラリを備えた軽量フロントエンドフレームワークです。少量のコンポーネントを備えていますが、Petalはほぼ、LESS CSSにあるSassライブラリの代替版と言えます。
Petalはこの記事を書いている現時点ではv0.8.3であり、定期的に開発・リリースされています。Shaakrチームはこのフレームワークにかなり時間を割いており、近い将来に消え去ってしまうようなものではありません。
すべてのコンポーネントが選択式で、不要なものをすべて取り除き、サイトをシンプルにすることが可能です。
Petal documentationですべてのコンポーネント、グリッド、ボタン、コードスニペットをチェックし、ダウンロードしましょう。
６. Picnic
Picnic CSSはそのサイトでも主張しているように、軽量で美しいフロントエンドライブラリです。
Picnicのフレームワークは広々とした手作り感のあるフラットデザインのBootstrapをもっとシンプルにしたような色使いで、個人のポートフォリオページ、ブログ、ECサイトなど、どんなWebサイトにもマッチします。
サンプルページを見ればPicnicのデフォルト要素やスタイルを確認できます。
Picnic CSSを始めるための手順もドキュメンテーションのページで確認することができます。
７. Kube
Kubeはとても優れたフレームワークで、個人的に非常に感動しました。しかしこのリストにある他のフレームワークと比べて軽量なわけではありません。
そうは言っても充分に軽量で、ライブラリ全体は約30KB（JSコンポーネントを含めて）にまでコンパイル可能です。Bootstrapより10倍以上も軽く、かなりリーズナブルな投資といえます。
しかしMincssなどと比べるとKubeはかなり重く、たくさんの機能とともにパッケージされています。多機能のものを探しているならばこのライブラリはピッタリです。
オンラインドキュメントでサンプルとコードスニペットをチェックしてみてください。Kubeはまるでプロフェッショナルなフレームワークのようで、プロダクションサイトの運営などに最適です。
８. Chota
Kubeの10倍以上軽いフレームワークを探しているなら、Chota CSSフレームワークをチェックしてみてください。
これは３KBまでミニファイされたCSSオンリーのフレームワークです。つまりドロップダウン、タブ、その他ダイナミックウィジェットを気にする必要はありません。
Chotaはプリプロセッサを走らせない数少ないフレームワークのうちの１つです。
LessもSassもありません。どんなレイアウトも、単純にChotaのコードをプラグインして試すだけです。
９. Furtive
「マイクロフレームワーク」と自称するとおり、Furtiveは圧縮後に約2.4KBしかありません。
モバイルファーストなフレームワークの数少ないうちの１つで、CSSのクラスと構造の強固なリストを超軽量なファイルサイズにまとめています。
同時にもっとも最先端のフレームワークのひとつであり、現代のブラウザ技術を前面に出しています。特にflexboxレイアウトとSVGファイルのようなものとともに動作し、コードのトータルサイズとロード時間を削減します。
10. Siimple
Siimpleはフラットデザインのコンセプトに則って、そのデザインもシンプルなコードで成り立っています。
このフレームワークはデザインでも開発面でもクリーンなアプローチをとっており、ミニマリズムのコンセプトを新しいレベルにまで引き上げています。
このSiimple ドキュメントをチェックしてみてください。ゼロから取りかかる煩わしさなしに、迅速なプロトタイピングやカスタムレイアウトを始められるクールなフレームワークです。
ここで紹介したフレームワークは、これからサイト構築を始める人にとって最適なものばかりです。どれを使っても失敗しないうえに、Bootstrapよりもはるかに速いフレームワークになっています。
