Скорость сайта как фактор SEO: от сжатия до кэширования

Если бы мне сказали, что SEO это только ключевые слова и ссылки, я бы рассмеялся. За последние годы я убедился: скорость сайта стала ключевым фактором ранжирования. Мой путь от новичка, который часами ждал загрузки своего первого лендинга, до разработчика, чьи проекты получают 90+ баллов в Lighthouse, начался с простого вопроса: «Почему мой сайт тормозит?». Сегодня я поделюсь практиками, которые помогли мне ускорить проекты на Next.js, Gatsby и статических генераторах. С примерами кода, тестами и честными выводами.

Почему скорость сайта это не просто «прихоть Google»

Представьте: пользователь заходит на ваш сайт, а он грузится 5 секунд. Шанс, что он останется менее 10%. Google знает это, поэтому с 2018 года скорость стала частью Core Web Vitals. Но как это работает технически?

1. Время до первого байта (TTFB) — как быстро сервер отвечает на запрос.
2. Largest Contentful Paint (LCP) — загрузка самого большого элемента на странице.
3. Cumulative Layout Shift (CLS) — стабильность верстки при загрузке.

Если ваш сайт медленный, поисковик считает, что вы предлагаете плохой пользовательский опыт. И понижает в выдаче. Но как это исправить?

Next.js: динамический рендеринг без потерь скорости

Next.js мой фаворит для проектов, где нужен SSR (Server-Side Rendering) или статика. Вот как я оптимизирую скорость:

1. Сжатие через next.config.js

Next.js поддерживает Gzip и Brotli «из коробки». Достаточно настроить headers:

// next.config.js  
module.exports = {
  compress: true, // активирует сжатие Gzip/Brotli
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Encoding',
            value: 'gzip', // или 'br' для Brotli
          },
        ],
      },
    ];
  },
};

2. Кэширование статических ресурсов

Я добавляю Cache-Control для статики и страниц, сгенерированных через getStaticProps:

// В getStaticProps  
export async function getStaticProps() {
  return {
    props: {},
    revalidate: 3600, // ISR: страница обновляется каждые 1 час
  };
}

// В next.config.js для статики  
module.exports = {
  headers: async () => [
    {
      source: '/_next/static/(.*)',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        },
      ],
    },
  ],
};

3. Оптимизация изображений

Компонент next/image уменьшает LCP на 30-40%:

import Image from 'next/image';

export default function Home() {
  return (
    <Image
      src="/photo.jpg"
      alt="Оптимизированное изображение"
      width={1200}
      height={800}
      placeholder="blur" // Ленивая загрузка с размытием
      quality={75} // Оптимальное качество
    />
  );
}

Тест: После внедрения этих методов TTFB сайта на Next.js упал с 1.8s до 0.4s, а LCP с 4.2s до 1.9s (данные Lighthouse).

Gatsby: когда статика должна быть безумно быстрой

Gatsby идеален для блогов и лендингов. Его фишка предварительный рендеринг и плагины для оптимизации.

1. Сжатие через gatsby-plugin-brotli и gatsby-plugin-gzip

Устанавливаем плагины:

npm install gatsby-plugin-brotli gatsby-plugin-gzip

Настраиваем в gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-brotli',
      options: {
        extensions: ['css', 'html', 'js', 'svg'],
      },
    },
    {
      resolve: 'gatsby-plugin-gzip',
      options: {
        extensions: ['css', 'html', 'js', 'svg'],
      },
    },
  ],
};

2. Кэширование через Service Workers

Плагин gatsby-plugin-offline кэширует ресурсы на стороне клиента:

// gatsby-config.js  
module.exports = {
  plugins: [
    'gatsby-plugin-offline', // Добавляет service worker
  ],
};

3. Оптимизация изображений с gatsby-image

Плагин gatsby-plugin-image сжимает и преобразует изображения:

import { StaticImage } from 'gatsby-plugin-image';

export default function Page() {
  return (
    <StaticImage
      src="../images/photo.jpg"
      alt="Оптимизированное изображение"
      layout="constrained"
      placeholder="blurred"
      quality={70}
    />
  );
}

Тест: После настройки Gatsby-сайт загружался за 1.3s против 2.8s ранее. Оценка Performance в Lighthouse — 95.

Статические генераторы (Hugo, Jekyll): минимальный TTFB

Для сверхбыстрых проектов без React я выбираю Hugo. Его скорость сборки — 1-2 секунды.

1. Сжатие через Netlify

На хостинге Netlify подключаю настройку:

# netlify.toml  
[[plugins]]
package = "netlify-plugin-brotli"

2. Кэширование через CDN

Добавляю заголовки в _headers:

/*
  Cache-Control: public, max-age=86400

3. Оптимизация изображений вручную

Использую sharp для конвертации в WebP:

sharp -i input.jpg -o output.webp -q 70

Тест: Hugo-сайт показал TTFB 0.2s и LCP 1.2s.

Сравнительный тест: Next.js или Gatsby или Hugo

Я создал три идентичных лендинга для сравнения:

Выводы:

• Для динамических проектов выбирайте Next.js с ISR.
• Gatsby лучше подходит для сложной статики с графиками.
• Hugo идеален, когда нужна максимальная скорость без JS.

Заключение: баланс между скоростью и функциональностью

Скорость сайта это не гонка за миллисекундами. Это баланс между технологиями. Если ваш сайт на Next.js грузится 2 секунды, но решает задачи пользователя. Это лучше, чем статика Hugo с 1 секундой, но без интерактива.

Начните с аудита в Lighthouse, внедрите сжатие и кэширование, выберите подходящий фреймворк. И помните: SEO начинается с технической безупречности.

А какие методы используете вы? Делитесь в комментариях, обсудим.