Yahoo YSlow - What Slowing Down Your Blog

[phpexpert]

How long do visitors wait while your blog loads? Do you know? Are the extra seconds making them bail and as a result costing you money? Rank? Visitors?



Hands down, using a blog platform—templates, widgets, plugins and all–makes creating and managing a site much easier than building it from scratch. Chores like updates and maintenance that used to be done to each individual page can now be done site wide, with one click. Unfortunately, blogs can easily become overloaded and slow, which costs you rank, visitors, and revenue.



This tutorial will show you how to test your blog’s performance and speed things up. Why? Because speed is good and sloth-like time drooling blogs are not.



What’s an Ideal Page Load Time?

In an earlier series on page speed, we discussed that Google, Yahoo!, and Amazon performed experiments on how increased page speed (a greater load time) affected their business/revenue. Here are some of the results:

• Google: One-half second increase in load time resulted in a 20% drop in traffic.
• Amazon: One-tenth of a second added to load time meant a 1% drop in sales.

So, do seconds, even tenths of a second in increased load time matter? Yes!
What Slows Down a Blog
Common and easily fixable issues that slow blogs down include:

• Plugins
• Widgets
• Scripts
• Ad Scripts
• CSS
• Images
• Avatars

Obviously, your blog would suck without any of those, so the key is to determine which are “can’t live without’s,” fixable, and which will be kicked to the curb. To start the analysis, let’s check the site speed of your blog.



Tools to Test Page Speed

We’re going to test your site using four tools: several Firefox add-on tools, and WebPagetest.org, a web-based tool.
Make sure you’re running the latest version of Firefox. At the time of this writing, 3.6 was the latest version, but 4 is available in beta.
Download the following Firefox add-ons:

• Firebug
• Yahoo! YSlow
• Google Page Speed

Once installed, restart Firebox. You’ll see the Firebug and YSlow icons, pictured below, near the bottom of the browser window. Go ahead and click the Firebug icon.


Attachment 86


A window should appear on the bottom half of the screen. That window is the Firebug tool. Take at look at the last two tabs on the right. Those are the YSlow and Google Page Speed add-ons and what we’ll be focusing on within this tool.

Attachment 87

Let the Testing Begin
With Firebug open, click the YSlow tab, select “Blog” from the drop down Rulesets menu and click the Run Test button. Record the letter and number grade. For our example, we scored a B and a 85/100.



Next, click the Page Speed tab to the right and run that analysis, also recording the score. Our test blog scored a 69/100.



Lastly, test your page using WebPagetest.org and record the page speed. Our test blog scored 68/100. Definite room for improvement. Click the Waterfall report. This chart shows how long each element on your page (images, files, plugins, scripts, widgets, ads, etc.) takes to load and if it required a DNS look up. Its a good at-a-glance to what is holding up the show. The report for our test blog showed some ad scripts, JPG images, and plugins slowing things up.



What’s Slowing Down Your Blog?


The YSlow and Page Speed reports analyze more criteria than we’ll be covering today. If you want to learn how to take advantage of all the analysis on this report,

For today, let’s focus on quick fixes to speed up your blog right now.

Combine and Minify CSS: Cascading Style Sheets (CSS) files are often written in blocks with a blank line between each element. Getting rid of the blank lines and blank space can improve page speed.



Getting rid of repetitions among selectors in CSS speeds things up too. For example, if your H1-H5 tags share the same dark grey font, instead of a creating a new line for H1, H2, H3, etc. to declare the font colors, group them together.



Here’s a cool thing. The Google Page Speed tool automatically creates a minified version of your CSS files. Scroll down the test results, find the “Minify CSS” line and click the gray arrow next to the entry as highlighted below.

Attachment 88

If minified versions are available, you’ll see a line like the one below. You can view the optimized version and cut and paste it to replace the older, or click “Save as” to download the new file. “Minifying (file name) could save 2.7KiB (22% reduction). See optimized version or Save as.”
From there, just go into the Dashboard and replace the old version of the file with the minified version. Don’t forget to make a backup of the old CSS file first.



Changes Made:

• Minified (2) CSS files
• Minified one plugin style sheet

Time to Complete:

• Less than five minutes.

Test Results:

• Gained 2 points in Google Page Speed.
• Gained 3 points on WebPagetest.org.
• Knocked 30 seconds off the load time.

NOTE: WordPress themes don’t often come with minified CSS, so when you pick a new theme for any of your blogs, minify the CSS right away. It’s an easy way to speed up your pages.



Do not scale images in HTML: Don’t upload an image that is 600 x 600 and then resize it with width and height attributes in HTML to make it 200 x 200. Save images at the actual size you plan to display them online.



Optimize Images: JPG images, especially uncompressed JPGs, will slow down a site. PNG is a much better format. Make sure to scale/resize (if necessary), reformat, and optimize images. For a more in depth explanation on how to do all this read the step-by-step tutorial, Speeding up Your Images.



Google Page Speed will also compress images it feels are real whoppers. Click the grey button next to the Optimize Images link in the report, save each image, and upload to your blog, replacing the old image. The amount of time that can be saved depends on how many images on your site. We had a handful of images and shaved an entire second off our load time.



Make fewer HTTP requests: Javascripts, multiple stylesheets, and external background images are going to create multiple HTTP requests which slow down a site. Facebook widgets, social media buttons, Twitter streams, even avatars can slow down your site. Also remove duplicate plugins and those with overlapping features.



Changes Made:

• Removed avatars from comments

Time to Complete:

• Less than one minute.

Test Results:

• Gained 3 points in Google Page Speed.
• Gained 1 point on WebPagetest.org.
• Knocked one-tenth of a second off the load time.

Clean up code: Delete empty src or href lines in your page code (code for an image with no image there or code for a link with on URL.)
Reduce DNS lookups: One DNS lookup can take 20 to 120 milliseconds. Nothing from that host can be downloaded until the look up is complete. Excessive lookups will slow your site. Social bookmark buttons are offenders in this area as are ad scripts and any services your site uses. Are certain plugins or ad scripts making too many DNS lookups? Is the ad revenue great enough and does the benefit of the plugin justify slowing up your site?



Remove duplicate CSS: A lot of times we don’t use all the elements or widgets that come with a template, like the calendar. Even though you don’t use them, their existence in the stylesheet still affects load time. Save a copy of the stylesheet on your computer (in case you want to use those features later one). Then edit the existing stylesheet and remove unused elements.



Summary
By simply copying file improvements suggested by Google Page Speed and uploading them to a test blog, 1.40 seconds were knocked off the load time. That’s an excellent investment in time

[Speedy]

Thanks for posting.

[harrydenwt]

Nice work done by you really nice information for the bloggers i ll try to implement the things that you have mentioned in this post keep posting these type of posts thanks alot again.

[pkfarnv]

Nice and informative sharing...Thanks.