阿部寛のサイトをモダンなhtmlにする #HTML

最近話題になってる阿部寛のサイトですが、htmlも古いスタイルで、見てると手を入れたくなります。ここでは、トップページの脱フレーム化と、脱テーブルレイアウトをやってみたいと思います。

脱フレーム化

フレームを使ってるため、最初にリクエストするhtmlを読み込んでから、メニューとコンテンツのhtmlをリクエストしているため、これらのhtmlを一つにまとめるだけでも大幅な速度の改善が見込まれます。

元のhtml

index.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>阿部寛のホームページ</title>
</head>
<frameset cols=18,82>
  <frame src=menu.htm marginheight=0 marginwidth=0 scrolling=auto name=left>
  <frame src=top.htm marginheight=0 marginwidth=0 scrolling=auto name=right>
</frameset><noframes></noframes>

menu.htm

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>メニュー</TITLE>
</HEAD>
<BODY bgcolor="#F0F0FF">
<!--長いので省略-->
</HTML>

top.htm

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.0.2 Trial for Windows">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>阿部 寛のホームページ</title>

<style type="text/css">
<!--
.style1 {color: #FF0000}
-->
</style>
</head>


<body background="image/abehiroshi.jpg">
<br>
<h1 align="center">阿部 寛のホームページ</h1>
<!--長いので省略-->
</body>
</html>

脱フレーム化して一つにまとめたhtml

index.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>阿部寛のホームページ</title>
<style>
html, body {
  margin: 0;
  height: 100%;
}
.frame {
  display: flex;
  height: 100%;
}
.frame-left {
  width: 18%;
  height: 100%;
  overflow: auto;
  background: #F0F0FF;
}
.frame-right {
  width: 82%;
  height: 100%;
  overflow: auto;
  background: url(image/abehiroshi.jpg);
}

.style1 {color: #FF0000}
</style>
</head>
<body>
<div class="frame">
  <div class="frame-left">
    <!--menu.htmのbody内のhtmlが入ります-->
  </div>
  <div class="frame-right">
    <!--top.htmのbody内のhtmlが入ります-->
  </div>
</div>
</body>
</html>

結果

合計のファイルサイズ自体はほとんど変化ありませんが、htmlの読み込み完了が250ms → 120msになりました。体感的にはフレームの方は最初に一瞬真っ白になってから描画されるのに対し、一つにまとめた方は最初から描画されてる感じになります。

当たり前っちゃ当たり前ですが、この点は大事なことで、最初のリクエストで描画する素材が揃ってると圧倒的に早く感じます。爆速と話題のdev.toもcssを別ファイルにしないでhtmlファイルに埋め込み、コンテンツのhtmlも書き出してることが、体感速度をぐっと上げてると思います。

脱テーブルレイアウト化

テーブルレイアウトをやめたり、冗長なhtmlを整理したら、ファイルサイズがだいたい7KB → 4KBになりましたが、別にこのくらいでは速度的には特に顕著な差は見られませんし、スマホ最適化とかもしようとしたけど、ここらへんで僕のモチベーションも尽きました。