Как правильно разместить меню если изначально оно невидимое?

Question

[Alex]

На странице, в шапке есть кнопка открывающее меню. Само меню представляет собой боковую панель, никак не связанную с шапкой (position: fixed).

Так как изначально при загрузке страницы меню не видно, то, как я полагаю, его стоит разместить в подвале, чтобы браузер не тратил время на загрузку невидимого элемента, а сделал это уже после того как загрузит основной контент. Как я полагаю это улутшит показатель First Meaningful Paint.

Вопрос, как это скажется на веб-доступности и поисковой оптимизации?

1. Нормально ли что основное меню в самом низу страницы? Может можно как-то сделать, чтобы когда пользователь с клавиатуры открывает меню, его фокус сразу перемещался на его первый елемент? А при закрытии — не оставался внизу страницы, а пеермещался назад в шапку? А как быть со скрин-ридерами?

2. То что ссылки на основные разделы сайта будут в самом подвале как-то повлияет на поискового бота? Раставляет ли он ссылки на странице по какому-то приоритету?

Answer 1

[Stalker_RED]

Элементы с display:none не отрисовываются.

чтобы когда пользователь с клавиатуры открывает меню, его фокус сразу перемещался на его первый елемент?

Да, отличный план. Также почитайте про tabindex.

Comments

[Alex]

Они то не отрисовываются, но браузеру всё равно придётся загрузить огромный кусок html кода перед тем, как добраться до весомого контента

[Stalker_RED]

Александр Козак, FMP это именно про рендер, а не про парсинг.
У вас в самом деле настолько огромное меню, что вы об этом беспокоитесь?

Можно в хроме запустить профайлер, посмотреть на что действительно тратится время, и эти места и править. Кстати, советую это посмотреть на древнем слабеньком ноуте, можно узнать много нового.

[Alex]

Stalker_RED, Да, меню огромное. С кучей елементов, много уровней вложенности.