Оптимизация размера образов

В процессе разработки и тестирования веб-приложений важным аспектом является производительность. В частности, скорость загрузки страниц напрямую зависит от размера изображений, используемых на сайте. Избыточный размер изображений может значительно замедлить загрузку, особенно на мобильных устройствах или при ограниченной скорости интернета. В рамках автоматизированного тестирования с использованием Playwright, можно эффективно интегрировать методы оптимизации изображений, чтобы гарантировать их корректное отображение и минимизировать влияние на производительность.

Почему важна оптимизация изображений?

Размер изображений влияет на:

  • Время загрузки страницы: чем больше изображений, тем медленнее страница загружается.
  • Потребление трафика: большие изображения потребляют больше данных, что актуально для мобильных пользователей.
  • Ресурсы устройства: большие изображения требуют больше оперативной памяти и процессорного времени для рендеринга.

Тестирование на производительность часто включает в себя проверку размера изображений, чтобы убедиться, что они не становятся узким местом в загрузке страниц.

Как Playwright может помочь в оптимизации изображений?

Playwright, как инструмент для автоматизации тестирования, позволяет взаимодействовать с элементами на странице, выполнять проверки производительности и автоматизировать задачи, связанные с изображениями. Используя Playwright, можно:

  1. Проверить размеры загружаемых изображений.
  2. Убедиться, что изображения загружаются с нужным разрешением и форматом.
  3. Сравнить размеры изображений с оптимизированными версиями.

Тестирование размеров изображений

Для начала необходимо выполнить проверку реальных размеров изображений на странице. Playwright предоставляет доступ к DOM-элементам и их атрибутам, что позволяет извлечь информацию о реальном размере изображений.

Пример кода для извлечения размеров изображений:

const { test, expect } = require('@playwright/test');

test('Проверка размера изображений', async ({ page }) => {
  await page.goto('https://example.com');
  
  // Получаем все изображения на странице
  const images = await page.locator('img');

  for (let i = 0; i < await images.count(); i++) {
    const img = images.nth(i);
    const width = await img.evaluate(img => img.naturalWidth);
    const height = await img.evaluate(img => img.naturalHeight);
    
    // Проверяем, что размеры изображений не превышают допустимые
    expect(width).toBeLessThanOrEqual(1920);
    expect(height).toBeLessThanOrEqual(1080);
  }
});

Этот код позволяет проверить, что изображения на странице не имеют чрезмерно большие размеры, которые могут повлиять на производительность.

Проверка форматов изображений

Некоторые форматы изображений могут быть более оптимальными для веба, чем другие. Например, WebP — это формат, который предлагает меньший размер при сопоставимом качестве по сравнению с JPEG и PNG.

Используя Playwright, можно извлечь формат изображений и убедиться, что используется оптимальный формат для веба.

Пример кода для проверки формата изображений:

const { test, expect } = require('@playwright/test');

test('Проверка формата изображений', async ({ page }) => {
  await page.goto('https://example.com');
  
  const images = await page.locator('img');

  for (let i = 0; i < await images.count(); i++) {
    const img = images.nth(i);
    const src = await img.getAttribute('src');
    
    // Проверяем, что изображение имеет расширение .webp
    expect(src.endsWith('.webp')).toBeTruthy();
  }
});

Этот тест позволяет удостовериться, что изображения на сайте имеют формат WebP, что способствует меньшему размеру и более быстрой загрузке.

Интеграция с инструментами для сжатия изображений

Playwright может быть использован в связке с инструментами для сжатия изображений, такими как imagemin, чтобы в автоматическом режиме оптимизировать изображения во время процесса тестирования. Например, можно настроить процесс сжатия изображений на сервере или в процессе сборки и затем проверить их размер с использованием Playwright.

Пример с использованием imagemin:

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['src/images/*.jpg'], {
    destination: 'dist/images',
    plugins: [
      imageminWebp({ quality: 75 })
    ]
  });

  console.log('Изображения успешно оптимизированы!');
})();

Затем можно настроить Playwright для проверки, что изображения после оптимизации действительно загружаются в уменьшенном размере.

Инспекция загрузки изображений

Playwright позволяет проверять скорость загрузки изображений, используя API для мониторинга сетевых запросов. Это может быть полезно для анализа времени загрузки и принятия мер для улучшения производительности.

Пример кода для проверки времени загрузки изображений:

const { test, expect } = require('@playwright/test');

test('Проверка времени загрузки изображений', async ({ page }) => {
  await page.goto('https://example.com');
  
  const [response] = await Promise.all([
    page.waitForResponse(response => response.url().includes('image.jpg')),
    page.locator('img').click()
  ]);
  
  const loadingTime = response.timing().responseEnd - response.timing().requestStart;
  expect(loadingTime).toBeLessThan(2000); // Ожидаем, что время загрузки будет менее 2 секунд
});

Этот код позволяет отслеживать, сколько времени занимает загрузка каждого изображения, и помогает выявить изображения, которые могут стать узким местом в производительности.

Использование тестов на несколько разрешений

Одним из важных аспектов является проверка загрузки изображений на различных разрешениях экрана. Для мобильных устройств и планшетов изображения часто могут быть меньшего размера. Playwright предоставляет возможность эмулировать различные устройства и проверять, какие изображения загружаются в зависимости от разрешения экрана.

Пример кода для проверки изображения на разных разрешениях:

const { test, expect } = require('@playwright/test');

test('Проверка загрузки изображения на разных разрешениях', async ({ page }) => {
  await page.goto('https://example.com');
  
  const mobileViewport = { width: 375, height: 667 };
  const desktopViewport = { width: 1920, height: 1080 };

  // Эмулируем мобильный экран
  await page.setViewportSize(mobileViewport);
  const mobileImage = await page.locator('img');
  const mobileSrc = await mobileImage.getAttribute('src');
  expect(mobileSrc).toContain('mobile-image.jpg');

  // Эмулируем экран десктопа
  await page.setViewportSize(desktopViewport);
  const desktopImage = await page.locator('img');
  const desktopSrc = await desktopImage.getAttribute('src');
  expect(desktopSrc).toContain('desktop-image.jpg');
});

Этот тест проверяет, что для мобильных и десктопных версий загружаются изображения соответствующего размера.

Заключение

Оптимизация изображений в процессе тестирования с использованием Playwright позволяет не только повысить производительность сайта, но и улучшить пользовательский опыт. С помощью возможностей Playwright можно тестировать размер и формат изображений, проверять их загрузку, а также интегрировать с другими инструментами для автоматической оптимизации. Этот подход помогает выявить проблемы на ранней стадии и избежать негативного влияния больших изображений на скорость работы приложения.

Оглавление