Strona czasem bardzo wolno się ładuje

Odpowiedz Nowy wątek
2017-08-11 12:46
0

Witam!
Mam problem z długo ładującą się stroną, czasem po wpisaniu adresu pojawia się biały ekran i przeglądarka cały czas ładuje stronę nie jest tak zawsze ale dosyć często. Czasem strona ładuje się poprawnie i szybko. Mam wrażenie, że gdzieś w kodzie popełniłem błąd lub jakiś skrypt zacina renderowanie strony. Strona podzielona jest na 3 części. Górna część gdzie znajduje się jedno menu, logo oraz skrypt mają wyświetlać się na wszystkich podstronach. To samo dotyczy dołu i lewej części strony zapisane są tam dane kontaktowe oraz linki do portali społecznościowych. Poszczególne części strony łącze za pomocą:

<?php include(''); ?>

Czy mógłby ktoś przeanalizować kod i ewentualnie wskazać co może blokować renderowanie strony. Hosting na którym postawiona jest strona to home.pl.

Górna część strony:


<?php
date_default_timezone_set('Europe/Warsaw');
function militime(){
    $time = explode(' ',microtime(),2);
    return floor(($time[1]+$time[0])*1000);
};
?>
<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>Tytul strony</title>

    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="">
    <link href="style.css" rel="stylesheet" >
    <link href="css/fontello.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">

<script type="text/javascript">

var $dif = (new Date(<?php echo militime();?>)).getTime() - (new Date()).getTime();

function odliczanie()
{
var dzisiaj = new Date((new Date()).getTime()+$dif);
var dzien = dzisiaj.getDate();
var dni = new Array("niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota");
var miesiac = dzisiaj.getMonth()+1;
var miesiecy = new Array("stycznia", "lutego", "marca", "kwietnia", "maja", "czerwca", "lipca", "sierpnia", "września", "października", "listopada", "grudnia");
var rok = dzisiaj.getFullYear();

var godzina = dzisiaj.getHours();
if(godzina<10) godzina = "0"+godzina;
var minuta = dzisiaj.getMinutes();
if(minuta<10) minuta = "0"+minuta;
var sekunda = dzisiaj.getSeconds();
if(sekunda<10) sekunda = "0"+sekunda;
var swieta = dzien+"/"+miesiac 

if (godzina<10 || godzina>=16 || dni[dzisiaj.getDay()] == 'sobota' || dni[dzisiaj.getDay()] == 'niedziela' || swieta == '17/04' || swieta == '01/01'|| swieta == '06/01' || swieta == '01/05'|| swieta == '03/05' || swieta == '04/06' || swieta == '15/06' || swieta == '15/08' || swieta == '01/11' || swieta == '11/11' || swieta == '24/12' || swieta == '25/12' || swieta == '26/12' ) document.getElementById('status').innerHTML = 'Sklep nieczynny.'.fontcolor("red"); else document.getElementById('status').innerHTML = 'Sklep czynny, Zapraszamy.'.fontcolor("#6F0");

document.getElementById("zegar").innerHTML= "Dzisiaj jest "+dni[dzisiaj.getDay()]+" "+dzien+" "+miesiecy[dzisiaj.getMonth()]+" "+rok+", godzina "+godzina+":"+minuta+":"+sekunda+"   ";

setTimeout("odliczanie()",1000);
}

</script>

<script type="text/javascript">
var nrImg = 3; 
var IntSeconds = 4;

function Load()
{
nrShown = 0;
Vect = new Array(nrImg + 10);
Vect[0] = document.getElementById("Img1");
Vect[0].style.visibility = "visible";

document.getElementById("S"+0).style.visibility = "visible";
for (var i = 1; i < nrImg; i++)
    {
    Vect[i] = document.getElementById("Img" + (i + 1)); 
    document.getElementById("S" + i).style.visibility = "visible";
    }

    document.getElementById("S" + 0).style.backgroundColor = "rgba(255,255,255,0.90)";
    document.getElementById("SP" + nrShown).style.visibility = "visible";

mytime=setInterval(Timer, IntSeconds * 1000);

}
function Timer()
{
nrShown++;
if(nrShown == nrImg)
    nrShown = 0;
Effect();
}

function next()
{
nrShown++;
if(nrShown == nrImg)
    nrShown = 0;
Effect();

clearInterval(mytime)
mytime = setInterval(Timer, IntSeconds * 1000);
}

