Есть предложения Отказаться от использования SPA как сделал Twitter пр

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
Есть 2 предложения:
1. Отказаться от использования SPA (как сделал Twitter, правда, много лет назад - https://blog.twitter.com/engineering/en_us/a/2012/improving-performance-on-twittercom.html), но оно вряд ли зайдет
2. Использовать изоморфные приложения с сохранением URL'ов в единообразном виде, без хэшей и хэшбенгов; например, https://github.com/spikebrehm/isomorphic-tutorial
Данный подход:
- сохранение "человечности" адреса
- при возможном отказе от SPA или модификации движка или схемы генерации контента сохранит адреса страниц, что положительно скажется на входящих https://www.w3.org/Provider/Style/URI.html
- упростит ботам разбор адресов, следовательно, и внутренних, и внешних ссылок
Ориентируемся на опыт AirBnB (We dove into the single-page app world in 2011 with our mobile web site)
Рекомендации от https://serpstat.com/ru/blog/kak-optimizirovat-spa-sajty/
1) В URL не используйте стандартный хештег #, а просто замените его на хешбенг #!
2) Используйте в ссылках параметр href и не полагайтесь только на onClick: в том числе для отсутствия перезагрузки страницы по клику https://medium.com/elm-shorts/choosing-the-right-elm-spa-architecture-d6e8275f6899
3) 404 страница с соответствующим хедером, не 200
4) Использовать (и минимизировать) метрики First Paint, First contentful Paint, First Meaningful Paint, Visually Ready, First Consistently Interactive, First Interactive, Visually Complete
5) Настройка google analytics с учетом специфики SPA
6) Настройка отдачи контента для ботов
7) Обновление кэша для главной и страниц категорий - после появления новых внутренних страниц
8) Чек контента после рендера на стороне сервера
Что используем?
- Урлы одинаковые для бота и пользователя, без хэштегов и хэшбенгов
- Дополняем onClick Ahref
- Пишем 404 заголовок для несуществующих страниц, сейчас отдается 200
- На этапе отладки до выкатывания проводим тесты метрик, исходя из пороговых значений в 5 секунд для бота и данных Amazon - сокращения времени отдачи контента на 100 ms дает прирост 1% к доходу (http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/amazon-100ms-faster-1-revenue-increase/)
- В связи с ответами Google/Yandex о понимании механизма двустороннего рендера контента для бота и пользователя, заявлениях об отсутствии штрафных санкций (не считают это клоакой https://developers.google.com/search/docs/guides/dynamic-rendering), используем отдачу пререндер контента на базе UserAgent или его связки с дополнительными футпринтами (UA/IP/Reverse DNS lookup)
- При этом проводим регулярные обновления контента на пререндер страницах, оптимально - в момент появления изменений (публикации статьи, события, новости итд), допустимо - периодически, через незначительные интервалы времени
- Включаем систему контроля за отрисованными на сервере страницами: JS крайне чувствителен к ошибкам, в том числе синтаксическим; +логгирование ошибок
- Помним, что кэш Google отличается от того, что ПС отрисовала (https://twitter.com/johnmu/status/869434147797970944) и не паникуем
Технические решения (рендеринг, обработка кук, взаимодействие сервер/клиент, валидное подключение метрик) оставляем за девами.
В качестве структуры предлагается
- Главная
- Вид спорта
- Турнир
- Участник 1 / Участник 2 / Дата
Соответственно, URL:
https://leon.ru/mobile/football/champions-league/real-madrid-shinnik-yaroslavl-31-05-2025
Транслитерация при необходимости делается по ГОСТ 7.79-2000 (система Б) с приведением ссылок к строчному виду.
Дополнительно при этом:
- транслитерации подвергаются умлауты
- пробелы заменяются на дефисы
- допускаются только буквы нижнего регистра и цифры, остальные символы удаляются
- на рассмотрение предлагается дополнение адреса уникальным идентификатором, размещаемым перед названием команд, например, https://leon.ru/mobile/football/champions-league/fd78f-real-madrid-shinnik-yaroslavl-31-05-2025