Build Your Own Business Website header image

Analyze a Site Using YSlow

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we discuss how you can speed up your website by analyzing it using the Firefox Addon YSlow and what information you can get using this tool.

Video Transcript

Good morning.

Rick: Good morning. How are you doing?

I’m doing great. And you?

Rick: I’m doing terrific.

Wonderful.

Rick: Okay. So you want to speed up earlebaum.org. You’re concern that it’s too slow.

Yes it is.

Rick: I think the time that you tested this to say that it took you 26 minutes. I think that must have been something odd because it doesn’t take anywhere near that for me.

Oh, I see. Even this morning it took about 20 seconds.

Rick: Oh seconds?

Yes. Not minutes, seconds.

Rick: I’m sorry. You typed minutes in here.

Oh, I’m sorry. That’s real bad.

Rick: Okay. I’m just going to say. Okay so the tool that I use is yslow.

How do you spell that?

Rick: y-s-l-o-w. It’s a FireFox add-on and you install it just like you would install any other FireFox add-on, like firebug or webdeveloper or whatever. Once you install it, you can run yslow on any site. First thing you want to do is to test it based on a small site or blog. You don’t want to use the same test rules as you might use if you were (1:36) or target or yahoo, right? Because you don’t have the same kinds of resources, you do have a “Small site or Blog”, you’re going to use that kind of a test.

Running a Test to Check Site Performance

Once you’ve done that, you can run the test and see what your grade is. Now, this thing gives you a pretty good grade. Gives you a better grade than I have. Overall performance, score of 87. Your worst failures are first, you have 20 external Javascripts that you are referencing and you have 13 external stylesheets that you’re referencing.

You have another problem with “Put CSS at top”. For some reason or another, something that you have is calling for font colors. Something that you have is calling for a CSS in the middle of the document. I wonder what would cause that. So we’re going to “View Page Source” here for a second. Let’s see if we can find slider.css and look at that. You have inside of the body of your site something called “ebc-search”. You are calling a whole bunch of script. You shouldn’t be calling “jquery.min.js” because it’s already being loaded. I’m guessing you had some custom programming done.

Yes, I did.

Rick: Each of these “jquery.ui” things are actually part of WordPress and your developer should have used the WordPress system for accessing them. What is done here is not only has he said, “Well, get the copy that we’ve stored in Thesis 1.8”, which is not the right thing to do but is also called in the middle of the document. Which means it can’t ever be cached, right? No browser can cache this because it doesn’t cache these stuff.

Everything that he did in this area is essentially wrong I’m afraid to say. Even the “$ (document).ready(function()”. If this is just straight JavaScript, it’s fine but because it’s calling “jquery”. If it’s just straight JavaScript and not “jquery”, then using the $ sign is fine. If it’s actually “jquery” code, then it’s wrong because “jquery” needs to be used in the “No Conflict” mode in WordPress. I think this is probably “jquery” given that he’s calling all kinds of “jquery” stuff for it.

The Use of WordPress On Queue Script Function

I would say that you can resolve a lot of the issues here simply by having this piece of code where it worked and done properly so that the script is on queued using the “WordPress On Queue Script Function” and the CSS Files are added using the “WordPress On Queue Stylesheet Function”.

In fact, since CSS is specifically related to your site and since this is Custom code, you would probably be better off taking whatever CSS that you wanted and not even using these stylesheets put inside of Custom CSS because it would remove 3 http requests that would automatically get rid of 3 of these external http requests. You go from 13 down to 10.

Reducing JavaScript Scripts to Speed Up Loading

That block of external Javascript that’s being called could be entirely removed and so you’d be reducing these JavaScript scripts. Not only would you be reducing them but you’d be putting them in a manner that would allow them to be cached by the browser. That would speed up the loading of the site and of course you’ve got this, “Put JavaScript at Bottom”.

I’m really surprised about this “wp-e-commerce” placing its JavaScript in the head when it doesn’t need to. The fact that the plugin is well-established is that it wouldn’t be doing this. Maybe I’m wrong, maybe the “wp-e-commerce” JavaScipt needs to go in the head but most JavaScripts should go at the bottom of the document including “jquery.js”.

This is probably going to come out of fixing that one plugin of yours or whatever is that custom code. Definitely I’m irritated by the way NextGen does this too but they don’t seem to fix that. Some of this stuff is outside of your ability to fix. But “Put JavaScript at Bottom, “Put CSS at Top”, and “Make Fewer HTTP requests” can make a fairly big impact on.

Okay.

Rick: Then you have just the actual load.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment