Wie prüft man eine Webseite?
Eine Webseite zu prüfen heißt, ihre Struktur, ihre Größe und ihr Ladeverhalten zu messen, bevor Menschen sie benutzen. Dafür brauchen Sie kein Auge, sondern ein kleines Programm, das den Text der Seite liest.
Der Mensaplan lädt in der Bahn auf dem Handy nur langsam, und ein Bild ohne Beschreibung bleibt für Blinde stumm. Beides finden Sie mit einer Prüfung, noch bevor es jemand meldet.
Am Ende dieser Lektion
Notiz
Ich kann eine Seite auf Struktur und Größe prüfen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Alternativtext | der Text, der ein Bild beschreibt | alt="Linsensuppe" |
| Byte | die Einheit für die Größe einer Datei | |
| Statuscode | die Zahl, mit der ein Server meldet, wie eine Anfrage ausging | 200 |
| Cache | eine Kopie, die der Browser behält, um nicht neu zu laden | |
| Prüfung | ein Test, der Fehler einer Seite findet, ohne sie anzusehen |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Eine Prüfung findet Fehler, die man nicht sieht
Ein Browser ist nachsichtig. Er zeigt auch Seiten an, deren HTML Fehler hat. Eine Prüfung sucht diese Fehler gezielt.
Wichtige Punkte: ein title im head, eine Sprache im html-Tag, genau eine h1, keine übersprungene Überschriftenebene und für jedes Bild einen Alternativtext.
Ein Beispiel: fünf Prüfpunkte
| Prüfpunkt | Warum | Fehlermeldung |
|---|---|---|
| `title` fehlt | Der Tab und die Suche zeigen sonst nichts | title fehlt |
| `lang` fehlt | Ein Screenreader weiß nicht, wie er spricht | lang fehlt |
| zwei `h1` | Das Thema der Seite ist unklar | mehr als eine h1 |
| `h1` dann `h3` | Die Gliederung hat ein Loch | ebene uebersprungen |
| Bild ohne `alt` | Blinde erfahren nicht, was zu sehen ist | bild ohne alt |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Finden Sie die Fehler dieser Seite
<h1>Mensaplan</h1>
<h3>Heute</h3>
<img src="https://example.org/suppe.jpg">
<h1>Getränke</h1>
<!-- Welche Prüfpunkte der Tabelle verletzt diese Seite? -->
Die Größe bestimmt die Ladezeit
Jede Datei einer Seite hat eine Größe in Byte. Die Ladezeit ist die Größe geteilt durch die Geschwindigkeit der Verbindung. Je mehr Byte, desto länger dauert es.
Den größten Teil machen meist Bilder aus. Ein Foto vom Handy hat oft zwei Millionen Byte, eine ganze Seite aus HTML, CSS und JavaScript wenige Tausend.
Ein Beispiel: wie lange eine Datei lädt
| Datei | Größe in Byte | Ladezeit bei 1 000 000 Byte pro Sekunde |
|---|---|---|
| Seite aus HTML, CSS und JavaScript | 3 591 | knapp 0,004 Sekunden |
| Foto vom Handy | 2 000 000 | 2 Sekunden |
| Foto verkleinert | 200 000 | 0,2 Sekunden |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Das Lab misst die Dateien einer echten Seite
Die Seite im Lab besteht aus drei Dateien. Das erste Skript misst ihre Größe, das zweite fragt den Server der Vorschau, wie es ein Browser tut.
Beide geben englische Wörter aus, zum Beispiel bytes, total, status und title. Ein Status 200 heißt, die Seite ist da.
Die Größe der drei Dateien messen
docker exec jupyter python3 steps/sizes.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Die Seite vom Server holen
docker exec jupyter python3 steps/serve.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Der Cache spart Anfragen
Der Server schickt mit jeder Datei Kopfzeilen. Cache-Control: max-age=3600 sagt dem Browser, dass er die Datei eine Stunde lang behalten darf. Beim nächsten Besuch lädt er sie nicht noch einmal.
Das spart Zeit und Daten. Ändert sich die Datei, brauchen Sie einen neuen Dateinamen, sonst sehen Besuchende noch die alte Fassung.
Ein häufiger Fehler
Warnung
Viele glauben, eine Seite sei in Ordnung, wenn sie im Browser gut aussieht. Der Browser rät bei Fehlern und zeigt trotzdem etwas an. Prüfen Sie den Text der Seite, nicht nur ihr Bild.
Alle Links der Seite prüfen
docker exec jupyter python3 steps/links.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.