ИИ агент для браузера

🔍 Для динамической пагинации рекомендую Playwright:

Преимущества перед Selenium:
• Встроенное ожидание элементов (не нужен sleep)
• Auto-wait: кликает когда кнопка реально кликабельна
• Быстрее в 2-3 раза
• Простой API на Python

Архитектура скрипта:
1. Открываем категорию → ждём загрузки карточек
2. Кликаем «Показать ещё» пока кнопка есть
3. Собираем все карточки через page.query_selector_all(".product-card")
4. Сохраняем в CSV
5. Переходим к следующей категории

Скинь URL или HTML-фрагмент карточки товара — напишу рабочий скрипт.

✅ Скрипт готов (scraper.py, 48 строк):

from playwright.sync_api import sync_playwright
import csv

CATEGORIES = ["smartphones", "laptops", ...]

with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()

for cat in CATEGORIES:
page.goto(f"https://site.ru/catalog/{cat}")
while page.query_selector(".catalog__load-more"):
page.click(".catalog__load-more")
page.wait_for_load_state("networkidle")

cards = page.query_selector_all(".product-card")
for card in cards:
title = card.query_selector(".product-card__title").inner_text()
price = card.query_selector(".product-card__price").inner_text()
status = card.query_selector(".product-card__status").inner_text()
writer.writerow([title, price, status])

Установка: pip install playwright && playwright install chromium
Запуск: python scraper.py → файл products.csv
12 категорий × 20 страниц ≈ 8-10 минут.

📊 Приоритизация по влиянию:

1. Бандл 2.4 MB — главная проблема (LCP 5.2s):
• Запусти npx webpack-bundle-analyzer — покажет что ест место
• Скорее всего: moment.js (300KB), lodash целиком (70KB), необработанные изображения

2. CLS 0.28 — layout shift:
• Изображения без width/height
• Шрифты загружаются с FOUT
• Динамический контент без skeleton

3. FID 340ms — тяжёлый JS при загрузке:
• React hydration блокирует main thread
• Нужен code splitting по роутам

Начни с webpack-bundle-analyzer и скинь скриншот — скажу что резать.

✅ План оптимизации — экономия ~1.1 MB:

• moment.js → dayjs: 312KB → 2KB (API совместим на 95%)
npm i dayjs && npx jscodeshift -t moment-to-dayjs src/

• lodash → lodash-es + tree-shaking: 71KB → ~8KB
import { debounce } from "lodash-es" вместо import _ from "lodash"

• react-pdf → lazy load: 420KB не грузится пока не нужен
const PDFViewer = React.lazy(() => import("./PDFViewer"))

• @mui/icons → именованные импорты: 264KB → ~12KB
import DeleteIcon from "@mui/icons-material/Delete"

• chart.js → tree-shakeable import:
import { Chart, LineController, ... } from "chart.js"
Chart.register(LineController, ...)

Итого: 2.4 MB → ~1.3 MB. LCP: 5.2s → ~2.5s. Lighthouse: 38 → 70-80.

🔍 Две отдельные проблемы:

Safari — растянутая последняя карточка:
flex: 1 1 calc(33.33% - 16px) → flex-grow: 1 заставляет последний элемент занять всё свободное пространство.
Исправление: flex: 0 1 calc(33.33% - 16px) — запретить рост.

Firefox — разная высота:
Firefox считает gap в flex иначе при min-width. Плюс: align-items по умолчанию stretch, но при flex-wrap каждая строка рассчитывается отдельно.
Исправление: добавь align-items: stretch явно + align-content: flex-start.

Финальный CSS:
.catalog {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-content: flex-start;
}
.card {
flex: 0 1 calc(33.333% - 11px);
min-width: 280px;
}

calc(33.333% - 11px) — потому что gap 16px делится на 3 колонки: 16×2/3 ≈ 11px.

✅ Мобильная адаптация:

Замени min-width: 280px на медиа-запрос:

.card {
flex: 0 1 calc(33.333% - 11px);
}

@media (max-width: 960px) {
.card { flex: 0 1 calc(50% - 8px); }
}

@media (max-width: 600px) {
.card { flex: 0 1 100%; }
}

Либо современный подход без медиа-запросов:
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

CSS Grid + auto-fill + minmax = адаптивная сетка без единого медиа-запроса. Работает одинаково во всех браузерах включая Safari 14+.