CSS は「スタイル」に重点を置いています。HTML は Web ドキュメントの構造化、段落や見出しの定義、ビデオ、画像、その他のメディアの埋め込みの有効化に使用されますが、CSS はドキュメントのスタイルを指定します。色、フォント、ページ レイアウトなど、すべて CSS で決定されます。
ウェブサイトの読み込みを高速化する方法はたくさんあります。これにより、ウェブサイトの効率が向上し、作業が簡単になります。CSS (カスケーディング スタイル シート) は、HTML などのマークアップ言語で記述されたドキュメントの表示方法を記述するスタイル シート言語です。
この記事で
- 分析ツールの使用
- 大きな勝利を築く
- CSS 効果による画像の置き換え
- 縮小と連結
- 最新のレイアウトテクニック
- CSSコードを最小限に抑える
- カスケードにしがみつく
- Shopify CSS の最小化: 知っておくべきこと
I. 分析ツールの使用
パフォーマンスの問題は、どこに障害があるかがわからないと解決できません。まずはブラウザ開発ツールから始めるのが最適です。
メニューから、F12、Ctrl + Shift + または MacOS の Safari の場合は Cmd + Alt + I を押すか起動します。すべてのブラウザは同じ機能を提供しており、パフォーマンスが悪いページではツールが徐々に開きます。
最も役立つ表は次のとおりです。
1. ネットワーク タブには、ダウンロード時にアセットのウォーターフォール グラフが表示されます。 最良の結果を得るにはキャッシュを無効にし、ネットワーク速度を低下させる調整を考慮してください。ダウンロードが遅いファイルを見つけるか、他のファイルをブロックします。通常、JavaScript および CSS ファイルが解析およびダウンロードされている間、ブラウザーはレンダリングをブロックします。
2.パフォーマンス タブでは、ブラウザのプロセスを分析します。記録を開始し、ページの再読み込みなどのアクティビティを実行し、記録を停止して結果を確認します。次の項目を見つけます。
- ブラウザにページ要素のサイズと位置を再計算するよう圧力をかける過度のリフローアクション/レイアウト。
- ページのペイントされた部分を画面上で表示するために組み合わせる合成アクション。
3. Chrome ベースのブラウザには、Google の Lighthouse ツールで実行される監査タブが用意されています。これは、プログレッシブ ウェブ アプリの開発者によってよく使用されますが、CSS パフォーマンスの提案も行います。
II. 大きな勝利を築く
CSS がパフォーマンスの問題を引き起こす可能性は低いですが、数分以内に最適化できる負荷の高いアセットを読み込む可能性があります。例:
- コンテンツ配信ネットワーク (CDN) との HTTP 接続を同時に強化し、世界中の他の場所へのファイルの複製も行います。
- サーバーのアクティベーション時に GZIP および HTTP/2 圧縮を実行します。
- 使用されていないファイルを削除します。
通常、ページが重くなる最大の原因は画像ですが、それでも多くのサイトが効果的な最適化に失敗しています。
- 適切なファイル形式を使用していることを確認してください。写真、ベクター画像用の SVG、SVC などに最適なのは通常 PG です。試してみると最適なタイプが見つかるかもしれません。
- ビットマップ画像のサイズ変更。エントリーレベルのスマート デバイスは、最大の高解像度画面で完全に表示できる数メガピクセルの画像を取り込みます。
- 画像ツールを使用して、メタデータの削除と圧縮率の向上によりファイル サイズを最小限に抑えます。
III. CSS 効果による画像の置き換え
影、境界線、グラデーション、丸いエッジ、さまざまな幾何学的形状に背景画像を使用する必要は必ずしもありません。
CSS コードを使用して画像を定義すると、帯域幅の使用が大幅に削減され、後でアニメーション化したり変更したりしやすくなります。
01. 不要なフォントを削除する
Google Fonts などのサービスを使用すると、任意のページにカスタム フォントを簡単に追加できます。ただし、1 行または 2 行のコードで、数百キロバイトのフォント データを取得できます。推奨事項は次のとおりです。
- 必要なフォントのみを使用します。
- 必要なスタイルと太さのみを読み込みます (例: 斜体なしの Roman 400)。
- ファイルサイズを小さくするために、補間によって複数のスタイルと太さを定義する可変フォントを考慮してください。
- OS フォントを検討してください。カスタム Web フォントはほとんどの Web サイトで使用されているため、標準の OS フォントはこれまで以上に一般的ではありません。
02. @Importの使用を控える
@import ルールを使用すると、CSS ファイルを別のファイルに含めることができます。例:
/* メイン.css */
@import url ( "base.css" );
@import url ( "layout.css" );
@import url ( "carousel.css" );
これは、小さいフォントやコンポーネントを読み込むのに合理的な方法のように思えますが、実際はそうではありません。@input ルールをネストして、ブラウザがすべてのファイルを順番に解析して読み込むことができるようにすることができます。
HTML 内の多数の <link> タグは並列 CSS ファイルに読み込まれるため、特に HTTP/2 を使用する場合は大幅に効率が上がります。
< link rel ="スタイルシート" href =" base.css ">
< link rel ="スタイルシート" href =" layout.css ">
< link rel ="スタイルシート" href =" carousel.css ">
IV. 縮小と連結
多くのビルド ツールでは、不要な空白、文字、コメントを削除して、すべての部分を 1 つの大きな CSS ファイルに結合できます。HTTP/2 では、連結はそれほど重要ではありません。定期的に変更される小さな CSS アセットがある場合は、ファイルを別々にすると便利な場合があります。ただし、多くの Web サイトでは、ブラウザーによってすぐにキャッシュされる単一のファイルを送信する方が効果的です。
GZIP を有効にしても、縮小によって大きなメリットが得られるわけではありません。とはいえ、実際のデメリットはありません。最終的には、宣言内のプロパティを一貫して順序付けるビルド プロセスを検討できます。ファイル全体でよく使用される文字列の場合、GZIP によって圧縮を最大化できます。
V. 最新のレイアウトテクニック
長年、ページのレイアウトには CSS フロートの使用が必須でした。これはハック手法であり、レイアウトが機能するようにパディング/マージンを微調整する必要があります。それでも、メディア クエリを追加しない限り、フラットでは小さいサイズの画面が壊れてしまいます。
モダンオプション:
- 各ブロックの幅に基づいて次の行に折り返すことができる 1 次元レイアウト用の CSS Flexbox。画像ギャラリー、メニュー、カードなどには Flexbox が最適です。
- 明示的な列と行を持つ 2 次元レイアウト用の CSS グリッド。ページ レイアウトの場合、グリッドは理想的なツールです。
どちらも使用するコードが少なく、開発が簡単で、レンダリングが高速で、あらゆるサイズの画面に適応します。
VI. CSSコードを最小限に抑える
最も高速で信頼性の高いコードは、自分で書く必要のないコードです。スタイルシートが小さければ小さいほど、解析とダウンロードが速くなります。すべての開発者は善意から始めることを覚えておいてください。
ただし、機能の数が増えるにつれて、CSS はやがて汚れてしまう可能性があります。不要なコールド コードを保持しておくことは、それを削除して何かを壊すリスクを負うよりも簡単です。
以下の推奨事項を検討してください。
- CSS を明確な責任を持つ小さなファイルに整理します。widgets/_carousel.css で CSS が明確に定義されていると、カルーセル ウィジェットの削除が簡単になります。
- 大規模な CSS フレームワークには注意してください。スタイルの大部分が使用される可能性は低いため、必要な場合にのみモジュールを追加してください。
- カスケードオーバーライドには !important を使用しないでください。
- HTML インライン スタイルは避けてください。
- 個別のコンポーネントの開発に役立つ BEM などのテクノロジに名前を付けることを検討してください。
- 深くネストされたプリプロセッサ/Sass 宣言は避けてください。展開すると予想外に巨大になる可能性があります。
- UnCSS のようなツールは、HTML を解析することで冗長なコードを排除するのに役立ちます。ただし、JS の相互作用によって発生する CSS の状態には注意してください。
VII. カスケードにしがみつく
CSS-in-JS の発展により、開発者は CSS グローバル名前空間を回避できるようになりました。ランダムにクラス名がビルド時に作成されるのが一般的で、競合するコンポーネントは不可能になります。
各プロジェクトで CSS カスケードに逆らって作業するのではなく、CSS カスケードの利点を理解する価値があります。たとえば、各要素に普遍的に適用されるデフォルトの色、フォント、サイズ、フォーム フィールド、テーブルを 1 か所で設定できます。
ストリームラインセレクター
最も複雑な CSS セレクターでも、解析には数ミリ秒かかる場合があります。ただし、複雑さを軽減すると、ファイルのサイズが小さくなり、解析が容易になります。
繰り返しになりますが、Sass などの深くネストされたプリプロセッサでは、不注意で複雑なセクターが作成される可能性があるため、注意してください。
VIII. Shopify CSS の縮小: ハウツーガイド
Shopify は、トップクラスかつ最も人気のあるe コマース プラットフォームの 1 つです。だからこそ、e コマース ブランドの Web サイト向けのアプリ ソリューションを構築する優れた Shopify 開発会社を雇うことが重要です。Shopify のパフォーマンス最適化とプラットフォーム内の CSS ファイルの縮小に関しては、次の点を考慮してください。
安全のため、テーマに変更を加えるたびに、それを複製する必要があります。複製したテーマで作業し、プレビューの編集が完了したら、問題がなければ公開できます。
このワークフローを一度も実行したことがない場合は、「オンライン ストア」>「テーマ」に進むだけで、テーマにアクション ボタンが表示されます。そこからプレビュー、複製などを行うことができます。
01. 縮小されていないCSSファイルを検索する
GTmetrix を使用すると、簡単な分析を行って、縮小されていないファイルを表示できます。cdn.shopify.com のファイルの提案が表示された場合、通常は Assets フォルダーのテーマから取得されます。サードパーティの場合は制御できず、アプリケーション開発者に縮小を依頼する必要があります。
02. ShopifyテーマでCSSを縮小する方法
Shopify CSSファイルを縮小する手順
- ebay-styles.css をクリックして、名前を ebay-stles.scss.liquid に変更できます。
- ファイルがロードされている場所を探します。通常、コマンドは theme.liquid の「head」セクションにあります。
- 同じ例で、「ebay-styles.css」を「ebay-styles.scss.css」に変更します。
- Shopify は、ファイルを提供する前に魔法のようにサーバー上でファイルを圧縮します。
- CSS ファイルはより小さいファイルとして提供されるようになり、ページの重量が軽減されます。
ロードコマンドでのファイル名の変更:
03. ページスピードが重要な理由
高速な読み込みは、Web サイトの成功に不可欠です。Web コンテンツの読み込みと表示に数秒待たされるだけでも、ユーザーはすぐにイライラしてしまうことが証明されています。このような状況が発生すると、ユーザー エクスペリエンスが著しく低下し、結果として Web サイトへのアクセスが減少し、コンバージョンが減り、最終的にはビジネスに悪影響を与える可能性があります。
読み込みが速く、スムーズに動作するウェブサイトは成功の証であることは、いくら強調してもしすぎることはありません。特に電子商取引の場合、Shopify 開発会社は、開発されたシステムが高速かつスムーズであることを保証します。
結論
フロントエンド開発には、数十万の Web サイト開発ツールが利用可能です。プロジェクトに最適な選択を行うには、各ツールの機能を十分に理解することが重要です。フロントエンド Web サイト開発は進化と成長を続けているため、これらの新しいツールを常に把握しておくことが重要です。
著者略歴:
Olivia Diaz は、エンタープライズ レベルの Web およびモバイル アプリケーション開発会社であるeTatvaSoftで働いています。彼女は技術オタクなので、最新の技術ニュースやガジェットを中心に業界を注意深く見守っています。Twitterで私をフォローしてください。
