Reputation: 1099

How to check what's slowing down a page?

I'm working on a website that can be found here: http://odesktestanswers2013.com/Metareviewer

The index appears to be unusually slow (slowing down the browser as it loads) even though Yslow doesn't seem to see anything particularly wrong with it and that my php microtime returns a fine value.

What's the other things I should be looking into ?

Upvotes: 2

Answers (7)

cartina

Reputation: 1429

You can use this site (http://gtmetrix.com/) to analyze the causes and to fix them them enter image description here .The site provides the reasons as well as solutions like js and css in optimized formats.

As per this site's report, you need to optimize images and minify js and css files. The optimized images and js and css files can be downloaded from this site.

Upvotes: 1

Greg

Reputation: 21909

Using Chrome Developer Tools, the network tab shows this:

enter image description here

... a timeline of what's loading in your page.

There are also plenty of good practices that aren't being made here. Some of these can also be flagged up by using Google Chrome's Audit tool (F12 menu), but in my opinion the most important are:

Use a CDN for serving common library code. Do you really need to host Jquery yourself? (side-rant, do you really need jquery at all?)
Your JavaScript files are taking a long time to load, because they are all served as separate HTTP calls. You can combine them into a single JavaScript file, and also minify them to save lots of bandwidth.
Foundation.css is very large - not that there's a problem with large CSS files, but it looks like there are over 2000 rules in the CSS file that aren't being used on your site. Do you need this file?
CACHE ALL THE THINGS - there are 26 HTTP requests that are made, that are uncached, meaning that everyone who clicks on your site will have to download everything, every request.
The whole bandwidth can be reduced by about two thirds if you enabled gzip compression on your server (or even better, implement SPDY, but that's a newer technology with less of a community).
Take a look on http://caniuse.com - there are a lot of CSS technologies that are supported in modern browsers without the need for -webkit or -moz, which could save a fortune of kebabbobytes.

If I could change one thing on your site...

Saying all of that, each point above will make a very small (but accumulative) difference to the speed of your site, but it's probably a good idea to attack the worst offender first.

Look at the network graph. While all that JavaScript is downloaded, it is blocking the rest of the site to download.

If you're lazy, just move it all to the end of the document body. That way, the rest of the page will download before the JavaScript has to, but this could harm the execution of your scripts if they are programmed in particular styles.

Hope this helps.

Upvotes: 5

user2198090

Reputation: 1

Try to use Opera. Right click -> Inspect element -> Profiler. Look to Inspect element -> Errors.

Upvotes: 0

ukliviu

Reputation: 3134

You should also consider using http://www.webpagetest.org/

It's one of the best tools when it comes to benchmarking your site's performance.

Upvotes: 1

Seph

Reputation: 1094

Yslow gives you details about your website's front end. Most likely you have a script that is looping one to many times in the background.

If you suspect that a sequence of code is hanging server side then you need to do a stack trace to pinpoint exactly where the overhead is taking place.

I recommend using New Relic.

Upvotes: 0