Почему мой загрузочный GIF замедляет загрузку моей страницы?

Question

Я использовал некоторый код для отображения gif перед загрузкой моей страницы, но он увеличивает скорость загрузки моей страницы ...

Вот где я использую этот код - http://sarkarinaukrihome.com/

JS

$(window).load(function() {
  // Animate loader off screen
  $(".se-pre-con").fadeOut("fast");;
});

HTML

<div class="se-pre-con"></div>

CSS

.no-js #loader {
  display: none;
}

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(Preloader_2.gif) center no-repeat #fff;
}

Answer 1

Вы должны изменить размер до нужных размеров вашего HTML-контейнера и сжать всех изображений.

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

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

Чтобы использовать LightHouse Viewer Google Chrome, прочитайте this

Для теоретической концепции сжатия изображения вы можете прочитать this

Чтобы сжать различных изображений, вы можете использовать такие службы, как this

Answer 2

Вы можете видеть на картинке ниже разное время загрузки файлов вашего сайта ... Ваше изображение quiz.png выглядит довольно толстым, поэтому его загрузка займет некоторое время ...

Поскольку вы просто используете его в небольшом формате, возможно, вам следует уменьшить его размер! ;)

Также отмечает, что ваш веб-сайт ищет некоторые LOGO.png, которые он не находит ... (хотя на самом деле это не имеет значения)

С инспектором Chrome: