最近 AEM 開発チームと一緒に仕事をしています。Front End に関してはみんな多少知っていますが、本物の Front End Dev ではないため、まぁ、結構な数の Front End Dev も Bad HTML を書いているようです。日々勉強しないと。
さ、良い HTML ってなんでしょう？結構大きいテーマだから、とりあえず、自分の考えをリストしよう：
ー HTML ページ全体的な構造がわかりやすく、無駄がないこと、すべての HTML Tag が正しく使われていること。例えば、<nav> や、<aside> などのタグ、とページ全体が上から、下へ、要素がロジックにあってるとか。
ー Content First 主義。JavaScript 使ったり、CSS アニメーションを使ったり、ページは綺麗になりますが、Content はやはり第一です。ユーザーが JS を disable にすることもあるし、イメージをダウンロードしない設定もあるので、UK では 2% のユーザーがその部類らしいだそうです。（隣の Designer さんに聞いた話しです。）だから、JS などに拘らず、ページの Content はどこでも、どんなデバイスでもわかりやすく伝えられるならいいでしょう (Responsive は実は大変重要)。
ー Accessibility は正しいこと。ページ全体の h1 や、h2 などが正しく、HTML タグに意味が正しく、どうしても HTML だけで難しい場合、ARIA 属性が正しいこと。HTML は実はそれほど動的ではないので、tab や、アコーディオンが Tag のみで難しいです。それで aria-hidden や aria-expand に使う必要ですね。
ー ページ全体が Browser で軽くて、速いこと、いわゆるパフォーマンスが良いこと。100 ms 遅くなると、5% のユーザーを失うという記事がどこかで見たことがあるようです。具体的な数字は覚えてないけど。
CSS を <head> に、JS を <body> にロードするとか、minify とか、とにかくページを速くしないと。
まぁ、ページのデザインなども重要ですが、HTML としては上記実現すれば、良い HTML だと思います。
それでは。また後日何か思いついたら、追加します。
2016年11月12日土曜日
2014年3月30日日曜日
日本はなぜ Front End を重視しないか？
最近、あまり Yahoo! Japan 以外の Web Page をアクセスしてないけど、今日偶然ある不動産屋のホームページを見てみたら、遅くて、別のサイトを切り替えました。個人的には日本と欧米と比べると、Web 系の技術はまだまだ道が長いようです。ウェブサイトは Back End だけではないです。Front end が遅くなると、システム全体の評価が低くなります。
Back End は自分のサーバーで動くから、遅いことはすぐ気づくでしょう。そこで、アルゴリズムの改善などして、インデックスを DB に作ったりして、まだなんとかなるでしょう。ただ、 Front End、いわゆる HTML 部分は顧客のシステムで動くので、いろんなブラウザがありますし、PC のスペックも様々です。最近、モバイルからのアクセスもかなり増えていますので、そこは通信や、JS の実行、ファイルのロードなどがさらに遅くなります。元々 Web Page が遅くなると、モバイルではさらに遅くなります。 Retina サイズのイメージを考えると、あ、頭が痛くなります。。。
以前も書きましたけど、どうやって、ウェブサイトのロードスピードをあげるかと。
Web App が遅い？？
今日別の観点から、改善すべきところをリストします。
・まずは画像についてです。今のブラウザは画像をロードするにはいろんな加速技術を使っています。一つのドメインから、平行で二つの画像がダウンロードできますし、img の src を見つかったら、ウェブページをロードするスレッド以外、別スレッドでダウンロードするとか、いろいろありますけど、やはり、一つのリクエストのコストは大きいです。これを極力減らすべきです。
一つの方法はすべての画像を一つにまとめて、CSS で background-position を使って、画像の一部分だけを表示します。これはスプライトといいます。下記のウェブページで画像をまとめて、一つのものにします。
Sprit Generator
後、もし画像のサイズがわかるなら、 img に width と height を書いて、ブラウザはそれを読んだら、まずポジションを確保します。そうすると、ページの内容がまず全部表示して、画像は後から少しずつ表示されます。全体にスピードアップような感じがします。
・次、CSS, JS ファイルを一つに、コンプレスすべきです。これは結構いろいろありますから、後日またツールを紹介します。
・後は JS についてですが、JS はいつも一つのスレッドで実行しますので、ブラウザがもし <script type="text/javascript">を見つかったら、他の処理を止めて、まずそこのコードを実行します。現在 V8とか、Gecko とかすごく速い JS Run Time Env があるが、やはり JS は遅いです。
それで、すべての <script> を <body> の最後に置くと、DOM のロードなどが少し速くなります。ユーザは白い画面のままで待つ時間が短縮されます。
・CSS で作れるものは、画像を使わないほうがいいです。後、アニメーションとかも CSS を使ったほうがいいです。CSS はいろんなものが作れます：
CSS GUI Icons
ブラウザはこれを実行するスピードがイメージをレンダーするスペードより、百倍速いです。
CSS スタイルを適用するとき、別の文章があります。英語のものですけど。
CSS Best Practice
時間があったら、翻訳します。
・HTML の要素も減らしましょう。<div> など、必要なときだけ使うべきです。一つの画面に要素が 2000 個以上使うことはあまりないでしょう。複雑なウェブページ以外ですけど。後、後日また書きますが、JS にできるだけ HTML コードを書かないようにすべきです。メインテナンスでは、どうやって、そういう動作になったか読みづらくなります。
まぁ、ここまで一段落。それでは。
Back End は自分のサーバーで動くから、遅いことはすぐ気づくでしょう。そこで、アルゴリズムの改善などして、インデックスを DB に作ったりして、まだなんとかなるでしょう。ただ、 Front End、いわゆる HTML 部分は顧客のシステムで動くので、いろんなブラウザがありますし、PC のスペックも様々です。最近、モバイルからのアクセスもかなり増えていますので、そこは通信や、JS の実行、ファイルのロードなどがさらに遅くなります。元々 Web Page が遅くなると、モバイルではさらに遅くなります。 Retina サイズのイメージを考えると、あ、頭が痛くなります。。。
以前も書きましたけど、どうやって、ウェブサイトのロードスピードをあげるかと。
Web App が遅い？？
今日別の観点から、改善すべきところをリストします。
・まずは画像についてです。今のブラウザは画像をロードするにはいろんな加速技術を使っています。一つのドメインから、平行で二つの画像がダウンロードできますし、img の src を見つかったら、ウェブページをロードするスレッド以外、別スレッドでダウンロードするとか、いろいろありますけど、やはり、一つのリクエストのコストは大きいです。これを極力減らすべきです。
一つの方法はすべての画像を一つにまとめて、CSS で background-position を使って、画像の一部分だけを表示します。これはスプライトといいます。下記のウェブページで画像をまとめて、一つのものにします。
Sprit Generator
後、もし画像のサイズがわかるなら、 img に width と height を書いて、ブラウザはそれを読んだら、まずポジションを確保します。そうすると、ページの内容がまず全部表示して、画像は後から少しずつ表示されます。全体にスピードアップような感じがします。
・次、CSS, JS ファイルを一つに、コンプレスすべきです。これは結構いろいろありますから、後日またツールを紹介します。
・後は JS についてですが、JS はいつも一つのスレッドで実行しますので、ブラウザがもし <script type="text/javascript">を見つかったら、他の処理を止めて、まずそこのコードを実行します。現在 V8とか、Gecko とかすごく速い JS Run Time Env があるが、やはり JS は遅いです。
それで、すべての <script> を <body> の最後に置くと、DOM のロードなどが少し速くなります。ユーザは白い画面のままで待つ時間が短縮されます。
・CSS で作れるものは、画像を使わないほうがいいです。後、アニメーションとかも CSS を使ったほうがいいです。CSS はいろんなものが作れます：
CSS GUI Icons
ブラウザはこれを実行するスピードがイメージをレンダーするスペードより、百倍速いです。
CSS スタイルを適用するとき、別の文章があります。英語のものですけど。
CSS Best Practice
時間があったら、翻訳します。
・HTML の要素も減らしましょう。<div> など、必要なときだけ使うべきです。一つの画面に要素が 2000 個以上使うことはあまりないでしょう。複雑なウェブページ以外ですけど。後、後日また書きますが、JS にできるだけ HTML コードを書かないようにすべきです。メインテナンスでは、どうやって、そういう動作になったか読みづらくなります。
まぁ、ここまで一段落。それでは。
登録:
投稿 (Atom)