Почему я отказываюсь от анимации целевой страницы

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

Анимация была создана с помощью Lottie — замечательной библиотеки анимации от airbnb. Он может анализировать анимацию Adobe After Effects, экспортированную в формате JSON, и отображать ее изначально. Это означает, что анимацию легче создавать, и она имеет очень маленький размер файла. В последнее время я все чаще слышу, что анимация выглядит как заставка для моего сайта, но я проигнорировал этот комментарий, потому что в моем сознании это вызывает восторг ✨. У меня также были другие проблемы с этим, поскольку анимация заканчивается полностью белым экраном. На моем сайте есть темный режим, который он использует по умолчанию, если пользователь использует темный режим на своем устройстве, поэтому пользователь увидит эту резкую вспышку от белого к черному при переходе на основной сайт. Грубо 🤮. Но настоящие проблемы возникли, когда я посмотрел на доступность и поисковую оптимизацию.

Какое отношение ваша анимация имеет к доступности и SEO?

Оказывается много! Давайте посмотрим, как была реализована страница:

export default () => {
  useEffect(() => {
    setTimeout(() => {
      navigate("/")
    }, 2700)
  }, [])
  return (
    <div className="is-blue-bg" style={{ height: "100vh" }}>
      <SEO title="Welcome" />
      <Animation />
    </div>
  )
}

В приведенном выше фрагменте мы видим, что в useEffect мы запускаем навигацию по странице через 2700 мс после рендеринга страницы — точное время, необходимое для запуска анимации. Я задерживаю всех, кто посещает мой сайт, от просмотра моего контента почти на 3 секунды 😭. В анимации нет ни альтернативного текста, ни меток арии, ничего. Если бы вы использовали программу чтения с экрана и попали на эту страницу, ничего бы не было прочитано. Я хочу, чтобы мой сайт был доступен для всех, поэтому мне нужно было это исправить.

Вторая проблема связана с SEO. Когда роботы сканируют мой сайт, они предпочитают находить определенное количество текста на каждой странице, чтобы правильно проиндексировать страницу. Они ничего не нашли, и в результате страница не индексировалась. Это было еще хуже, так как это был корень всего моего сайта! Я понял, что надо уйти.

Результат

Удалив анимацию и сделав первую страницу основным корнем проекта, я попал на первую страницу результатов поиска по запросам «Sam Larsen-Disney» и «sld.codes» 🎉! Я также надеюсь на более активное взаимодействие, поскольку пользователи смогут получать доступ к контенту на 3 секунды быстрее! Это изменение также увеличило мой показатель доступности маяка до 93/100! И не волнуйтесь, я гонюсь за этими последними 7 очками.

Значит, анимации больше нет?

Бред какой то! Я ❤️ анимации! Я просто хочу найти более тонкие варианты использования, когда они не наносят вреда потоку пользователей через мой сайт. Пример этого теперь можно найти в шапке моего сайта при переходе между страницами.

Все еще скучаете по странице?

Вы все еще можете увидеть его здесь: sld.codes/start