Googles Lighthouse empfiehlt jetzt JavaScript-Bibliotheksalternativen

Veröffentlicht: 2021-01-06

Mit dem Begriff eines Leuchtturms als Metapher lenkt Google Lighthouse Entwickler von den Felsen weg, indem es Probleme beleuchtet, die es auf Asset-für-Asset-Basis entdeckt. Mit spezifischem Feedback zu Leistungs- und Sicherheitsverbesserungen enthalten Berichte Verweise auf Medien, die eine Größenanpassung mit Komprimierung, neue oder andere Cache-Richtlinien und verknüpfte Dateien verwenden könnten, die Blöcke von nicht verwendetem CSS und/oder JavaScript enthalten.

Bis September rief Google jedoch keine JavaScript-Bibliotheken selbst auf.

Und jetzt sind die Warnungen abgestuft, um in Page Speed ​​Insights zu erscheinen.

Ein Wort zu JavaScript

In der Open-Source-JavaScript-Welt stehen Entwickler auf den Schultern der Entwickler, die vor ihnen kamen, insbesondere diejenigen, die etwas gelöst haben, das sonst von einem neuen Bibliotheksautor gelöst werden müsste. Das weit verbreitete JavaScript-Paketsystem NPM (Node Package Manager) erleichtert die Einbindung bereits vorhandener Bibliotheken in Ihr Projekt. Am Anfang ist ein bestimmtes JavaScript-Projekt immer die Spitze eines Eisbergs, der aus viel mehr JavaScript darunter besteht, das normalerweise von NPM im Verzeichnis .node_modules gespeichert wird.

Es liegt nahe, dass Projekte, insbesondere solche, die mit einem ausgeklügelten Framework erstellt wurden, immer nur einen winzigen Prozentsatz des verfügbaren Codes verwenden würden, hauptsächlich durch zahlreiche Bibliotheksabhängigkeiten. Deshalb gibt es einen Optimierungsprozess, der als „Tree Shaking“ bekannt ist, um so viel wie möglich nur das zu bündeln, was von einem bestimmten Projekt aktiv genutzt wird. Tree Shaking funktioniert nicht immer gut mit älteren Bibliotheken aufgrund der sich bewegenden Ziele, mit moderner Syntax und Codierungsmustern Schritt zu halten.

Über Frameworks

Frameworks erleichtern Entwicklern das Leben, indem sie die Komplexität der Bibliotheksauswahl, der Konfiguration von Bundlern und des Schreibens von Skripten zur Automatisierung von Optimierungsprozessen für die Produktion verringern. Mit einem „Schnellstart“-Rezept, das in den meisten Dokumentationen zu finden ist, können Entwickler vorgefertigte Befehlszeilen-Interpreter-Skripts einrichten und ausführen, die Teil der meisten gepackten Frameworks sind. Ein Beispiel hierfür ist die Create React App, die einen leeren React-Anwendungscode bereitstellt, damit Sie ihn zu einer Webanwendung weiterentwickeln können.

$ npx create-react-app meine-app

Das Ausführen des obigen Befehls erstellt ein „my-app“-Verzeichnis und spawnt den gesamten React-App-Verzeichnisbaum darin, komplett mit allen erforderlichen Dateien und Bibliotheksabhängigkeiten. Die Optimierung Ihres Produktionspakets, das Code aus mehreren Javascript-Bibliotheken enthalten kann, ist vielleicht der wichtigste Grund, warum moderne Framework-Pakete über Tools und Schritte verfügen, die ungenutzte Codeblöcke aussortieren und die Ausgabe für die Produktion minimieren.

Wenn Sie sich entscheiden, ein Framework zu verwenden, akzeptieren Sie, vielleicht ohne alle Details zu kennen, die schwierigen Entscheidungen bezüglich Architektur, Konfiguration und Bibliotheksabhängigkeiten dieses Frameworks. Hier ist der Leitfaden zur Optimierung von React für die Produktion von den Machern der beliebten Frontend-Bibliothek, die derzeit von vielen Projekten und Frameworks wie NextJS verwendet wird.

Es kommt nur allzu häufig vor, dass eine Handvoll älterer Bibliotheken (die zu ihrer Zeit sehr nützlich waren) als Abhängigkeiten ihren Weg in Projektpakete gefunden haben. Websites, Bibliotheken und Frameworks, die vor den Meilensteinen von JavaScript erstellt wurden, zeigen ihr Alter, wenn sie veralteten Code verwenden, da sich JavaScript im Grunde mit solch einem halsbrecherischen Tempo weiterentwickelt. Lighthouse dient jetzt als Leuchtfeuer, um Sie zu warnen, wenn Ihr Projekt alten und/oder anfälligen Code enthält.

MomentJS

Eine bemerkenswerte Bibliothek, MomentJS (mit 12 Millionen Downloads pro Woche ab September 2020), ist die erste, auf die Lighthouse hinweist, dass sie einige bessere Optionen bietet. Die Logik von Google hier ist unwiderlegbar und ziemlich bekannt. Als Reaktion darauf spiegeln Moments eigene Homepage und Dokumentation nun die Ratschläge wider, die in der Berichterstattung von Lighthouse gegeben wurden. Moment ist funktionseingefroren, nur Stabilitätsupdates sind geplant.

