Wpływ CSS View Transitions na wydajność stron internetowych

Wpływ View Transition API na wydajność

View Transition API umożliwia programistom włączenie płynnych wizualnych przejść między widokami na tej samej stronie, nawet w przypadku aplikacji wielostronicowych (MPA). Te view transitions są obsługiwane przez CSS transitions między 2 widokami strony. Historycznie CSS transitions podczas ładowania strony powodowały opóźnienie metryk LCP. Podejrzewaliśmy, że tego typu przejścia między stronami również mają wpływ na wydajność, szczególnie na urządzeniach mobilnych i wolniejszych procesorach. Nasze badania i dane z real-user monitoring (RUM) potwierdziły te podejrzenia wraz z innymi interesującymi spostrzeżeniami dotyczącymi wpływu na Core Web Vitals, zwłaszcza Largest Contentful Paint (LCP).

>

Wyniki danych RUM

Aby zweryfikować nasz pomysł, że view-transition negatywnie wpływa na Largest Contentful Paint, przeprowadziliśmy serię A/B testów na 5 różnych stronach i prowadziliśmy je przez 7 dni. Na 50% wyświetleń strony dodaliśmy @view-transition { navigation: auto;} do arkuszy stylów strony, podczas gdy pozostałe 50% wyświetleń było serwowanych bez tych stylów.

Zebraliśmy ponad 500 000 wyświetleń stron, z których ostatecznie przeanalizowano 120 000 mobilnych wyświetleń, ponieważ pochodziły one z mobilnych nawigacji w obrębie tej samej strony.

Dane z real-user monitoring wykazały, że implementacja View Transition API dodaje około 70ms do Largest Contentful Paint dla powtórnych mobilnych wyświetleń strony. Ten wzrost czasu LCP jest znaczący, biorąc pod uwagę zalecenie Google, że LCP powinien wystąpić w ciągu 2,5 sekundy od momentu rozpoczęcia ładowania strony dla dobrego user experience.

Korelacja z wydajnością CPU

Po potwierdzeniu negatywnego wpływu view transitions na LCP, przeprowadziliśmy dalsze badania. Przystąpiliśmy do przeprowadzenia serii eksperymentów, aby automatycznie przetestować te same 2 strony z view transitions i bez nich. Wyniki pokazują wyraźną korelację między szybkością CPU a wpływem view transitions na LCP. Ustalenia wskazują, że im wolniejszy CPU, tym bardziej wyraźny negatywny wpływ na LCP przy użyciu view transitions

Konfiguracja	Z View Transition	Bez View Transition	Różnica (ms)
Bez throttlingu + cache sieciowy	287 ms	282 ms	5 ms
Bez throttlingu + bez cache sieciowego	338 ms	311 ms	37 ms
6x spowolnienie CPU + cache sieciowy	527 ms	523 ms	4 ms
6x spowolnienie CPU + bez cache sieciowego	442 ms	413 ms	29 ms
20x spowolnienie CPU + cache sieciowy	756 ms	716 ms	40 ms
20x spowolnienie CPU + bez cache sieciowego	1281 ms	1204 ms	77 ms

Jeśli chcesz to przetestować samodzielnie, odwiedź naszą stronę eksperymentu view transition na github

Te wyniki podkreślają trzy kluczowe obserwacje:

• View transitions spowalniają LCP: Wyświetlenia stron z view transitions są wolniejsze niż wyświetlenia bez efektów view transition.
• Szybkość CPU jest ważnym czynnikiem: Szybkość CPU ma wysoką korelację z różnicą LCP w widokach z efektami page transition i bez nich
• Istnieje 'sweet spot' szybkości strony: Przy 6x spowolnieniu LCP ma lepszą wydajność bez cache sieciowego. Prosty powód jest taki, że przy tej szybkości CPU element LCP nie został jeszcze zdekodowany bez cache sieciowego i przejście jest stosowane do pustej strony. Natychmiast po prostszym przejściu do pustej strony element LCP jest renderowany. Najwyraźniej jest to sweet spot, w którym bardziej efektywne jest przejście do pustej strony niż przejście między obrazami. Z perspektywy UX lepiej jest oczywiście przechodzić między obrazami.

Zrozumienie view-transition: navigation: auto;

Tradycyjnie implementacja view transitions wymagała intensywnego użycia CSS i JavaScript. View Transition API upraszcza ten proces, umożliwiając programistom deklaratywne definiowanie przejść. View transition API działa poprzez przechwytywanie zrzutów starego i nowego stanu dokumentu, aktualizowanie DOM przy jednoczesnym wstrzymaniu renderowania i wykorzystywanie CSS animations do wykonania przejścia.

Przykład implementacji

Oto podstawowy przykład użycia view-transition-name: auto w CSS:

@view-transition {
  navigation: auto;
}

Lub w połączeniu z media query do targetowania tabletów lub urządzeń desktopowych:

@media (min-width: 768px){
  @view-transition{
    navigation:auto
  }
}

Ten prosty dodatek pozwala przeglądarce automatycznie obsługiwać przejście tego elementu, gdy następuje view transition.

Równowaga między estetyką a wydajnością

View Transition API oferuje płynne i potencjalnie wizualnie przyjemne przejścia między nawigacjami. To może prowadzić do niewielkich korzyści w metrykach biznesowych, takich jak niższy współczynnik odrzuceń i potencjalnie wyższa sprzedaż. Jednak szczególnie na przeglądarkach niskiej klasy, takich jak urządzenia mobilne, programiści muszą dokładnie rozważyć implikacje wydajnościowe. Oto moje rekomendacje:

• Testowanie wydajności: Przeprowadź dokładne testy na różnych urządzeniach i warunkach sieciowych, aby upewnić się, że korzyści z view transitions przewyższają potencjalne koszty wydajnościowe.
• Selektywna implementacja: Bądź ostrożny przy stosowaniu view transitions. Przetestuj ich wpływ na wydajność i metryki biznesowe. Następnie dokładnie rozważ, na jakich typach urządzeń wdrożyć view transitions.