Przesłałem moją aplikację / Gamę / PWA do PageSPeed Insights i zapewnia mi daje mi TTI wartości & gt; 7000ms i wartości TBT & GT; 2000 ms, jak widać na zrzucie ekranu poniżej (ogólny wynik na mobilny doświadczenie wynosi około 63):

PageSpeed Insights Results

Przeczytałem, co oznaczają te wartości, ale po prostu nie mogę ich zmusić!

Co jest najbardziej denerwujące, czy podczas uzyskiwania dostępu do strony w prawdziwej przeglądarce nie muszę czekać 7 sekund, aby strona stała się interaktywna, nawet z jasną pamięcią podręczną !!!

Gra można uzyskać dostęp do Oto i jego źródło jest Tutaj.

To, co wygoda, jest to, że własna gra Google, Doodle Cricket również strasznie. W rzeczywistości Paptspeed Insights nadają mu ogólny wynik "?".

Podsumowanie: Czy istnieje sposób, aby powiedzieć PageSpeed Insights Strona jest w rzeczywistości gra z prostym płótnem w nim i że jest rzeczywiście interaktywna , gdy tylko pierwsza ramka jest renderowana na płótnie (nie 7 sekund później)?

Aktualizacja: Rozwiązanie częściowe

Dzięki odpowiedziach @graham Ritchie udało mi się wykryć dwa najwolniejsze punkty, symulując się w środkowym telefonie komórkowym:

  • Ładowanie / kompilowanie plików webassembly: Nie było zbyt wiele, co mogłem zrobić z tym, a ten sam zużywa prawie 1,5 sekundy ...
  • Ładowanie głównego pliku skryptu, script.min.js: Podziałem plik na dwa, ponieważ prawie dwie trzecie tego pliku są tylko stałe ciągami, a ja zacząłem ładować je asynchronicznie, zarówno przy użyciu async, aby załadować główny skrypt i opóźnij ładowanie innych stałych ciągów, które zapisywały więcej niż 1,2 sekundy od czasu obciążenia.

Ulepszenia zapisywały również trochę czasu na lepszych urządzenich urządzeniach mobilnych / desktopów.

The Commit Diff jest Oto.

Aktualizacja 2: Poprawa narzędzi

Dla każdego, kto dotrze tutaj z Google, dwie dodatkowe wskazówki, które zapomniałem wspomnieć o ...

  • Użyj narzędzia Lighthouse CLI, a nie na stronie internetowej (zarówno dla lokalnych i do stron internetowych): npm install -g lighthouse, a następnie zadzwoń lighthouse --view http.... (lub użyj innych argumentów w razie potrzeby).
  • Jeśli działa na notebooku, upewnij się, że nie działa na baterii, ale faktycznie podłączony do źródła zasilania 😅
0
carlosrafaelgn 7 październik 2020, 21:12

1 odpowiedź

Najlepsza odpowiedź

Podsumowując: Czy istnieje sposób, aby powiedzieć PageSpeed Insights Strona jest w rzeczywistości gra z prostym płótnem w nim i że jest rzeczywiście interaktywny, gdy tylko pierwsza ramka jest renderowana na płótnie (nie 7 sekund później)?

Nie, niestety myślę, że przegapiłeś jeden klucz puzzli, dlaczego te liczby są tak wysokie.

Speed Speed Weights wykorzystuje dławiące w sieci i procesor do Symuluj Mid-Tier Telefon komórkowy na połączeniu 4G.

CPU Drotling to Twój problem.

Jeśli uruchomię grę w zakładce "Wydajność" na narzędzia Google Chrome Developer z "4x spowolnieniem" na procesorze, otrzymuję kilka długich zadań, z których jeden zajmuje 5,19 do biegania!

screenshot of long task taking 5.19s

Twoim problemem nie ma wagi stron, ponieważ strona jest lekka, że jest to czas wykonania JavaScript.

Musisz przejrzeć swój kod i zobaczyć, dlaczego masz zadanie, które trwa tak długo, szukaj zagnieżdżonych pętli, ponieważ zwykle są problemami!

Istnieje kilka innych zadań, które zajmują 1-2 sekundy między nimi, ale że 5 sekund jest głównym winem!

Mam nadzieję, że nieco usuwa rzeczy, jakie tylko pytają.

2
Graham Ritchie 7 październik 2020, 18:53