ライセススタッフが書くブログ。

Bootstrapとページスピードについて考えてみました

| Web制作のこと
ブログ-Bootstrapとページスピード

ページスピードが重視されてきている中、スピード改善に関わる案件が増えてきました。
少しでもスピードが上がるようにと調べる毎日です。
今回はBootstrapとページスピードについてまとめました。
WEB制作の際結構頼りにしているCSSフレームワークの【Bootstrap】。
中にはメニュー・ボタンからグリッドシステム、様々なCSS、jQueryパーツ、便利な機能がぎっしりと入っています。
けれど中には使わないパーツもあります。
PageSpeed Insightsでサイトを解析した結果、改善できる項目1つ【使用していない CSS の遅延読み込み】で以下の様にcssの大きさを抑えれば、ページスピードに繋がると表示されてます。

bootstrap.cssの大きさ

 

改善策として

・【所要時間:短】使用するパーツのみ抽出
・【所要時間:長】フルスクラッチでサイトの需要に沿ったcssを作成する

 

使用するパーツのみ抽出

以前Bootstrapを使用してWEBサイトを作成する際は完全版をダウンロードしていたが、ページスピードで解析した結果bootstrapは重いとわかり、また使用していないパーツも読み込まれるのでスピードに影響していました。
けれど、Bootstrapを急に他に変更するのは出来ませんので、どうしても使わないといけない場合はBootstrap公式が提供しているカスタマイズダウンロードというサービスを利用出来ます。

◆ Bootstrapカスタマイズをダウンロードする方法
Bootstrap v3.4.0ではは公式サイトにてカスタマイズが可能になっています。
Bootstrapv3.4.0をダウンロードはこちら
※それ以前のバージョン(v3.3.0以前)にはカスタマイズが出来ません。

 

❶ Toggle allをクリックし、選択を全部クリアします。
そして、必要なパーツのみ選択します、例の場合は ❷ Grid systemのみを選択します。

❸ グリッドシステム以外は必要ないですので、
「jQuery plugins」と ❹「Less variables」などもToggle allでチェックを外します。

最後にDownloadをクリックしますと軽量化されたBootstrapがダウンロードされます。

Bootstrapカスタマイズダウンロード方法

Bootstrapカスタマイズをダウンロード

 

◆ Bootstrap 4の場合
Bootstrap 4ではカスタマイズ出来ませんが、その代わりにダウンロードしたzipを解凍しますと、以下の画像通りBootstrap3にはなかったファイルが追加されています。

Bootstrap4ダウンロードはこちらです

Bootstrap4ダウンロードを解凍したファイル

グリッドシステムの部分はオレンジ色でハイライトしているbootstrap.grid.cssを使用すればグリッドシステムの部分のみの機能を使うことが出来ます。
小分けにされている様に見えますが、Bootstrap4の機能全部使用する場合はbootstrap.cssを使えれば可能になります。

 

フルスクラッチでサイトの需要に沿ったcssを作成

こちらはすでにBootstrapを使用しているサイトの場合でしたら大工事になってしまいます、時間に余裕がある場合またはWEB制作する前から対策を組む場合に適してます。

Bootstrapで必要なcssのみ書き出しを行なったとしても、どうしても使わないパーツが入ってしまいます。
グリッドシステムのみであっても、col-1からcol-lg-12全ては流石に使わないと思います(例外もありますが…
そのな便利にグリットシステムから離れるのは辛いのですが、
【Flexbox】で簡単にグリッドシステムの様なレイアウトを組める方法は沢山ありますし、サイトにぴったりのCSSを作るのがベストですね。

 

まとめ

今回色々調べて、Bootstrapにあまり依存しすぎるのはダメだと感じました。勉強のためにもフルスクラッチでサイトを作れるよう頑張ろうと思いました。

また、ページの動作を重くするのはBootstrap.cssのみではなく、Wordpressに追加したプラグインも悪さしてます。プラグインとCSSを比べますと全然CSSの方がましです。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る