Why does this page take so long to load?

Let me preface this by saying that I can't show you what's going on in that the "sluggish-ness" is happening on my company's intranet site. The URL I'm about to direct you to shows the page and it loads fine, so...there you have it.

Here's what I've got: It's a calendar. Head out to http://brucegust.com/portfolio/verizon/index.php?month=5&year=2015 and see what I've got. As you click on the arrows to move from month to month, the page loads up instantaneously. On my work's intranet site, however, the calendar dramatically lurches to the right as it takes a moment to load and the resolves in the center and it's fine. But that first split second reminds me of a drunk stumbing into a room and I've got to figure out what I can do to eliminate the "stumbling."

Any ideas?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Not sure what I am looking for - when navigating on the URL above the page takes half a second to load (520ms +-) is that what you are referring to?
Bruce GustPHP DeveloperAuthor Commented:
Hey, Julian!

You're looking at the right page and it loads just fine. Yet, that same page will load very slowly on my company's intranet. In other words, when you're doing from month to month using the arrows at the top, rather than the screen flickering for a brief instant and the next month coming up seamlessly, the calendar looks like it lurches to the right before settling in the center and fully resolved.

Since posting this question, I've eliminated all of the Javascript, thinking perhaps that was slowing things down, but it's still sluggish.

Can you see anything else that might explain why it's so clunky on my company's intranet?
Julian HansenCommented:
Which browser?
Does it happen in all browsers?
Does it happen on all machines?
Does it happen all the time?
If you look at the Net panel in the Inspect Element window - do you see anything untoward in terms of load times or missing resources?
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Ray PaseurCommented:
You might want to tidy up the markup.  The missing alt= attributes probably don't matter, but the unbalanced tags might be an issue.
http://validator.w3.org/nu/?doc=http%3A%2F%2Fbrucegust.com%2Fportfolio%2Fverizon%2Findex.php%3Fmonth%3D6%26year%3D2015

You may also want to explore Chrome Dev Tools.  There are a lot of valuable things you can learn from them!  Good info at the CodeSchool link.
https://developer.chrome.com/devtools
https://developer.chrome.com/devtools/docs/network
http://discover-devtools.codeschool.com/

You can do server-side script timing with the Stopwatch class.  But from the sound of things, I would suspect the client machine or the intranet.  If they are making requests to the same server server we are seeing in the links posted here, I doubt that the issue is on the server.
<?php // demo/class_Stopwatch.php

/**
 * A Class that allows us to see the elapsed time when running a script
 */
error_reporting(E_ALL);


// CREATE AN INSTANCE OF THE STOPWATCH
$t = new StopWatch;


// START THE TIMER
$t->start();

// DO SOME ACTIVITY THAT YOU WANT TO TIME
$x = file_get_contents('https://google.com/');

// GET A READOUT FROM THE TIMER
echo $t->readout();

// RESET THE TIMER
$t->reset();


// A SCRIPT TIMER FOR ALL OR PART OF A SCRIPT PHP 5+
// MAN PAGE http://php.net/manual/en/function.microtime.php
class StopWatch
{
    protected $a; // START TIME
    protected $s; // STATUS - IF RUNNING
    protected $z; // STOP TIME

    public function __construct()
    {
        $this->a = array();
        $this->s = array();
        $this->z = array();
    }

    // A METHOD TO PROVIDE A FINAL READOUT, IF NEEDED
    public function __destruct()
    {
        $ret = $this->readout();
        if (!$ret) return FALSE;
        echo
          __CLASS__
        . '::'
        . __FUNCTION__
        . '() '
        ;
        echo "<b>$ret</b>";
        echo PHP_EOL;
    }

    // A METHOD TO REMOVE A TIMER
    public function reset($name='TIMER')
    {
        // RESET ALL TIMERS
        if ($name == 'TIMER')
        {
            $this->__construct();
        }
        else
        {
            unset($this->a[$name]);
            unset($this->s[$name]);
            unset($this->z[$name]);
        }
    }

    // A METHOD TO CAPTURE THE START TIME
    public function start($name='TIMER')
    {
        $this->a[$name] = microtime(TRUE);
        $this->z[$name] = $this->a[$name];
        $this->s[$name] = 'RUNNING';
    }

    // A METHOD TO CAPTURE THE END TIME
    public function stop($name='TIMER')
    {
        $ret = NULL;

        // STOP ALL THE TIMERS
        if ($name == 'TIMER')
        {
            foreach ($this->a as $name => $start_time)
            {
                // IF THIS TIMER IS STILL RUNNING, STOP IT
                if ($this->s[$name])
                {
                    $this->s[$name] = FALSE;
                    $this->z[$name] = microtime(TRUE);
                }
            }
        }

        // STOP ONLY ONE OF THE TIMERS
        else
        {
            if ($this->s[$name])
            {
                $this->s[$name] = FALSE;
                $this->z[$name] = microtime(TRUE);
            }
            else
            {
                $ret .= "ERROR: CALL TO STOP() METHOD: '$name' IS NOT RUNNING";
            }
        }

        // RETURN AN ERROR MESSAGE, IF ANY
        return $ret;
    }

