Frontend-Checkliste für Websites
Performance
Allgemeines
- HTTP / 2 wird verwendet
- CDN wird für statische Dateien verwendet
- CDN wird für Inhaltsseiten verwendet
- Cookie-Less Domain wird für statische Dateien verwendet
- DNS-Prefetching wird verwendet
-
<link rel="preload" as="script">
(CSS, JS und Schriftarten) -
<link rel="dns-prefetch">
(für Domain, die statische Ressourcen bereitstellt, z. B .: Images und Tracking-Tools)
-
Ressourcen
JavaScript in einer Datei zusammengefasst
JavaScript wurde minimiert
JavaScript ist komprimiert
Kein JavaScript Inline
CSS in einer Datei zusammengefasst
CSS minimiert
CSS ist komprimiert
CSS: Keine Verwendung von @import
Kein CSS-Inline
HTML minimiert
Statische Dateien werden mit gzip oder brotli komprimiert
Statische Dateien werden auf dem Server vorkomprimiert
HTML wird mit gzip oder brotli komprimiert
Verwendung korrekter Bildformate
Verwendung von responsiven Bildern
Bilder werden optimiert (ImageOptim…)
Bilder werden im Browser zwischengespeichert
SVG-Dateien werden minimiert
Soweit möglich werden SVG-Dateien verwendet
Es werden nur Schriftarten geladen, die verwendet werden
Der Browser-Cache wird effizient verwendet
ETags wird nicht verwendet
Expires, Cache-Control und Max-Age-Header für statische Ressourcen werden auf 1 Jahr gesetzt
Asynchrones oder verzögertes Laden nicht kritischer Inhalte
Verfolgung von asynchron geladenen Skripts
Messungen
Normalerweise messe ich hier die Hauptseiten eines Projekts.
- Anzahl aller Dateien
- Größe aller Dateien zusammen
- Ladezeit der Seite
- Google Page Speed-Analyse (Desktop, Mobile und Mobile UX; x von 100)
- SpeedIndex
Rendering-Leistung
- Intrinsische Bildgrößen werden im Markup angegeben
- CSS wird in den Dokumentenkopf geladen
- Skripte werden am Ende des Dokuments geladen
- Skripte werden mit dem Attribut verzögert geladen
- Skripte werden in den Dokumentkopf geladen, nachdem Stile geladen wurden
- Das Scrollen ist mit 60 Bildern pro Sekunde möglich
-
Keine Verwendung von
document.write
- CSS-Animationen, die das Layout (Reflow) verursachen, werden nicht stark verwendet
Geräteleistung
- CPU auslastung
- Speichernutzung
- GPU-Nutzung
Cross-Browser
- Die Website wird auf allen aktuellen Desktop-Browsern geladen (Safari, Firefox, Chrome, IE11, EDGE)
- Website wird in allen aktuellen mobilen Browsern geladen (Chrome für Android, iOS Safari)
- Für Shops: Checkout ist auf allen erforderlichen Geräten und Browsern verwendbar
- Viewport-Meta-Tag wird korrekt verwendet
- Verwendung korrekter Eingabetypen
SEO
Seiten können indiziert werden
Die mobile Version der Website ist verfügbar
HTTPS wird auf allen Seiten verwendet
Sitemap ist verfügbar
Strukturierte Daten werden soweit möglich verwendet
Überschriften verwendet
Schlagzeilen in der richtigen Reihenfolge
Verwendete Meta-Beschreibungen
Verwendete Meta-Schlüsselwörter
Metatitel ist korrekt gefüllt
In Schlagzeilen verwendete Schlüsselwörter
Bilder verwenden das
alt
-attributLinks verwenden ein Titelattribut
Links in der Navigation verwenden kein
title
-attributeKein doppelter Inhalt
Verwendung absoluter URLs
Interne Links verweisen auf die HTTPS-Version der Seite
Umleitungen werden mit 301 durchgeführt
Keine 404-Fehler
Keine 500 Fehler
Gegebenenfalls werden kanonische Tags verwendet
Das Verhältnis von Code und Inhalt beträgt für Shop-Seiten ca. 25% und für Content-Seiten 50%
Zugänglichkeit
- Farbkontrast ist gut (WCAG 2.0)
- Es werden WAI-ARIA-Rollen verwendet
- Verwendung von zugänglichen Elementen wie Navi, Fußzeile und Seite
- URLs sind zugänglich
- Tastaturzugriff ist verfügbar
- Es werden korrekte Eingabetypen verwendet
Sicherheit
- HTTPS wird auf allen Seiten verwendet
- Die Seiten enthalten keinen gemischten Inhalt
- Externe Plugins und Trackings werden über HTTPS geladen
- Robots.txt wird verwendet
- Cross-Site-Scripting ist nicht möglich
- HSTS-Header ist gesetzt
- Content-Security-Policy ist festgelegt und erlaubt nur bestimmte Hosts und keine Inline-Skripts
Mehr
- Strikte Nutzung der Domain mit oder ohne WWW
- Korrekte Sprache im HTML-Tag eingestellt
- Zeichensatz ist gesetzt
- HTML ist gültig
- 404-Seite ist verfügbar
- Ein spezielles Druck-Stylesheet ist vorhanden
Server
- Vom Server eingestellte korrekte Sprache
- Korrigieren Sie die vom Server festgelegten Inhaltstypen