为什么我加载的 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

您可以在下图中看到您网站文件的不同加载时间... 您的图片 quiz.png 看起来很胖，所以加载它需要一些时间...

因为你只是以小格式使用它，你可能应该减少它的大小！ ;)

此外，请注意，您的网站正在搜索一些 LOGO.png 它没有找到的内容...（虽然并不重要）

与chrome的检查员：

Answer 2

您必须调整大小到您HTML容器所需的确切尺寸，并压缩所有图像。

如果你仔细观察你的网络流量，你会浪费很多时间来加载所有图像。

如果您分析网站的性能，Google Chrome 会为您提供建议，而您恰恰提到了这一点，如果您执行建议的操作可能会获得收益。

要使用 Google Chrome 的 LightHouse Viewer，请阅读 this

图片压缩的理论概念，可以阅读this

要压缩张不同的图片，您可以使用this

等服务

为什么我加载的 gif 使我的页面加载速度变慢？

Why my loading gif makes my page to load slower?

html

javascript

jquery

loading