Optymalizacja Vue - page speed

0

Potrzebuję zoptymalizować CMS napisany w Vue na mobilce, SSR jest używany. Najbardziej zależy mi na Total Blocking Time, bo ma on największy impakt na wynik, a widać że jest z nim problem. Z drugiej strony nie wiem, czy jest to w ogóle możliwe, bo emulowane urządzenie na pagespeed.web.dev jest bardzo słabe i po prostu dławi się JSem. Próbowałem profilować to w zakładce performance w devtoolsach, ale nie bardzo idzie wyśledzić długo wywołujące się funkcje, ponieważ są opisane jako anonymous. Już próbowałem różnych rzeczy i najbardziej pomogło ustawienie tylko jednego chunka w configu webpacka dzięki czemu wyniki ustabilizowały się na poziomie 70+, a wcześniej gęsto leciały po 6*. W sumie trochę to dziwne, bo z tego co czytałem, to właśnie chunkowanie i lazy loading skryptów ma pozwolić na osiągnięcie wyższego wyniku, ale stawiam, że po prostu kod znajdujący się w chunkach był potrzebny już przy załadowaniu strony. Jak powinna wyglądać optymalizacja tego parametru?

screenshot-20220531095105.png

1

https://web.dev/lighthouse-total-blocking-time/

Total blocking time to czas pomiędzy First Contentful Paint, a Time to Interactive, więc żeby to poprawić musiałbyś się uporać z dwoma pozostałymi metrykami.

Spróbuj zrobić to w taki sposób, żeby rzeczy znajdujące się na samej górze ekranu zawsze były ładowane bez lazy loadingu, a cała reszta, której nie widać na screenie z lazy loadingiem.

screenshot-20220531103446.jpg
Czyli ten pierwszy obrazek, menu, logo, nagłówek i tekst wyświetlasz najszybciej jak to możliwe, żeby parametr First Contentful Paint był jak najmniejszy, a całą resztę doładowujesz przez lazy loading.

1

Ale TBT zlicza long taski tj. wywołania funkcji dłuższe niż 50ms. Więc wydaje mi się, że nawet jak FCP będzie trwało sekundę, to po nim wywołają się wszystkie skrypty blokujące główny wątek i TBT będzie takie samo, bo chyba nie rozłoży się to bardziej w czasie ze względu na FCP, Przecież chyba przeglądarka nie rozłoży sobie wywołań tak, żeby nie blokować wątku tylko robi to jak najszybciej. Dołączam waterfall.

screenshot-20220531105237.png

1

Trzeba byłoby poszukać źródła, ale na kilku stronach czytałem, że właśnie takie ładowanie początkowych treści, które wyświetlają się użytkownikowi jako pierwsze przez lazy loading obniża web vitals.

Oprócz optymalizacji samego CSS'a / JS'a to można też spróbować poprawić takie rzeczy jak font, bo widzę, że dużo tego ładujesz.

I przykładowo, załóżmy, że masz czcionkę Montserrat (https://fonts.google.com/specimen/Montserrat) na stronie z takim zapisem jak proponuje google

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
</head>

Najpierw są dwa połączenia z serwerem google'a na którym znajdują się czcionki, później jest pobierany plik CSS, a na samym końcu konkretna czcionka, gdzie każda operacja trochę zajmuje i tak jak w Twoim przypadku opóźnia ładowanie pozostałych rzeczy.

Jest kilka sposobów, żeby to poprawić, musiałbyś poczytać, ale ja zazwyczaj stosuje coś takiego, że wstawiam je bezpośrednio do znacznika style z opcją font-display ustawioną na fallback (https://audytorium.xyz/wiedza/css-font-display/)

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <style>
    /* latin-ext - 400 */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: fallback; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    /* latin - 400     */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: fallback; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

    /* latin-ext - 700 */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: fallback; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    /* latin - 700     */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: fallback; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  </style>
</head>

i finalnie ładuje się to odrobine szybciej niż standardowym sposobem.

1

Skąd mogę wyciągnąć ten url do rozszerzenia woff2?

Na stronie powinieneś mieć podobny link jaki ja wkleiłem w pierwszym przykładzie

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">

Musisz skopiować wartość atrybutu href https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap i wkleić go w przeglądarce.

Jeśli to zrobisz to powinieneś dostać coś takiego.

screenshot-20220601104118.jpg

Font google oprócz polskich znaków (latin-ext, latin) często zawiera także cyrylice (cyrillic-ext, cyrillic), jakieś wietnamskie literki (vietnamese) i inny font, który na większości stron nie jest potrzebny.

Zazwyczaj można z tego zrezygnować i dodać jedynie @font-face oznaczone komentarzem latin-ext i latin. Skopiuj cały blok, zmieniając jedynie właściwość font-display.

1

Dobra nie ma tragedii screenshot-20220602090424.png

Jeszcze to przy jednym chunku, a przy wielu i odpowiednim lazy loadingu komponentów i importów jest mniejszy TBT, ale wtedy LCP potrafi się wydłużyć. Teraz bym nad FCP i LCP siedział, ale na razie nie ma czasu. Co do fontów, to miałeś rację, dzięki za pomoc.

1 użytkowników online, w tym zalogowanych: 0, gości: 1