devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Narzędzia
Home›Narzędzia›Lepsza diagnostyka www z Lighthouse 6.0

Lepsza diagnostyka www z Lighthouse 6.0

By Bernadeta Zapała
27 maja 2020
152
1
Share:

Narzędzie Google do inspekcji witryn, Lighthouse, zostało właśnie wydane w wersji 6.0. Lighthouse 6.0 daje programistom więcej możliwości w zakresie diagnostyki, aby poprawić komfort korzystania z ich stron. Nowa wersja zawiera wiele zmian, m.in. Nowe dane, CI Lighthouse, nowe audyty czy rozszerzenie przeglądarki.

Wprowadzenie nowych wskaźników

Lighthouse 6.0 wprowadza trzy nowe wskaźniki do raportu. Wiąże się to z wprowadzeniem przez zespół Google Chrome wskaźników Core Web Vitals, o których wspominaliśmy przy nowej wersji Next.js.

Wskaźniki w Lighthouse

Largest Contentful Paint (LCP)

Pierwszy z nich jest miarą odczuwanego obciążenia. Daje programistom sygnał jak szybko użytkownik jest w stanie zobaczyć zawartość strony. Jest to moment podczas ładowania strony, kiedy użytkownik widzi podstawową lub największą zawartość strony. Wskaźnik LCP jest pewnym uzupełnieniem FCP – First Contentful Paint, który uwzględnia tylko początek ładowania. LCP powinien wystąpić w ciągu 2,5 sekundy od pierwszego załadowania strony, aby zapewnić dobrą obsługę.

Cumulative Layout Shift (CLS)

Kolejny – CLS – jest wskaźnikiem pomiaru stabilności wizualnej. Określa, o ile zmienia się wizualnie zawartość strony. Podczas testów CLS jest mierzony do końca ładowania strony. Natomiast w praktyce mierzy się go do pierwszej reakcji użytkownika lub uwzględnienia jego wszystkich danych wejściowych. Niski poziom CLS sygnalizuje programistom brak nieuzasadnionych zmian treści. Strony powinny utrzymywać CLS poniżej 0,1, aby wynik był uznany za dobry.

Total Blocking Time (TBT)

Ostatni nowy wskaźnik określa ilościowo czas reakcji na obciążenie. Daje miarę całkowitego czasu, podczas którego główny wątek był blokowany na tyle, żeby zapobiec reakcji wejścia. Dodatkowo TBT koreluje z wskaźnikiem FID (Opóźnienie pierwszego wejścia), co stanowi istotną funkcję sieciową.

Kalkulator punktacji

W Lighthouse 6.0 znajduje się także kalkulator punktacji, który ma na celu pomóc zbadać punktacje wydajności. Oprócz tego porównuje wyniki z Lighthouse v.5 i v.6.

Kalkulator punktowy

Nowe audyty

Wśród nowych audytów można znaleźć m.in. Maskable icon, a także Charset declaration. Pierwszy z nich jest nowym formatem ikon, który powoduje, że PWA wygląda właściwie na wszystkich typach urządzeń.  Został on wprowadzony, aby sprawdzić, czy plik manifest.json obsługuje ten nowy format. Drugi z kolei – Deklaracja Charset – określa jakiego kodowania znaków należy użyć do interpretacji dokumentu HTML. Stąd audyt weryfikuje, czy strona ma prawidłowe kodowanie znaków i jest zdefiniowana wcześnie i z góry.

CI Lighthouse

Wraz z wprowadzeniem nowej wersji ogłoszono, że Lighthouse CI ma natywną obsługę wielu dostawców CI, m.in. GitLab, Github Actions, Circle czy Travis.

Symulacja mobilna

W warunkach mobilnych bardziej widoczne są problemy z wydajnością. Często jednak programiści nie testują działania swoich stron na urządzeniach mobilnych. Emulacja mobilna w Lighthouse 6.0 składa się z tworzenia wolnych warunków sieciowych i procesorowych, a także z emulacji ekranu urządzenia.

Mobile emulation

Linki do lokalizacji źródłowej

W przypadku znalezienia przez Lighthouse problemów można je prześledzić do określonego wiersza kodu. W raporcie znajdziemy wtedy odpowiedni plik i wiersz. Teraz, kliknięcie lokalizacji określonych w raporcie, otworzy odpowiednie pliki w panelu Źródła. Ułatwi to znacznie eksplorację w DevTools.

Podsumowanie

Zmiany wprowadzone w Lighthouse 6.0 pozwalają na poprawę wydajności stron. Prawie 8% witryn doświadczyło poprawy wyniku z powodu zmian w implementacji metryk. Lighthouse 6.0 jest dostępny natychmiast na Npm i na Chrome Canary .

Źródła:

  • https://web.dev/lighthouse-whats-new-6.0/
  • https://dev.to/adriansandu/lighthouse-6-0-what-s-new-in-chrome-83-highlights-of-ms-build-2020-front-end-news-4eoo
  • https://github.com/GoogleChrome/lighthouse/releases
  • https://www.c-sharpcorner.com/news/lighthouse-60-brings-new-metrics
  • https://developers.google.com/web/tools/lighthouse
TagsCore Web VitalsGoogleLighthouse

Share:

  • Narzędzia

    Babel 7.12.0 z TypeScript 4.1 i propozycjami ECMAScript

  • Narzędzia

    Pnpm 5.0 – lżejszy menedżer pakietów JavaScript

  • Narzędzia

    Moment.js przechodzi w tryb utrzymania

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

  • 24 listopada 2020

    Tailwind CSS 2.0 z narzędziami kontroli tekstu

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT