我正在制作 3 个网站，其中两个工作得很好，但最后一个由于某种原因加载速度非常慢，如果我稍等一下，它就会加载并工作得很好，但如果我使用 alt+tab 切换到其他内容，整个网站就会冻结。可能是什么问题？
body {
font-family: sans-serif;
background: url(wallpaper.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.fading {
background-image: url('fatyol.png');
width: 880px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
text-align: center;
}
#cim {
font-family: sans-serif;
text-decoration: underline;
font-size: 30px;
}
#nav {
font-family: sans-serif;
}
.kep {
width: 800px;
height: 500px;
margin-left: 50px;
margin-right: 50px;
border-radius: 50px;
margin-bottom: 20px;
box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-moz-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-webkit-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-khtml-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
}
.hajokep {
width: 100%;
height: 100%;
max-width: 400px;
max-height: 400px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-moz-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-webkit-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-khtml-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
}
.fejlec {
text-decoration: underline;
margin-top: 30px;
margin-bottom: 20px;
}
.labjegyzet {
background-color: rgba(29, 120, 180, 0.712);
margin-top: auto;
color: azure;
margin-left: 20px;
margin-right: 20px;
}
.bal {
text-align: left;
margin-left: 50px;
margin-top: 20px;
}
.jobb {
text-align: right;
margin-right: 50px;
margin-bottom: 20px;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
color: white;
}
a:active {
text-decoration: underline;
color: white;
}
p {
margin-left: 20px;
margin-right: 20px;
}
.extendpage2 {
height: 100%;
width: 100%;
padding: 90px;
}
table {
margin-left: 30px;
margin-top: 50px;
box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-moz-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-webkit-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
-khtml-box-shadow: 10px 10px 5px rgba(8, 1, 1, 0.452);
}<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="kirandulas.css" rel="stylesheet">
<title>Kirándulás</title>
</head>
<body>
<nav id="nav" class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<p id="cim" class="navbar-brand">Kirándulás</p>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="home.html">Összefoglaló</a>
</li>
<li class="nav-item">
<p class="nav-link active">Első nap</p>
</li>
<li class="nav-item">
<a class="nav-link" href="site2.html">Második nap</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="fading">
<header class="fejlec">
<h1>Első nap</h1>
</header>
<div class="row">
<div class="col-md">
<img src="SiofokViztorony.jpg" alt="Víztorony" class="hajokep">
</div>
<div class="col-md-6">
<img src="szallas.jpg" alt="Szállás" class="hajokep">
</div>
</div>
<p>Késő reggel, 9:30 körül indultunk el a vonatállomásról, nekivágva egy 2 és fél órás egy helyben utazásnak Siófokra.</p>
<p>A vonatról leszállva negyed órás séta mellett keresztül vágtunk Siófok Fő terén, melynek közepén egy hatalmas víztorony áll, amely 2022 őszén lett felújítva. Jelenleg kilátóként és kávézóként üzemel a érdeklődők számára.
<br>A torony mellett még számos más bolt is található a Fő téren.</p>
<p>Ezeken keresztül vágva megérkeztünk a szállásra. Lepakolást követően az osztály útjának volt engedve a kora esti órákig. Voltak, akik a közeli boltokat, voltak, akik a Balatont látogatták meg, de voltak azok is, akik a szálláson foglalták el magukat.</p><br>
<img src="sutogetes.jpg" alt="Sütögetés" class="kep">
<p>Ahogy az este lassan beköszöntött, úgy az esti tevékenység is kezdetét vette: tűzön sütögetés!
<br>Megraktuk a tüzet és előkészítettük a húsokat, zöldségeket, italokat.
</p>
<p>Késő este, mikor már mindenki elfogyasztotta, amit elkészített magának, újra szabad elfoglaltság vette kezdetét egészen addig, amíg utolsók is közülünk le nem feküdtek.</p>
<div class="extendpage2">
</div>
</div>
<footer class="labjegyzet">
<div class='bal'>
<p>Elérhetőségeink: email<br>        email<br>        email</p>
</div>
<div class="jobb">
<h1><a href="email">name</a></h1>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>我基本上查看了整个代码，但我找不到任何可能导致它的原因。
通常图片会占用太多空间，所以你应该压缩它们。
如果不需要在一定像素大小下显示尺寸，也可以缩小图像的尺寸。也就是说，您可以在较小的屏幕尺寸下显示较小的图像。
就压缩而言，60% 到 70% 的图像质量就足够了。 例如，全尺寸图像大小为 2 到 5 Mb，分辨率为 4032x3024 像素。你不需要那么大。如果你用图像编辑器压缩它，你可以获得像658kb这样的文件大小，这样你就可以获得很多空间，因此下载时间会少得多。