Почему изображения с фонового изображения моего сайта занимают все процессорное время моего компьютера?

Question

Я создаю веб-сайт ( http://www.experimonkey.com/), для которого я использую 3 файла.gif (и загрузочную карусель) на главной странице. Один находится за ссылкой "логин" на панели навигации, а другие являются фоном для двух столбцов. GIF-файлы в двух столбцах используют огромное количество процессорного времени (все 4 ядра моего ноутбука работают почти на 100%). Я оптимизировал файлы и попытался преобразовать их в.mp4, как это было предложено в Интернете, что на самом деле казалось хуже.

Должно быть что-то, что я делаю неправильно, но я не могу понять проблему. Как примечание, мой веб-сайт работает очень хорошо на мобильном телефоне, и веб-сайт, с которого я взял.gifs, отображает несколько на каждой из своих страниц с задержкой 0. Ниже мой css. Я понимаю, что это не дает много информации, поэтому, пожалуйста, дайте мне знать, если я могу предоставить дополнительную информацию. Было бы лучше использовать <img> здесь и почему?

.tile {
  padding: 0px;
  border: 4px outset black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 5px 5px 20px #222222;
  height: 200px;
  border-radius: 2px;
  overflow: hidden;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.tile:hover {
  box-shadow: 5px 5px 5px #222222 inset;
}

#menu {
  padding-top: 63px;
}

@media only screen and (min-width: 992px) {
  .tile-tall {
    height: 60vh;
  }
  #menu {
    padding-top: 73px;
  } 
}

.tile-link {
  display: block;
  height: 100%;
  width: 100%;
  background-color: none;
  border-radius: 0px;
}

.tile-link:hover {
  display: block;
  height: 100%;
  width: 100%;
  transition: background-color 2000ms ease;
  background-color: #000000AA;
  color: black;
}

#tile-play {
  background-image: url("/img/dog_game.gif");
}

#tile-facts {
  background-image: url("/img/beaver_fact.gif");
}

Answer 1

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

Я посетил ваш сайт, и у меня нет таких проблем с интенсивным использованием процессора - мой составляет около 6-8% процентов на вашем сайте.

Кроме того, если настройка mp4s для воспроизведения только при наведении на элемент не повышает производительность, может быть, вы считаете это выбором дизайна? Все анимации, воспроизводимые одновременно, могут отвлекать.

Ура!

Answer 2

Я знаю, что это старо; однако у меня была такая же проблема. Я обнаружил, что это было вызвано отключением аппаратного ускорения в браузере. Включение должно решить проблему.

Хром:

Settings > Advanced > System > Use hardware acceleration when available

Край:

Settings > System and performance > Use hardware acceleration when available