Question

我在页面加载之前使用了一些代码来显示gif，但是提高页面的加载速度...

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会使我的页面加载速度变慢？

2 个答案: