Elena Fire

Во-первых, id может быть один на странице и не более.
Во-вторых, написанный код правильно отрабатывает - находит первый соответствующий запросу элемент.

Решение:
Вместо id использовать class
Вместо getElementById использовать querySelectorAll

@media (max-width: 768px) {
      body {
                  display: none;
               }
}

И пользователи в шоке.... Лучше прописать страницу-заглушку и <?php ?> указывать, что при ширине экрана меньше 768px выводить страницу, на которой написано: "Пацаны, этот сайт только для десктопа!"

Если при верстке используется что-то типа bootstrap, то многие стили действительно могут вообще никогда на сайте не использоваться. Однако опыт говорит, что идти на поводу у Lighthouse и PageSpeed не означает ускорить загрузку сайта. Если сайт уже устоявшийся и на нем будет ближайшее время (год) проводиться работы по стилизации, можно на все однотипные свойства объединить классы, в которых они используются. Например, вместо написания для отдельных классов свойства display: none, собрать все эти классы в одну строчку и ей придать display: none. Тогда будет обработка стилевых файлов быстрее. А разбивка одного файла стилей на несколько может сильно замедлить загрузку и PageSpeed опять будет недоволен.

Если сжатие изображений не дает улучшения в скорости, значит есть еще проблема - ее надо найти и решить. Максимальную нагрузку дают скрипты статистики (Яндекс.Метрика, Гугл.Аналитикс).