統計データマーケティングお役立ちレポート全てのカテゴリを見るferret記事をさがすCMS・Webサイト制作CSSCSSの読み込みを高速化するための5つのポイントCSSの読み込みを高速化するための5つのポイント2018年05月25日CSS会員登録する読み込み速度を高速化することは、戦略上非常に重要なことです。ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。Kissmetricsによれば、読み込みに3秒以上かかってしまうと、40%の人が読み込みを諦めて離脱してしまうことが分かっています。SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。GoogleだけでなくBingもページの読み込み速度を重視しています。ferretでは、これまでSVGを使った画像の最適化方法やコンテンツSEOなどで、サイト内の高速化のためのノウハウをご紹介してきました。今回は、CSSの読み込みを高速化するための5つのポイントをご紹介していきます。セレクタは浅い階層にとどめておくプログラミングの世界では細かく指示を出すことが重要だと考えられていますが、CSSの世界では、そうではありません。基本的には、いつでもどこでも、セレクタの階層を浅く設定しておいたほうが、キロバイト単位でCSSを軽くすることができます。次のようなCSSがあるとしましょう。}これは文字数が多いのでCSS自体のファイルサイズも大きくなるだけでなく、ブラウザにも負担をかけてしまうので、ミリ秒単位で読み込みが遅くなってしまう原因にもなります。したがって、上記のCSSであれば、以下のようにするだけでよいのです。}ブラウザの負担になってしまうというのは、ブラウザはセレクタを右から左に読み込むからです。セレクタがより深い階層にあれば、それだけブラウザがレンダリングするのに時間をかけてしまいます。理想的にはシングルセレクタで済ませたいものですが、これは必ずそれ以外すべてのセレクタを削らなければならないということではありません。場合によってはいくつかのセレクタを加えても構いませんが、バランス良く、実践的なコーディングを心がけていきましょう。ショートハンドプロパティを使うショートハンドで記述できるプロパティを使うのは常識的だと思う人もいるかもしれません。省略して書くことができる箇所はあります。フォントサイズや行間、フォントの種類などを決める時には、通常このように書きます。sans-serifしかし、これはfontプロパティを使ってショートハンドでまとめることができます。sans-serif;これはほんの一例に過ぎませんが、ショートハンドプロパティを使うことで、ロングハンドのプロパティよりもおよそ40%のスペースを節約できます。最初は可読性に欠けると感じるかもしれませんが、読み込み速度も上がり、修正も1箇所のプロパティを見るだけで済むので、使う価値は大いにあるでしょう。リソースプレロードを使うリソースプレロードとは、ブラウザにHTML全体を読み込ませる前にページに表示される予定のアセットをあらかじめ用意してサーバーのHTTPヘッダーから直接読み込ませることを言います。CSSを読み込む際には、通常headタグ内以下のようなタグを入れます。as="style">あるいは、HTTPヘッダーではこのようになります。as=styleどちらであってもHTML全体を読み込む前に、style.cssを優先して読み込むことができるのですが、HTTPヘッダーを使った方が好ましいようです。HTTPヘッダーであれば、HTML本体を読み込む前にCSSを読み込んでいるので、より反応が早くなるからです。JulyCSSを人の手で書いていると、案外余計なコードを書いていることがあります。h2とpタグで同じフォント色や行間、マージンを取っているにもかかわらず、2回書いてしまったりという具合です。その時に役に立つのが、RubyベースのCSSチェッカーであるcsscssです。使い方は簡単で、まず以下のコマンドを打ってcsscssをインストールします。Macの場合はRubyがすでにインストールされているので、ターミナルを起動し、以下のコマンドを打ちます。csscssインストールしたら、以下のようにCSSファイルを指定します。style.cssこのコマンドによって、共通して使用している部分を指摘してくれます。1.5remこの指摘にしたがって、共通部分をまとめていきます。1.5rem;}このように、無意識に2回使っているプロパティの余剰部分を取り外すだけで、CSSのサイズが大幅に短縮します。csscssは非常に簡単に使えるので、ぜひインストールしてみてください。Julyもう一つ便利なツールなのが、Node.jsのnpmで使えるcssnanoというツールです。cssnanoを使うことで、CSSファイルの余分な空白や改行を取り除いてファイルを圧縮することができます。npmのインストールに関しては、下記をご覧ください。参考:知っておいて損はなし!新人Webデザイナーのための「npm」入門まず、npmで以下のコマンドを打ってcssnanoをインストールします。cssnano-cli続いて、読み込むCSSファイルと、生成するファイル名を指定します。optimized-style.cssたったこれだけでCSSのファイルサイズが圧縮されるなんて便利ですよね。空白や改行がなくなるだけで大きくファイルサイズを減らすことができるので、ぜひ試してみてください。まとめCSSの具体的な書き方から、便利なツールまで、CSSの軽量化に貢献するノウハウをご紹介させていただきました。CSSの軽量化は、ページの読み込み速度に関わる一部分でしかありませんが、あらゆる軽量化テクニックと組み合わせることで、大きな効果を発揮していきます。1秒でも短い読み込み速度を目指すため、ぜひこうしたポイントを実践していきましょう。ユーザーユーザーとは、コンピューターやシステムを利用する人のことを指します。意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。詳しく見るGoogleGoogleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。詳しく見るユーザーユーザーとは、コンピューターやシステムを利用する人のことを指します。意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。詳しく見るGoogleGoogleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。GoogleやYahoo!などの検索エンジンで検索したときに表示される情報のことです。Page」の頭文字から「SERP」と呼ばれることもあります。検索結果には、検索エンジンの機能に関する情報と、検索キーワードに関連する情報を持つページが表示されます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るGoogleGoogleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るファイルサイズファイルサイズとは、コンピューターで扱うファイルの容量のことをいいます。ハードディスクなどにファイルを転送する際などは、この容量をしっかりチェックしておく必要があります。その数値に応じてデータをコンピューターに保存することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るHTMLHTMLとは、Webページを記述するための言語です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るHTTPHTTPとは、HTMLで記述されたWebページなどの情報を、WebサーバーとPCなどのクライアント端末間でやり取りする方法を定めた通信手順のことです。Protocolの略です。詳しく見るヘッダーWEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るタグタグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。インターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。詳しく見るHTTPHTTPとは、HTMLで記述されたWebページなどの情報を、WebサーバーとPCなどのクライアント端末間でやり取りする方法を定めた通信手順のことです。Protocolの略です。詳しく見るヘッダーWEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。詳しく見るHTMLHTMLとは、Webページを記述するための言語です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。詳しく見るHTTPHTTPとは、HTMLで記述されたWebページなどの情報を、WebサーバーとPCなどのクライアント端末間でやり取りする方法を定めた通信手順のことです。Protocolの略です。詳しく見るヘッダーWEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。詳しく見るHTTPHTTPとは、HTMLで記述されたWebページなどの情報を、WebサーバーとPCなどのクライアント端末間でやり取りする方法を定めた通信手順のことです。Protocolの略です。詳しく見るヘッダーWEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。詳しく見るHTMLHTMLとは、Webページを記述するための言語です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るタグタグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。インターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るファイルサイズファイルサイズとは、コンピューターで扱うファイルの容量のことをいいます。ハードディスクなどにファイルを転送する際などは、この容量をしっかりチェックしておく必要があります。その数値に応じてデータをコンピューターに保存することができます。詳しく見るファイルサイズファイルサイズとは、コンピューターで扱うファイルの容量のことをいいます。ハードディスクなどにファイルを転送する際などは、この容量をしっかりチェックしておく必要があります。その数値に応じてデータをコンピューターに保存することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るCMS・Webサイト制作CSS会員登録するおすすめ記事ADグロースハックソフトバンクグループのサイバー大学がチャットコマース「ジールス」を導入。ノーリスクでリード獲得件数を増加させた3つの施策とはグロースハックADマーケティングオートメーション(MA)伝達から会話の時代へ。AI時代を一足先に予習する「マーケティングの練習問題」マーケティングオートメーション(MA)ADカスタマーサポート・カスタマーサクセスあえて初仕事で「チャットボット導入」を。今年の新人をたくましく育てる「逆説の育成術」カスタマーサポート・カスタマーサクセスBtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。涼ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方AD記事を作っているのにサイト流入が足踏み・・・・・・。そんな状況を打開する「正しい努力」の仕方ADWebサイト制作でよくある失敗例5選。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。『鬼滅の刃』が大ヒットした理由ケーススタディで学ぶ。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。