function prev()
{
    nrShown--;
if(nrShown == -1)
    nrShown = nrImg -1;
Effect();

clearInterval(mytime)
mytime = setInterval(Timer, IntSeconds * 1000);

}
function Effect()
{
    for( var i = 0; i < nrImg; i++)
    {
        Vect[i].style.opacity = "0";
    Vect[i].style.visibility = "hidden";

    document.getElementById("S" + i).style.backgroundColor = "rgba(0,0,0,0.70)";
    document.getElementById("SP" +i).style.visibility = "hidden";
    }
    Vect[nrShown].style.opacity = "1";
    Vect[nrShown].style.visibility = "visible";
    document.getElementById("S" + nrShown).style.backgroundColor = "rgba(255,255,255,0.90)";
    document.getElementById("SP" + nrShown).style.visibility = "visible";

}
</script>

<script type="text/javascript" src="fb/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="fb/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link href="fb/source/jquery.fancybox.css" rel="stylesheet">
<script type="text/javascript" src="fb/source/jquery.fancybox.pack.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".fancybox").fancybox();
});
</script>

<script src='https://www.google.com/recaptcha/api.js'></script>

</head>

<body onload= "odliczanie(); Load(); ">

    <div id= "wrapper">   
        <div id= "header"> 
            <div class= "belka"> 
                <div id="zegar"></div><div id="status"></div>
                <div style="clear:both"></div>
            </div>
        </div>

        <div id="logo">
        <div class="mitlogo"><img src="images/logo.png" /></div>
        <div class="data"><b>Rok założenia 1996</b></div>
        </div>
        <div id="nav">
            <div class="nawigacja">
                <div class="menu"  key="oferty"><a href="index.php" class="menulinki">Oferty</a></div>
                <div class="menu"  key="onas"><a href="onas.php" class="menulinki">O nas</a></div>
                <div class="menu"  key="partnerzy"><a href="partnerzy.php" class="menulinki">Partnerzy</a></div>
                <div class="menu"  key="kredyty"><a href="kredyty.php" class="menulinki">Kredyty</a></div>
                <div class="menu"  key="kontakt"><a href="kontakt.php" class="menulinki">Kontakt</a></div>

                <div style= "clear:both"></div>

            </div>  

             </div>

Główny content strony tutaj akurat strona główna, w przypadku przejścia na podstronę też czasem są problemy z ładowaniem jeżeli będzie potrzeba to wrzucę również kod podstron.


<?php include('indexup.php'); ?>
<?php
require_once"connect.php";
?>
<?php
$polaczenie = @new mysqli($host, $db_user, $db_password, $db_name); 
if (@!mysqli_set_charset($polaczenie, "utf8")) 
{
    echo "Error: ".$polaczenie->connect_errno."<br />";

 }

