Наши попытки контролировать раздувание UX потерпели неудачу после того, как среда издательского бизнеса породила новые утечки, как только мы закончили временно устранять последнюю. Наша зависимость от рекламы, контролируемой внешними сторонами, была основным препятствием для улучшения работы сайта. Наш рост трафика сменился спадом.
На сайте, который предоставлял людям место, где можно было прийти и научиться программировать с использованием лучших практик, это выглядело не очень хорошо. И это был не тот сайт, которым мы могли бы гордиться.
Что еще хуже, возникли операционные узкие места,
Эта работа никого не прибавляла энергии и уж точно не была эффективной.
Пришло время внести некоторые изменения, и мы отправились на поиски решения. После долгих исследований мы решили, что Гэтсби отлично подойдет нашей команде. Это сыграет на руку нашим талантам, поможет нам решить все проблемы, которые мы выявили, и позволит нам продолжать использовать WordPress для серверной части, чтобы не нужно было менять процесс редактирования.
Почему мы переехали в Гэтсби
Редизайн SitePoint 2020
Конечный результат.
В начале исследовательского процесса Гэтсби начал выглядеть серьезным лидером. SitePoint — не маленький сайт, поэтому мы знали, что выбранная нами технология должна быть в состоянии справиться с некоторыми довольно интенсивными требованиями. Гэтсби проверил все наши коробки:
Мы могли бы кодировать все на React — технологии, которую каждый член команды разработчиков знает и использует ежедневно.
Gatsby очень быстр по своей сути — производительность была в центре этого проекта, и мы могли начать с хорошей основы.
Весь сайт отображается как статический, что отлично подходит для SEO.
Мы могли построить его как новый проект, а это означало, что можно не беспокоиться о существующей кодовой базе, которая принесла с собой огромное количество устаревшего кода.
Мы могли бы использовать Gatsby Cloud, позволяя команде получать отзывы о сборке в любое время, просто отправив ветку на GitHub.
Более удобный для сопровождения CSS
Поскольку мы собирались перестраивать сайт с нуля, мы планировали заодно внести некоторые изменения в дизайн. Чтобы помочь в этой работе, мы решили использовать
Как мы сделали сборку
Мы начали с того, что следили за базовой документацией Гэтсби и загружали наши посты с помощью
Это был большой начальный тест для нас: мы должны были увидеть, возможно ли вообще использовать Gatsby для нашего сайта.
За 20 лет ведения блога мы опубликовали более 17 000 постов. Мы знали, что сборка займет много времени, но нам нужно было выяснить, сможет ли Гэтсби справиться с таким огромным количеством контента. Как вы, наверное, догадались, тест принес хорошие новости: Гэтсби работает.
Небольшой совет для других команд, работающих с большими сайтами: чтобы сделать разработку более удобной, мы использовали переменные среды, чтобы Gatsby не мог получить все сообщения сайта, находящиеся в разработке. Нет ничего лучше
if (hasNextPage && process.env.NODE_ENV≠ «development») {
return fetchPosts ({ first: 100, after: endCursor }) ;
}
С этого момента мы столкнулись с некоторыми ограничениями исходного плагина WordPress. Мы не могли получить все необходимые данные, поэтому перешли на плагин WordPress GraphQL.
Мы используем Yoast, чтобы установить наши метаданные для SEO, и должны были убедиться, что мы получаем правильную информацию. Мы смогли сделать это с помощью WordPress GraphQL. Сделав это таким образом, команда по контенту могла
Во время сборки у нас было три или четыре человека в команде, которые работали над частями нового блога. В прошлом, если они хотели получить обратную связь, им нужно было отправить запрос на наш промежуточный сервер и убедиться, что никто его еще не использует.
Мы обнаружили, что Gatsby Cloud — отличное решение этой проблемы. Теперь, когда
Этот более быстрый цикл обратной связи упростил работу нескольких человек в команде над сборкой и устранил серьезное узкое место.
День запуска
В этот важный день мы запустили новый сайт и провели первые тесты. Новый блог летал — каждая страница загружалась мгновенно.
Мы столкнулись с некоторыми проблемами на SitePoint Premium, которая начала работать медленнее и даже зависать. Виновником был новый элемент на страницах блога, который вытягивал популярные книги, которые люди в настоящее время читают. Это можно было бы сделать с помощью вызова API на стороне клиента, и для Premium это было слишком сложно
Мы быстро добавили кэширование страниц в API, чтобы временно решить проблемы. Мы поняли, что делаем это неправильно — мы должны были получить эти данные во время сборки, чтобы популярные книги уже были загружены, когда мы отправляем страницу пользователю.
Это основное изменение мышления, которое вам нужно сделать при использовании Gatsby: любые данные, которые вы можете получить во время сборки, должны быть извлечены во время сборки. Вы должны использовать вызовы API на стороне клиента только тогда, когда вам нужны оперативные данные.
После того, как мы переписали вызов API во время сборки, первая загрузка страницы блога стала еще быстрее — и Премиум перестал падать.
Что нам еще нужно решить
Несмотря на то, что трудно переоценить, насколько лучше стал наш локальный опыт сегодня, есть еще несколько болевых точек, которые нам нужно решить.
Если публикуется новая статья или обновляется контент — а это происходит несколько раз в день — нам нужно повторно запустить сборку Gatsby, прежде чем эти изменения появятся.
Наше решение для этого прямо сейчас — простое задание cron, которое запускается в заранее запланированное время в течение дня. Долгосрочное решение этой проблемы — добавить
Нам также необходимо запустить инкрементные сборки. Прямо сейчас весь сайт нужно каждый раз перестраивать, и, учитывая наш архив контента, это может занять некоторое время. Гэтсби только что представил добавочные сборки, когда мы запустились, и мы работаем над реализацией этого на нашем сайте. Как только это будет настроено, наши сборки будут намного быстрее, если единственное, что изменилось, это контент.
Наш показатель скорости
Сделаем ли мы это снова?
Запуск такого типа обычно бывает довольно нервным событием и требует от команды много работы в день запуска.
С Гэтсби наш запуск был очень легким. Нам просто нужно было перенести WordPress на новый домен и указать sitepoint.com на версию сайта Гэтсби.
Затем мы откинулись на спинку кресла и стали наблюдать за цифрами, чтобы увидеть, что случилось с нашим трафиком. Через несколько дней данные начали поступать, и мы увидели увеличение трафика на 15%. Показатели вовлеченности пользователей выросли по всем направлениям.
Нетрудно понять, почему эффект был таким немедленным. Мы улучшили SEO на статических страницах HTML и CSS, а благодаря переходу на Gatsby стало возможным значительное улучшение скорости.
С тех пор как мы сделали этот шаг, мы увеличили показатели скорости Lighthouse с 6–15 на мобильных устройствах до диапазона 50–60 и с 30 на настольных компьютерах до 70. Мы хотели, чтобы скорость оставалась на первом месте с этим изменением, поэтому мы используем отличный инструмент под названием Calibre, который ежедневно запускает тесты скорости на нескольких популярных страницах и предупреждает нас о результатах. Мы используем этот инструмент, чтобы продолжать улучшать нашу оценку, поэтому я надеюсь, что через три месяца у нас будет еще одна статья для вас, когда мы получим все, чтобы оставаться в диапазоне 90+.
Команде нравится работать в Гэтсби. Кодовая база блога была
Если вы подумываете о переезде в Гэтсби и думаете, готов ли он к
