【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

CSSがサイトの読込速度の遅延原因かも?見直すところは大きく3つ!

  • 2015.01.23
  • 2019.07.26
  • 技術
CSSがサイトの読込速度の遅延原因かも?見直すところは大きく3つ!

CSSもページ表示速度を落とす要因になります

「なんだか自分のサイトのページの表示速度が遅いなあ…」そうしたお悩みをお持ちの方は多いのではないでしょうか。

もしかしたら、CSSが原因の1つになっているのかも?CSSを見直す良い機会かもしれません。

ブラウザはページ内容を表示する時レンダリングを行っています。

レンダリングとは、データ(今回の場合だとHTML)に書かれている情報を解析し、その通りにディスプレイに表示させることを指します。

外部CSSはこのレンダリングをブロックしてしまうリソースの1つで、運用方法によっては、これが原因でページ内容を表示するのが遅くなることがあり得ます。

どこを、どうやって改善するといい?

  1. CSSをインライン化する
  2. セレクタを見直す
  3. HTTPリクエスト数を減らす

大きくこの3点です。以下より実際の改善方法をご紹介いたします!

1. CSSをインライン化する

CSSを、外部ファイルにではなく直接HTMLファイル内に<style>で書いてやると、ブラウザはページのレンダリングを続けることができます。

ただ、内部CSSの量が多いと今度はHTMLファイルの容量が大きくなり、HTMLファイルの読み込みが遅くなってしまうので注意が必要です。

そのため外部CSSの内容を全てHTMLファイル内に移すのではなく、FV(ファーストビュー:ユーザーがブラウザでアクセスした時に初めて目にする範囲)で使用するCSSのみ移すと、内部CSSの量を抑えることができます。

残りのCSSを記述した外部CSSの読み込みをFVの後まで遅らせると、FVのレンダリングの妨げになりません。

「ページを開いたけどFVの表示が遅い」といったストレスを軽減できる可能性があります。

ですがlink要素はhead要素の中に入れるものなので、ここ以外に入れてしまうと文法上エラーとなってしまいます。

ではどうすればいいのでしょうか。

文法エラーを回避したうえで読み込みを後回しにするには?

<script>なら<body>の中に書けるので、JavaScriptを使って外部CSSをFVの後で読み込むようにしましょう!

<body>の中に書くJS

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20var%20link%20%3D%20document.createElement('link')%3B%0A%20%20link.href%20%3D%20'http%3A%2F%2Fhoge.jp%2Fcss%2Fstyle.css'%3B%0A%20%20link.rel%20%3D%20'stylesheet'%3B%0A%20%20link.type%20%3D%20'text%2Fcss'%3B%0A%20%20var%20head%20%3D%20document.getElementsByTagName('head')%5B0%5D%3B%0A%20%20head.appendChild(link)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

元のHTMLファイル

<head>
  <meta charset="UTF-8">
  <title>読み込みテスト</title>
</head>

ChromeのDeveloper Toolsで確認
JavaScriptで外部CSSを追加

JSで<link>を生成し、<head>に追加しています。

ブラウザはHTMLファイルを上から順に読み込んで処理を行うので、外部CSSへのリンクを追加するJSを最後の方に書けば、それまでのソースを読み込んだ後に実行してくれます。

参考:JavaScriptでスタイルシートを読み込む方法|薫のHack

インライン化といっても、style属性はダメです

複数のタグに同じ「padding: 0;」を適用するなどコードの不要な重複に繋がる可能性があるので、できるだけ避けましょう。

また、W3Cで定められた「Content Security Policy 1.0」にてブロックされてしまいます。

2. セレクタを見直す

セレクタはなるべく短くしましょう

例えば下記のようなセレクタの場合。

div p a.hoge {  }

左のセレクタからマッチする要素を探しているのかと思いきや、実は右から探していきます。(実は私もずっと勘違いしていました)

a.hoge を探す → 親要素は<p>か → その親要素は<div>か…となり、その分解析に時間を要します。

そのため、子孫セレクタをどうしても使わなければいけない時を除き、なるべくセレクタは短くするよう心がけましょう。

現在使用していないセレクタは削除しましょう

無駄なセレクタは、余計な解析の手間がかかりページの表示速度を遅くしてしまう要因になりかねません。

使用しないセレクタは削除し、常日頃から整理しましょう。

3. HTTPリクエスト数を減らす

パーツごとに「style.css」「common.css」と外部CSSファイルを分けてしまいがちですが、ファイル数の数だけHTTPリクエストが発生して時間がかかるので、1つにまとめてリクエスト数を減らしましょう。

@import の使用は避けましょう

@importも複数の外部CSSファイルを読み込む時に使うものなので、上記と同様にその分HTTPリクエスト数が発生します。

また、外部CSSファイルはほとんどのブラウザで同時に読み込まれますが、@importで複数ファイルを読み込む場合は1つ1つ順番にダウンロードされてしまいます。

つまり、「外部CSSファイルを読み込む時間×ファイル数」だけの時間がかかるということです。

@importの使用は避けましょう。

Data URIスキームはHTTPリクエスト数を減らせるけど…

通常、画像ファイルは「ファイル名.png」といったように書くのですが、Data URIスキームを使用すると「data:image/png;base64,~」と記述することが可能です。

参考:http://duri.me/

上記ツールを使うと、画像をテキストデータに変換することができます。そのためHTTPリクエスト数を減らせるメリットがあるのですが、画像データの容量が元のファイルの約3割増しになるデメリットがあります。

画像データが大きいほどData URIスキームが長くなりCSSのサイズが大きくなってしまうので、大きな画像データには不向きです。

外部CSSだけではありませんが、読み込み速度が遅くならないよう、Data URIスキームを使うのであればアイコンなどの小さい画像データだけに留めましょう。

終わりに

運用している外部CSSの量が多いほど、見直しが大変になってくると思います。常日頃から意識して整理しておくことが大切になってきます。

まずはCSSファイルを統合していって、HTTPリクエストの削減を目指すところから始めてみてはいかがでしょうか?

少しでも、ページ表示の速度改善の手助けになれますと幸いです。

原田

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+