タグ: Lighthouse

Rendertron によるダイナミック レンダリング

多くのフロントエンド フレームワークは、コンテンツの表示に JavaScript を使用しています。そのため、Google がコンテンツをインデックスに登録したり、インデックスに登録されたコンテンツの更新に時間がかかる場合があります。

昨年の Google I/O では、この問題の回避策としてダイナミック レンダリングが議論されました。ダイナミック レンダリングの実装方法はいくつかあります。このブログでは、Rendertron を使用したダイナミック レンダリングの実装例を紹介します。Rendertron は headless Chromium をベースとしたオープンソース ソリューションです。

ダイナミック レンダリングを検討すべきサイト

あなたのサイトにアクセスする検索エンジンやソーシャル メディア ボットが、すべて JavaScript を実行できるわけではありません。Googlebot が JavaScript を実行するのには時間がかかり、こちらに示すようにいくつかの制限が存在します。

ダイナミック レンダリングは、変更頻度が高く、表示に JavaScript を必要とするコンテンツに対して有用です。

また、ハイブリッド レンダリング（Angular Universal など）を検討することで、あなたのサイトのユーザー エクスペリエンス（特に first meaningful paint までの時間）を向上できる可能性があります。

ダイナミック レンダリングの仕組み

ダイナミック レンダリングとは、特定のユーザー エージェントに応じて、クライアント側でレンダリングされるコンテンツとプリレンダリングしたコンテンツを切り替えることを指します。

JavaScript を実行して静的 HTML を生成するにはレンダラが必要になります。Rendertron はオープンソース プロジェクトであり、headless Chromium を使用してレンダリングを行います。シングルページ アプリでは、頻繁にバックグラウンドでデータを読み込んだり、コンテンツをレンダリングするための作業で遅延が発生したりすることがあります。Rendertron には、ウェブサイトでレンダリングが完了したタイミングを判定するメカニズムがあります。Rendertron は、すべてのネットワーク リクエストが完了し、未処理の作業がなくなるまで待機します。

このブログ投稿で扱う内容

  1. サンプルのウェブアプリを確認する
  2. 小規模の express.js サーバーを設定して、ウェブアプリを配信する
  3. ダイナミック レンダリング用のミドルウェアとして Rendertron をインストールして構成する

サンプルのウェブアプリ

「kitten corner」ウェブアプリは JavaScript を使用して、さまざまな猫の画像を API から読み込み、グリッド形式で表示します。

グリッド形式で猫の画像が表示され、ボタンでさらに画像を表示できます。可愛いと思いませんか？

以下がこのウェブアプリの JavaScript です。

  const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50';
  const tpl = document.querySelector('template').content;
  const container = document.querySelector('ul');

  function init () {
    fetch(apiUrl)
    .then(response => response.json())
    .then(cats => {
      container.innerHTML = '';
      cats
        .map(cat => {
          const li = document.importNode(tpl, true);
          li.querySelector('img').src = cat.url;
          return li;
        }).forEach(li => container.appendChild(li));
    })
  }

  init();

  document.querySelector('button').addEventListener('click', init);

このウェブアプリでは、Googlebot でまだサポートされていない最新の JavaScript（ES6）が使用されています。Googlebot がコンテンツを認識できるかは、モバイル フレンドリー テストを使用することで確認できます。

モバイル フレンドリー テストより、このページがモバイル フレンドリーであることがわかりますが、スクリーンショットには猫が一切見当たりません。見出しとボタンは表示されていますが、猫の画像がまったく表示されていません。

この問題は簡単に修正できます。こうした修正は、ダイナミック レンダリングを設定する方法を学習するための良い練習となるでしょう。ダイナミック レンダリングにより、ウェブアプリのコードを変更せずに Googlebot に猫の画像を認識させることができます。

サーバーの設定

ウェブアプリを配信するために、node.js ライブラリの express を使用してウェブサーバーを構築します。

サーバーのコードは以下のようになります（プロジェクトの完全なソースコードはこちらをご覧ください）。

const express = require('express');
const app = express();

const DIST_FOLDER = process.cwd() + '/docs';
const PORT = process.env.PORT || 8080;

// Serve static assets (images, css, etc.)
app.get('*.*', express.static(DIST_FOLDER));

// Point all other URLs to index.html for our single page app
app.get('*', (req, res) => {
 res.sendFile(DIST_FOLDER + '/index.html');
});

// Start Express Server
app.listen(PORT, () => {
 console.log(`Node Express server listening on http://localhost:${PORT} from ${DIST_FOLDER}`);
});

