Static pagesWeb performanceHow we build

Каждая страница здесь была готова ещё до вашего прихода

Мы делаем сайты, где страница существует файлом раньше, чем вы на неё нажали. Рассказываем, что это значит, зачем мы так делаем и что меняется для того, кто читает.

Fractera7 мин чтения

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

Два способа ответить посетителю

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

Одно и то же нажатие, отвеченное двумя способами.
Когда вы открываете страницуСобирается по запросуГотова заранее
Что происходит в эту секундуСервер просыпается, спрашивает базу, отрисовывает разметку и только потом отвечаетСервер находит готовый файл и отдаёт его
Пришли сто человек разомЭта работа делается сто разОдин и тот же файл отдаётся сто раз
На плохой связи не догрузились скриптыЧасто пустой экран: текст должен был дорисоваться в браузереСлова уже лежат в полученном документе
У базы данных выдался плохой деньСтраницу не из чего произвестиСтраница не пострадала — пострадает только по-настоящему живая часть
Её читает поисковик или ИИ-ассистентТо, что успело собратьсяСтраница целиком, ровно та же, что у человека

Сколько на самом деле стоит ожидание

Скорость легко объявить придиркой, поэтому посмотрим на измеренное. Собственное руководство Google ставит планку появления основного содержимого страницы на 2,5 секунды и меньше, причём считает её по 75-му перцентилю загрузок — то есть не по самому удачливому посетителю, а по невезучей четверти: уставший телефон, лифт, чужой вайфай. А исследование, заказанное Google и подготовленное Deloitte, четыре недели наблюдавшее мобильный трафик розницы, туризма, люксовых брендов и сайтов сбора заявок в Европе и США, назвало цену одной десятой доли секунды.

+8.4%

конверсия в рознице после ускорения на 0,1 с

+9.2%

средний чек в рознице

+10.1%

конверсия в туризме, то же исследование

4

недели наблюдений за мобильным трафиком

Десятая доля секунды — это не редизайн. Это примерно разница между «отдать файл» и «сначала собрать ответ», то есть ровно предмет этой статьи. И выгода тут не только денежная: та же скорость решает, увидит ли ваш бизнес человек в электричке, на деревенской связи или с пятилетним телефоном в руках — или увидит белый прямоугольник и нажмёт «назад».

И это ещё способ быть найденнымCore Web Vitals используются нашими системами ранжирования.
Google Search Central — «Understanding page experience in Google Search results»

Google аккуратно добавляет, что это один сигнал из многих и что хорошие числа сами по себе не поднимают сайт в выдаче. Мы аккуратны ровно так же: мы не обещаем позиций. Мы обещаем другое — страница не станет причиной, по которой вы их потеряете.

Что получает посетитель, простыми словами

  • Слова приходят вместе со страницей. Текст, который вы читаете, лежит внутри скачанного браузером документа, а не дорисовывается скриптом потом. Выключите JavaScript — эта статья прочитается полностью: это свойство, которое проверяется на каждой сборке, а не счастливое совпадение.
  • Наплыв посетителей её не замедляет. Отдать один и тот же готовый файл тысячу раз стоит почти ничего. Сайты, собирающие страницу по запросу, тормозят именно тогда, когда они популярны, — то есть ровно тогда, когда это важнее всего.
  • Ломаться нечему. Страница, которой в момент открытия не нужна база данных, не может быть сломана базой данных. Чем меньше подвижных частей между нажатием и экраном, тем меньше способов ответу потеряться по дороге.
  • Машины читают ту же страницу, что и вы. Поисковики и ИИ-ассистенты получают полный текст, а не оболочку, которая дорисовалась бы в браузере, — а браузера у них нет. У всего, что здесь опубликовано, есть ещё и текстовый близнец, написанный ровно для такого читателя.
Слева полка готовых страниц; одна из них выделена, и стрелка уносит её прямо в окно браузера справа, где она уже отрисована целиком.
Весь фокус в этом: страница не производится по запросу. Её берут с полки и отдают.

