はじめまして。Yash です。
インドから、日本のWeb制作に関わっています。今回、自社のホームページである WebOmega のサイトを、数週間かけて見直す機会がありました。コードを最初から最後まで読んで気づいたことと、その裏側で実際に起きていたことを、ここに残しておきたいと思います。
Yash（WebOmega エンジニア）
インドを拠点に、日本のWebサイト制作と、社内システムの構築・保守を担当しています。コードの細部に宿る丁寧さを大切にしながら、日々開発に向き合っています。
読んだのは26ファイル、9,661行でした。
読み終えて思ったのは、土台はちゃんとしている、ということでした。構造化データ、アクセシビリティ、出力のエスケープ。どれも丁寧に書かれていて、直す必要はありませんでした。
そのうえで、手を入れたほうがいい箇所が残っていました。どれも「ひどい」という話ではありません。運用を続けていれば、こうなります。
1枚のロゴが888KB
ヘッダーのロゴが 4082×851ピクセル、888KB ありました。画面に出ている大きさは 220ピクセルです。18倍の画像を、全ページで読み込んでいたことになります。
元データを開いたら、完全にアウトライン化されたベクターでした。それならSVGで書き出すのが一番いい。888KB が 5.2KB になりました。フッターのアイコンも 105KB から 1.5KB。全ページ共通の読み込み量が、約993KBから約26KBです。
棒の高さは実際の比率です。右側が細く見えますが、間違いではありません。
見た目は変えていません。差し替えの前後でロゴの描画幅を測って、191.86ピクセルと191.99ピクセル。0.13ピクセルの差は、曲線のふちの処理の違いです。
存在しないページが「あります」と答えていた
/abou.php のような打ち間違いのURLが、トップページの内容を「200 OK」で返していました。
ブラウザで開くと普通にトップページが出ます。だから誰も気づきません。ただ検索エンジンから見ると、同じ内容のページが無限にある状態です。
診断の時点では「404の指定が無いだけ」と書きました。ところが直す段になって、そうではないと分かりました。該当ファイルの無いURLを全部トップへ転送する設定が入っていて、それが効いている限り、サーバーは「見つからなかった」と判断する前に処理を終えてしまう。転送そのものを外す必要がありました。
自分が書いた診断書を訂正するところから始めることになりました。
ここがいちばん時間を使ったところです
セキュリティヘッダーを追加しました。設定ファイルに10行ほど書いて、反映して、確認のコマンドを打ちました。
何も返ってきません。
設定ファイルは読まれています。同じファイルに書いた404の指定はちゃんと効いていて、404ページも出る。なのにヘッダーだけが1つも付かない。
調べてみると、そのサーバーではヘッダーを付けるための機能が有効になっていませんでした。書いた指定が、まるごと無視されていたわけです。エラーも警告も出ません。設定ファイル自体は何も間違っていないので、ファイルを何度読み返しても分かりません。
これは怖いことだと思いました。作業としては終わっています。コードも正しい。でも実際には何も起きていない。確認しなければ「やりました」で終わっていました。
サーバーの機能を待たずに済むよう、PHPから同じヘッダーを送るようにしました。
直った瞬間に、別の問題が出た
先週、本番に反映しました。ヘッダーは付きました。それだけでなく、無効だった機能のほうも、いつの間にか有効になっていました。
そうしたら今度は別のことが起きました。CSSの応答に、キャッシュの指定が2行返るようになったのです。片方は「1年そのまま使ってよい」、もう片方は「毎回確認しろ」。後から来たほうが、前を打ち消します。
結果として、ページを移動するたびにCSSを丸ごと取り直す状態になっていました。速くするための変更が、逆に働いていたわけです。
これも、画面を見ているだけでは分かりません。
明朝体が、8ページで消えていた
もうひとつ、日本語のサイトならではだと感じたものを書かせてください。
見出しに明朝体を指定している行がありました。ところが8ページが、その書体を読み込んでいませんでした。指定だけがあって、フォントが来ていない。そのページの見出しは、意図しない別の書体で表示されていました。
英語のサイトでも似たことは起きます。ただ日本語は、明朝とゴシックで受ける印象がはっきり変わります。同じ文章でも、硬さや丁寧さの感じ方が違う。だから「なんとなく揃っていない」では済まず、ページごとに人格が変わってしまう。
日本のWebに関わるようになって、こうした細部が意味を持つ場面に何度も出会いました。行間、字間、改行の位置。読みやすさの基準が、自分が慣れていたものとは少し違います。そこを合わせにいく作業が、私はけっこう好きです。
作って終わり、ではないということ
今回いちばん書いておきたいのは、ここです。
ホームページは、公開した時点では完成しません。設定が効かなくなることもあれば、サーバー側の変更で挙動が変わることもあります。今回はその両方が起きました。
そして、そのどれも、画面を見ているだけでは分かりませんでした。コマンドを打って、返ってきたものを読んで、はじめて分かった。
これからホームページを頼まれるなら、作ったあとに誰が、どうやって確認するのかを聞いてみてください。表示速度も、検索での見え方も、安全性も、見た目には出ません。出ないものを、出るようにして確かめる。それが仕事の半分だと思っています。