Web-Performance

Diese Seite vereint sieben kostenlose Werkzeuge zur Überwachung und Erleichterung des Ladens einer Website. Seitengewicht zählt Ressourcen zusammen und zeigt die Ladezeit, Performance-Budget setzt Obergrenzen pro Ressourcentyp, und Responsive Bilder erzeugt srcset und sizes. Lazy-Loading-Audit, Kritisches CSS, Preload-Hinweise und Website-Geschwindigkeitstest vervollständigen das Set. Sie helfen Webteams, Optimierungen zu priorisieren. Sie erfordern keine Anmeldung und laufen im Browser.

Beginnen Sie mit Seitengewicht, um das Gesamtvolumen zu sehen. Performance-Budget hilft dann, Obergrenzen festzulegen. Responsive Bilder erzeugt srcset und sizes für ein Bild, während Lazy-Loading-Audit Bilder findet, die das erste Rendern blockieren. Kritisches CSS isoliert Regeln für den sichtbaren Bereich, Preload-Hinweise setzt link-rel-preload-Tags zusammen, und Website-Geschwindigkeitstest misst mehrere Phasen. Beginnen Sie mit der Diagnose und gehen Sie dann zu den Korrekturen über.

Bedienung

Beginnen Sie mit dem Seitengewicht, um Ressourcen zu addieren und das Gesamtvolumen zu ermitteln, bevor Sie etwas korrigieren.
Legen Sie dann Grenzen mit dem Leistungsbudget fest und behandeln Sie Bilder mit responsive Bilder und Lazy-Loading-Audit.
Für das erste Rendern verwenden Sie Kritisches CSS, dann Preload-Hinweise, um die nützlichen link-rel-preload-Tags zusammenzustellen.
Schließen Sie mit dem Website-Geschwindigkeitstest ab, um DNS, Verbindung, erstes Byte und Download zu messen, und vergleichen Sie dann mit der ersten Diagnose.

Häufige Fragen

Welches Werkzeug gibt einen Überblick über das Gesamtgewicht?

Seitengewicht zählt Ihre Ressourcen zusammen und zeigt die Ladezeit. Es ist ein guter Ausgangspunkt, um das Volumen zu verstehen. Das Werkzeug ist kostenlos und erfordert keine Anmeldung.

Wofür ist ein Performance-Budget gedacht?

Performance-Budget setzt Obergrenzen pro Ressourcentyp. Es hilft, während der Entwicklung klare Limits einzuhalten. Das Werkzeug ist kostenlos, erfordert keine Anmeldung und bleibt in Ihrem Browser.

Kann ich responsive Bilder vorbereiten?

Ja. Responsive Bilder erzeugt srcset und sizes für ein Bild. Lazy-Loading-Audit kann dann helfen, Bilder zu finden, die das erste Rendern blockieren. Beide Werkzeuge sind kostenlos und erfordern keine Anmeldung.

In welcher Reihenfolge sollte ich Bilder auf einer langsamen Seite behandeln?

Messen Sie zuerst das Volumen mit dem Seitengewicht. Bereiten Sie dann Varianten mit responsive Bilder vor und prüfen Sie mit dem Lazy-Loading-Audit, welche Bilder das erste Rendern blockieren. Behalten Sie das Leistungsbudget, um Obergrenzen festzulegen, bevor Sie neue Ressourcen hinzufügen. Diese Reihenfolge verbindet Messung, Vorbereitung und Prüfungen.

Wann sollte ich Kritisches CSS und Preload-Hinweise verwenden?

Kritisches CSS isoliert Regeln für den ersten sichtbaren Bereich, damit das erste Rendern schneller erfolgen kann. Preload-Hinweise stellen die nützlichen link-rel-preload-Tags für wichtige Ressourcen zusammen. Verwenden Sie sie nach der Diagnose und prüfen Sie die Wirkung mit dem Website-Geschwindigkeitstest. Diese Kombination unterstützt eine schnellere erste Ansicht nach der Diagnose.