JavaScriptレンダリング基本最適化 - Phase 1

[aoshimash]

🚀 JavaScriptレンダリング基本最適化 - Phase 1

概要

JavaScriptレンダリングの基本的なパフォーマンス改善を実装します。この最初のフェーズでは、最も効果的で実装が簡単な最適化に焦点を当てます。

問題点

• Terraform Cloud Docsのような動的サイトでJSレンダリングがタイムアウトする
• 不要なリソースの読み込みによるパフォーマンス低下
• ブラウザの起動コストが高い

実装内容

1. 不要なリソースのブロック

// 画像、フォント、メディアファイルの読み込みをブロック
func (c *JSClient) optimizePage(page playwright.Page) error {
    return page.Route("**/*", func(route playwright.Route) {
        resourceType := route.Request().ResourceType()
        switch resourceType {
        case "image", "font", "media", "manifest", "other":
            route.Abort()
            return
        }
        route.Continue()
    })
}

2. 基本的なブラウザ設定の最適化

// ブラウザ起動オプションの最適化
browserOptions := playwright.BrowserTypeLaunchOptions{
    Headless: playwright.Bool(true),
    Args: []string{
        "--disable-blink-features=AutomationControlled",
        "--disable-dev-shm-usage",
        "--disable-web-security",
        "--no-sandbox",
        "--disable-setuid-sandbox",
        "--disable-gpu",
        "--disable-accelerated-2d-canvas",
    },
}

3. ページ設定の最適化

// JavaScriptの実行を制御
page.AddInitScript(playwright.PageAddInitScriptOptions{
    Script: playwright.String(`
        // 不要なWeb APIを無効化
        Object.defineProperty(navigator, 'webdriver', {
            get: () => false,
        });
    `),
})

// ビューポートサイズを小さくして処理を軽減
page.SetViewportSize(playwright.PageSetViewportSizeOptions{
    Width:  playwright.Int(1280),
    Height: playwright.Int(720),
})

4. タイムアウト処理の改善

// 段階的なタイムアウト設定
type TimeoutStrategy struct {
    Navigation time.Duration
    Script     time.Duration
    Resource   time.Duration
}

func (c *JSClient) applyTimeoutStrategy(page playwright.Page, strategy TimeoutStrategy) {
    page.SetDefaultNavigationTimeout(float64(strategy.Navigation.Milliseconds()))
    page.SetDefaultTimeout(float64(strategy.Script.Milliseconds()))
}

実装ファイル

• internal/client/js_client.go - 既存ファイルの修正
• internal/client/js_optimizer.go - 新規作成（最適化ロジック）

テスト項目

• Terraform Cloud Docsでの動作確認
• パフォーマンス改善の測定（Before/After）
• 既存のテストが全てパスすること
• メモリ使用量の確認

成功基準

• Terraform Cloud Docsのレンダリングが30秒以内に完了
• api-docsリンクが正しく検出される
• メモリ使用量が現在の50%以下

関連Issue

• 関連: fix: Install missing system dependencies for Playwright in CI - Phase 2 Fix #68 (JavaScriptレンダリング機能の追加)