archelon

Первое, что бросилось в глаза:
1. Зачем shop-block-1, shop-block-2, shop-block-3, и для каждого отдельно прописан стиль?
Вот здесь на месте бэкендера я бы точно придрался. Это одинаковые блоки, им не нужны разные классы.
2. <h5>В наличии: 3 шт</h5> - семантически неверно, заголовок тут не нужен.
3. Несколько h1 заголовков
4. Навигация рассыпается, если ширина окна менее 1920px
для начала хватит.
P.S. Учитывая, что это ваша первая верстка, в целом нормально. Но до продакшена еще много допиливать.

псевдоэлементы основного и внутреннего блока https://jsfiddle.net/gxr8004a/
относительно чистый вариант с минимумом лишних элементов

Изменить размер и вес самого изображения - в любом графическом редакторе (Photoshop etc).
Если нужно расположить фоном изображение большего размера, чем элемент, то проще всего использовать свойство background-size: cover.

гуглите "lazy load"
например: https://www.appelsiini.net/projects/lazyload

например, так:

.button {
	width: 100px;
	height: 50px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}
.button a {
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
}

правда, это не кнопка, а ссылка.