Googleで検索すると、Webサイトの掲載結果を改善するための便利なツールが数多く見つかります。 また、イメージの最適化から独自のCDNの設定まで、多くのことができます。
しかし、デザイナーの中にはあなたのコードを最適化することについて考える者はほとんどいません。
それは、HTTPリクエストの総量を減らしたり、ファイルを縮小したり、スピードに合わせて最適化されたカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしかったですが、最も重いフレームワークの1つです。
重いBootstrapの代わりに試すことができる最小のWebフレームワークを紹介するこのリストをご参照ください。 これらがどれほど素晴らしいか、ページのサイズをどれくらい軽くするか、驚くなかれ…。
1.Topcoat
Topcoatを使用すると、スピードに合わせて最適化されたフレームワークが得られます。このフレームワークを構築した開発者は、他のフレームワークに対してベンチマークを実行しながら、すべてのモジュールをテストします。
この無料のフレームワークはどんなウェブサイトにも最適ですし、カスタマイズするのも簡単です。
フレームワーク全体がモバイル対応であり、CSSはBEMネーミングを使用しているため、独自のスタイルシートに簡単に編集したりブレンドしたりできます。
2.Miligram
もう一つの最小限のフロントエンドフレームワークは、現在v1.3にあるMilligramです。このような最小限のUIライブラリにしてはかなり詳細で、それには驚くほど大きなフォローがあります。
Yarn、Bower、npmなどの主要なパッケージマネージャを使用してインストールできます。これはNormalizeの上で動作し、Milligram CSSライブラリ全体の縮小バージョンでパッケージ化されています。
Bootstrapのようなコンポーネントや動的な機能はありません。したがって、より高度な機能を必要とせずにすばやくレイアウトを作成したい開発者に向けたものです。
3.Pure CSS
Pure CSSの最も良い点は、フレームワーク全体がどのようにモジュラースタイルになるかです。テーブルデザイン、カスタムメニュー、ボタン、フォーム、またはすべての組み合わせを含むようにスタイルシートをカスタマイズできます。
または、グリッドのようなライブラリのサンプルをほんの少しだけダウンロードしたい場合は、それを個別にダウンロードすることができます。実際、Pureのグリッドセクションの合計は約0.8KBで、ブートストラップや財団よりはるかに小さいです。
しかし、Pureはページコンポーネントをサポートしているので、これらの小さなエクストラはすべて追加できます。
Bootstrapよりも小さく測定されるので、実行可能な選択肢です。
4.Mincss
Min.cssはBootstrapの代替品として宣伝されています。実際、それは、最小化されたときに合計990バイト（1KB未満）にすぎない、最も小さなフロントエンドフレームワークです。
これは、すべての主要なブラウザで動作し、IE 6+などの古いレガシーブラウザをサポートします。
あなたが真に速いロードタイムを望むなら、Mincssを見てください。
5.Petal
Petalは、小さなUIライブラリで、ユニークなデザインのかなり小さなフロントエンドフレームワークです。これは、いくつかのコンポーネントをサポートしていますが、主にPetalは、そこにあるすべてのSassライブラリの代わりに、より少ないCSSの選択肢となることを意図しています。
この記事を書いている時点で、v0.8.3の現在の安定版リリースではまだアクティブな開発が行われています。 Shakrのチームはこのフレームワークに数時間をかけています。すぐに消えることはまずありません。
すべてのコンポーネントはオプションですので、必要のないものを削除してサイトを簡素化できます。
すべてのコンポーネント、グリッド、ボタン、コードスニペットのリストは、Petalのドキュメントを参照してください。
6.Picnic
Picnic CSSは軽量で美しいフロントエンドライブラリです。
色は、フラットなデザインを使用して幅広い美的感覚を作り出すためのBootstrapのシンプルなバージョンのような感じです。 Picnicのフレームワークは、個人的なポートフォリオ、新しいブログ、電子商取引の店舗など、ほとんどのWebサイトで実行できます。
examplesページを見てみると、Picnicのデフォルトの要素スタイルの一覧があります。
Picnic CSを使い始めるための手順を説明する、きれいなドキュメントページもあります
7.Kube
このような素晴らしいフレームワークなので、私はKubeに本当に感心していますが、このリストで一番小さいわけではありません。
ライブラリ全体は約30KB（すべてのJSコンポーネントを含む）にコンパイルされます。Bootstrapよりもまだ約10倍小さいのです。
しかし、これはMincssのようなものと決して競合することはありません。それがあなたが探しているものなら、このライブラリーは素晴らしいです！
コードスニペットについては、オンラインドキュメントをご覧ください。 Kubeは本物のプロフェッショナルなフレームワークのように感じていますし、プロダクションサイトで実行できることは間違いありません。
8.Chota
あなたがKubeより10倍小さいものを望むなら、Chota CSSフレームワークを見てください。
これは、合計3KBを削減し、CSS専用のフレームワークです。これは、ドロップダウン、タブ、またはその他の動的ウィジェットについて心配していないことを意味します。
Chotaは、プリプロセッサで動作しない数少ないフレームワークの1つです。
Chotaコードをプラグ＆プレイするだけで、どんなレイアウトでも動作させることができます。
9.Furtive
「マイクロフレームワーク」として、Furtiveは圧縮時に約2.4KBを測定します。
それはあなたのページのためのクラスと構造の強力なリストと超小型ファイルサイズを組み合わせるいくつかのモバイル初のフレームワークの一つです。
これは最新のブラウザ技術を推進する最先端のフレームワークの1つです。これは、フレックスボックスやSVGのようなもので独占的に動作するので、総コードを減らして総ロード時間を短縮することができます。
10.Siimple
Siimpleはフラットなデザインのトレンドを踏襲し、非常にシンプルなコードベースで構築しています。
このフレームワークは、デザインと開発の両方にクリーンなアプローチで新しいレベルへのミニマリズムを取ります。色、タイポグラフィー、グリッド、彼らはすべて、まだユニークなミニマルなアプローチを続けています。超クリーンなコードベースでも同様です。
Siimpleのドキュメントを見て、あなたの考えを見てください。これは、ラピッドプロトタイピングや最初から始めずにカスタムレイアウトを構築するための本当にクールなフレームワークです。
▼こちらの記事もおすすめです！
※本記事は10 Smallest & Fastest Frontend Web Dev Frameworksを翻訳・再構成したものです。
おすすめ新着記事
おすすめタグ