webディレクターのdevil≒芝です。
先日、googleの検索エンジンの大規模なアップデートがありましたね。
いずれそれらに関しても各機会があると思います。
ざっくり言うと、モバイルフレンドリーアップデートは、スマホに対応しているサイトであれば、
おそらく問題のない状態なのだと判断できます。
現状、WEBマスターツール等で、スマホ対応への改善のアラートが出ていなければ、問題ありません。
あれだけ騒がれたにもかかわらず、拍子抜けするほどにスルッと通過しています。
さて、前回は、サイトを作るときには、分けましょう！！そっちの方がサイトとしては、いいよ！！
という話でした。
今回もひきつづきです。
まず、「どうして、１枚のHTML内に記述すると、読み込みが遅くなるんだ！！」という質問が出そうでした。
それでは、HTML内の構成を説明します。
上記のようにHTMLは、それぞれの開始タグと終了タグでくくるようになっています。
一番、大きな括りが、＜html＞です。その中に＜head＞と＜body＞という括りがあります。
この括りだけは、HTMLがどのようなバージョンになろうとも変化しません。
そして、先日話をしたcss、JSをどこに記述するのかということが関係します。
何度も述べますように、検索botは、HTMLファイルを一番上から読み込んでいきます。
そして、多くても読む字数は、16,000文字までしか読まないと言われています。
サイトのページの内容に関しては、必ず＜body＞内に記述します。
つまり、早くbodyに検索botを到達させなければならず、head内には、必要最小限度の記述で済ませます！！
一般的に、cssをHTML側に記述する際には、＜head＞内にまとめて記述することが、多いです。
こんな風に↓
そうすると、サンプルでは、２項目のスタイルの為に、10行の記述を必要とし、文字数も25文字とかなり多い記述が必要になります。一般的なサイトでは、複数のcssを読ませることが一般的です。
その際に、検索botの読む字数を軽く超えていきます・・・！
以上の理由より、css、JSは分けた方がいいのです！！