Использовали ли вы браузерные DevTools для эмуляции медленного интернет-соединения при тестировании?

Э, слушай, а вот эта ваша эмуляция медленного интернета — это ж вообще святое дело, когда приложение пишешь! Это как проверка на вшивость, блядь. Представь: у тебя всё летает на локалхосте, а потом выкатываешь на прод, и какой-нибудь пользователь с хутора, где интернет через два ведра и мокрую тряпку, открывает твой сайт и получает пиздец, а не интерфейс. Волнение ебать!

Как в Хроме это самое троттлинг включить, чтобы всё ползло как в жопе у черепахи:

1. Тыкаешь F12 — DevTools вылазят, как геморрой в понедельник.
2. Ищешь вкладку Network (Сеть, блять).
3. Там есть выпадашка Throttling (по дефолту "Online").
4. Выбираешь готовый профиль или жмёшь Add..., чтобы свой извращённый придумать.

Что там есть из коробки, эти ваши профили:

• Slow 3G: Качает и отдаёт по ~400 Кбит/с, а пинг — 400 мс. Ощущения, будто данные через спутник с Марса идут, ёпта.
• Fast 3G: Чуть быстрее, но всё равно тоска.
• Regular 4G: Уже терпимо.
• Offline: Полный пиздец, коннекта нет. Как будто провайдер тебе сказал «иди нахуй».

А на что вообще смотреть, когда всё тормозит?

1. Контент: Грузится ли хоть что-то? Или юзер пялится в белый экран, а потом у него layout из-за картинки прыгает, и он клавиатуру об стену швыряет?
2. Ошибки: А что, если запрос просто сдохнет по таймауту? Приложение не должно просто зависнуть и молчать, как мудак. Должна быть какая-то retry-логика, сообщение «эй, интернет-то говно».
3. Прогресс: Если файл качается, видно ли, сколько ещё ждать? Или это магический чёрный ящик?
4. Интерфейс: Весь UI встаёт колом на время загрузки? Кнопки не нажимаются? Вот это пиздец.
5. Приоритеты: Сначала грузятся самые важные штуки (стили, основной скрипт), а уже потом всякая хуйня вроде баннеров? Или наоборот?

Вот, смотри, как это автоматизировать можно, через Puppeteer (Node.js):

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    // 1. Врубаем медленный 3G через CDP (Chrome DevTools Protocol)
    const client = await page.target().createCDPSession();
    await client.send('Network.emulateNetworkConditions', {
        offline: false,
        downloadThroughput: 500 * 1024 / 8, // 500 Кбит/с в байтах/сек
        uploadThroughput: 500 * 1024 / 8,   // 500 Кбит/с
        latency: 400                        // 400 мс задержки
    });

    // 2. Слушаем, какие запросы ползут (можно посмотреть, какая хуйня сколько тормозит)
    await page.setRequestInterception(true);
    page.on('request', request => {
        console.log(`Запрос: ${request.url()} (тип: ${request.resourceType()})`);
        request.continue();
    });

    // 3. Засекаем, сколько страница грузится (время до полного пиздеца)
    console.time('pageLoad');
    await page.goto('https://example.com', { waitUntil: 'networkidle0' });
    console.timeEnd('pageLoad');

    // 4. Делаем скриншот — вдруг там полная дичь отобразилась
    await page.screenshot({ path: 'slow-connection-state.png' });

    // 5. Проверяем, а главная часть контента вообще загрузилась?
    const isContentLoaded = await page.evaluate(() => {
        const mainContent = document.querySelector('.main-content');
        return mainContent && mainContent.textContent.length > 0;
    });

    console.assert(isContentLoaded, 'Основной контент не загрузился при медленном соединении!');

    await browser.close();
})();

А вот пример на Java с Selenium, для любителей посерьёзнее:

import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v85.network.Network;
import org.openqa.selenium.devtools.v85.network.model.ConnectionType;

public class NetworkThrottlingTest {
    public static void main(String[] args) {
        ChromeDriver driver = new ChromeDriver();
        DevTools devTools = driver.getDevTools();

        devTools.createSession();

        // Включаем отслеживание сети
        devTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));

        // Настраиваем параметры медленного 3G (чтоб всё еле-еле)
        devTools.send(Network.emulateNetworkConditions(
            false, // offline
            500,   // latency (ms)
            50000, // downloadThroughput (bytes/sec) ~400 Kbps
            50000, // uploadThroughput (bytes/sec) ~400 Kbps
            Optional.of(ConnectionType.CELLULAR3G)
        ));

        // Замеряем время загрузки через Navigation Timing API
        driver.get("https://example.com");

        Long loadTime = (Long) driver.executeScript(
            "return performance.timing.loadEventEnd - performance.timing.navigationStart;"
        );
        System.out.println("Время полной загрузки страницы: " + loadTime + " мс");

        // Проверяем, что хотя бы в 15 секунд уложились
        assert loadTime < 15000 : "Страница грузится слишком долго при медленном 3G: " + loadTime + "мс";

        driver.quit();
    }
}

Ещё, блядь, инструменты есть, на любой вкус:

• Charles Proxy / Fiddler: Там можно такие извращения устроить — для каждого домена своё правило, где-то замедлить, где-то вообще обосрать запрос.
• WebPageTest: Онлайн-штука, там сразу с разных мест и скоростей тестировать можно.
• Lighthouse: Он в аудит производительности сразу с медленным сетями закладывается.
• Дросселирование на уровне ОС: В Линуксе tc, на маке Network Link Conditioner. Это уже для нативных приложений каминг-аут, но суть та же.

Какие цифры потом смотреть, чтобы не опозориться?

• First Contentful Paint (FCP) — когда первый кусок контента появился.
• Largest Contentful Paint (LCP) — когда самая большая хрень (типо героя или фото) загрузилась.
• Time to Interactive (TTI) — когда можно уже тыкать и что-то делать.
• Общий размер всех файлов — если он овердохуища, то никакой троттлинг не спасёт.
• Количество HTTP-запросов — каждый запрос это риск, что что-то упрётся и всё поедет.

Короче, не ленись это делать, а то получится история, как с Герасимом и Муму, только ты в роли барыни, которая приказала всё утопить, а пользователи — это несчастная собачка. Пиздец.