Как мы получили идеальный PageSpeed на CimpleO.com

Reading time: 3 minutes

Last modified: 26 May 2025

Сайт был медленным. Мобильный PageSpeed — 45, десктоп — 68. Вот что мы изменили, чтобы добраться до 98 и 100.

Исходное состояние

Мобильный рейтинг: 45/100
Десктопный рейтинг: 68/100
Largest Contentful Paint (LCP): 3,2 с (требовал улучшения)
Cumulative Layout Shift (CLS): 0,18 (требовал улучшения)
Блокирующие ресурсы: несколько CSS и JavaScript файлов, блокирующих рендеринг

1. Инлайнинг критического CSS

Блокирующий CSS существенно замедлял First Contentful Paint (FCP) и LCP. Вот как мы это устранили:

<!-- Инлайн критического CSS в head -->
<style id="critical-css">
  /* Критические стили для контента выше сгиба */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; line-height: 1.6; color: #333; }
  .main-banner { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
  /* Дополнительные критические стили */
</style>

<!-- Асинхронная загрузка некритического CSS -->
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>

2. Оптимизация шрифтов

Шрифты были ещё одним серьёзным узким местом. Мы применили следующие оптимизации:

<!-- Предзагрузка критических шрифтов -->
<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" as="style">

<!-- Загрузка шрифтов с font-display: swap -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2'),
         url('/fonts/Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-SemiBold.woff2') format('woff2'),
         url('/fonts/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
</style>

3. Resource Hints и предзагрузка

Мы добавили resource hints для ускорения установки соединения с критическими сторонними доменами:

<!-- DNS Prefetching -->
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />

<!-- Preconnect к критическим доменам -->
<link href="https://www.googletagmanager.com" rel="preconnect" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Предзагрузка критических ресурсов -->
<link rel="preload" as="image" href="/assets/awards/clutch_global_b2b_fall_2023-2x.webp" 
  imagesrcset="/assets/awards/clutch_global_b2b_fall_2023-2x.webp 1x, /assets/awards/clutch_global_b2b_fall_2023-2x.png 1x" 
  imagesizes="200px">

4. Оптимизация JavaScript

Мы пересмотрели стратегию загрузки JavaScript, чтобы минимизировать блокировку рендеринга:

<!-- Defer для некритичного JS -->
<script src="/js/main.js" defer></script>

<!-- Загрузка несущественных скриптов после загрузки страницы -->
<script>
  window.addEventListener('load', function() {
    // Загрузка некритичных скриптов
    const scripts = [
      'https://www.googletagmanager.com/gtag/js?id=G-4K42YN9T11',
      '/js/analytics.js'
    ];
    
    scripts.forEach(src => {
      const script = document.createElement('script');
      script.src = src;
      script.async = true;
      document.body.appendChild(script);
    });
  });
</script>

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

Мы внедрили адаптивные изображения и современные форматы:

<picture>
  <source 
    srcset="/images/hero-640w.webp 640w,
            /images/hero-1024w.webp 1024w,
            /images/hero-1920w.webp 1920w"
    sizes="100vw"
    type="image/webp">
  <img 
    src="/images/hero-1920w.jpg" 
    alt="CimpleO - Your Technology Partner"
    width="1920" 
    height="1080"
    loading="eager"
    decoding="async">
</picture>

6. Структурированные данные и метаданные

Мы доработали структурированные данные для улучшения SEO и rich results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "CimpleO",
  "url": "https://cimpleo.com",
  "logo": "https://cimpleo.com/images/logo.png",
  "sameAs": [
    "https://www.linkedin.com/company/cimpleo",
    "https://github.com/cimpleo"
  ]
}
</script>

Результаты

После внедрения всех оптимизаций:

Метрика	До	После
Мобильный рейтинг	45/100	98/100
Десктопный рейтинг	68/100	100/100
LCP	3,2 с	1,1 с
CLS	0,18	0,02
TTI	5,4 с	1,9 с

Постоянный мониторинг

Мы запускаем проверки Lighthouse CI на каждом деплое и отслеживаем Core Web Vitals на реальных пользовательских сессиях. PageSpeed-оценки смещаются при изменении контента — новое изображение, дополнительный скрипт, более тяжёлый шрифт — поэтому автоматические проверки ловят деградацию до того, как она накапливается.

Те же техники применимы к любому Hugo-сайту или статическому сайту. Если ваши PageSpeed-оценки в диапазоне 40–70 и вы хотите понять, что их сдерживает, напишите нам на hello@cimpleo.com.