ⓒⓢⓢ

вот это странное:

'<div class="numberIMG">' + '0' + number + '</span>'

открываете тег div, но дальше тег закрывающий span ...

13 строка
display: inline-block;

Почему текст в кнопке переходит на вторую строку?

много факторов может быть, но обобщёно, это из-за того что, нет ширины (width), поэтому блок стремится к наименьшему размеру, а наименьший размер в вашем блоке устанавливается размером слова "ПРОЕКТЕ"

установите width или white-space: nowrap

отклик - откликнуться - обратная связь пользователя? :)

это вполне может быть встроенный в браузер проигрыватель.
сохраните эту страницу - она должна быть в формате музыкального файла.
а как скачивать файлы через php, тут уже не раз обсуждалось

по структуре проекта, каждому своё, например:
/public/ - тут скомпилированный проект (нужна только для github pages)
/source/ - тут проект в исходном виде (less, html, js, fonts, img, ... - всё из чего компилируется проект)
readme.md - описание репозитория
index.html - тут можно редирект сделать в папку public или оставить карту верстки (если страниц много)

Веб-сокет - постоянное соединение - передача данных в реальном времени - данные поступили их обновили
30 сек - это далеко не "обновление в реальном времени"

Я бы сделал один свг файл, внутри сделал именованные группы для каждой буквы.
Но а в документе уже ссылаться на имена групп
Где хранить этот свг файл? Если буквы без дизайнерский изысков - маленькие по размеру, то в конец документа, иначе подгружать уже после отрисовки страницы

Можно профилированием памяти.
Можно библиотеками времени исполнения. (время выполнения скрипта, кадры\fps и пр.)
Но на фоне ресурсов, которые выделяются странице, сравнивать эти кубики с градиентом (простые объекты), только трата времени - вы не увидите особой разницы
(если конечно специально не стараться нагрузить страницу)