こちらで実際の例を試すことができます。最新のブラウザを使用しているのであれば、複数の猫の画像が表示されるはずです。パソコンからプロジェクトを実行するには、node.js で次のコマンドを実行する必要があります。

npm install express rendertron-middleware
node server.js

次に、使用しているブラウザで http://localhost:8080 を指定します。ここからはダイナミック レンダリングを設定します。

Rendertron インスタンスのデプロイ

Rendertron は、URL を取得して、headless Chromium によってその URL の静的 HTML を返すサーバーを実行します。Rendertron プロジェクトの推奨事項に沿って、Google Cloud Platform を使用します。

新しい Google Cloud Platform プロジェクトを作成するためのフォーム

新しい Google Cloud Platform プロジェクトを作成するためのフォームに関しては、無料枠でプロジェクトを作成できる点に注意してください。また、この設定を本番環境で使用すると、Google Cloud Platform の料金体系に応じた課金が発生する点にも注意してください。

  1. Google Cloud Console で新しいプロジェクトを作成します。入力フィールドにある「プロジェクト ID」をメモします。
  2. Google Cloud SDK をドキュメントに説明されているとおりにインストールしてログインします。
  3. 以下のコマンドで、GitHub にある Rendertron リポジトリのクローンを作成します。
      git clone https://github.com/GoogleChrome/rendertron.git
      cd rendertron
  4. 次のコマンドを実行して依存関係をインストールし、パソコンに Rendertron を構築します。
      npm install && npm run build
  5. 次の内容の config.json という新しいファイルを rendertron ディレクトリに作成して、Rendertron キャッシュを有効化します。
      { "datastoreCache": true }
  6. rendertron ディレクトリから次のコマンドを実行します。「YOUR_PROJECT_ID」は、手順 1 でメモしたプロジェクト ID に置き換えます。
      gcloud app deploy app.yaml --project EURE_PROJEKT_ID
  7. 任意のリージョンを選択して、デプロイを確定します。デプロイが完了するまで待ちます。
  8. YOUR_PROJECT_ID.appspot.com（「YOUR_PROJECT_ID」は、手順 1 でメモしたプロジェクト ID に置き換えます）をブラウザに入力します。入力フィールドといくつかのボタンがある Rendertron のインターフェースが表示されるはずです。
Google Cloud Platform に導入した後の Rendertron の UI

Rendertron のウェブ インターフェースが表示されたら、Rendertron インスタンスが正常にデプロイされたことを意味します。次の手順で必要になるため、プロジェクトの URL（YOUR_PROJECT_ID.appspot.com）をメモします。

サーバーへの Rendertron の追加

ウェブサーバーは express.js を使用しており、Rendertron には express.js ミドルウェアがあります。server.js ファイルのディレクトリで、次のコマンドを実行します。

npm install --save rendertron-middleware

このコマンドにより、npm から rendertron-middleware がインストールされます。これで、rendertron-middleware をサーバーに追加できます。

const express = require('express');
const app = express();
const rendertron = require('rendertron-middleware');

bot リストの構成

Rendertron は、ユーザー エージェントの HTTP ヘッダーを使用して、リクエストが bot からのものなのか、ユーザーのブラウザからのものなのかを判断します。Rendertron には、比較に使用できる、適切に整理された bot ユーザー エージェントのリストがあります。Googlebot は JavaScript を実行できるため、デフォルトではこのリストに Googlebot は含まれません。Rendertron に Googlebot リクエストもレンダリングさせるには、ユーザー エージェントのリストに Googlebot を追加します。

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

Rendertron は後でこの正規表現とユーザー エージェントのヘッダーを比較します。

ミドルウェアの追加

bot リクエストを Rendertron インスタンスに送信するには、express.js サーバーにミドルウェアを追加する必要があります。ミドルウェアはリクエストしているユーザー エージェントを確認し、既知のボットからのリクエストを Rendertron インスタンスに転送します。次のコードを server.js に追加します。必ず「YOUR_PROJECT_ID」を Google Cloud Platform プロジェクト ID に置き換えてください。

app.use(rendertron.makeMiddleware({
 proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
 userAgentPattern: BOT_UA_PATTERN
}));

サンプル ウェブサイトをリクエストする bot は Rendertron から静的 HTML を受け取るので、コンテンツを表示するために JavaScript を実行する必要がありません。

設定のテスト

Rendertron の設定に成功したかどうかをテストするには、もう一度モバイル フレンドリー テストを実行します。

