この記事について

CDNは便利ですが、CSSにおいては非推奨なようです。

環境

なんでも

登場技術


Tailwind CSS	CSSフレームワーク CSSプロパティを書かずとも、クラス名でstyleを変更・管理することができる
cdn	コンテンツデリバリーネットワーク簡単に言うと、ライブラリなどの静的コンテンツを提供する仕組み

前提：CDNにはメリットが多い

cdnは基本的に便利です。メリットもたくさんあります。

CDNを利用する利点とは？
CDN利用の利点はインターネットプロパティのサイズとニーズによって異なりますが、多くのユーザーにとっての主な利点は、4つのコンポーネントに分類することができます：

Webサイトのロード時間の改善 - （他の最適化の中でも）近くのCDNサーバーを利用してWebサイトの訪問者の近くでコンテンツを配信することにより、訪問者が体験するページのロード時間が短縮されます。訪問者は、読み込みが遅いサイトだと判断すれば、1クリックで簡単に離れてしまう傾向が強いのですが、CDNは直帰率を下げてサイトにとどまる時間を伸ばすことができます。言い換えれば、Webサイトのスピードが速ければ、より多くの訪問者にゆっくりとそのサイトを楽しんでもらうことができるということです。

帯域幅の費用を削減 - Webサイトホスティングにおける帯域幅の消費コストは、Webサイト運営において主要な費用です。キャッシングや他の最適化を通じて、CDNはオリジンサーバーが提供しなければならないデータ量を減らすことができます。このため、Webサイト所有者のホスティングコストを削減できるのです。

コンテンツの可用性と冗長性の向上 - 大量のトラフィックやハードウェアの障害が通常のWebサイト機能を損なうことがあります。分散型という特性のおかげで、CDNはさらに多くのトラフィックに対応でき、その他のオリジンサーバーよりもハードウェア障害に耐え得るのです。

Webサイトセキュリティの向上 - CDNはDDoS軽減やセキュリティ証明書、その他の最適化を提供することで、セキュリティを向上させる可能性があります。

なにより、導入が簡単です。

Tailwindにおいても、CDNなら一行書くだけです。
一般的なCLIからの導入は、複数のステップを必要とします。

CDN	CLI

一行書くだけ	ターミナルコマンド HTML/CSS/Configファイルの編集ビルドプロセスの開始

本題：CSSにCDNは不向き

しかし、CSS（スタイルシート）に関して言えば、CDNを使わないことが最適とされます。

Tailwind CSS

Play CDN は開発目的のみで設計されており、本番環境には最適な選択肢ではありません。

daisyUI

警告

CDNファイルは、未使用のスタイルを削除できず、ファイルサイズが大きくなるため、本番環境にはお勧めしません。

なぜでしょうか？

理由：不必要なCSSクラスが大量に含まれるから

その理由は「不必要なCSSクラスが大量に含まれるから」です。

Tailwindにしろ、daisyUIにしろ、大量のCSSクラスが用意されており、そのすべてを使用するわけではありません。

例えば、daisyUIのStat componentを使用しないこともあるでしょう。

tailwindのwidthも、すべてのクラスを使用することはないと思います。

しかし、CDNは「どのクラスが使われていて」「どのクラスが使われていないか」の判定ができません。

よって、すべてのクラスの情報を送信します。

受診したブラウザは、そのクラスすべてを確認し適用するため、ブラウザのレンダリング速度が低下します。

レンダリング速度はユーザー体験に直結する部分であり、その低下は許容できるデメリットではありません。

これがCSS（スタイルシート）においてCDNを使用すべきでない理由です。

余談：「ファイルを分ける」理由でもある

tailwindでは、CSSファイルを2つに分け、以下のコマンドを使用することが一般的です。

% npx tailwindcss -i ./src/styles.css -o ./views/styles.css --watch

この理由も似た理由です。

CDNのように、Tailwindのすべてのクラスを送信するわけにはいきません。

また、ファイルを分けることでメンテナンス性が上がります。

おわりに

感想、ストック、いいね、大歓迎です！

マサカリも受け付けてます_(´ཀ`」 ∠)_

参考記事