HTML网站加载缓慢且切换程序后冻结的问题求助

核心问题分析与修复步骤 #

1. 未优化的图片资源（加载缓慢的主要原因） #

页面中使用的多张本地图片未做压缩和尺寸适配：

• 大尺寸原图会大幅增加页面加载时间，阻塞渲染流程
• 所有图片未启用懒加载，导致页面加载时一次性请求全部资源

修复：

• 用图片压缩工具压缩所有本地图片，确保图片尺寸与页面显示尺寸一致（比如.kep类图片显示宽度为800px，原图就保存为800px宽的版本）
• 给所有<img>标签添加loading="lazy"属性，实现按需加载：

<img src="SiofokViztorony.jpg" alt="Víztorony" class="hajokep" loading="lazy">
<img src="szallas.jpg" alt="Szállás" class="hajokep" loading="lazy">
<img src="sutogetes.jpg" alt="Sütögetés" class="kep" loading="lazy">

2. 固定背景图的渲染性能问题（切换窗口冻结的关键诱因） #

body上的background: url(wallpaper.jpg) no-repeat center center fixed配合background-size: cover，在部分浏览器中会触发频繁的重绘重排，尤其是窗口切换时浏览器需要重新计算背景图的渲染位置，导致页面冻结。

修复：
改用伪元素实现全屏背景图，减少主DOM元素的渲染压力：

body {
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(wallpaper.jpg) no-repeat center center;
  background-size: cover;
  z-index: -1;
  will-change: transform; /* 提示浏览器优化渲染 */
}

3. 无效布局元素引发的性能损耗 #

页面中的空<div class="extendpage2">设置了height:100%和宽高属性，会干扰flex布局的计算逻辑，引发不必要的布局重排。

修复：
直接删除该空div，若需要撑开页面底部间距，给.fading元素添加margin-bottom: 90px替代。

4. 冗余CSS前缀的清理 #

多个元素的box-shadow属性重复添加了-moz-、-webkit-、-khtml-前缀，现代主流浏览器已支持标准box-shadow属性，冗余代码会增加CSS解析时间。

修复：
删除所有前缀版本，只保留标准属性，例如：

.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);
}

额外优化建议 #

• 检查Bootstrap的引入是否必要：如果仅使用了导航栏组件，可以考虑自定义导航栏样式，减少第三方框架的资源体积
• 开启浏览器开发者工具的Performance面板，录制页面加载和窗口切换的过程，查看具体的渲染阻塞点

内容的提问来源于stack exchange，提问作者Sas98