最初のテストとは違い、猫の画像が表示されます。HTML タブには、JavaScript コードが生成したすべての HTML が表示され、コンテンツを表示するための JavaScript が Rendertron によって不要になったことがわかります。

まとめ

ウェブアプリに変更を加えずに、ダイナミック レンダリングを設定しました。このような設定により、ウェブアプリの静的バージョンの HTML をクローラに提供できます。

Posted by Martin Splitt、Open Web Unicorn
Original version: Google Webmaster-Zentrale Blog: Dynamisches Rendering mit Rendertron

PageSpeed Insights、Lighthouse の使用を開始しました

Google では、スピードが重視されていることを考慮し、どなたでもページやサイトのパフォーマンスを把握できるよう各種ツールをご用意しています。これまで、こうしたツールでは異なる分析エンジンを使用していたため、ツールごとに最適化案が異なり、混乱を招くこともありました。そこで、本日、PageSpeed Insights（PSI）の分析エンジンとして Lighthouse の使用を開始する運びとなりましたことをお知らせいたします。これにより、デベロッパーはウェブ、コマンドライン、Chrome DevTools を問わず、どこでも同じパフォーマンス分析結果と最適化案を参照できるようになります。また、PSI には、Chrome ユーザー エクスペリエンス レポート（CrUX）で提供されるフィールド データも組み込まれます。PageSpeed Insights API バージョン 5 では、CrUX のデータのほか、Lighthouse 監査のすべてのデータが提供されるようになります。PSI API の以前のバージョンは 6 か月後にサポートを終了いたします。

Pagespeed Insights で Lighthouse の使用を開始

PageSpeed Insights で提供される情報は次のとおりです。

  • ラボデータ: PSI では、Lighthouse を使用してページを取得、分析し、モバイル端末でページがどのように読み込まれるかのシミュレーションが行われます。ページの一連のパフォーマンス指標（First Contentful Paint、Time to Interactive など）を計算し、これらの指標を要約して 0～100 のパフォーマンス スコアで表します。スコアは 3 つのレベルに分類され、90 以上は「良」と見なされます。
  • フィールド データ: PSI には、ページの実際のパフォーマンス指標（First Contentful Paint、First Input Delay など）とその origin も表示されます（これを受けて、PSI では origin: クエリのサポートも終了します）。ただし、必ずしもすべてのサイトに表示可能なフィールド データがあるとは限りません。データは、毎日更新される Chrome ユーザー エクスペリエンス レポートを利用し、過去 28 日間かけて収集されます。実際のネットワークの状態や Chrome ユーザーが使用する端末は広範囲に及ぶため、ここでの指標は、ラボデータ欄の指標とは異なることがありますのでご注意ください。
  • 最適化案: PSI では、ページのパフォーマンス指標を改善する方法についての最適化案が提供されます。各最適化案には、実装するとページの読み込みがどのくらい速くなるかの見積もりも表示されます。
  • 診断: この欄には、ページがウェブ開発のおすすめの設定にどの程度沿っているかについての追加情報が表示されます。

PSI v5 API では、所定の URL について、この新しい分析データと CrUX のデータに加え、すべての Lighthouse カテゴリデータ（パフォーマンス、プログレッシブ ウェブアプリ、アクセシビリティ、ベスト プラクティス、SEO）が返されるようになります。

変更内容について詳しくは、よくある質問をご覧ください。ご不明な点がありましたら、Stack Overflow をご利用ください（その際、質問には pagespeed-insights タグの設定をお願いいたします）。

Posted by Rui Chen and Paul Irish
Original version: Official Google Webmaster Central Blog: PageSpeed Insights, now powered by Lighthouse

保護されたウェブの普及を目指して

この記事は Chrome セキュリティ プロダクト マネージャー、Emily Schechter による Chromium Blog の記事 "Chromium Blog: A secure web is here to stay" を元に翻訳・加筆したものです。また、Google Developers Japan ブログに投稿された記事のクロスポストです。詳しくは元記事をご覧ください。

私たちはここ数年間、サイトで HTTPS による暗号化を採用するよう強く働きかけることによって、保護されたウェブを目指してきました。そして昨年は、「保護されていません」と表示される HTTP ページを徐々に増やすことによって、HTTP サイトが保護されていないことをユーザーに理解してもらうよう努めてきました。2018 年 7 月に Chrome 68 がリリースされると、すべての HTTP サイトに「保護されていません」と表示されるようになります。

