user8616457
Reputation:
Can't figure out why my site loads so slow
I got a site form my html teacher, he asked me to check it and fix any problems if they are there. While I fixted some, there is still one big one that I can't figure out. It takes a long time (around 30 seconds) to load the site completly. Everything loads correctly, exapt the navigation menu and a youtube video. I found the source of the problem, it has something to do with the JavaScript code. I don't understand JavaScripy, so I can't figure out the problem. When I delete the JavaScript code, the site loads, but the navigation menu and the video don't, not at all to be exact. There is another JavaScript file, but I don't think it has anything to do with this, and it's to long to post here, so you can download the file here. Here is the css file.
The last 10 lines of JavaScript code is the problem. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
<header class="block-4-1 v-0" data-sticky="sticky"><div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div class="logo">
<a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
</div>
<div class="menu">
<a class="handler" href="#">
<div></div>
<div></div>
<div></div>
</a>
<div class="mobile-menu block-4-1-mobile-menu v-0">
<div class="outer">
<div class="inner">
<div class="menu-1 menu-menu-1"><ul> <li class="active"><a href="index.html">Home</a></li><li><a href="what-is-magic- fire-/index.html">Magic-Fire?</a></li><li class=""><a href="mistero/index.html">Mistero</a><ul class="" style="height: 179px;"><li><a href="mistero/mistero-500/index.html">Mistero 500</a></li><li><a href="mistero/mistero-1000/index.html">Mistero 1000</a></li><li><a href="mistero/mistero-1500/index.html">Mistero 1500</a></li><li><a href="mistero/mistero-2000/index.html">Mistero 2000</a></li><li><a href="fireplace-mistero-customized/index.html">Mistero customized</a></li></ul> </li><li class=""><a href="incanto/index.html">Incanto</a><ul class="" style="height: 179px;"><li><a href="Incanto/Incanto-1000/index.html">Incanto 1000</a></li><li><a href="Incanto/Incanto-1500/index.html">Incanto 1500</a></li><li><a href="Incanto/Incanto-2000/index.html">Incanto 2000</a></li><li><a href="Incanto/Incanto-2500/index.html">Incanto 2500</a></li><li><a href="fireplace-incanto-customized/index.html">Incanto customized</a></li></ul></li><li><a href="fireplace-customized/index.html">Customized</a></li><li><a href="references/index.html">References</a></li><li><a href="about-safretti/index.html">About Safretti</a></li><li><a href="contact/index.html">Contact</a></li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></header>
<section id="block-39-848428" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-51-848431" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-76-206454" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
</div>
</div>
</div>
</div>
</section>
<section id="block-36-219665" class="v-0">
<div class="container">
<div class="row equalize">
<div class="col col-md-6">
<a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
<img src="./assets/images/home-1c.480x0.jpg">
</a>
<h3 class="heading-3"><a href="./what-is-magic-fire-/incanto-old/index.html">INCANTO</a></h3>
<div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
</p></div>
<a class="button-2" href="./incanto/index.html">more info ></a>
</div>
<div class="col col-md-6">
<a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
<img src="./assets/images/home-1b.480x0.jpg">
</a>
<h3 class="heading-3"><a href="./what-is-magic-fire-/mistero-old/index.html">MISTERO</a></h3>
<div class="text-2">
<p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
</div>
<a class="button-2" href="./mistero/index.html">Available in the following sizes</a>
</div>
</div>
</div>
</section>
<section id="block-76-956792" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h2 class="heading-2">
<span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
</h2>
<div class="text-2">
<p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><a href="./fireplace-ondemand/index.html"><span style="color: #ffffff;"> click here</span></a></strong></span><span style="color: #999999;"> for more information or</span> <a href="./contact/index.html"><strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong></a> <span style="color: #999999;">us for more information.</span></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-8-2 v-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
</div>
</div>
</div>
</section>
<section class="block-55-1 v-0">
<div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div>
<div>
<div class="media-1">
<img src="./assets/images/icon-phone.svg">
</div>
<div class="text-6"><p><a href="tel:0101234567">0</a>031 (0)53 574 2554
</p></div>
</div>
<div>
<div class="media-1">
<img src="./assets/images/icon-email.svg">
</div>
<div class="text-6"><p><a href="mailto:[email protected]"><u>[email protected]</u></a>
</p></div>
</div>
</div>
<div>
<div>
<a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
<img src="./assets/images/icon-facebook.svg">
</a>
<a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
<img src="./assets/images/icon-linkedin.svg">
</a>
<a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
<img src="./assets/images/icon-pinterest.svg">
</a>
<a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
<img src="./assets/images/icon-youtube.svg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page- 18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data- page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page- 18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"] a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data- page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data- page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431 iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>
</body>
Upvotes: 0
Views: 219
Answers (2)
daniela-idara
Reputation: 96
get rid of the large space in the URL in this line.
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>change to
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>it is best practice to not have spaces in URL see Google Maps API Best Practices
Upvotes: 1
user10696603
Reputation:
Check your style.css if you have many imports. That is something that can cause long loading times. Otherwise if your hosting it localy try to move it to somewhere else. Or check if you have many animations (js).
Edit: Actually the pageloaded very fast on my side. I mean I hadnt the CSS but it lokks like its not the html/js code. Could you post the CSS code too inside your question?
Upvotes: 1
Related Questions
- How to speed up Javascript page loading
- What can I do to decrease load times of HTML pages?
- Is there any aspect of my JS that could be causing my website to load very slowly?
- Page Loading Painfully Slow
- Page and images load very slow when launching the site
- Website hanging on loading, server side or code?
- Web site loading speed is slow
- How do you determine what is causing a page to load slow?
- Speed up web site loading
- Why is my page loading slow