如何查看正在减慢页面速度的内容？

Question

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 ?

Answer 1

Using Chrome Developer Tools, the network tab shows this:

... 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.

Answer 2

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.

Answer 3

You can use this site ( http://gtmetrix.com/ ) to analyze the causes and to fix them them .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.

Answer 4

Use Google Chrome -> F12 -> Network and check the connect, send, receive and etc. time for each resource, used in your page.

It looks like your CSS and JS scripts have a very long conntect and wait times.

Answer 5

you can use best add-one available for both chrome and firefox

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

above is link for firefox add-one you can also search chrome and is freely available.

Answer 6

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 .

Answer 7

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