    // A METHOD TO READ OUT THE TIMER(S)
    public function readout($name='TIMER', $dec=3, $m=1000, $t = 'ms', $eol=PHP_EOL)
    {
        $str = NULL;

        // GET READOUTS FOR ALL THE TIMERS
        if ($name == 'TIMER')
        {
            foreach ($this->a as $name => $start_time)
            {
                $str .= $name;

                // IF THIS TIMER IS STILL RUNNING UPDATE THE END TIME
                if ($this->s[$name])
                {
                    $this->z[$name] = microtime(TRUE);
                    $str .= " RUNNING ";
                }
                else
                {
                    $str .= " STOPPED ";
                }

                // RETURN A DISPLAY STRING
                $lapse_time = $this->z[$name] - $start_time;
                $lapse_msec = $lapse_time * $m;
                $lapse_echo = number_format($lapse_msec, $dec);
                $str .= " $lapse_echo $t";
                $str .= $eol;
            }
            return $str;
        }

        // GET A READOUT FOR ONLY ONE TIMER
        else
        {
            $str .= $name;

            // IF THIS TIME IS STILL RUNNING, UPDATE THE END TIME
            if ($this->s[$name])
            {
                $this->z[$name] = microtime(TRUE);
                $str .= " RUNNING ";
            }
            else
            {
                $str .= " STOPPED ";
            }

            // RETURN A DISPLAY STRING
            $lapse_time = $this->z[$name] - $this->a[$name];
            $lapse_msec = $lapse_time * $m;
            $lapse_echo = number_format($lapse_msec, $dec);
            $str .= " $lapse_echo $t";
            $str .= $eol;
            return $str;
        }
    }
}

Open in new window

Bruce GustPHP DeveloperAuthor Commented:
Julian, as far as browsers go, most are on IE, although I checked it on Firefox as well. In both instances, you've got the identical problem.

The only machine I'm checking is my own, but given the fact that the identical page is at brucegust.com which is working just fine, by process of elimination and all things being equal, the intranet site seems to be the cantankerous factor in this case, I'm just not sure what it's "problem" is.

Ray, I went through validator report and remedied all of the discrepancies including the alt tags etc. There might've been a slight improvement in performance, but the page still "lurches" when you reload it.

I've eliminated line breaks, placed my Javascript at the end of my just above the closing body tag along with my image map. I've done everything I can think of and I was able to get things to work properly, provided I removed the code in each of my date cells that allowed you to access a tooltip when you hovered over any of the text as well as a popup window when you clicked on the text. If had just an un-formatted link, the page would load just fine. Include any formatting or, God forbid, a div for the sake of identifying that link for the Javascript I've got to the right of the calendar, and you're looking at the lurching, stumbling load time again.

Any other suggestions?

Thanks to the both of you for your willingness to share your expertise.
Julian HansenCommented:
The link that you sent us above is that the same link you are using to test internally or is it a copy?

If it is a copy then what do you see when you browse to that link from the internal machines - same problem?

If so then it is either network / machine related.
Ray PaseurCommented:
What is the make and model of the machine that exhibits the lurching?  What OS is it running?
Bruce GustPHP DeveloperAuthor Commented:
Morning, Ray! Morning Julian!

Julian - the link that y'all are looking at is a carbon copy of the page that's on the intranet site and I'm using the same machine to view both pages.

Ray, I'm using a Dell "Latitude" Laptop and I'm running Windows 7.
Ray PaseurCommented:
Here's an experiment to try.  Take the laptop off the intranet and use the same machine to access the web page over the internet.  If it's not lurching when you do that, indict the intranet.
Julian HansenCommented:
Julian - the link that y'all are looking at is a carbon copy of the page that's on the intranet site and I'm using the same machine to view both pages.
Just to clarify - do you see experience the same issue on both pages (original on your intranet and the CC version we are looking at)?

If the same then Ray's suggestion is the next step to determine if it is the actual machine or the network you are on.

There were other questions above unanswered - if this test is done on other machines on the same network what happens?
Bruce GustPHP DeveloperAuthor Commented:
Ray and Julian!

I network guy was able to identify an anomaly that may be the difference maker.

Here's a screenshot of the email he sent me. Apparently the images are the intranet site are being re-downloaded every time the page is refreshed, whereas the same site on my server is not re-downloading the images.

Does that resonate with either one of you as far as how I might hardwire something that ensures the background images etc stay cached, rather than being re-downloaded every time?
Julian HansenCommented:
stay cached, rather than being re-downloaded every time?
I suspect that might be a function of your network - do you use a proxy server?

What you can do though to stop the "jumping" is to give your images a fixed size - what is happening is that the page is rendering sans images and then as the images fill in they expand their containers widening the screen. If you make the containers the right size to begin with then the page will load with empty images which will then download - but the screen won't lurch.

I think the jumping issue is explained by your latest post - two objectives going forward.

1. Find out why images not being cached
2. Fix page to have containers at pre-set widths to stop jumping effect.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
Ray and Julian!

I removed all of my images and just duplicated the look and feel with CSS as best as I could. It actually looks pretty pass-able and the lurching doesn't happen except on very rare occasions and it's not a consistent thing.

I'll continue with the counsel you've provided, but I've been able to see enough of an improvement where I'm going to go ahead and close the question.

Thank you very much!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.