Question

我创建了一些餐厅网站，其中只有一个菜单页面，其中包含不同的食物。问题是上述页面在第一次加载时加载速度太慢。首先，我认为当您进入“菜单”页面时，所有带有适当图像（约200张图像）的项目都正在加载，这是问题的根本原因，但是随后我设置了JS触发器，该触发器单击页面上的某些菜单项只加载和加载6张图像。但是，它没有帮助。因此，请描述一些优化我的页面以快速加载的方法。

非常感谢！：）

Answer 1

即使仅加载6张图像，根据图像的大小，它也会变慢。 COnsider调整图像大小以优化速度。

您可以使用Gimp / Photoshop或以下网站进行操作：https://tinypng.com

[编辑]

在生产环境中不要使用所有这些单独的文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">

HTML内的CSS

您真的需要那么多JS文件吗？

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>

请勿以这种方式使用，请将所有内容都缩小，并确保您使用的是jquery的缩小版本，而不是jquery.js。

在这里检查：https://code.jquery.com/

尝试通过咕unt声来帮助您实现代码的自动化和最小化：https://gruntjs.com/

或者仅使用以下网站：https://www.minifier.org/

Answer 2

您应该优化所有图像：您可以为此使用在线工具： Compress jpeg
网址：https://compressjpeg.com/

Compress png 网址：https://compresspng.com/

您可以在上面上传许多图片，这将压缩图像的zip文件夹。

优化所有图像后，您的网站速度将会提高。

Answer 3

使用Java脚本ajax并创建分页以进行列表。即您将从数据库中获取数据并一次仅显示10个值。并为图像..选择一些常见图像并创建精灵..这两项对您有最大的帮助。在您的每个项目中。

Answer 4

您可以尝试https://miniimagesvideos.com，这样可以压缩图像以优化页面内容。但是，您还应该共享任何与JS相关的问题的代码

HTML，CSS优化页面上包含过多图像

4 个答案: