ヘッドレスブラウザトラフィックの最適化:効率的なデータスクレイピングのためのPuppeteerによるコスト削減戦略

Senior Web Scraping Engineer
概要
Puppeteerを使用してデータスクレイピングを行う際、トラフィック消費は重要な考慮事項です。特にプロキシサービスを使用する場合、トラフィックコストが大幅に増加する可能性があります。トラフィックの使用を最適化するために、次の戦略を採用できます:
- リソースのインターセプト: 不要なリソースリクエストをインターセプトすることでトラフィック消費を削減します。
- リクエストURLのインターセプト: URLの特性に基づいて特定のリクエストをインターセプトすることで、さらにトラフィックを削減します。
- モバイルデバイスのシミュレーション: モバイルデバイスの設定を使用して、軽量のページバージョンを取得します。
- 包括的最適化: 上記の方法を組み合わせて最良の結果を得ます。
最適化方案1: リソースのインターセプト
リソースのインターセプトの紹介
Puppeteerでは、page.setRequestInterception(true)
を使用することで、ブラウザによって開始されたすべてのネットワークリクエストをキャプチャし、続行(request.continue()
)、中止(request.abort()
)、または応答のカスタマイズ(request.respond()
)を決定できます。
この方法は、帯域幅の消費を大幅に削減でき、特にクロール、スクリーンショット、およびパフォーマンス最適化のシナリオに適しています。
インターセプト可能なリソースの種類と提案
リソースタイプ | 説明 | 例 | インターセプト後の影響 | 推奨 |
---|---|---|---|---|
image |
画像リソース | JPG/PNG/GIF/WebP画像 | 画像は表示されません | ⭐ 安全 |
font |
フォントファイル | TTF/WOFF/WOFF2フォント | システムのデフォルトフォントが使用されます | ⭐ 安全 |
media |
メディアファイル | 動画/音声ファイル | メディアコンテンツは再生できません | ⭐ 安全 |
manifest |
Webアプリマニフェスト | PWA構成ファイル | PWA機能に影響が出る場合があります | ⭐ 安全 |
prefetch |
プリフェッチリソース | <link rel="prefetch"> |
ページへの影響は最小限 | ⭐ 安全 |
stylesheet |
CSSスタイルシート | 外部CSSファイル | ページスタイルが失われ、レイアウトに影響が出る可能性があります | ⚠️ 注意 |
websocket |
WebSocket | リアルタイム通信接続 | リアルタイム機能が無効になります | ⚠️ 注意 |
eventsource |
サーバー送信イベント | サーバープッシュデータ | プッシュ機能が無効になります | ⚠️ 注意 |
preflight |
CORSプレフライトリクエスト | OPTIONSリクエスト | クロスオリジンリクエストが失敗します | ⚠️ 注意 |
script |
JavaScriptスクリプト | 外部JSファイル | 動的機能が無効になるため、SPAがレンダリングされない可能性があります | ❌ 避ける |
xhr |
XHRリクエスト | AJAXデータリクエスト | 動的データを取得できません | ❌ 避ける |
fetch |
Fetchリクエスト | モダンAJAXリクエスト | 動的データを取得できません | ❌ 避ける |
document |
メインドキュメント | HTMLページそのもの | ページが読み込まれません | ❌ 避ける |
推奨レベルの説明:
- ⭐ 安全: インターセプトはデータスクレイピングやファーストスクリーンのレンダリングにほとんど影響を与えません。デフォルトでブロックすることをお勧めします。
- ⚠️ 注意: スタイル、リアルタイム機能、またはクロスオリジンリクエストが壊れる可能性があります。ビジネス上の判断が必要です。
- ❌ 避ける: SPAや動的サイトが正常にレンダリングできない、またはデータを取得できない高い確率があります。これらのリソースが絶対に必要ない場合を除き、お勧めしません。
リソースのインターセプト例コード
javascript
import puppeteer from 'puppeteer-core';
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
async function scrapeWithResourceBlocking(url) {
const browser = await puppeteer.connect({
browserWSEndpoint: scrapelessUrl,
defaultViewport: null
});
const page = await browser.newPage();
// リクエストのインターセプトを有効にする
await page.setRequestInterception(true);
// ブロックするリソースタイプを定義
const BLOCKED_TYPES = new Set([
'image',
'font',
'media',
'stylesheet',
]);
// リクエストをインターセプト
page.on('request', (request) => {
if (BLOCKED_TYPES.has(request.resourceType())) {
request.abort();
console.log(`ブロックされました: ${request.resourceType()} - ${request.url().substring(0, 50)}...`);
} else {
request.continue();
}
});
await page.goto(url, {waitUntil: 'domcontentloaded'});
// データを抽出
const data = await page.evaluate(() => {
return {
title: document.title,
content: document.body.innerText.substring(0, 1000)
};
});
await browser.close();
return data;
}
// 使用例
scrapeWithResourceBlocking('https://www.scrapeless.com');
.then(data => console.log('スクレイピング結果:', data))
.catch(error => console.error('スクレイピング失敗:', error));
最適化スキーム 2: リクエストURLのインターセプト
リソースタイプによるインターセプトに加えて、URLの特徴に基づいてより詳細なインターセプト制御を実施することができます。これは特に広告、分析スクリプト、その他の不要なサードパーティリクエストをブロックするのに効果的です。
URLインターセプト戦略
- ドメインによるインターセプト: 特定のドメインからのすべてのリクエストをブロックする
- パスによるインターセプト: 特定のパスからのリクエストをブロックする
- ファイルタイプによるインターセプト: 特定の拡張子のファイルをブロックする
- キーワードによるインターセプト: URLに特定のキーワードを含むリクエストをブロックする
一般的なインターセプト可能なURLパターン
URLパターン | 説明 | 例 | 推奨 |
---|---|---|---|
広告サービス | 広告ネットワークのドメイン | ad.doubleclick.net , googleadservices.com |
⭐ 安全 |
分析サービス | 統計および分析スクリプト | google-analytics.com , hotjar.com |
⭐ 安全 |
ソーシャルメディアプラグイン | ソーシャル共有ボタンなど | platform.twitter.com , connect.facebook.net |
⭐ 安全 |
トラッキングピクセル | ユーザー行動を追跡するピクセル | pixel , beacon , tracker を含むURL |
⭐ 安全 |
大容量メディアファイル | 大きな動画、音声ファイル | .mp4 , .webm , .mp3 のような拡張子 |
⭐ 安全 |
フォントサービス | オンラインフォントサービス | fonts.googleapis.com , use.typekit.net |
⭐ 安全 |
CDNリソース | 静的リソースCDN | cdn.jsdelivr.net , unpkg.com |
⚠️ 注意 |
URLインターセプト例コード
javascript
import puppeteer from 'puppeteer-core';
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
async function scrapeWithUrlBlocking(url) {
const browser = await puppeteer.connect({
browserWSEndpoint: scrapelessUrl,
defaultViewport: null
});
const page = await browser.newPage();
// リクエストインターセプションを有効にする
await page.setRequestInterception(true);
// ブロックするドメインとURLパターンを定義
const BLOCKED_DOMAINS = [
'google-analytics.com',
'googletagmanager.com',
'doubleclick.net',
'facebook.net',
'twitter.com',
'linkedin.com',
'adservice.google.com',
];
const BLOCKED_PATHS = [
'/ads/',
'/analytics/',
'/pixel/',
'/tracking/',
'/stats/',
];
// リクエストをインターセプト
page.on('request', (request) => {
const url = request.url();
// ドメインを確認
if (BLOCKED_DOMAINS.some(domain => url.includes(domain))) {
request.abort();
console.log(`ブロックされたドメイン: ${url.substring(0, 50)}...`);
return;
}
// パスを確認
if (BLOCKED_PATHS.some(path => url.includes(path))) {
request.abort();
console.log(`ブロックされたパス: ${url.substring(0, 50)}...`);
return;
}
// その他のリクエストを許可
request.continue();
});
await page.goto(url, {waitUntil: 'domcontentloaded'});
// データを抽出
const data = await page.evaluate(() => {
return {
title: document.title,
content: document.body.innerText.substring(0, 1000)
};
});
await browser.close();
return data;
}
// 使用例
scrapeWithUrlBlocking('https://www.scrapeless.com')
.then(data => console.log('スクレイピング結果:', data))
.catch(error => console.error('スクレイピング失敗:', error));
最適化スキーム 3: モバイルデバイスのシミュレーション
モバイルデバイスのシミュレーションは、トラフィック最適化の別の効果的な戦略で、モバイルウェブサイトは通常、軽量のページコンテンツを提供します。
モバイルデバイスシミュレーションの利点
- 軽量なページバージョン: 多くのウェブサイトはモバイルデバイス向けにコンパクトなコンテンツを提供
- 小さな画像リソース: モバイル版は通常、小さな画像を読み込む
- 簡素化されたCSSおよびJavaScript: モバイル版は通常、簡素化されたスタイルおよびスクリプトを使用
- 広告や非コアコンテンツの削減: モバイル版はしばしば一部の非コア機能を削除
- 適応応答: 小さな画面に最適化されたコンテンツレイアウトを取得
モバイルデバイスシミュレーションの設定
一般的に使用されるモバイルデバイスの構成パラメータは以下の通りです:
javascript
const iPhoneX = {
viewport: {
width: 375,
height: 812,
deviceScaleFactor: 3,
isMobile: true,
hasTouch: true,
isLandscape: false
}
};
または、puppeteerの組み込みメソッドを使用してモバイルデバイスをシミュレートすることもできます。
javascript
import { KnownDevices } from 'puppeteer-core';
const iPhone = KnownDevices['iPhone 15 Pro'];
javascript
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(iPhone);
javascript
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
async function optimizedScraping(url) {
console.log(`最適化されたスクレイピングを開始します: ${url}`);
// トラフィック使用量を記録
let totalBytesUsed = 0;
const browser = await puppeteer.connect({
browserWSEndpoint: scrapelessUrl,
defaultViewport: null
});
const page = await browser.newPage();
// リクエストのインターセプションを設定
await page.setRequestInterception(true);
// リクエストをインターセプト
page.on('request', (request) => {
request.continue();
});
// ネットワークトラフィックを監視
page.on('response', async (response) => {
const headers = response.headers();
const contentLength = headers['content-length'] ? parseInt(headers['content-length'], 10) : 0;
totalBytesUsed += contentLength;
});
await page.goto(url, {waitUntil: 'domcontentloaded'});
// 遅延読み込みコンテンツをトリガーするためにスクロールをシミュレート
await page.evaluate(() => {
window.scrollBy(0, window.innerHeight);
});
await new Promise(resolve => setTimeout(resolve, 1000))
// データを抽出
const data = await page.evaluate(() => {
return {
title: document.title,
content: document.body.innerText.substring(0, 1000),
links: Array.from(document.querySelectorAll('a')).slice(0, 10).map(a => ({
text: a.innerText,
href: a.href
}))
};
});
// トラフィック使用状況統計を出力
console.log(`\nトラフィック使用状況統計:`);
console.log(`使用量: ${(totalBytesUsed / 1024 / 1024).toFixed(2)} MB`);
await browser.close();
return data;
}
// 使用例
optimizedScraping('https://www.scrapeless.com')
.then(data => console.log('スクレイピング完了:', data))
.catch(error => console.error('スクレイピング失敗:', error));
最適化されていないコードを実行した後、印刷された情報からトラフィックの違いが非常に直感的にわかります。
シナリオ | 使用したトラフィック (MB) | 削減率 |
---|---|---|
最適化されていない | 6.03 | — |
最適化済み | 0.81 | ≈ 86.6 % |
上記の最適化手法を組み合わせることで、プロキシトラフィック消費を大幅に削減し、スクレイピング効率を向上させ、必要なコアコンテンツを確実に取得できるようになります。
Scrapelessでは、適用される法律、規制、およびWebサイトのプライバシーポリシーを厳密に遵守しながら、公開されているデータのみにアクセスします。 このブログのコンテンツは、デモンストレーションのみを目的としており、違法または侵害の活動は含まれません。 このブログまたはサードパーティのリンクからの情報の使用に対するすべての責任を保証せず、放棄します。 スクレイピング活動に従事する前に、法律顧問に相談し、ターゲットウェブサイトの利用規約を確認するか、必要な許可を取得してください。