Gemini 3.7 FlashとAntigravityでLighthouseスコア100を達成！Web高速化の実践

はじめに: Gemini 3.7 FlashでWeb高速化を実現

本日、Antigravityというプラットフォーム上で、Gemini 3.7 Flashが利用可能になりました。この新しいモデルは、より優れたツール呼び出し機能と、よりリッチなアーティファクト（生成物）を提供し、その他にも多くの改善が加えられています。本記事では、多くの開発者が直面する一般的な課題である「ウェブページの読み込み速度の高速化」という実用的な側面から、Gemini 3.7 Flashの能力をご紹介いたします。

動画では、まず既存のウェブサイトの監査を行い、現在のパフォーマンス状況を把握することから始めます。その後、Antigravityに組み込まれたコマンドである/goalを活用し、あらゆる指標においてLighthouseスコア100点を達成するまでのプロセスを詳細に解説してまいります。

既存サイトのパフォーマンス監査と課題特定

ウェブサイトの高速化に着手する最初のステップは、現在のパフォーマンスを正確に把握することです。ここでは、ランディングページの既存の監査から始めます。

監査に使用するツールと指標

監査には、Chrome MCPサーバーとモダンウェブガイダンスプラグインを使用します。これらのツールを用いることで、以下の共通項目をチェックすることが可能です。

アクセシビリティの問題
古くなったAPIの使用状況
パフォーマンスの現在のスコア（これらのスコアはベンチマークとして利用します）

Gemini 3.7 Flashが生成するリッチなアーティファクト

Gemini 3.7 Flashは、これらの監査結果を非常に詳細で「リッチなアーティファクト」として返します。このアーティファクトには、以下のような情報が明確に示されています。

現在のLighthouseスコアの内訳
HTML、CSS、JavaScriptにおけるギャップや改善の余地がある箇所
サイトにWeb MCPを追加するといった具体的な改善提案

これらの詳細なフィードバックは、最適化の方向性を決定する上で非常に貴重な情報となります。

`/goal`コマンドによるLighthouseスコア100達成への挑戦

現状を把握し、課題が明確になったところで、次はいよいよ最適化の実行フェーズに入ります。ここでは、Antigravityに組み込まれた強力なコマンドである/goalを使用します。

`/goal`コマンドの自律的な実行能力

/goalコマンドは、ユーザーが目標（ターゲット）を設定し、その終了条件が満たされるまでモデルがループで作業を継続するという、非常に大きな自由度を開発者に提供します。今回のユースケースでは、以下の二つの目標を設定します。

Lighthouseが提供するすべての指標において100点を達成すること
JavaScript、HTML、CSSのベストプラクティスを用いてコードベースを最新化すること

/goalコマンドは、開発者からの入力が一切不要な状態で、バグの修正、新機能の実装、出力の検証といった一連の「アクション」を自律的に実行します。これは、まるで熟練の開発者が常にサイトの改善に取り組んでいるかのような体験を提供します。

プロセスの監視とバックグラウンドでの作業

実行中のプロセスの状況は、いつでもサブエージェントをチェックすることで確認できます。サブエージェントのログを通じて、モデルがどのようなタスクを実行しているか、そしてその完了ステータスはどうかを把握することが可能です。動画では、画面右側にブラウザがセットアップされ、実行中にモデルがChrome MCPサーバーのツール呼び出しを行い、既存の監査を実行し、必要なさまざまな項目をチェックしている様子が示されています。

エージェントは、開発者の入力なしにブラウザ上で継続的にバックグラウンドで作業を進めます。もし必要であれば、このブラウザを閉じることも可能ですが、高レベルで進捗を確認できるのは非常に便利です。

自動最適化のプロセスと最終結果

モデルがループを継続して実行するにつれて、Lighthouseスコア100点への「丘登り」を進めるために、多くのコード変更が適用されていくのが確認できます。これは、地道な改善を積み重ねていく自動化されたプロセスです。

目標達成後の詳細なアーティファクト

そして、目標が完了すると、最終的なアーティファクトが生成されます。このアーティファクトは、以下の非常に詳細な情報を含んでいます。

すべてのLighthouseスコアで100点を達成した方法の詳細な内訳
ランディングページに対して行われたすべての変更点

これにより、どのような変更が加えられ、どのようにして目標が達成されたのかを明確に理解し、今後の開発に活かすことが可能となります。

まとめ

Gemini 3.7 Flashは、その優れたツール呼び出し機能とリッチなアーティファクト生成能力により、Antigravityプラットフォーム上でウェブページの高速化と最適化を劇的に効率化します。/goalコマンドを組み合わせることで、Lighthouseスコア100点達成のような複雑な目標も、開発者の介入を最小限に抑えながら自律的に達成することが可能となるのです。

この強力な機能は現在Antigravityで利用可能です。ぜひ、皆様のウェブサイトのパフォーマンス向上にGemini 3.7 Flashと/goalコマンドをご活用ください。

参考動画

https://www.youtube.com/watch?v=nPpvkQ3zxSA

ポイント