Lekcje z frameworków React i Vue dotyczące szybkości strony

W ciągłym pogoni za szybkością strony często wracamy do tego samego punktu. Pomimo wysiłków zespołów ds. produktu, marketingu i rozwoju mających na celu motywowanie zespołów technicznych, zadania, które mogłyby poprawić wydajność witryny, są często odkładane na później ze względu na konieczność refaktoryzacji, a nawet po ich ukończeniu nie zawsze dają pełne rezultaty. W tym cyklu warto rozważyć kilka wnikliwych perspektyw dotyczących osiągnięcia rzeczywistych wyników. Na przykład, jakie wnioski możemy wyciągnąć z szybkości React.js i Vue.js lub ich rozszerzeń SSR (renderowanie po stronie serwera), takich jak Next.js i Nuxt.js w porównaniu z innymi platformami? Czy nie czas już zoptymalizować MB plików jQuery i CSS? Kiedy przebudzą się duże firmy, które poświęcają wydajność sieci na rzecz źle poinformowanych programistów front-end? Zajmijmy się tymi pytaniami jeden po drugim.

Dlaczego witryny oparte na Next.js i Nuxt.js są szybkie?

Platformy Next i Nuxt, czyli przyjazne dla SEO struktury zbudowane na React i Vue, wyróżniają się szybkością działania. Ale dlaczego te platformy są tak szybkie?

React.js i Vue.js to struktury oparte na komponentach, które dzielą każdą stronę na podkomponenty, jak pokazano poniżej.

Aby zilustrować tę kwestię, weźmy przykład z życia wzięty: stronę z listą e-commerce. Tę stronę z listą można traktować jako zawierającą następujące elementy podrzędne:

• Nagłówek
• Notowania
  • Informacje o wejściu na listę
    • Tytuł strony
    • Nadrzędnych
    • Liczba produktów
  • FILTRY
    • Filtr kategorii
    • Filtr cen
    • ...
  • Sortowanie
  • Karty produktów
    • Zdjęcie produktu
  • Szczegóły Produktu
    • Nazwa produktu
    • Cena produktu
      • Cena przekreślona
      • Cena sprzedaży
    • Przecena
    • Informacje o kampanii
  • Paginacja
  • Treść kategorii
• Footer

Podczas tworzenia aplikacji opartej na komponentach za pomocą Nuxt.js każdy z tych komponentów jest kodowany osobno i uwzględniany na stronie wzorcowej. Rozważmy na przykład plik o nazwie ProductPhoto.js. Niezależnie od funkcji potrzebnych do zdjęć produktów (karuzela, responsywne wyświetlanie obrazu itp.), kod JS jest zapisany w tym komponencie. Podobnie zawarte są w nim tylko pliki CSS używane przez ten komponent. Oznacza to, że jeśli komponent jest używany, wykonywane są tylko pliki wymagane przez każdy komponent.

Jak ten proces jest obecnie obsługiwany na większości platform internetowych?

Plik script.js zawiera kod wszystkiego, od członkostwa, filtrów i stron koszyka po menu działające na wszystkich stronach. Wynik? 

Strony internetowe z Plik JS o wielkości 3 MB i CSS o wielkości 1.5 MB plik. Głównym problemem nie są tylko rozmiary plików, ale fakt, że nie można oczekiwać, że procesor przeciętnego urządzenia mobilnego z systemem Android wykona tysiące linii kodu w ciągu milisekund. Uruchamiając tylko potrzebny kod, możesz osiągnąć wzrost wydajności.

Jak wyeliminować zasoby blokujące renderowanie?

Obecnie 32% z 1 miliona najpopularniejszych witryn internetowych korzysta z biblioteki czcionek Font Awesome, której średni rozmiar wynosi około 250 KB. Biorąc pod uwagę, że ładowanie asynchroniczne nie jest preferowane ze względu na efekt muśnięcia, zastanów się, ile czcionek jest widocznych na pierwszym ekranie strony otwieranej na urządzeniu mobilnym lub komputerze stacjonarnym. Krótkie badanie na 50 różnych platformach wykazało, że używane było średnio 3.4 ikony (najczęściej: koszyk, użytkownik, menu, powiadomienie). Zatem, aby bez problemów załadować tylko cztery ikony, ładujemy całą bibliotekę.

Jak radzą sobie z tym zaawansowane frameworki JS? Importując tylko ikony w formacie SVG używane w odpowiednim komponencie, eliminując potrzebę ładowania całych bibliotek czcionek lub CSS.

Co mówi nam użycie Bootstrap i React JS?

Biblioteka Bootstrap JS ma udział w rynku wynoszący 26% we wszystkich witrynach na całym świecie, podczas gdy wykorzystanie React wynosi około 4%. Bootstrap jest popularny ze względu na swoją elastyczność i łatwość użycia, umożliwiając szybki rozwój. Jednak ta elastyczność ma swoją cenę: ogólne funkcje JS, szeroki zakres kodu i funkcje, których możesz nigdy nie używać, są zawarte w Twoim projekcie.

Zapytajmy więc: co oznacza ponad 100% wzrost użycia z wskazuje 10,000 1,000 do XNUMX najlepszych witryn? Pokazuje, że najlepsi zamieniają szczegóły na swoją korzyść, aby być jeszcze lepszymi.

Podsumowując, zamiast przepisywać nasze witryny za pomocą technologii takich jak Następnie Nuxt, Angular, React, Vueitp., powinniśmy zrozumieć, jaki wpływ mają te technologie na szybkość, i zastosować te najlepsze praktyki w naszych aplikacjach internetowych.