Serdji

можно попробовать сделать картинки абсолютно позиционированными c top: 0 и bottom: 0, и при ховере увеличивать свойство top до -30 например.
Еще можно сделать все картинки флекс итемами и на ховере делать margin-top: -20px и увеличивать ширину.
Предварительно у флекс итемов поставить например transition: all 0.5s linear;

вот код: https://jsfiddle.net/o3nxvcya/

Программирование может быть работой, а может быть творчеством.
Первое для всех, второе тем кому "дано".

Это как маляр, кто-то просто забор красит (это дано всем), а кто-то картину пишет. Вроде и те и те просто берут краски кисточку и работают. Но первым может любой стать а второе не всем дано. А нужны и те и те.

Поэтому ставьте вопрос для чего. Тупо заработать - дано всем. А творчество - у себя спросите - интересно это вам?

Готовы свободное время тратить на это?

Вы же наверное заметили, что у вас очень много повторяющихся фрагментов. Вынесите их в отдельную функцию.

function myFunc(selector){
  	$(selector)
		.fadeIn(0)
		.animate({top:"0", bottom:"0"}, 400);
	$('header').animate({top:"-60px"}, 400);
}
$('.open_popup_Mac').click(function(){
	myfunc('.popup_Mac');
});
$('.open_popup_iPhone').click(function(){
	myFunc('.popup_iPhone');
});
$('.open_popup_iPhone_price').click(function(){
	myFunc('.popup_iPhone_price');
});
$('.open_popup_iPad').click(function(){
	myFunc('.popup_iPad');
});
$('.open_popup_iPad_price').click(function(){
	myFunc('.popup_iPad_price');
});
$('.open_popup_delivery_more').click(function(){
	myFunc('.popup_delivery_more');
});
$('.open_popup_enter_form').click(function(){
	myFunc('.popup_enter_form');
});
$('.open_popup_delivery').click(function(){
	myFunc('.popup_delivery');
});

usablica.github.io/intro.js

Есть делигированные собития, это когда событие висит на родительском блоке, а обрабатывается на потомке без железной привязки. Появился - событие работает, пропал событие есть но нет объекта и оно не работает. Вешается один раз на родителя.

$(".colors").on("click", ".CancelFramework" ,function(){
      $( '.colors' ).removeClass('colorBorder');
      $( 'div.color div' ).remove();
      $( 'div.color strong' ).remove();
      $( 'div.color' ).fadeOut(500);
      filterObj();
});

Используйте делегирование:

$(document).on("click", ".CancelFramework", function(){
      $( '.colors' ).removeClass('colorBorder');
      $( 'div.color div' ).remove();
      $( 'div.color strong' ).remove();
      $( 'div.color' ).fadeOut(500);
      filterObj();
});

Не проще ли консоль заменить на веб-вариант.
https://github.com/nkashyap/console.io

можно так, но некоторые/многие error не вызывают window.onerror

var gOldOnError = window.onerror;
// Переопределить прошлый обработчик события.
window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
  if (gOldOnError)
    // Вызвать прошлый обработчик события.
    return gOldOnError(errorMsg, url, lineNumber);

  // Просто запустить обработчик события по умолчанию.
  return false;
}

https://developer.mozilla.org/ru/docs/Web/API/Glob...

jsbin.com/cigaduduyo/edit?output

лол, в css напиши

div.Picture img {max-width:200px;}

div {
    width: 100px;
    margin: 0 auto;
}

Чтобы имитировать реальную ситуацию, с учетом канала, клиента, кешей, статики, https и прочего:
loaddy.com (быстрей, проще)
loadimpact.com

https://github.com/yandex/yandex-tank

1. Пробуйте хост устанавливать не как localhost, а как 127.0.0.1
2. Если проблема не в резолве хостов, то смотрите запросы и расставьте индексы.

Никакие ддосы и дебаггеры на данном этапе не нужны.