Firma Google's Lighthouse poleca teraz alternatywne biblioteki JavaScript

Używając pojęcia latarni morskiej jako metafory, Google Lighthouse kieruje programistów z dala od skał, rzucając światło na problemy, które odkrywają na podstawie poszczególnych aktywów. Dzięki konkretnym informacjom zwrotnym dotyczącym ulepszeń wydajności i zabezpieczeń raporty zawierają odniesienia do nośników, które mogą wykorzystywać zmianę rozmiaru z kompresją, nowe lub inne zasady pamięci podręcznej oraz połączone pliki zawierające bloki nieużywanego kodu CSS i/lub JavaScript.

Jednak do września Google sam nie wywoływał bibliotek JavaScript.

Jeśli biblioteki JavaScript okazują się kosztowne, zastąp je mniejszymi alternatywami.

Lighthouse w @ChromeDevTools poleca teraz mniejsze biblioteki, które poprawiają rozmiar pakietu. pic.twitter.com/VFe8TFV9Y5

— Addy Osmani (@addyosmani) 12 września 2020 r.

A teraz ostrzeżenia są stopniowo wyświetlane w Page Speed ​​Insights.

Słowo o JavaScript

W świecie JavaScript o otwartym kodzie źródłowym programiści stoją na ramionach programistów, którzy byli przed nimi, zwłaszcza tych, którzy rozwiązali coś, co w innym przypadku musiałby zostać rozwiązany przez nowego autora biblioteki. Rozpowszechniony system pakowania JavaScript NPM (Node Package Manager) ułatwia włączanie istniejących bibliotek do projektu. W punkcie wyjścia, dany projekt JavaScript jest zawsze wierzchołkiem góry lodowej, zbudowanej ze znacznie większej ilości JavaScript pod spodem, zwykle przechowywanego przez NPM w katalogu .node_modules .

Jest zrozumiałe, że projekty, zwłaszcza te tworzone przy użyciu wyrafinowanego frameworka, wykorzystują tylko niewielki procent dostępnego kodu, w dużej mierze dzięki licznym zależnościom bibliotecznym. Dlatego istnieje proces optymalizacji znany jako „potrząsanie drzewem”, aby łączyć tylko to, co jest aktywnie wykorzystywane przez dany projekt w jak największym stopniu. Potrząsanie drzewami nie zawsze działa dobrze ze starszymi bibliotekami ze względu na ruchome cele nadążania za nowoczesną składnią i wzorcami kodowania.

O Ramach

Frameworki ułatwiają życie programistom, eliminując złożoność dokonywania wyborów dotyczących bibliotek, konfigurowania pakietów i pisania skryptów w celu automatyzacji procesów optymalizacji na potrzeby produkcji. Dzięki przepisowi „szybkiego startu”, który można znaleźć w większości dokumentacji, programiści mogą rozpocząć i uruchomić wstępnie napisane skrypty interpretera wiersza poleceń, które są częścią większości pakietów frameworków. Przykładem tego jest aplikacja Create React, która tworzy szkielet pustego kodu aplikacji React, gotowego do dalszego rozwoju w aplikację internetową.

$ npx create-react-app moja-aplikacja

Uruchomienie powyższego polecenia tworzy katalog „moja-aplikacja” i tworzy w nim całe drzewo katalogów aplikacji React, wraz ze wszystkimi wymaganymi plikami i zależnościami bibliotecznymi. Optymalizacja pakietu produkcyjnego, który może zawierać kod z kilku bibliotek JavaScript, jest prawdopodobnie najważniejszym powodem, dla którego nowoczesne pakiety frameworka zawierają narzędzia i kroki, które usuwają nieużywane bloki kodu i minimalizują wydajność produkcji.

Decydując się na użycie frameworka, akceptujesz, być może bez znajomości wszystkich szczegółów, trudnych decyzji dotyczących architektury, konfiguracji i zależności bibliotecznych tego frameworka. Oto przewodnik dotyczący optymalizacji Reacta pod kątem produkcji od twórców popularnej biblioteki frontendowej używanej obecnie przez wiele projektów i frameworków, takich jak NextJS.

Zbyt często zdarza się, że kilka starszych bibliotek (bardzo przydatnych w ich czasach) znalazło się w pakietach projektów jako zależności. Witryny internetowe, biblioteki i frameworki utworzone przed kamieniami milowymi JavaScript pokazują swój wiek podczas używania przestarzałego kodu, ponieważ JavaScript zasadniczo rozwija się w tak zawrotnym tempie. Lighthouse służy teraz jako latarnia ostrzegawcza, gdy Twój projekt zawiera stary lub zagrożony kod.

MomentJS

Godna uwagi biblioteka, MomentJS (z 12 milionami pobrań tygodniowo od września 2020 r.), jest pierwszą, którą Lighthouse wskazuje, że ma kilka lepszych opcji. Logika Google jest tutaj niepodważalna i dość dobrze znana. W odpowiedzi własna strona główna i dokumentacja Moment odzwierciedlają teraz porady zawarte w raportach Lighthouse. Moment jest zamrożony, a planowane są tylko aktualizacje stabilności.