if ($polaczenie->connect_errno!=0)
{
echo "Error: ".$polaczenie->connect_errno;   
}
else
{   
    $query = mysqli_query($polaczenie, "SELECT * FROM slider WHERE id='1'");
    $query2 = mysqli_query($polaczenie, "SELECT * FROM slider WHERE id='2'");
    $query3 = mysqli_query($polaczenie, "SELECT * FROM slider WHERE id='3'");

$num_rows = mysqli_num_rows($query);
$num_rows2 = mysqli_num_rows($query2);
$num_rows3 = mysqli_num_rows($query3);

if ($num_rows !=0){

while ($fetch = mysqli_fetch_assoc($query)){
    $opis1 = $fetch['opis'];
    $foto = $fetch['zdjecie'];
    $link1 = $fetch['link'];
}
while ($fetch = mysqli_fetch_assoc($query2)){
    $opis2 = $fetch['opis'];
    $foto2 = $fetch['zdjecie'];
    $link2 = $fetch['link'];
}
while ($fetch = mysqli_fetch_assoc($query3)){
    $opis3 = $fetch['opis'];
    $foto3 = $fetch['zdjecie'];
    $link3 = $fetch['link'];
}
}else{
    echo "BRAK";
}
}
    ?>       
         <div id="nowe">
         <div id="slider">
         <div id="slider2">
            <div id="imgs">
                <img id="Img3" src="<?php echo $foto3 ?>"/>
                <img id="Img2" src="<?php echo $foto2 ?>"/>
                <img id="Img1" src="<?php echo $foto ?>"/>
            </div>
            <div id="Snav">
                <div id="SnavUp">
                    <div id="Scircles">
                        <ul>
                            <li id="S0"></li>
                            <li id="S1"></li>
                            <li id="S2"></li>
                        </ul>
                    </div>
                </div>

                <div id="SnavMiddle">
    <img id="Sleft" src="images/left.png" onclick="prev()"/>
    <img id="Sright" src="images/right.png" onclick="next()"/>
        </div>
                <div id="SnavBottom">
                    <a href="<?php echo $link1 ?>" target="_blank" class="linkslider"><p id="SP0"><?php echo "$opis1" ?></p></a>
                    <a href="<?php echo $link2 ?>" target="_blank" class="linkslider"><p id="SP1"><?php echo "$opis2" ?></p></a>
                    <a href="<?php echo $link3 ?>" target="_blank" class="linkslider"><p id="SP2"><?php echo "$opis3" ?></p></a>
                </div>
            </div>
         </div>

        <div style= "clear:both"></div>

         </div>

        </div>
        <div id= "content">
            <div class="tresc">
                <a href="pilne.php"><div class="pilne"><div class="podpis">Pilnie</div></div></a>
                <a href="ofertyspecjalne.php"><div class="ofertyspecjalne"><div class="podpis">Oferty Specjalne</div></div></a>
                <a href="#"><div class="oferty1">
                    <ol>
                        <li><a href="oferty1.php?page=1"><b>oferty1</b></a></li>
                        <li><a href="oferty1.php?page=1"><b>oferty1</b></a></li>
                    </ol>
                    <div class="podpis">oferty1</div></div></a>
                <div style= "clear:both"></div>

                <a href="#"><div class="oferty2">
                    <ol>
                        <li><a href="oferty2.php?page=1"><b>oferty2</b></a></li>
                        <li><a href="oferty2.php?page=1"><b>oferty2</b></a></li>
                    </ol>
                    <div class="podpis">oferty2</div></div></a>
                <a href="oferty3.php"><div class="oferty3"><div class="podpis">oferty3</div></div></a>
                  <a href="#"><div class="oferty3">
                     <ol>
                        <li><a href="oferty3.php?page=1"><b>oferty3</b></a></li>
                        <li><a href="oferty3.php?page=1"><b>oferty3</b></a></li>
                    </ol>
                    <div class="podpis">oferty3</div></div></a>
                <div style= "clear:both"></div>

                 <a href="oferty4.php?page=1"><div class="oferty4"><div class="podpis">oferty4</div></div></a>
                <a href="#"><div class="oferty5">
                    <ol>
                        <li><a href="oferty5.php?page=1"><b>oferty5</b></a></li>
                        <li><a href="oferty5.php?page=1"><b>oferty5</b></a></li>
                    </ol>
                    <div class="podpis">oferty5</div></div></a>
               <a href="#"><div class="oferty6">
                    <ol>
                        <li><a href="oferty6.php?page=1"><b>oferty6</b></a></li>
                        <li><a href="oferty6.php?page=1"><b>oferty6</b></a></li>
                    </ol>
                    <div class="podpis">Oferty6</div></div></a>
                    <div style= "clear:both"></div>

                <a href="#"><div class="oferty7">
                    <ul>
                        <li><a href="Oferty71.php?page=1"><b>Oferty7</b></a></li>
                        <li><a href="Oferty72.php?page=1"><b>Oferty7</b></a></li>
                        <li><a href="Oferty73.php?page=1"><b>Oferty7</b></a></li>
                    </ul>
                    <div class="podpis">Oferty7</div></div></a>
                 <a href="#"><div class="Oferty8">
                    <ol>
                        <li><a href="Oferty81.php?page=1"><b>Oferty81</b></a></li>
                        <li><a href="Oferty82.php?page=1"><b>Oferty82</b></a></li>
                    </ol>
                    <div class="podpis">Oferty9</div></div></a>
                <a href="oferty9.php"><div class="zamiany"><div class="podpis">Oferty9</div></div></a>
                <div style= "clear:both"></div>
               </div>
             <?php include('indexdown.php'); ?>

Dolna część kodu:


<div class="menuu">

                <div class="noweoferty">
                    <b>Nowe oferty:</b><br />
                        <?php 
require_once"connect.php";

$polaczenie = @new mysqli($host, $db_user, $db_password, $db_name); 
if (@!mysqli_set_charset($polaczenie, "utf8")) 
{
    echo "Error: ".$polaczenie->connect_errno."<br />";

 }

