Googleの灯台は現在JavaScriptライブラリの代替を推奨しています

Google灯台は、灯台の概念を比喩として使用して、資産ごとに発見した問題に光を当てることで、開発者を岩から遠ざけます。パフォーマンスとセキュリティの改善に関する具体的なフィードバックとともに、レポートには、圧縮によるサイズ変更を使用できるメディアへの参照、新しいまたは異なるキャッシュポリシー、および未使用のCSSやJavaScriptのブロックを含むリンクファイルが含まれます。

しかし、9月まで、GoogleはJavaScriptライブラリ自体を呼び出していませんでした。

そして今、警告は段階的にページスピードインサイトに表示されるようになりました。

JavaScriptについて一言

オープンソースのJavaScriptの世界では、開発者は自分の前に来た開発者、特に新しいライブラリの作成者が解決しなければならない問題を解決した開発者の肩に立っています。普及しているJavaScriptパッケージングシステムNPM(Node Package Manager)を使用すると、プロジェクトに既存のライブラリを簡単に含めることができます。開始点では、特定のJavaScriptプロジェクトは常に、その下にあるはるかに多くのJavaScriptで構成された氷山の一角であり、通常はNPMによって.node_modulesディレクトリに格納されます。

プロジェクト、特に洗練されたフレームワークを使用して作成されたプロジェクトが、主に多数のライブラリの依存関係を通じて、利用可能なコードのごく一部しか使用しないのは当然のことです。そのため、特定のプロジェクトでアクティブに使用されているものだけを可能な限りバンドルするための「ツリーシェイク」と呼ばれる最適化プロセスがあります。現代の構文とコーディングパターンに追いつくというムービングゴールポストのため、ツリーシェイクは古いライブラリで常にうまく機能するとは限りません。

フレームワークについて

フレームワークは、ライブラリの選択、バンドラーの構成、および本番環境の最適化プロセスを自動化するスクリプトの作成の複雑さを取り除くことで、開発者の作業を楽にします。ほとんどのドキュメントにある「クイックスタート」レシピを使用すると、開発者は、ほとんどのパッケージ化されたフレームワークの一部として提供される、事前に作成されたコマンドラインインタープリタースクリプトを起動して実行できます。この例として、 Create React Appがあります。これは、空白のReactアプリケーションコードを足場にして、Webアプリケーションにさらに発展させる準備ができています。

売り上げアップするならホームページ制作で長崎市

$ npx create-react-app my-app

上記のコマンドを実行すると、「my-app」ディレクトリが作成され、必要なすべてのファイルとライブラリの依存関係を備えたReactアプリディレクトリツリー全体がそのディレクトリに生成されます。いくつかのJavascriptライブラリからのコードを含むことができる本番バンドルを最適化することは、おそらく最も重要な理由です。最新のフレームワークパッケージには、未使用のコードブロックを取り除き、本番用の出力を最小限に抑えるツールとステップがあります。

受け入れるフレームワークを使用することを選択した場合、おそらくすべての詳細を知らなくても、そのフレームワークのアーキテクチャ、構成、およびライブラリの依存関係に関する難しい決定。これは、NextJSなどの多くのプロジェクトやフレームワークで現在使用されている人気のあるフロントエンドライブラリのメーカーによる、 本番用にReact最適化するためのガイドです。

少数の古いライブラリ(当時は非常に便利でした)が依存関係としてプロジェクトバンドルに組み込まれていることはよくあることです。 JavaScriptのマイルストーンより前に作成されたWebサイト、ライブラリ、およびフレームワークは、JavaScriptがそのような途方もないペースで根本的に進歩するため、非推奨のコードを使用するときの時代を示しています。 Lighthouseは、プロジェクトに古いコードや脆弱なコードが含まれている場合に警告するためのビーコンとして機能するようになりました。

MomentJS

注目すべきライブラリであるMomentJS (2020年9月の時点で週に1200万ダウンロード)は、Lighthouseがいくつかのより良いオプションがあると指摘した最初のライブラリです。ここでのGoogleの論理は反駁できず、かなりよく知られています。それに応じて、Moment自身のホームページとドキュメントは、Lighthouseのレポートで提供されたアドバイスを反映しています。モーメントは機能が凍結されており、安定性の更新のみが計画されています。