Inne biblioteki, które Google ma pod mikroskopem, to Lodash i prawdopodobnie Underscore. W całej społeczności programistów wyrażano uzasadnione negatywne odczucia, przy czym więcej niż jeden programista nazwał to „toksycznym” lub „szkodliwym” dla społeczności open source. Skargi dotyczą bibliotek „wstydliwych” Google bez podawania wystarczającego kontekstu i promowania alternatyw, które mogą zaszkodzić odkrywaniu mniejszych i mniej znanych alternatyw bibliotecznych.

Chociaż to wszystko prawda, prawdą jest również, że trzeba rozbić jajka, aby zrobić omlet. Postęp często zaszkodzi niektórym ludziom. Google opiera się na referencji innej firmy (BundlePhobia) w celu gromadzenia alternatywnych list bibliotek. Dalej sprawdzają wybory oparte na „wysokiej poprzeczce dla równoważności” i „łatwości migracji” określonej przez zespół Lighthouse.

Mniej znani autorzy biblioteczni mogą włączyć się do tej mieszanki, zgłaszając swoją bibliotekę do serwisu. Ponadto programista skomentował, że ponieważ Google oficjalnie rekomenduje teraz biblioteki, powinny one pomóc finansować open source, przekazując darowizny na rzecz projektu, a członek zespołu na Twitterze zgodził się zacząć to robić od 2021 roku.

To naprawdę świetny pomysł. W pełni zgadzam się, że te zespoły potrzebują wsparcia. Chrome ma obecnie roczny fundusz wydajności sieci i frameworków na sponsorowanie takich prac. Współpracujemy z OpenCollective nad rozszerzeniem tego na 2021 r. i wkrótce będziemy mieli więcej środków do ogłoszenia.

— Addy Osmani (@addyosmani) 12 września 2020 r.

Co to oznacza dla TechSEO

Prawdą jest, że praktycy TechSEO nie muszą być programistami, aby być doskonałymi w swojej pracy. Prawdą jest również, że im bardziej zaznajomisz się z walką, z jaką zmagają się programiści, być może dzięki nauce kodowania i przynajmniej jak największemu zrozumieniu szczegółów Google Lighthouse, tym lepiej będziesz w stanie komunikować programistom problemy i praktyczne rozwiązania. .

Wymiana hurtowa MomentJS może być bardzo łatwa, a nawet przerażająco skomplikowana dla odbiorcy wiadomości, którą należy zastąpić. O ile sam nie jesteś programistą lub przynajmniej nie próbowałeś trochę tworzyć stron internetowych przy użyciu nowoczesnych bibliotek i frameworków JavaScript, trudno będzie ci zrozumieć, jak bolesne może być zamiana biblioteki takiej jak Moment na mniejszą alternatywę dla konkretny projekt.

Ma to związek z tym, jak bardzo ta biblioteka została zintegrowana z bazą kodu. Wzorce kodu mogą wymagać całkowitego przepisania w całej aplikacji. Im większa i bardziej połączona baza kodu aplikacji, tym trudniej będzie dokonać zamiany. Nie zawsze jest to tak proste, jak powiedzenie „Wystarczy użyć jednej z alternatywnych bibliotek, które Google zaleca zamiast tego”.

Jedna ze zniechęcających myśli, które mogą pojawić się podczas uczenia się, że trzeba zastąpić Moment, wynika z faktu, że Obiekty w bibliotece są napisane jako zmienne (zmienne). Zachowanie tego wzorca jest postrzegane jako konieczne dla zapewnienia kompatybilności wstecznej, a to naprawdę komplikuje zastąpienie Moment inną biblioteką. Może zajść potrzeba napisania całych bloków kodu, aby aplikacja mogła dostosować się do faktu, że wartości zmiennych przypisane za pomocą Moment gdzieś w łańcuchu wywołań nie mogą być liczone jako wartości niezmienne w bazie kodu aplikacji.

Nowoczesny wzorzec, który opiera się na niezmiennych obiektach z nowszej biblioteki, jest bardziej stabilny. Aby się tam dostać, może wymagać wiele przepisywania każdej instancji, w której używany jest Moment.

SEO dla programistów

Optymalizacja JavaScript pod kątem produkcji jako zadania jest w dużej mierze za sterami TechSEO pracującego nad kodem lub dostarczania informacji zwrotnej programiście, który może nie być zaznajomiony z SEO, ponieważ programiści powinni przede wszystkim zrozumieć optymalizację wydajności. Nie można zakładać, że programiści wiedzą o BundlePhobia, Lighthouse lub SEO.

Jeśli dotarłeś tak daleko i chcesz dowiedzieć się więcej o kodowaniu, aby zapewnić lepszą obsługę swoim klientom, masz szczęście. W tym roku zamierzamy wyprodukować SEO for Developers Workshop jako opcjonalny dodatek do serii konferencji SMX. Przedstawione informacje będą miały na celu poprowadzenie Twojej podróży z dowolnego miejsca, w którym jesteś jako praktyk TechSEO, do miejsca, w którym nasze wspólne ścieżki prowadzą nas do kodowania. Biorąc pod uwagę, jak szybko sprawy się rozwijają, niebo jest granicą!