Railsでページスピードを少しでも早く軽くするBootstrapカスタマイズ

Railsでページスピードを少しでも早く軽くするBootstrapカスタマイズ

Bootstrapはある程度のデザインや機能を簡単に実装できるのですが、個人レベルで運営するサイトでは、充分すぎて要らないものも多いです。
要らないものは使わなければ良いのですが、SEOの観点では、CSSやJavascriptは軽量で画面表示速度が速い方が有利です。
RubyやPHPでのサイト作成時にデフォルト設定のままだと全てのライブラリを読み込むことになり、ユーザビリティの低下につながります。
ここでは、Railsで行なったBootstrapのカスタマイズの備忘録を残しておきます。

bootstrapモジュールの読み込み削除(CSS)

application.scssから以下の記述をコメントアウトします。

// @import "bootstrap-sprockets";
// @import "bootstrap-generators";
// @import "bootstrap-variables";

以下の行を追加

@import "bootstrap_customize";

bootstrapモジュールを個別に読み込む(CSS)

bootstrapモジュール用のベースを作成する

bootstrap_customize.scssという名前で、bootstrapモジュール管理用のscssを作成します。

bootstrapモジュールの個別読み込み

bootstrap_customize.scssに使用するbootstrapモジュールを個別に記載します。

全体はこんな感じ(例)

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

変更例

これを、以下のようにカスタマイズしています。

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
// @import "bootstrap/print";
// @import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
// @import "bootstrap/code";
@import "bootstrap/grid";
// @import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
// @import "bootstrap/dropdowns";
// @import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
// @import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
// @import "bootstrap/pager";
// @import "bootstrap/labels";
@import "bootstrap/badges";
// @import "bootstrap/jumbotron";
// @import "bootstrap/thumbnails";
// @import "bootstrap/alerts";
// @import "bootstrap/progress-bars";
// @import "bootstrap/media";
// @import "bootstrap/list-group";
// @import "bootstrap/panels";
// @import "bootstrap/responsive-embed";
// @import "bootstrap/wells";
// @import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
// @import "bootstrap/tooltip";
// @import "bootstrap/popovers";
// @import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
// @import "bootstrap/responsive-utilities";

bootstrapモジュールの読み込み削除(Javascript)

application.scssから以下の記述をコメントアウトします。

//= require bootstrap-sprockets

以下の行を追加

//= require bootstrap-sprockets_customize

bootstrapモジュールを個別に読み込む(Javascript)

bootstrapモジュール用のベースを作成する

require bootstrap-sprockets_customize.jsという名前で、bootstrapモジュール管理用のscssを作成します。

bootstrapモジュールの個別読み込み

bootstrap-sprockets_customize.jsに使用するbootstrapモジュールを個別に記載します。

全体はこんな感じ(例)

//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover

変更例

これを、以下のようにカスタマイズしています。

//= require bootstrap/button
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab

これでCSS、Javascriptのボリュームを半分にすることも可能です。

技術力メモカテゴリの最新記事