2023/05/20サイトデザインを簡単に実施するにはBootstrapは便利なんだけど公式サイトでダウンロードしたものや、CDNで設定したものだと余計な機能も含むためかなり重量級となっている。これがかなりサイトの速度に影響を出してしまうため軽量化するのがオススメだ。そこでソースファイルから余計なものを除外する最適化(Optimize)を実施してみたのでそのやり方と効果を紹介しようと思う。この記事ではBootstrapのSassコンパイル方法について紹介している。最後にどれくらい軽量化できたか(結論)最初にどれくらい軽量化できたか結論を紹介する。Bootstrap.cssについて比較した。軽量化前のサイズは下記画像の通りで194KBだった。軽量化後のサイズは下記の通りと78kbと約6割の軽量化に成功している。Sassコンパイル環境の準備まず、Sassのコンパイルには下記が必要となるのでまずは環境準備から説明する。Node.js:Sassコンパイラとその他の依存パッケージのインストールに利用Sass:Node.jsパッケージとして提供され、SCSSファイルをCSSにコンパイルするのに使用Node.jsインストールNode.jsは下記サイトからダウンロードする。Node.jsダウンロードリンクインストーラーでインストールすればOKだ。SassコンパイラのセットアップSassコンパイラについては下記のコマンドで必要なパッケージをセットアップできる。sassこのコマンドだけで完了だが私はエラーとなった。-13(以下略)どうやら権限が無いためのエラーのようだがsuduでもうまく動かなかったのでnpmのデフォルトディレクトリを変更する対応を実施した。この方法では、npmのグローバルパッケージのデフォルトのインストールを現在のユーザーがアクセスできる場所に変更する。npmのデフォルトディレクトリを変更する手順は以下の通り。新しいディレクトリを作成する。npmの設定を更新して、新しく作成したディレクトリをグローバルインストールのデフォルトディレクトリとして指定する。環境変数PATHを更新して、新しく作成したディレクトリにパスを通す。以下の記述を.zshrcに追記すればよい。ちなみに私の環境は.zshrcだがMacOSのバージョンによっては.bashrcの場合もあるので自分の環境を調べて適宜対応して欲しい。シェルが変更を反映するように、ターミナルを再起動して以下のコマンドを実行する。最後に、再度Sassをインストールする。Sheets)は簡単に言うとCSSの拡張言語で大規模なスタイルシートを効率的に管理するする言語で、コンパイルすることでCSSを作成することができる。BootstrapはSassで作成されているため手順としては以下の3ステップとなる。BootstrapソースダウンロードBootstrapのSassの不要機能のインポート設定解除SassのコンパイルによるCSS生成BootstrapソースダウンロードBootstrapは下記のリンクからダウンロードする。source」ボタンからダウンロードできる。ダウンロードして回答したフォルダを任意のフォルダに配置する。BootstrapのSass不要機能インポート設定解除Sassコンパイルの際にコンポーネントのインポートを設定している以下ファイルを編集する。〜/bootstrap-5.0.2/scss/bootstrap.scssコンパイルする際に不要となる機能を除外するよう設定するが、私のサイトの例だと以下のコンポーネントが必要だったのでこの例を紹介する。・navbarコンポーネント・utilites・gridコンポーネント・layoutコンポーネント・paginationコンポーネント・imagesコンポーネントこの場合は以下意外はすべてコメントアウトすればよい。背景色やテキスト色など)を設定したりするためにも必要となる。SassのコンパイルによるCSS生成コンパイルは下記コマンドで実施すればscssフォルダにcssファイルが生成される。custom-bootstrap.min.cssオプションに指定した「–style=compressed」はCSSを圧縮して出力するオプションだ。データ量をできる限り圧縮したい場合はつけておくことをオススメする。このコマンドで「custom-bootstrap.min.css」ができれば完成だ。使い方は通常のCSSと同様で以下のように使用する。href="path/to/your/custom-bootstrap.min.css">この行をHTMLファイルの<head>セクション内に配置する。path/to/your/はcustom-bootstrap.min.cssファイルが保存されている実際のパスに置き換えればよい。ちなみに、custom-bootstrap.min.css.mapというファイルが一緒に作られるがこちらは使用しない。このファイルはデバッグ時に利用するもののようだ。最後にBootstrapの最適化(Optimize)手順は以上となる。出力されたファイルはかなり軽量化されているはずだ。やるやつはやるし、やらないやつはやらない。スマホとPC対応のナビゲーションメニューハンバーガーメニュー不要論:ユーザーエンゲージメント向上のためのウェブ...SEOに効果大!WordPressサイトの表示速度改善テクニックと実践...Bootstrapを使ってWordPressページネーションを自作する...SEOを強化するWordPressの目次の簡単自作法:プラグインは不要...WordPressでパンくずリストを自作!コピペでOKWordPressオリジナルテーマへのトップページへ戻るボタン追加(j...NORIAKI昭和生まれ。大学は情報工学を専攻、都内IT関係企業に数年勤務→転職しメーカ社内SEになる。