ページの構造とサイズを点検する

ページの点検は、公開する前に、構造の誤りと、ファイルの重さを調べる作業です。見た目が正しくても、題がなかったり、画像に説明がなかったりするページは、人にも検索エンジンにも不親切です。

学食のメニューページを例に、点検の項目と、サイズの見方を学びます。

点検では、たとえば、ページに題があるか、画像に alt があるか、h1 は1つだけか、見出しの段を飛ばしていないかを調べます。

機械で調べられる決まりは、スクリプトにすると、何度でも同じ基準で確かめられます。

html = "<img src='a.png'><img src='b.png' alt='焼き魚'><img src='c.png'>"
without_alt = 0
# img の始まりごとに、中身を調べる。
for piece in html.split("<img")[1:]:
    tag = piece.split(">")[0]
    if "alt=" not in tag:
        without_alt = without_alt + 1
print("alt のない画像:", without_alt)

# 練習: c.png に alt='野菜' を足して、もう一度 Run しましょう。

ページの重さは、バイトで測ります。1000バイトが、約1キロバイトです。HTML、CSS、JavaScript のファイルが大きいほど、受け取る時間が長くなります。

遅い回線では、差が目立ちます。必要のないものは足さないのが基本です。

ラボのページの3つのファイルの大きさを、スクリプトが出します。もう1つのスクリプトは、ページを配る、ラボの小さなサーバーに、実際に頼んでみます。

出る言葉は英語です。bytes はバイト、total は合計、status は状態番号、title はページの題です。

docker exec jupyter python3 steps/sizes.py

docker exec jupyter python3 steps/serve.py

ブラウザは、ページを開くとき、まず HTML を頼みます。HTML の中の link と script を見つけると、CSS と JavaScript も頼みます。

サーバーは、状態番号と、ファイルの種類を付けて答えます。200 は成功で、404 は、ファイルがないことです。

キャッシュは、一度受け取ったファイルを手元に残して、次は使い回す仕組みです。

サーバーが、しばらくは同じだと答えれば、ブラウザは、通信せずに済みます。ファイルを変えたときは、名前も変えて、古いものを使わせないようにします。