グーグルが顕微鏡下で持っている他のライブラリは、 LodashとおそらくUnderscoreです。これについては、開発者コミュニティ全体で正当な否定的な感情が表明されており、複数の開発者がオープンソースコミュニティにとって「有毒」または「有害」と呼んでいます。苦情は、十分なコンテキストを提供せず、より小さくてあまり知られていない代替ライブラリの発見に害を及ぼす可能性のある代替を促進することなく、Googleの「偽の」ライブラリに関係しています。

それはすべて真実ですが、オムレツを作るために卵を割らなければならないことも真実です。進歩はしばしば何人かの人々を傷つけます。 Googleは、代替ライブラリリストを収集するためにサードパーティの参照( BundlePhobia )に依存しています。彼らはさらに、灯台チームによって決定された「同等性の高い基準」と「移行の容易さ」に基づいて選択を精査します。

あまり知られていない図書館の作者は、自分の図書館をサービスに提出することでミックスに参加できます。さらに、開発者は、Googleが現在正式に図書館を推奨しているので、プロジェクトに寄付することでオープンソースの資金調達を支援する必要があるとコメントし、Twitterのチームメンバーは2021年からこれを開始することに同意しました。

これがTechSEOにとって何を意味するか

TechSEOの実践者は、自分の仕事で優れているために開発者である必要はないのは事実です。コーディングについて少し学び、少なくともGoogleの灯台の詳細を可能な限り理解することで、開発者が経験する苦労に精通しているほど、問題や実用的な解決策を開発者に伝えることができるようになることも事実です。 。

MomentJSの卸売りの交換は、交換が必要なニュースの受信者にとって、非常に簡単なものから恐ろしく複雑なものまで、どこにでもある可能性があります。あなた自身が開発者であるか、少なくとも最新のJavaScriptライブラリとフレームワークを使用した小さなWeb開発に手を出してみたことがない限り、Momentのようなライブラリをより小さな代替手段に切り替えることがどれほど苦痛であるかを知ることは難しいでしょう。特定のプロジェクト。

それは、そのライブラリがコードベースにどれだけ統合されているかに関係しています。コードパターンは、アプリケーション全体で完全に書き直す必要がある場合があります。アプリケーションコードベースが大きく相互接続されているほど、置き換えを実現するのが難しくなります。 「Googleが代わりに使用するように指示している代替ライブラリの1つを使用するだけです」と言うほど簡単ではありません。

モーメントを置き換える必要があることを学習するときに発生する可能性のある気の遠くなるような考えの1つは、ライブラリ内のオブジェクトが可変(変更可能)であるように記述されているという事実から来ています。このパターンを維持することは、下位互換性のために必要であると見なされており、これはMomentを別のライブラリに置き換えることを本当に複雑にします。コールチェーンのどこかでMomentを使用して割り当てられた変数値は、アプリケーションコードベース内の不変値としてカウントできないという事実に対応するために、コードのブロック全体を記述する必要がある場合があります。

新しいライブラリの不変オブジェクトに依存する最新のパターンは、より安定しています。そこに到達するには、Momentが使用されるすべてのインスタンスを何度も書き直す必要があります。

開発者向けSEO

JavaScriptをタスクとして本番環境に最適化することは、コードに取り組んでいるTechSEOの操舵室で非常に重要です。開発者は最初にパフォーマンスの最適化を理解する必要があるため、SEOに慣れていない開発者にフィードバックを提供します。開発者がBundlePhobia、Lighthouse、またはSEOについて知っているとは限りません。

これまでに成功し、クライアントにより良いサービスを提供するためにコーディングについてもっと知りたい場合は、幸運です。今年は、 SMX会議シリーズのオプションのアドオンとしてSEO for DevelopersWorkshopを作成する予定です。提示される情報は、TechSEOの実践者としてどこにいても、私たちの集合的な道が私たちをコーディングに導く場所へのあなたの旅を導くことを目的としています。物事がどれほど速く進んでいるかを考えると、空は限界です!


著者について

Detlef Johnsonは、検索エンジンランドとSMXの開発者エキスパート向けのSEOです。彼はまた、SMXイベントのプログラミングチームのメンバーであり、 Search EngineLandでSEOforDevelopers シリーズを執筆しています。 Detlefは、20年以上前にプロのSEO分野を確立した先駆的なウェブマスターの最初のグループの1つです。それ以来、彼は主要な検索エンジンテクノロジープロバイダーで働き、シカゴトリビューンのプログラミングおよびマーケティングチームを管理し、フォーチュン500企業を含む多数の企業のコンサルティングを行ってきました。 Detlefは、テクニカルSEOを深く理解しており、Webプログラミングに情熱を注いでいます。