Как мы собираем одну такую страницу

Как мы работаем

От папки со словами до файла на сервере

Четыре шага, и страница выходит наружу, только если пережила все четыре.

  1. Слова живут в папке

    Каждая страница — это папка с собственным текстом внутри: по файлу на язык, рядом с самой страницей. Ничего не сшивается из базы в момент открытия, а удаление папки уносит страницу целиком, вместе с переводами.

  2. Сборка превращает их в готовые документы

    Прежде чем что-то попадёт наружу, весь сайт один раз отрисовывается в готовую разметку. Это и есть шаг, который переносит ожидание с вашего визита на наши часы, где ему и место.

  3. Машинные проверки отсеивают сломанное

    Картинка, на которую сослались и не положили; язык, потерявший перевод; страница, которая тихо перестала быть статической, — каждое из этого роняет сборку, а не доезжает до вас. Любая из проверок появилась потому, что ровно эта ошибка однажды выехала наружу.

  4. Браузер получает файл

    Для вас ничего не вычисляется, потому что вычислять уже нечего. Единственная работа сервера — найти нужный документ и отправить его.

Где мы намеренно перестаём быть статикой

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

Есть и вторая цена, потише, и платим её мы: готовить заранее — значит знать, что страница скажет, до того как её кто-нибудь спросил. Это больше дисциплины с нашей стороны и меньше импровизации. Мы считаем такой размен очевидно выгодным и предпочитаем сказать об этом вслух, а не дать вам обнаружить его в коммерческом предложении. Кто такие эти «мы» — на странице «О нас» в подвале сайта.

Скорость — не украшение. Это первое, что сайт говорит незнакомому человеку, и говорит он это раньше, чем прочитано хоть одно слово.

Источники

  1. Largest Contentful Paint (LCP) — web.dev, Google. Порог «хорошо» — 2,5 секунды и меньше, оценивается по 75-му перцентилю загрузок, отдельно для телефонов и компьютеров.
  2. «Understanding page experience in Google Search results» — Google Search Central. Приведённая выше фраза стоит там дословно, вместе с оговоркой, что хорошая оценка сама по себе места в выдаче не покупает.
  3. «Milliseconds Make Millions» — заказано Google, подготовлено Deloitte Ireland LLP на данных Fifty-Five. Четыре недели мобильных данных сайтов розницы, туризма, люксовых брендов и сбора заявок в Европе и США. Ускорение мобильного сайта на 0,1 с дало +8,4 % конверсии в рознице, +9,2 % среднего чека и +10,1 % конверсии в туризме.

Три числа выше приведены по названным опубликованным исследованиям и сверены с первоисточниками. Всё остальное в статье — наша собственная практика, и с ней мы охотно спорим.

Частые вопросы

«Статическая» — значит, сайт вообще нельзя менять?
Нет. Значит, что страница готова раньше, чем её попросили, а не что она готова навсегда. Тексты, картинки, цены и языки правятся в панели управления и применяются без пересборки сайта. Страницы с меняющимися сведениями обновляются в фоне по расписанию, и всё это время посетитель продолжает получать готовую копию.
Это поднимет мой сайт в Google?
Честно обещать такое нельзя, и мы не обещаем. Google говорит, что Core Web Vitals используются его системами ранжирования, и там же добавляет, что хорошие оценки сами по себе сайт не поднимают. Быстрая и целая страница гарантирует другое: поисковик и ИИ-ассистент получат ваше содержимое полностью, а не оболочку, — и скорость не станет причиной, по которой посетитель ушёл.
А как же магазин, вход, личный кабинет?
Это рисуется для конкретного человека после входа, потому что страница, приготовленная для всех, не может быть личной. Деление намеренное: всё публичное — главная, статьи, каталог, страницы в подвале — готовится заранее, и только то, что действительно принадлежит одному человеку, производится по запросу.
Powered by Fractera