Andere Bibliotheken, die Google unter die Lupe genommen hat, sind Lodash und möglicherweise Underscore. In der gesamten Entwickler-Community wurden berechtigte negative Gefühle darüber geäußert, wobei mehr als ein Entwickler es als „giftig“ oder „schädlich“ für die Open-Source-Community bezeichnete. Die Beschwerden haben damit zu tun, dass Google Bibliotheken „beschämt“, ohne genügend Kontext zu geben und Alternativen zu fördern, die der Entdeckung kleinerer und weniger bekannter Bibliotheksalternativen schaden können.

Das alles stimmt, aber es stimmt auch, dass man Eier aufschlagen muss, um ein Omelett zu machen. Fortschritte werden oft einigen Leuten wehtun. Google verlässt sich auf eine Drittanbieter-Referenz (BundlePhobia), um alternative Bibliothekslisten zu sammeln. Sie prüfen die Auswahl weiter auf der Grundlage einer „hohen Messlatte für Gleichwertigkeit“ und „Einfachheit der Migration“, wie vom Lighthouse-Team festgelegt.

Weniger bekannte Bibliotheksautoren können in den Mix einsteigen, indem sie ihre Bibliothek an den Dienst übermitteln. Darüber hinaus kommentierte ein Entwickler, dass, da Google Bibliotheken jetzt offiziell empfiehlt, sie zur Finanzierung von Open Source beitragen sollten, indem sie für das Projekt spenden, und ein Teammitglied auf Twitter hat zugestimmt, ab 2021 damit zu beginnen.

Was das für TechSEOs bedeutet

Es stimmt, dass TechSEO-Experten keine Entwickler sein müssen, um in ihrem Job hervorragend zu sein. Es ist auch wahr, dass Sie, je besser Sie mit dem Kampf vertraut sind, den Entwickler durchmachen, vielleicht indem Sie ein wenig über das Programmieren lernen und zumindest die Details von Googles Leuchtturm so gut wie möglich verstehen, desto besser werden Sie in der Lage sein, Entwicklern Probleme und praktische Lösungen mitzuteilen .

Das Ersetzen von MomentJS im Großhandel kann für den Empfänger der Nachricht, dass es ersetzt werden muss, von super einfach bis erschreckend komplex sein. Wenn Sie nicht selbst Entwickler sind oder zumindest versucht haben, sich mit modernen JavaScript-Bibliotheken und -Frameworks in ein wenig Webentwicklung einzuarbeiten, wird es für Sie schwierig sein zu wissen, wie schmerzhaft es für Sie sein kann, eine Bibliothek wie Moment gegen eine kleinere Alternative auszutauschen besonderes Projekt.

Es hat damit zu tun, wie viel diese Bibliothek in die Codebasis integriert wurde. Codemuster müssen möglicherweise in einer Anwendung vollständig neu geschrieben werden. Je größer und vernetzter die Codebasis der Anwendung ist, desto schwieriger wird es, den Austausch zu bewerkstelligen. Es ist nicht immer so einfach zu sagen: „Verwenden Sie einfach eine der alternativen Bibliotheken, die Google Ihnen stattdessen vorschreibt.“

Einer der entmutigenden Gedanken, die auftreten können, wenn man lernt, dass man Moment ersetzen muss, kommt von der Tatsache, dass Objekte in der Bibliothek so geschrieben sind, dass sie veränderbar (änderbar) sind. Die Beibehaltung dieses Musters wird für die Abwärtskompatibilität als notwendig angesehen, und dies erschwert das Ersetzen von Moment durch eine andere Bibliothek wirklich. Möglicherweise müssen ganze Codeblöcke geschrieben werden, damit Ihre Anwendung die Tatsache berücksichtigen kann, dass Variablenwerte, die mithilfe von Moment irgendwo in einer Aufrufkette zugewiesen wurden, nicht als unveränderliche Werte innerhalb Ihrer Anwendungscodebasis gezählt werden können.

Ein modernes Muster, das sich auf unveränderliche Objekte aus einer neueren Bibliothek stützt, ist stabiler. Um dorthin zu gelangen, kann es erforderlich sein, jede Instanz, in der Moment verwendet wird, neu zu schreiben.

SEO für Entwickler

Die Optimierung von JavaScript für die Produktion als Aufgabe liegt sehr im Steuerhaus des TechSEO, der an Code arbeitet oder einem Entwickler, der mit SEO möglicherweise nicht vertraut ist, Feedback gibt, da Entwickler die Leistungsoptimierung in erster Linie verstehen sollten. Es kann nicht davon ausgegangen werden, dass Entwickler BundlePhobia, Lighthouse oder SEO für diese Angelegenheit kennen.

Wenn Sie es bis hierher geschafft haben und mehr über das Programmieren erfahren möchten, um Ihren Kunden einen besseren Service zu bieten, dann haben Sie Glück. In diesem Jahr werden wir den SEO for Developers Workshop als optionales Add-on zur SMX-Konferenzreihe anbieten. Die präsentierten Informationen zielen darauf ab, Ihre Reise von wo auch immer Sie als TechSEO-Praktiker sind, dorthin zu führen, wo uns unsere gemeinsamen Wege in die Programmierung führen. Angesichts dessen, wie schnell die Dinge voranschreiten, ist der Himmel die Grenze!