まりうたてまりうたてんてんてんまり手鞠唄。Webwebのシステムとユーザビリティを考えるのは大変難しい。2018年1月31日Reply12年HTMLとCSSそしてjavascriptを弄ってwebサイトを制作しているが、最近のHTML5やCSSそして新たな記述方法が増えて頭を悩ませている。最近では、javascriptやcssを圧縮したり排除、軽量化してモバイルユーザーや通信回線が貧弱なユーザーにもメインコンテンツの内容を読めるようにするというシステム変化は産まれているが、それを考えながらweb(PC)でもモバイルでも双方向見られるようなコンテンツをつくるのは、長年やってきた製作者でも頭を抱える仕組みである。これから推奨されるWebシステム大まかに言えば、styleのような装飾よりも文字コンテンツをどれよりも早く描写させなさい。阻害している読み込みは非同期(ラスト)に読み込ませるか、もしくは削除しなさいという言葉である。対処法はあるが旧世代で作ったWebはデザイン優先でつくられてるため、なかなか書きなおすには辛い。旧世代でも推奨されるオススメの方法を書きたいと思う。言われるのが、CSSやJavascriptを圧縮しなさいという言葉。別にZIPにして保存しろというわけではない。サーバー側が圧縮してくれるシステムがあるので紹介しよう。記入するもちろんこの圧縮を許可してないサーバーでは使用は出来ないが、自身で圧縮するよりも簡単で自動的にサイズを圧縮してくれる。書き込むこれは昔からある技術だが、ブラウザにキャッシュをするように命令を送ることによってその期間の間はサーバーから情報を毎回もらうのではなくブラウザに保存された情報で処理をするようになりより速く読み込めるようになる。機械で読む構文は、構文になってれば変わらないので、ぺちゃんこに圧縮して読ませてくださいということ。￼CSSファイルでも500Byteの差しかないので圧縮するような方法を持ってない方とかデザインを著しく修正する製作者は後回しでもよいかもしれません。画像の圧縮化と最適化Webのサイズの90%を占めていると言われている画像ですが、適したサイズと圧縮率を使えば100〜500KByteも節約することができるということ。対処法は簡単で、Webに表示されている「縦横のサイズ」と同じファイルを製作するとよいらしいです。圧縮率(Jpeg)は画像の劣化がさほどない85%を使用し通過ファイルであるGIFはなるべく使わずPNGにファイルにし、ユーザーにもサーバーにも優しい通信を心がけることと言っております。デザイナーサイトや写真を使うようなサイトでは表示を劣化させたもの。本物のファイルは別に用意してクリックした時に読み込ませるような方法を取ると良いらしいですね。javascriptの非同期化とjQueryの非推奨コンテンツの読み込みを阻害するjavascriptはなるべく非同期化をしasyncなどを使ってなるべくコンテンツを読み終わったあとに読み込ませる。htmlと共存をして読み込んでスタイルを形成するjQueryは「なるべく使わない」ということです。設定を行うというもの。async></script>これを記述することによりhtmlが読み込まれてからjavascriptの構文が走ります。その代わり最後に読み込まれるため、動的コンテンツが反映されないなど問題点もあります。ユーザービリティパソコンでもスマートフォンでも見られるようにするというもの。Query)を行えるようになりました。サイズ判断に必要なもの。サイズの判断に伴い書く構文がファイルごとにあります。}}ほかにも様々な処理方法ここにご紹介しきれない程の処理方法を紹介されているサイトもあります。https://dev.classmethod.jp/smartphone/device-media-queries/HTML5HTML4まではdivで成形したりh1などの見出しタグで読みやすく解りやすい記述を心かげたであろう。HTML5ではdivはスタイルを形作るものではなく文をまとめる箱的なもの。そのかわり<header><nav><article><section><footer>などの新しいタグを使ってメカニカルな内容を読ませようということ。SEOに効果があり、どれがメインのコンテンツなのかサブコンテンツそれともメニューなのか判断させる事ができます。詳しいサイトはたくさん有るので、どのタグがどのような効果を生み出すのか説明します。<header><head>タグとは違う存在。タイトルやヘッダーとして書く内容を記入します。(ナビゲーション)の略。メニューを表記する時に囲います。<article>日本語名で「章」ブログで言えば1記事のこと。<h2>と共存して使われることが多いです。<article>タグの中に入れ子になります。<footer>頭があれば足もある。最後に記入する項目です。「Copyright」が書かれます。他にもあるけども補足の<aside>などもありますが上の5つを上手に使えば綺麗にまとまる気がします。今まで<div>の中にidやclassで設定してたと考えると専用のタグがあるので利便性も向上することでしょう。SpeedInsightで直した方がいいよと言われているものだけ紹介してみました。関しては対応していたら記入させてあげると良いかもしれません。綺麗な読みやすいコードとWebでのユーザビリティを考えるのはなかなか長年やっていても難しいことだと改めて実感しました。ユーザーに対して考えてみると顧客も増えるのかもしれません。