Narzędzia Deweloperskie w Przeglądarce: Audyt strony

0:00Teraz pokażę ci narzędzie do wykonywania audytów które też

0:04pozwoli nam zoptymalizować naszą stronę internetową żeby działała szybciej ale to narzędzie

0:08już nie jest takie zaawansowane jak performance czy memory które ci pokazywałem zatem

0:13jest to narzędzie z którego polecam ci abyś korzystał zawsze kiedy tworzysz strony internetowe

0:17mamy tutaj taką zakładkę jak audits jeżeli u ciebie by się nie

0:21pokazywała bo masz za mało miejsca możesz tutaj przyjść pod tą strzałkę generalnie

0:25tutaj będziemy korzystać z google lighthouse czyli być może kojarzysz

0:30było takie narzędzie jak google pagespeed insights ale zostało to zamienione

0:34na lifehouse i wstawione tutaj bezpośrednio do chrome devtools i jest

0:38to narzędzie kapitalne jak za moment zobaczysz bo pozwoli nam w tych różnych

0:42kategoriach pokazać gdzie nasza strona czy aplikacja może być poprawiona

0:46będziemy mieli zaraz wynik i od razu powiem ci że to nie chodzi

0:50o to żeby w każdej kategorii mieć 100 na 100 punktów bo czasami nie jest to po prostu

0:54możliwe ale żeby zoptymalizować po prostu co się da więc

0:58wystarczy że kiedy będąc na takiej stronie generate report i będziemy musieli

1:03chwilę poczekać za moment zobaczymy po prostu wszystko co można

1:07zoptymalizować i powiem ci też że najlepiej by było wykonać taki audyt na stronie

1:11która jest już w internecie a nie tutaj na lokal hoście bo wtedy będziemy

1:15jeszcze widzieli też czas połączenia z serwerem i te inne rzeczy które ewentualnie można

1:19poprawić no i tutaj mamy wynik bardzo obrazowo przedstawiony od razu

1:24widzimy że tak średnio sobie ta nasza strona radzi i że pewne rzeczy możemy poprawić

1:28i możemy tutaj klikać i przechodzić do kolejnych zakładek tutaj

1:32albo po prostu przewijać i od razu widzimy gdzie są jakieś problemy jeżeli

1:37sobie klikamy tutaj to będziemy mogli to zobaczyć ze szczegółami i to co jest według

1:41mnie tutaj kapitalne to fakt że można przejść na stronę gdzie będzie

1:45to dokładnie opisane i będziemy wiedzieć jakby na czym polegają

1:49te statystyki oraz co możemy i w jaki sposób poprawić więc polecam

1:53ci żeby się z tym zapoznać tutaj widzimy co jest na zielono więc co jest

1:57ok może klikniemy sobie według tych kategorii na przykład accessability

2:02czyli dostępność jak widać nie mamy tutaj dobrego

2:06contrast ratio pomiędzy tłem a tym co

2:10mamy tutaj z przodu i tak dalej więc tutaj naprawdę wszystko

2:14nam pokazuje mamy również best practices tu z kolei widzimy że nie używamy

2:18http2 ale na serwerze docelowym już by ono było widzimy

2:23że mamy tutaj jakieś dwie biblioteki które mają jakieś

2:28znalezione takie błędy które mogą wpływać na bezpieczeństwo

2:33i jest to jQuery w wersji 221 coś tam zostało znalezione więc to nam

2:37już mówi że warto byłoby to poprawić i wstawić na przykład nowszą wersję tej biblioteki

2:42które audyty przeszliśmy tutaj widzimy ale tak czy siak możemy sobie jeszcze

2:46o tym dodatkowo poczytać widzimy również coś takiego że

2:50nie mamy metatag viewport który powinien tam być i tak dalej tutaj

2:54pod kątem progressive web apps gdybyśmy chcieli testować też znajdziemy wytyczne

2:59i tak naprawdę wystarczy jak stworzysz sobie

3:01stronę wrzucić ją do internetu przejść na nią

3:04w chrome otworzyć panel audits wykonać audyt i postarać

3:08się poprawić wszystko co jest tutaj wypisane i naprawdę da ci to dużo lepszy wynik i teraz

3:12po pierwsze strona się będzie wczytywała szybciej a więc użytkownicy chętnie

3:17na niej zostaną jeżeli ona się szybko wczyta to jest szansa że zanim się wczytuje

3:21to nie opuszczą strony co czasami się zdarza ale po drugie google i inne

3:25wyszukiwarki premią strony które się wczytują szybko i które mają tutaj dobre

3:29wyniki więc jeżeli chcesz być wysoko w rankingu na pewno warto to co jest tutaj napisane

3:33poprawić na ile się po prostu da