Chrome 68 では、すべての HTTP ページのオムニボックスに「保護されていません」と表示されます。

デベロッパーはサイトを HTTPS に移行し、ウェブを誰でも安全に使えるようにしてきました。昨年の進展はめざましく、その動きはさらに続いています。

  • Android と Windows の Chrome トラフィックの 68% 以上が保護されています。
  • Chrome OS と Mac での Chrome トラフィックの 78% 以上が保護されています。
  • ウェブ上のトップ 100 サイトのうち、81 がデフォルトで HTTPS を使用しています。

Chrome は、HTTPS をできるだけ簡単に設定できるようにするために貢献しています。デベロッパーがサイトを HTTPS に移行する助けになるように、ウェブページを改善するための自動ツール、Lighthouse の 最新 Node CLI 版では、混合コンテンツの監査が可能になっています。この Lighthouse の新しい監査機能を使うと、HTTP を使ってサイトに読み込まれているリソースや、サブリソースの参照を HTTPS 版に変更するだけで HTTPS にアップグレードできるリソースを見つけることができます。

Lighthouse は、ウェブページを改善する自動デベロッパー ツールです。

Chrome の新しいインターフェースでは、すべての HTTP サイトが保護されているわけではないことがわかりやすくなるため、ウェブをデフォルトで保護された HTTPS に切り替えるよう促す効果があります。HTTPS は、今までになく簡単で安価なものになり、パフォーマンスの改善や、HTTP で扱うには危険だった、パワフルな新機能を利用可能にします。デベロッパーの皆さんは、まずセットアップ ガイドをご覧ください。

Reviewed by Eiji Kitamura - Developer Relations Team

Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介

Lighthouse Chrome 拡張機能に、新しく SEO カテゴリが追加されましたのでご紹介します。

Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ（PWA）対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。デベロッパーの皆様が「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse（灯台）」と名付けられました。

Lighthouse 内の SEO カテゴリでは、ウェブページの基本的な「SEO ヘルスチェック」を実行できます。その結果、デベロッパーやウェブマスターの皆様にウェブページで改善可能な箇所を見つけていただけるようになっています。Lighthouse は Chrome ブラウザでローカルに実行されるため、ステージング環境でも、公開中のページでも、認証が必要なページでも、同じように SEO 監査を実行できます。

SEO のおすすめの方法を提示

現在の SEO 監査項目はすべてを網羅したものではなく、Google ウェブ検索やその他の検索エンジンでの SEO を保証するものでもありません。現在のリストは、どのサイトも知っておくべき基本事項を検証、反映できるよう設計されており、あらゆるスキルレベルの SEO 担当者やデベロッパー向けに詳細なガイドを提供します。将来的には、さらに詳しい監査やガイドをご提供したいと考えています。ご利用になりたい監査の種類についてご意見やご提案がございましたら、ぜひお知らせください。

使用方法

現在、SEO 監査は以下の 2 種類の方法で実行できます。

Lighthouse Chrome 拡張機能を使用する:
  1. Lighthouse Chrome 拡張機能をインストールします。
  2. 拡張機能バーの Lighthouse アイコンをクリックします。
  3. [Options] メニューを選択し、[SEO] チェックボックスをオンにして [OK] をクリックしてから [Generate report] をクリックします。
    4. Lighthouse 拡張機能で SEO 監査を実行する
Chrome Canary で Chrome デベロッパー ツールを使用する:
  1. Chrome デベロッパー ツールを開きます。
  2. [Audits] に移動します。
  3. [Perform an audit] をクリックします。
  4. [SEO] チェックボックスをオンにして、[Run Audit] をクリックします。
    5. Chrome Canary で SEO 監査を実行する

現在の Lighthouse Chrome 拡張機能に含まれる SEO 監査項目は、今後拡張、強化していく予定です。確実に機能することが確認でき次第、Chrome デベロッパー ツールでもデフォルトで SEO 監査をご利用いただけるようにいたします。

皆様が現在取り組んでいるプロジェクトや今後のプロジェクトで、この機能がお役に立てば幸いです。SEO に関するこうしたヒントをご存知でなかった方や、SEO に関心をお持ちの方は、検索エンジン最適化（SEO）スターター ガイドをご覧になることをおすすめします。ご意見やご提案がございましたら、GitHub、ウェブマスター ヘルプ フォーラムでお寄せください。

Posted by Valentyn, Webmaster Outreach Strategist
Original version: Official Google Webmaster Central Blog: Launching SEO Audit category in Lighthouse Chrome extension