Co nowego u Aurory?

Kara Erickson
Kara Erickson
X

Inicjatywa Aurora w Chrome powstała dzięki współpracy Chrome z platformami i narzędziami JavaScript typu open source, które mają na celu poprawę wrażeń użytkowników internetu. Jeśli dopiero zaczynasz korzystać z aplikacji Aurora, przeczytaj wpis z wprowadzeniem, aby dowiedzieć się więcej o naszej misji i metodologii.

Ponieważ nie opublikowaliśmy żadnego planu od 2021 roku, chcemy podzielić się naszymi doświadczeniami i kilkoma ekscytującymi projektami, które czekają na nas na rok 2023.

Najnowsze informacje o projekcie

Od kilku lat współpracujemy z platformami takimi jak Next.js, Angular i Nuxt, aby optymalizować podstawowe wskaźniki internetowe. Oto kilka najważniejszych informacji od naszej ostatniej aktualizacji.

zdjęcia;

Obrazy są często źródłem problemów z wydajnością. Oto niektóre metody, które wspólnie z zainteresowanymi osobami odpowiedzialnymi za platformę dążą do udostępnienia sprawdzonych metod, dzięki którym deweloperzy mogą domyślnie wyświetlać obrazy w optymalny sposób, gdy korzystają z platform, z którymi współpracujemy.

Dyrektywa w sprawie obrazu w Angular

Opublikowaliśmy dyrektywę w sprawie stabilnego obrazu dla platformy Angular, dostępnej w Angular 15, a specjalnie dla wersji 13.4 i 14.3. Ta dyrektywa domyślnie włącza natywne leniwe ładowanie, dodaje fetchpriority wskazówki do obrazów priorytetowych i automatycznie generuje odpowiednie atrybuty srcset dla obrazów elastycznych.

Wpływ: testy laboratoryjne Lighthouse zostały przeprowadzone w środowisku kontroli jakości Land's End przed użyciem dyrektywy dotyczącej obrazów i po jej zakończeniu. Na komputerach mediana największego wyrenderowania treści (LCP) spadła z 12,0 s do 3,0 s, co stanowi wzrost LCP o 75%.

Porównanie paska zdjęć: witryna pierwsza z natywnymi tagami graficznymi i witryna druga z dyrektywą Angular dotyczącą obrazów.

Więcej informacji o tej dyrektywie znajdziesz w poście na blogu Optimizing Images with Angular image field.

Ulepszona next/image

Pracowaliśmy również z zespołem Next.js nad zaktualizowaniem komponentu obrazu, aby wykorzystywał nowe funkcje przeglądarki, takie jak natywne leniwe ładowanie i atrybut HTML fetchpriority. Nowa wersja jest domyślnie dostępna od Next 13.

Wpływ : nasz partner Leboncoin przeszedł na nową wersję next/image, aby poprawić wskaźnik LCP niektórych stron nawet o 60%.

Czcionki internetowe

Właściwa optymalizacja czcionek na stronie internetowej może być trudnym zadaniem, ponieważ wymaga ona więcej niż zmniejszenia rozmiaru transferu czcionek. Czcionki internetowe mogą też mieć istotny wpływ na wartość skumulowanego przesunięcia układu (CLS) strony, a zminimalizowanie przesunięć układu z powodu zamiany czcionek wymaga sporo wysiłku. Na szczęście nawiązaliśmy współpracę z platformami, aby jeszcze bardziej ułatwić pracę programistom stron internetowych.

Narzędzia do tworzenia lepszych kreacji zastępczych czcionek w językach Next.js, Nuxt i Vite

W Next 13 wprowadziliśmy funkcję, która dostosowuje wymiary czcionki zastępczej na stronie, aby lepiej ją dopasować do czcionki internetowej podczas ładowania strony. Zmniejsza to wartość CLS związaną z czcionkami. Udostępniliśmy metodologię zespołowi Nuxt i staliśmy się inspiracją do stworzenia modułu nuxtjs/fontaine i wtyczki fontaine Vite, które wykorzystują ten sam podstawowy algorytm.

Wpływ: na niektórych stronach, na niektórych stronach, nasz partner, Vox Media, ograniczył CLS w The Verge do 0.

Więcej informacji na temat generowania ulepszonych zastępczych czcionek i narzędzi platformy do tworzenia zastępczych czcionek można znaleźć w postach na naszym blogu.

Moduł nuxtjs/google-fonts

