- 2019-7-4
- HP制作と運用
CSSやJavaScriptをインライン化すべきか否か
先日、CSSの記述についてお問合せを頂きました。
特にファーストビューに関わるCSSコードの記述方法についてです。
難しそうと思っても、とりあえず、ざーーーっと見て、最後の段落だけでもしっかり読んでください。
インライン化することによって、
「表示速度が遅くなり」
「Googleの検索エンジンの評価が下がり」
「下手をするとペナルティを食らうのではないか」
という問合せです。
基本的にWEBサイトにおいて、記述をどうするか？の正解は、W3C準拠であることと、Googleの検索エンジンがどう評価するか（それによって検索結果に影響が出るのかどうか＝ユーザーファーストになっているかどうか）であると考えています。
結論から申し上げると、Googleの見解は「インライン化する」を正解としています。
ということは、上記の心配は全く無用であり、また、全く逆のことを言っているということになります。
CSS、JavaScriptのインライン化についてGoogleの公式見解
スマートホンの読み込み速度を改善するために
この中には
「ユーザーに最初に見えるコンテンツを表示するのに必要となる JavaScript および CSS を外部参照せずにインライン化する」
と、明記されています。
この問合せをしてこられた方は、Googleの検索結果について少し理解のある方で、本来は、HTML内に無駄な記述をせず、CSSは別ファイルで記述し、できるだけ検索エンジンが無駄な文章を読ませることを避けたほうが良いというお考えを持っておられたようです。
しかし、これは、少々古い認識になっています。
上記のGoogleの最新の公式発表では、少なくともユーザーに最初に見えるコンテンツの表示に必要な記述は、外部参照しない、としています。
確かに、かつて、HTMLソース内に別ファイルで読み込ませることのできるコードを入れてしまうことで、HTMLが長く読みづらくなることから、CSSは別ファイル、といった話があったことはありました。
しかし、上記によるとむしろ、別ファイルの方が読み込みに速度がかかることとなっています。
別ファイルを参照するのに、時間がかかるというわけです。
スマホの台頭がこの変化に関係すると考えられますが、スマホユーザーは、とても便利になんでもスマホで検索をします。
しかし、ユーザーはいつの時代も「わがまま」で（もちろん、わがままでいいと思うし、私も相当わがままです）、自分の質問（検索）に対して、できるだけ素早く反応してくれないと、もう、気持ちが別のものに映ってしまいます。
しかしながら、パソコンとスマホの機械的性能は、まだ、格段に差があります。
でも、ユーザーは、知らず知らずにパソコン並みの速度を、スマホのユーザー体験でも要求しているのです。
これにこたえるためには、もちろん、機械自体の性能が上がる必要もありますが、世界の検索を制しているGoogleとしてはユーザーの要求に当然のように対応する必要があるのです。
大げさな言い方をしていますが、Googleはこの「ユーザーの要求に応える」ことにすべてを捧げていると言っても過言ではないと私は考えています。
さて、少し話がそれましたが、CSSやJavaScriptを別ファイルで記述するということは、HTMLをそこまで（別ファイルで記述しているところまで）読んだ検索エンジンは、そこから別のファイルを読みに行く、という手間（時間）が増えます。
スマホのネット速度で、ユーザーの集中を切らさずに表示するための方法をGoogleは言っています。
スマホの画面は小さいですよね。
ファーストビュー、いわゆる、最初にユーザーが目にするスマホのモニタサイズの画面の中だけでも、とにかくできる限り早く表示することが大切。というわけです。
詳しくは、上記の公式サイトを確認するのが良いと思いますが、そのために、別ファイルでなく、同一ファイルに記述するのが望ましい、ということを言っています。
ちなみに、問合せにあった、別ファイルで書かないと、表示速度に影響して、Googleからの評価が下がるのでは？という内容ですが、
そのことについての、弊社の技術部門の考え方は以下の通りです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
どちらでもページの表示には全く影響がありません。
ファーストビューのCSSコードを別ファイルにすることは、Googleの公式見解からすれば、そちらの方がむしろ外部に記述する方が悪影響であるとが考えられます。
インラインで記述していようが、別ファイルに記述していようが、ブラウザが読み込むべき文字数（データ量）は変わりません。
しかも、別ファイルに記述されているCSSの読み込みが完了しないとブラウザは表示しませんので、結果として表示速度は変わりません。
また、Google は Chrome と同等のブラウザによってサイトをレンダリングして情報を取得しており、ブラウザの表示では同等でもGoogleの検索では時間がかかると判断されることもありません。
むしろ、速度的にはGoogleはCSSをインライン化（別ファイルに記述しない）ことを推奨しています。（最初に表示される範囲については、となっていますが、ヘッダの電話番号などの箇所は最初に表示される範囲に該当します）
※公式見解は上記の「スマートホンの読み込み速度を改善するために」の通り。
また、速度についてのGoogleの公式見解も発表されていますが、この内容によると、CSSの数文字をどうこうしたからと言って、何の違いも発生しないものと言っていると考えるのが妥当です。
ページの読み込み速度をモバイル検索のランキング要素に使用します
「ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。」
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
以上
ホームページを運営している責任者の方が少なくとも認識しておくべきこと
GoogleのWEBマスター向け公式ブログは、WEBマスターではない方には、やはり少々難しいです。
しかしながら、私が、WEBマスターではないけれどもホームページを持っておられる経営者や、企業担当者の方に申し上げたいのは、小手先のややこしいことを第3者に言われたときに、何を信用するべきなのか？という指針をしっかり見極める力は必要なのではないでしょうか？ということなのです。
そこには、
・ホームページに何を期待するのか
・ホームページを運用する目的は何なのか？
・ホームページをどう使っていくのか？
そういった目的意識をしっかり持つ運営者側の意識がとても重要であり、また、その目的・目標を達成するためには、何をすべきで、どういった知識が必要で、どういう対策を打つべきなのか、しっかりと考えることができるチームが必要なのです。
わけのわからないことを言われた場合は、
できる限りわかりやすく説明してもらうべきだし、
根拠がどうであるかも問うべきであるし、
その結果、どうすればいいのかという解決策も求めるべきです。
これからの時代は、経営にはホームページがどうしても外せないツールとなっていきます。
更にWEB技術の発展、発達は見込まれ、更なる複雑化を避けることはできないと考えています。
わからない、ではなく、わかるべきことを理解しようと努め、経営者として何を理解しておくべきかをしっかり認識することが本当に大事だと考えています。
WEBについての相談は、いつでもバーブワイヤーまでご連絡を。
少人数ですが、技術的なことにも精通したスタッフが所属しています。
また、社長を筆頭に、成果物や、結果には、妥協を「許さない」スタッフが対応しています。
自社のサイトをどうにかして経営を伸ばしたいとお考えの方は、以下からお問い合わせください。