if ($polaczenie->connect_errno!=0)
{
echo "Error: ".$polaczenie->connect_errno;    
}
else
{                        
    $query4 = mysqli_query($polaczenie, "SELECT oferty.rodzaj, oferty.cena, oferty.numeroferty, oferty.data FROM oferty UNION ALL SELECT oferty1.rodzaj, oferty1.cena, oferty1.numeroferty, oferty1.data FROM oferty1 UNION ALL SELECT oferty2.rodzaj, oferty2.cena, oferty2.numeroferty, oferty2.data FROM oferty2 UNION ALL SELECT oferty3.rodzaj, oferty3.cena, oferty3.numeroferty, oferty3.data FROM oferty3 UNION ALL SELECT oferty4.rodzaj, oferty4.cena, oferty4.numeroferty, oferty4.data FROM oferty4 UNION ALL SELECT oferty4.rodzaj, oferty4.cena, oferty4.numeroferty, oferty4.data FROM oferty4 UNION ALL SELECT oferty5.rodzaj, oferty5.cena, oferty5.numeroferty, oferty5.data FROM oferty5 UNION ALL SELECT oferty5.rodzaj, oferty5.cena, oferty5.numeroferty, oferty5.data FROM oferty5 ORDER BY data DESC LIMIT 3 ");

$num_rows4 = mysqli_num_rows($query4);

if ($num_rows4 !=0){

while ($fetch = mysqli_fetch_assoc($query4)){        

$price = number_format($fetch['cena'], 0, ' ', ' ');
$rodzaj = $fetch['rodzaj'];

        if ($rodzaj == "oferta1")
        {
?>

            <div class="nowe"><a href="oferta1.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
            <?php } 
            else if ($rodzaj == "oferta2"){?>
                <div class="nowe"><a href="pelnyopisa.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
                <?php } else if ($rodzaj == "oferta3"){?>
            <div class="nowe"><a href="pelnyopisd.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
                <?php } else if ($rodzaj == "oferta4"){ ?>
                  <div class="nowe"><a href="pelnyopisdz.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
                 <?php } else if ($rodzaj == "oferta5"){?>
           <div class="nowe"> <a href="pelnyopisg.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
             <?php } else if ($rodzaj == "oferta6"){?>
           <div class="nowe"> <a href="pelnyopisl.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
             <?php } else if ($rodzaj == "oferta7"){?>
            <div class="nowe"><a href="pelnyopiso.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
             <?php } else{ ?> 
                <div class="nowe"><a href="pelnyopisp.php?numeroferty=<?php echo $fetch['numeroferty'] ?>"><?php echo $fetch['rodzaj'] ?>, <?php echo $price ?> zł</a></div>
             <?php } ?>

<?php }}}?>

                </div>             
                <div class="partnerzy"> 
                    <b>Partnerzy: </b><br />
                        <a href="#" target="_blank"><img src="images/image1.png"/></a><br />
                        <a href="#" target="_blank"><img src="images/imgae2.png"/></a><br />

                </div>
                  <div class="linki">
                      <b>Przydatne linki:</b><br />
                    <a href="#" target="_blank" class="link">Tekst</a><br>
                    <a href="#" target="_blank" class="link">Tekst</a> <br /><br />   
                      <a href="#" target="_blank"><img src="images/zdjecie.png" width="150" height="150"/></a>
                </div>

              </div>

              <div style= "clear:both"></div>

             </div> 

        <div id= "socials">    
            <div class= "socialdiv">
                <div class= "fb"><a href="https://www.facebook.com/" target="_blank" class="fbft"><i class= "icon-facebook"></a></i></div>
                <div class= "tt"><a href="https://twitter.com/" target="_blank" class="ttft"><i class= "icon-twitter"></a></i></div>
                <div class= "yt"><a href="https://www.youtube.com/channel/" target="_blank" class="ytft"><i class= "icon-youtube"></a></i></div>
                <div class= "in"><a href="https://www.instagram.com/" target="_blank" class="inft"><i class= "icon-instagram"></a></i></div>
                <div class= "gplus"><a href="https://plus.google.com/" target="_blank" class="gpft"><i class= "icon-gplus"></a></i></div>
                <div style= "clear:both"></div>
            </div>
        </div>

        <div id= "contact">
            <div class= "dane">
                <div class= "adres">
                Adres sklepu:<br /><br />
                Nazwa<br /><br />
                Ulica<br /><br />
                Kod<br /><br />
                </div>
                <div class= "mapa">
                Sprawdź jak do nas dojechać:<br /><br />
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9340.174415947662!2d15.574614!3d54.1793036!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3d2911ac0a1684ef!2s" width="340" height="170" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
                <div class= "telefon">
                Kontakt: <br /><br />
                <i class= "icon-phone"></i>Numer telefonu<br /><br />
                <i class= "icon-mobile"></i>Numer telefonu<br /><br />
                <i class= "icon-mobile"></i>Numer telefonu<br /><br />
                <i class= "icon-mail"></i>adres email
                </div>
                <div style= "clear:both"></div>
            </div>
        </div>

        <div id= "footer">

        Wszelkie prawa zastrzeżone 1996 - <?php echo date('Y'); ?> ©

        </div>

    </div>

