我正在建立一个我的客户的网站，当我完成后将网站上传到网络，但由于一些图像，一些页面非常慢。 http://gthbouw.nl/Fotoboek/Outdoor.php （这是最慢的页面）
<!DOCTYPE HTML>
<html lang="nl">
<head>
<title>Timmerbedrijf GTH bouw uit Hattem voor al uw timmerwerken.</title>
<!-- Meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="keywords" content="Timmerwerken,timmerbedrijf,klussenbedrijf,interieurbouw,maatwerk,kasten,balie,keukens,krukken,tafels,restauratie,hattem,zwolle,wezep,oldebroek,wapenveld,heerde,staphorst,meppel, Timmerwerken,timmerbedrijf,klussenbedrijf,interieurbouw,maatwerk,suitewand,balie,keukens,kasten,tafels,restauratie,hattem,zwolle,wezep">
<meta name="description" content="Timmerbedrijf GTH bouw voor al uw timmerwerken,kasten,meubels op maat,schuren,veranda's,kozijnen,suitewanden,houten vloeren. ">
<meta name="author" content="GTH Bouw">
<meta name="copyright" content="GTH bouw © Alle rechten voorbehouden.">
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
<!-- Styles -->
<link href="_assets/magnifix-popup/magnific-popup.css" rel="stylesheet" type="text/css"/>
<link href="_assets/css/main.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
<style>
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3498db url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
</style>
<!-- Scripts -->
<script src="_assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="_assets/magnifix-popup/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="_assets/js/main.js" type="text/javascript"></script>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/skel.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
<script src="../assets/js/BackToTop.js"></scripts?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
</script>
</head>
This is my header maybe I need to change somtehing.
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="../index.html" class="logo" ><strong>GTH bouw</strong> timmerwerken.</a>
<ul class="icons">
<li>Kijk voor meer recent werk ook op Twitter. </li>
<li><a href="https://twitter.com/gthbouw" target="_blank" style="font-size: 20px"class="icon fa-twitter"><span class="label">Twitter</span></a></li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<div class="content">
<header>
<h1>Outdoor
</h1>
<p>Laat u inspireren door GTH bouw.</p>
</header>
<p>Ook maak we veel dingen voor buitenhuis zoals bijvoorbeeld schuren, boomhutten & overkappingen. </p>
<ul class="actions">
<li><a href="#ImageGallery" class="button special big">Kom verder</a></li>
</ul>
</div>
<span class="image object">
<img class="HeaderImg"src="../images/Outdoor.jpg" alt="" />
</span>
</section>
<!-- ImageGallery -->
<section id="ImageGallery">
<header class="major">
<a><h2>Fotoboek</h2></a>
</header>
<p>*voor de beste ervaring op je smartphone of tablet kunt u uw mobiel kantelen om zo een betere indruk te krijgen van wat GTH bouw allemaal doet.</p>
这是我身体的第一部分。 （这可能不是问题）
<div class="qt-photo-gallery-item qt-image-no-<?php echo $qt_counter; ?>">
<a class="qt-photo-gallery-item-link" href="<?php echo $qt_file_path; ?>" >
<div class="qt-photo-gallery-item-image-wrapper">
<img src="<?php echo $qt_file_path; ?>" class="qt-photo-gallery-item-image" />
</div>
</a>
</div>
<?php
if( $qt_counter == 5 ) {
$qt_counter = 0;
}
endif;
endwhile;
?>
这是我的PHP位，它从特定目录中读取图像，然后将图像回显到图像库，如您在此问题的顶部所示。
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menu -->
<nav id="menu">
<header class="major">
<a href="#sidebar"><h2>Menu</h2></a>
</header>
<ul>
<li><a style="text-decoration: none;" href="../index.html" >Home</a></li>
<li>
<span class="opener">Fotoboek</span>
<ul>
<li><a href="InterieurBouw.php" >Interieur bouw</a></li>
<li><a href="Outdoor.php" >Outdoor</a></li>
<li><a href="Klantspecifiek.php" >Klantspecifiek</a></li>
<li><a href="Diversen.php" >Diversen</a></li>
</ul>
</li>
<li><a style="text-decoration: none;" href="../contact.html">Contact</a></li>
</ul>
</nav>
<!-- Section -->
<section>
<header class="major">
<h2>Wat ik doe</h2>
</header>
<div class="mini-posts">
<article>
<a href="InterieurBouw.php" class="image"><img src="../images/InterieurBouw.jpg" alt="" /></a>
<p><b>Interieur bouw,</b></br>U kunt ons in huren om uw woonkamer, Keuken, Badkamer te maken en in te richten. Zo maken we bijvoorbeeld tafels, stoelen, kasten en nog veel meer.</p>
</article>
<article>
<a href="Outdoor.php" class="image"><img src="../images/Outdoor.jpg" alt="" /></a>
<p><b>Outdoor,</b></br>Ook maken we veel dingen voor buitenhuis zoals bijvoorbeeld schuren, boomhutten & overkappingen. </p>
</article>
<article>
<a href="Klantspecifiek.php" class="image"><img src="../images/Klantspecifiek.jpg" alt="" /></a>
<p><b>Klantspecifiek,</b></br>Natuurlijk doen wij ook veel projecten voor klanten die iets specifieks willen voor hun huis of winkel.</p>
</article>
</div>
</section>
<!-- Section -->
<section>
<header class="major">
<h2>Contact</h2>
</header>
<p>U kunt natuurlijk op vele verschillende mogelijkheden contact met mij opnemen. Wilt u vrijblijvend een afspraak maken of een offerte ontvangen? Neem dan contact met mij op door een mail te sturen of door gewoon even te bellen.</p>
<ul class="contact">
<li class="fa-envelope-o">info@gthbouw.nl</li>
<li class="fa-phone">(Mob) 06 - 2281 7245</li>
<li class="fa-home">Schipsweg 13 8051 KG<br />
Hattem.</li>
<li class="fa-map-marker">Locatie</li>
<div style="width: 100%; margin-top: 15px;"><iframe width="100%" height="300" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.4822692, 6.036609999999996&q=Schipsweg%2013%208051%20KG%20Hattem.+(GTH)&ie=UTF8&t=&z=11&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div><br />
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© <a href="#wrapper">GTHbouw</a> Alle rechten voorbehouden.</p>
</footer>
<!-- Back to top -->
<a href="#0" class="cd-top">Top</a>
</div>
</div>
</div>
</body>
这是我身体的其他部分和其他东西
图像被压缩，大约0.4 mb或其他东西。 任何人都可以帮助我更快地制作这个网页。
答案 0 :(得分：2)
您应该压缩和调整图像大小。
试试这个：https://imageresize.org/compress-images
现在用压缩图像替换旧的未压缩图像。
让我们知道之后的页面加载时间。 ：）
编辑：正如@Mehdi所指出的那样如果它是动态的（通过PHP上传），您可以使用Imagick在上传时调整大小和压缩。
调整大小的示例：http://php.net/manual/en/imagick.resizeimage.php
压缩示例：http://php.net/manual/en/imagick.setimagecompressionquality.php