We współpracy z zespołem Nuxt opracowaliśmy moduł do optymalizacji działania czcionek Google. Moduł automatycznie pobiera czcionki Google i hostuje je samodzielnie, co pozwala uniknąć dodatkowej pracy serwera i obsługuje opcje wstawiania czcionek.

Skrypty innych firm

Kod JavaScript firmy zewnętrznej może być potencjalnym źródłem problemów z wydajnością i może wpływać na dane takie jak interakcja z kolejnym wyrenderowaniem (INP), ponieważ praca związana z harmonogramem tych skryptów może opóźnić uruchamianie interakcji użytkowników.

Komponent next/script na potrzeby skryptów firm zewnętrznych

Stworzyliśmy komponent skryptu na potrzeby Next 12+, który domyślnie wczytuje skrypty po nawodnieniu, aby zapobiec blokowaniu ścieżki krytycznej podczas wczytywania. Dostępny jest też tryb instancji internetowej, który integruje Partytown, aby całkowicie przenosić skrypty z wątku głównego.

Wpływ: w testach laboratoryjnych w Lighthouse CareerKarma odnotował 24-procentowy spadek LCP przy zastosowaniu urządzeń next/script component z włączonym trybem instancji roboczej.

Porównanie taśmy filmowej pokazujące improwizację w LCP

Więcej informacji znajdziesz na naszym blogu w artykule Optymalizowanie wczytywania skryptów firm zewnętrznych w Next.js.

Różne

Nasza współpraca z programistami platform nie kończy się na poprawie podstawowych wskaźników internetowych. Pracujemy również nad wykorzystaniem jak największej liczby nowości i ułatwiamy deweloperom rozpoczęcie korzystania z najnowocześniejszych funkcji platformy internetowej.

Polyfill zapytań dotyczących kontenera

Do wersji 1.0 zaktualizowaliśmy kod polyfill zapytań w kontenerze, aby obsługiwał szerszy zestaw funkcji CSS i poprawiliśmy jego wydajność.

Więcej informacji znajdziesz w poście na naszym blogu Inside the Container Query Polyfill (Polyfill)

Co dalej z Aurorą?

W latach 2023–2024 zamierzamy zrealizować kilka ciekawych projektów mających na celu optymalizację podstawowych wskaźników internetowych dla deweloperów platform.

W nadchodzącym roku skupimy się na następujących kwestiach:

  • Komponenty opakowań innych firm dla Next.js i Nuxt: komponenty tego pakietu mogą ułatwić wczytywanie popularnych bibliotek zewnętrznych w optymalny sposób pod kątem LCP i INP. Upuść tag komponentu w DOM, aby wczytać platformę 3P zamiast tagu skryptu, a platforma wybierze najlepszą strategię wczytywania. Więcej informacji znajdziesz w specyfikacji RFC.

  • Angular SSR i doświadczenie w dziedzinie nawodnienia: ściśle współpracujemy z zespołem Angular nad projektem SSR i hydratacji. Naszym celem jest ulepszenie środowiska dla programistów korzystających z SSR, co pozwoli na korzystanie z zalet LCP większej liczbie aplikacji. Wkrótce podamy oficjalny dokument RFC dotyczący funkcji manipulacji DOM SSR.

  • Dyrektywa Angular i funkcje nuxt/image: dla Angular zamierzamy wprowadzić wiele ciekawych funkcji, takich jak automatyczne generowanie podpowiedzi dotyczących wstępnego łączenia oraz narzędzia migracji ułatwiające przejście od podstawowych elementów <img>, obsługę elementów <picture> i obiektów zastępczych. Będziemy też konsultować się z zespołem Nuxt w sprawie nowych funkcji w usłudze nuxt/image.

  • Badania INP (różne platformy): w 2024 r. Interaction to Next Paint (INP) zastąpi opóźnienie po pierwszej interakcji (FID), a tym samym zwiększymy obsługę INP w platformach. Obejmuje to analizę przyczyn problemów z INP w platformach i w miarę możliwości stworzenie wbudowanych rozwiązań dla użytkowników tej platformy.

  • Prędkościomierz 3: pomagamy też wdrożyć nową generację narzędzia do analizy porównawczej Prędkościomierz, aby dostosować je do współczesnego krajobrazu sieci w 2023 r.

Bądź na bieżąco

Dodaj naszą stronę docelową do zakładek, aby być na bieżąco z najnowszymi wiadomościami, rozmowami technicznymi i postami na blogu od zespołu Aurora. Możesz też obserwować nas na Twitterze: