Alex

В общем случае -- стоит.

Но это больше всего зависит от вашего конкретного случая. Сколько кода является общим для всех страниц? Сколько уникально для каждого типа страниц? Сколько уникально для каждой страницы? Какова модель поведения пользователя? Он посетит все страницы сайта или только страницы одного типа? Пользователи заходят на сайт только раз, или постоянно возвращаются? С каких устройств и с какой скоростью интернета к вам приходят? Как построен процесс деплоя? Какие тарифы у вашего хостинга? Как часто и что вы изменяете в исходном коде? Как будете инвалидировать кэш? И ещё очень много вопросов, которые нужно учитывать.

Можно всё сгрести в один огромный бандл. Тогда первичная загрузка будет дольше, особенно ощутимо на медленном интернете. Но навигации по страницам будут быстрее, а нагрузка на сервер меньше. Но при изменении, скажем цвета одной кнопки, пользователю придётся заново качать весь бандл. И наоборот. Можно уйти и в другую сторону: дробить всё на как можно меньшие кусочки. (Например вынести весь код для какой-то модалки отдельно) и загружать каждый чанк только в момент когда он понадобится. Так первичная загрузка будет намного быстрее, но реакция на действия пользователя будет медленнее.

В общем случае -- дробить код сайта на куски и отдавать их частями -- стоит. Но вмеру. А как именно делить -- зависит от вашего случая.

@media only screen and (max-width: 768px) {
   .feature{
      flex-direction: column;
      width: max-content;
      margin: 0 auto;
    }
}

Добавьте в обработчик, когда нужно заблокировать ваши чекбоксы -- пройтись по всем элементам формы (или по fieldset'ам) и добавить им атрибут disabled

Открываете отладчик браузера. В каждом это по своему. В моём примере это Firefox.
В инспекторе элементов выделяете интересующий фрагмент текста. Справа будет вкладки "Шрифты". Там подробные характеристики шрифта как для выделенного текста так и в целом по странице

В идеальном мире все стили у вас разбиты по группам:
Общие стили -- которые применяются на всех или на связанных страницах сайта. (Макет, какая-то шапка, подвал)
Специфичные -- которые применяются на одной или нескольких конкретных страницах. (Таблица цен на одной странице, или другой макет для админки)

Кроме этого, следует разделять:
Критичные -- самые основные и важные стили, без которых ваш сайт не должен отображаться вообще.
Не критичные -- стили без которых сайт останется доступным.

И в идеальном мире, вам стоит дробить на файлы в соответствии с этим.
Общие стили, пользователь скачает один раз и при повторном посещении сайта или переходе на другие страницы они будут загружаться из кэша что значительно повысит скорость повторной загрузки. Но сильно раздувать этот файл не стоит. И из него стоит выбрасывать всё, что скорее всего пользователю не понадобится.
При посещении какой-то конкретной страницы могут быть дополнительно загружены специфичные стили. Их желательно выносить из отдельно только для того, чтобы уменьшить файл с общими стилями. Например можно вынести стили для страницы "Сбросить пароль", так как предполагается, что во время обычного сеанса эта страница пользователю не понадобится.

Критичные стили. Это всё что касается первоначальной отрисовки. Эти стили загружаются как можно раньше. Они имеют высокий приоритет и блокируют рендеринг страницы. Чем такие файлы меньше тем лучше! Всё что можно загрузить потом -- нужно загружать потом.
Не критичные стили -- это всё остальное.

На пример: Форма. Общие стили формы -- критичный CSS. А стили для отображения условного попапа с подтверждением отправки -- не критичный. В результате, браузер скачивает критичный CSS, отображает страницу, пользователь уже может с ней работать и заполнять форму, а браузер в фоне дозагружает остальной CSS для попапа.

Но, это картина идеального мира и всё нужно изучать для конкретного случая. Например, если у вас практически весь CSS критичный, и только несколько десятков правил можно вынести в "не критичный" то вы много в производительности не выиграете, а скорее проиграете из-за накладных сетевых расходов.

Или другой пример. Предположим, что на вашем сайте все страницы достаточно уникальны. В таком случае, разделять "общие" и "специфичные" стили может быть лишним или слишком затратным для поддержки.

Правильно ли я понимаю, тег устарел, однако использовать его можно без атрибутов?

Да.

Можно ли использовать тег font вместо span? )))

Нет.

https://www.w3schools.com/css/css_float_examples.asp
Но не делайте так.

Потому что прописано только для этих пунктов. Код с вашего сайта:

/* команды для подсвеченного элемента меню */
#home .home, #price .price {
color:#166ba5;font-weight:bold;
}

указать для h1 display:inline

Берёшь <progress value="<число>" max="<число>">
В него вставляешь
max = время в милисекундах относительно начала отсчета
value = текущее время в милисекундах относительно начала отсчета

Добавьте атрибут hidden. А потом -- удаляйте его

Думаю вот так должно работать

<picture>
 <source srcset="1080-1920.png" media="(orientation: portrait)">
 <img src="1920-1080.png" alt="MDN">
</picture>