无法弄清楚为什么我的网站加载速度如此之慢

时间:2018-11-23 17:12:54

标签: javascript html performance pagespeed

我的html老师提供了一个网站,他要求我检查该网站并解决是否存在任何问题。虽然我修复了一些问题,但仍然有一个我不知道的大问题。完成网站加载需要很长时间(大约30秒)。一切正常,加载导航菜单和youtube视频。我找到了问题的根源,这与JavaScript代码有关。我不了解JavaScripy,所以无法解决问题。当我删除JavaScript代码时,网站会加载,但导航菜单和视频却不会加载,完全不准确。还有另一个JavaScript文件,但我认为它与此无关,并且要在此处发布太久了,因此您可以下载文件hereHere是CSS文件。

最后10行JavaScript代码就是问题所在。 这是代码:

<!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&amp;controls=0&amp;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 &gt;</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 &nbsp;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>&nbsp;<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:info@safretti.com"><u>info@safretti.com</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>

2 个答案:

答案 0 :(得分:1)

删除此行中URL中的大空格。

<script src="//maps.googleapis.com/maps/api/js?        key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>

更改为

    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>

最佳做法是在URL中不留空格 参见Google Maps API Best Practices

答案 1 :(得分:1)

检查您的style.css是否有很多导入。那会导致较长的加载时间。否则,如果您在本地托管它,请尝试将其移动到其他地方。或检查是否有很多动画(js)。

编辑:实际上,页面加载非常快。我的意思是我没有CSS,但好像不喜欢html / js代码。您能在问题中张贴CSS代码吗?