</body>
</html>

Na stronie użyte są różne skrypty zewnętrzne, w JavaScript wklejone są kody PHP. Zauważyłem, że czasem strona załaduje się prawie cała ale długo ładują się zdjęcia lub jedno ze zdjęć ładuje się kilka minut. Na stronie głównej zdjęć dużo nie ma ale na podstronie może być ich nawet kilkanaście z tym, że ładują się one w rozmiarach 150x150 ich lokalizacja pobierana jest z BD.

Z góry dziękuję za wszelkie sugestie

edytowany 1x, ostatnio: Venom888, 2017-08-11 16:08

Pozostało 580 znaków

2017-08-11 13:30
0

Analizowałes dokładnie który element ładuje Ci się najwolniej? Chrome->dev tools->network (z głowy pisze), może jakiś zewnętrzny skrypt lub zasób spowalnia Ci stronę

Pozostało 580 znaków

2017-08-11 13:31
0

a może hosting, albo jego ustawienia?


Pozostało 580 znaków

2017-08-11 13:37
Szalony Jeleń
0
axelbest napisał(a):

Analizowałes dokładnie który element ładuje Ci się najwolniej? Chrome->dev tools->network (z głowy pisze), może jakiś zewnętrzny skrypt lub zasób spowalnia Ci stronę

Przeważnie są to zdjęcia. Przed chwilą wszedłem na stronę to przez kilkanaście sekund ładował się slider, aktualnie ma on do pobrania z bazy danych/serwera 2 zdjęcia, nie są one duże zajmują około 60 KB każde.

Pozostało 580 znaków

2017-08-11 13:39
Szalony Jeleń
0
czysteskarpety napisał(a):

a może hosting, albo jego ustawienia?

Strona jest postawiona na home.pl. Na serwerze znajduje się jeszcze jedna strona i ona śmiga bez problemu ładowanie zdjęć i grafik trwa sekundę.

Pozostało 580 znaków

2017-08-11 13:46
0

Posty "Szalony Jeleń" to moje zapomniałem się zalogować i taki nick się wpisał. Jeżeli chodzi jeszcze o slider to zdjęcia również wolno lądują się w panelu administratora a jest on robiony na osobnych plikach i tam nie ma skryptów związanych ze Sliderem a więc to nie on jest raczej problemem. Mam wrażenie, że chodzi tutaj o pobierani zdjęć z serwera no ale nie jest to jakiś skomplikowany kod porostu zwykłe pobranie ścieżki z BD i wyświetlenie zdjęcia z serwera.

Pozostało 580 znaków

2017-08-11 13:48
0

1) zmniejszałeś rozmiary tych plików? polecam te 2 optymalizatory wielkości
png: https://css-ig.net/pingo
jpg: https://imageoptim.com/online

2) home.pl jest kijowy. Miałem i nie polecam nikomu, chcą kupe kasy a dają w zamian niewiele ile ja się na kłóciłem z supportem o różne rzeczy...

Pozostało 580 znaków

2017-08-11 13:49
0

Ale czy analizowałeś to patrząc na czasy ładowania obrazków? Tak jak ooo tutaj
Zrzut ekranu 2017-08-11 o 13.47.57.png

Pozostało 580 znaków

2017-08-11 14:13
0
axelbest napisał(a):

Ale czy analizowałeś to patrząc na czasy ładowania obrazków? Tak jak ooo tutaj
Taki mam wynik Untitled-2.jpg

Pozostało 580 znaków

2017-08-11 14:21
0

Wklejać tego nie musisz :) - mojego obrazka cytować też, posortuj sobie wg czasu ładowania i tyle. Jak coś Ci leci z zewnętrznego serwera (np te obrazki) i czas ładowania jest spory - to masz przyczynę :)

Pozostało 580 znaków

2017-08-11 14:31
1

wrzuć se to na localhost przez xampp i zobacz jak jest, jak śmiga to znaczy, że hosting home dupny, a jak też muli to linki/kod do analizy


Po co? Przecież w narzędziu widać, który request dokąd jest robiony i po jakim czasie przychodzi odpowiedź. Po co marnować czas na stawianie dodatkowego środowiska? - ŁF 2017-08-11 14:45
nie wiem, niepaczyłem na obrazki :) - czysteskarpety 2017-08-11 14:47

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0