Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？　もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

少し前に出た話題だけど、CSS(だけ)でブラウザのウィンドウの中央にボックスを表示させてみようと試みました。元ネタは以下の記事より。 CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU 仕組みとミソ 元記事のようにネガティブマージンを使い、中央配置したボックスの大きさよりブラウザのウィンドウが小さくなると、右上半分が消えてしまいます。さらに、position: static;なbody要素に絶対配置すると、ブラウザのウィンドウを小さくしていくとうまいこといかない (画面の中央に表示されない) 現象がみられます。ということで今回は以下のように対策してみました。 高さ100%のbody要素にposition: relative;を指定する。 ボックスの縦横にmin-width、