Евгений Петров

На время парсинга влияет, но основные затраты приходятся на repaint и reflow. Так что существенного влияния на производительность количество комментариев в HTML не оказывает.

#big_block:after {
	content: "";
	display: block;
	clear: both;
}

Примерно так

1. Атрибут lang нужно указывать в элементах с текстовой информацией. Если вся страница содержит контент на одном языке, нужно указывать в html. Указать в head, и не указать в body — по меньшей мере странно.

2. Ситуация, когда сервер не отдаёт кодировку в Content-Type, невероятно редка. Однако, если она-таки случится, а документ не содержит сигнатуру (например, выбран режим сохранения UTF-8 without BOM), то указание кодировки следует первым же тэгом meta в head, дабы браузер не парсил вторично текст, содержащий не ASCII символы.
Подробнее про encoding sniffing

3. Указание кодировки лучше указывать так (тип документа внутри документа не имеет никакого смысла):
<meta charset="utf-8">

4. Сначала стили, потом скрипты. Тут вы поступаете абсолютно верно. Если скрипту можно указать асинхронную загрузку — указывайте. Если же это невозможно, рекомендуется загружать синхронно в head только те скрипты, которые могут требоваться для других скриптов, а остальные ставить в конец body.

5. Если есть стили, которые не требуются для стартового отображения страницы (например, только для подгружаемого контента), можно динамически загружать их (например, по окончании формирования DOM) с помощью скриптов. Как вариант — с помощью скриптов, стоящих в конце body, не ориентируясь на событие DOMContentLoaded.
Советы по оптимизации от Google Developers

6. Остальные meta и link тэги можно разделить на используемые для формирования страницы (например, meta name="viewport"), которые лучше ставить в начало head после кодировки, и второстепенные, которые можно ставить в конце head, что вы и сделали.

7. Заголовок документа можно поставить после всех первостепенных meta тэгов.

8. По умолчанию meta name="robots" имеет значение all (index,follow). Если вы не намерены запрещать что-то, писать его смысла нет.

У вас недвусмысленно стоит:

.price {
	float: left;
}

Допишите

.product:after,
#sales:after {
	content: "";
	display: block;
	clear: both;
}

Вам следует понять, что такое last-child (хотя, вроде, и по названию можно догадаться), и чем это отличается от last-of-type.

.product:last-of-type { 
	border-bottom-color: transparent;
}

Вариант, не зависящий от ширины viewport и не требующий overflow (а иначе при большой высоте контента не будет возможности прокрутить).

Есть вариант прочесть про события, про его фазы, про метод события stopPropagation(), а также перестать использовать атрибуты событий там, где это не нужно.

Как обычно, используем псевдоэлементы.
Чтобы не морочиться с учётом левой рамки, можно использовать linear-gradient, или overflow:hidden с другим transform-origin.

Проблема ваша, как и у многих, в незнании margin collapsing. Источник появления верхнего отступа у body в этом правиле:

.footer {
	margin-top: 40px;
}

Либо убирайте отступ, либо замените на padding, либо задайте:

.wr:before {
	content: "";
	display: table;
}

Правильно это делать для родительского элемента, но писать правила для имени тэга — верный путь к путанице.

Смена плотности начертания или наклона шрифта почти всегда выглядит жутко. Безусловно, при этом происходит изменение размера строки, что влечёт такие неприятные эффекты.

Хотите фиксировать рамку? Фиксируйте ширину колонок с помощью table-layout: fixed.

Как скруглить углы у картинки, когда используется эффект увеличения при наведении?
А вот так выглядит ваш пример

Пы.Сы. Chrome, Opera, как и Яндекс-браузер, используют один движок, так что писать про Оперу особого смысла нет.

Всё верно вы думаете. Применение col и colgroup уместно более чем.
Только не пойму, зачем в вашем примере используется colgroup. Если задавать ширину для каждой колонки отдельно, это не требуется.
Если же группировать, то следует сделать вот так.
Даже col позволяет группировать.

Пы.Сы. совместное использование col и colgroup уместно, когда в группе однотипных элементов нужно вклинить один или несколько столбцов с другими стилями.