2021年Google推奨のWEBサイトの記述について

Cookiieがブラウザに保存されていると、ページのWEBリクエストの度に、WEBサーバーに照合を取りにいって、値を返してくるので、ブラウザを表示するだけよりも、WEBサーバーへのリクエスト数（アクセス）が増える。これによって、サーバーに負荷がかかるので、メモリを消費するのでCookeiは長期間保存しない方がいい。

セッションについて

セッションもCookieと同じくサーバーに確認リクエストを毎回行うので、数時間だけアクセス出来るようなアクセス可の認証キーを発行して、WEBサバーへのリクエスト数を減らすなど、検討していくほうがいい。LocalStrageは外部サイトからのコントロールで参照できるので大事な内容は保存させないようにする。

スマホアプリによる保存

アプリに保存する場合もLocalStrageと同じ。なるべくCookieを長期保存しない。

HTML


<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">

<!-- SNS -->
<meta property="og:type" content="article">
<meta property="og:url" content="（ページのURL）">
<meta property="og:title" content="（タイトル）">
<meta property="og:description" content="（サイトの説明）">
<meta property="og:image" content="（サムネ画像）">
<meta property="og:site_name" content="(WEBサイトの名前)">
<meta property="fb:app_id" content="（FaceBookのID）">
<meta name="twitter:card" content="summary">


<meta name="keywords" content="">
<meta name="description" content="（サイトの説明）">


<!-- キャッシュクリア・ニュースの時だけになった ５分迄(5*60) 
<meta http-equiv="Refresh" content="300">-->

<!--ニュースなどの連続ページは次のページが連番としてキャッシュを早くすることが出来る。
<meta http-equiv="Refresh" content="20; URL=page4.html">-->


<!-- inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- favicon -->
<link rel=”alternate” hreflang=”ja-JP” href="" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="web-clip-icon.png" />
<link rel="apple-touch-icon" href="web-clip-icon.png" />


<!-- 高速化ルールCSS ＞ jsの順で設置 -->
<!-- 基本CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">

<!-- Load Font -->
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<!-- JSに必須。async deferを追加するとHTMLを全て読み終えてからjsを読み込む --->
<!-- J外部サイトから読み込む場合は（https://）が必須 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"async defer></script>
<script src="js/jquery_3.4.1_jquery.min.js"async defer></script>
<script src="js/lazyload/jquery.lazyload.js"async defer></script>


<!--[if lt IE 9]>
<script type="text/javascript" src="/js/html5.js" async defer></script>
<![endif]-->


<!-- Google Ad -->
<script data-ad-client="アカウント" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>



</head>
<body>


<div id="contents">
  <article> 
  <!-- articleタグはメインになる内容、独立された記事内容 -->
      
      <ins datetime="2021-11-19T13:00:00+09:00">
      <!-- insは後日追加した内容をdatetaime属性とあわせて設置する -->
      </ins>


      <!-- Img の使い方 -->
      <!-- img 画像を64bit化して同じページ内に記載すると初回は早い。2度目移行はキャッシュが無いので遅い -->
      <img src="" alt="マルチメディアフォールバック:画像内容がわかるようにaltは必須" >


      <!-- Semantics（HTMLが正しいか）XHTML<br />の記述が禁止<br>と記載する -->
      <br>

      <table>
      <tr>
        <th>
        <td>
        <td>
      </tr>

  <article> 
</div>

  <!-- JSで読み込み後に発火させるときはここに記載する。-->
  <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>


  <!-- APIなどアクションがあるものを使うとき、取得した内容の表示だとわかるように{}を利用する --->
  < p > {{TODO cnt：コメントをつけておく}} </ p >



  <!-- HTMLの記載にはonload()="xxx" をつけずにイベントリスナーで発火させる -->
  <!-- 非推奨の記載 -->
  <input type="text" id="mytextbox" onchange="myfunc()">

  <!-- 推奨の記載 -->
  <input type="text" id="mytextbox" onchange="myfunc()">
  <script>
    var mybox = document.getElementById("mytextbox");
    function myfunc() {
        console.log("Hello world!");
    }
    mybox.addEventListener("change",myfunc);
  </script>





<style>
  /* 要素名の記載ごとに、改行が必要になったので注意、見やすくなった！*/
  /* 要素m名ごとになるべく何のCSSかをコメントしてね！となっています */

  /*接頭辞*/
  /* 推奨しない："demo"と"image"がそのまま連結してる */
  .demoimage {}
  
  /* 推奨しない：アンダースコアーで連結してる  */
  .error_status {}
  
  /* 推奨 */
  #video-id {}
  .ads-sample {}


  @media screen and (min-width: 731px) {731以上のCSS設定 }
  @media screen and (max-width: 400px) {400までのCSS設定設定}

  /* 推奨しない */
  color: #E5E5E5;
  
  /* 推奨 */ ネームの後に空白スペースを作り、全て小文字で記載する。
  color: #e5e5e5;

  /* ■CSS Fontの指定 */

  /* 推奨しない */
  .box{
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
  }

  /* 推奨 */
  .box{
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
  }

  /*小数点の値は先頭の “0”を省略します。*/
  .p{
    font-size: .8em;

    /*可能な場合は3文字の16進表記を使用してください。*/
    /* 推奨しない */
    color: #eebbcc;

    /* 推奨 */
    color: #ebc;
  }



</style>

</body>
  <!-- 推奨されていないが、body読み込み後にCSSを設置すると早い。 -->
</head>

CSSは圧縮して軽量化するほうが読み込みが早い

Googleの推奨は、機械的に読み込むよりも、みやすさや間違いをへらすという指針に近いように思います。Googleの推奨するCSSの記載のルールーは細かく明確に指定されて、開発する側はみやすくなりました。ただサーバーにアップしたあとの事を考えると、空白スペースや、コメントは無いほうが断然読み込みが早いので、高速化を図る場合は、CSSやjavascriptはファイル圧縮しておくほうが良いかもしれません。