Time to Interactive (TTI) (Czas do pełnej interaktywności)

Philip Walton

Czas do interakcji (TTI) to wskaźnik laboratoryjny służący do pomiaru responsywności wczytywania. Pomaga identyfikować przypadki, w których strona wygląda jako interaktywna, ale w rzeczywistości nie jest. Szybkie TTI pomaga zapewnić użyteczność strony.

Co to jest TTI?

Dane TTI to czas od momentu rozpoczęcia wyświetlania strony może się wczytywać po wczytaniu głównych zasobów podrzędnych. szybko reagować na dane wejściowe użytkownika.

Aby obliczyć TTI na podstawie skuteczności log czasu na stronie, wykonaj te czynności:

  1. Zacznij od Pierwsze wyrenderowanie treści (FCP).
  2. Wyszukaj do przodu w czasie ciche okno trwające co najmniej pięć sekund, gdzie okno ciszy jest zdefiniowane jako: nie długi i maksymalnie 2 w trakcie wyświetlania żądań GET dla sieci.
  3. Wyszukaj ostatnie długie zadanie przed oknem cichym, kończąc je FCP, jeśli nie znaleziono długich zadań.
  4. TTI to czas zakończenia ostatniego długiego zadania przed okresem spokojnego (lub taką samą wartość jak FCP, jeśli nie znaleziono długich zadań).

Poniższy diagram powinien pomóc zwizualizować te kroki:

Oś czasu wczytywania strony pokazująca, jak obliczyć TTI

W przeszłości deweloperzy optymalizowali strony pod kątem krótkiego czasu renderowania, czasem kosztem TTI.

Techniki takie jak renderowanie po stronie serwera (SSR) mogą prowadzić do sytuacji, w których wygląda jako interaktywny (np. linki i przyciski są widoczne na ekranie), ale faktycznie interaktywny, ponieważ wątek główny jest zablokowany lub bo kod JavaScript kontrolujący te elementy nie został wczytany.

Gdy użytkownicy próbują wejść w interakcję ze stroną, która wygląda na interaktywną, ale w rzeczywistości nie, ale prawdopodobnie zareaguje na jeden z dwóch sposobów:

  • W optymalnej sytuacji może irytować ich, że strona reaguje zbyt wolno.
  • W najgorszym przypadku zakładamy, że strona jest uszkodzony i prawdopodobnie wyjdź z domu. Może nawet stracić zaufanie do wartości Twojej marki lub zaufania do niej.

Aby uniknąć tego problemu, dołóż wszelkich starań, aby zminimalizować różnicę między FCP a TTI. A gdy zaistnieje znacząca różnica, – jasno zasygnalizuj za pomocą wizualnych wskaźników, że komponenty na stronie nie są jeszcze interaktywny.

Jak mierzyć dane TTI

TTI to wskaźnik, który najlepiej mierzyć w . Najlepszym sposobem pomiaru TTI jest użycie Audyt wydajności witryny w Lighthouse. Zobacz dokumentację Lighthouse: TTI – szczegóły wykorzystania.

Narzędzia laboratoryjne

Jaki jest dobry wynik TTI?

Aby zapewnić użytkownikom wygodę, witryny powinny mieć czas Interaktywność krótsza niż 5 sekund w przypadku testowania na przeciętnym urządzeniu mobilnym sprzęt.

Aby dowiedzieć się więcej o wpływie TTI strony na wynik wydajności w Lighthouse, Więcej informacji znajdziesz w artykule Jak Lighthouse określa TTI .

Jak ulepszyć funkcję TTI

Aby dowiedzieć się, jak ulepszyć TTI w konkretnej witrynie, możesz uruchomić narzędzie Lighthouse audytu wydajności i zwracania uwagi na konkretne możliwości proponowanych w trakcie audytu.

Aby dowiedzieć się, jak ogólnie ulepszyć funkcję TTI (w dowolnej witrynie), zapoznaj się z tymi artykułami przewodniki po skuteczności: