You fairly have an idea on the loading speed of your website or blog. It may be performing well, but then again, it may not. If it's the latter, definitely, you may need to optimize your website or blog's load time. Question there is, how?
Before doing the how and checking for quick tips in speeding it up, you must learn WHAT slows it down in the first place.
This is where YSlow and Firebug come in.
QuickOverview.
Both are firefox add-ons. They are used in conjuction with each other.Yslow.
YSlow analyzes web pages and tells you WHY they're slow based on the rules for high performance web sites.
Firebug.
With Firebug,
You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
How It Works.
Once both add-ons are installed, YSlow begins to analyze the currently loaded page and generates:(1) a grade based on each performance rule; and
(2) an overall grade obtained by the webpage.
Let's take this blog as an example:
View Full Size
What's great about this add-on is that, it gives recommendations on how to optimize your blog/website. Just click on each point to learn how.
Performance Rules.
Let's take a quick look at each point.(1) Make Fewer HTTP Requests.
YSlow counts the number of HTTP requests made on the website.
View Full Size
YSlow Recommendations:
a. Two (2) CSS files/stylesheets
b. Three (3) JS files/javascript
c. Six (6) CSS background images
(2) Use a CDN.
CDN or Content Delivery Network is a collection of web servers, distributed across multiple locations, to deliver content more efficiently to users.To put it simply, it is recommended to use a CDN service provider because the user's proximity to your web server (i.e. the server with the fewest network hops or the server with the quickest response time) has an impact on the response time.
YSlow Recommendations:
a. Akamai Technologies
b. Mirror Image Internet
c. Limelight Networks
If you cannot afford a proper CDN, check out these links that offer alternatives:
Add your server host to the list of "Known CDNs"
CoralCDN and other alternatives
(3) Add an Expires header.
Here is Yahoo's explanation on Expires header.
Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page.
A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views.
Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.
This may only be applicable to blogs with custom domain. To implement this, check out this link's "how to": Edit .htaccess file
(4) Gzip components.
Compressing components greatly reduce the size of HTTP response by 70%. Gzip is the most popular and effective compression method at this time.YSlow Recommendation:
Most web sites gzip their HTML documents. It's also worthwhile to gzip your scripts and stylesheets, but many web sites miss this opportunity. In fact, it's worthwhile to compress any text response including XML and JSON.
Image and PDF files SHOULD NOT BE GZIPPED because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.
How to? Check this out: Edit .htaccess file
(5) Put CSS at the top.
All stylesheets should be placed at the document head, i.e. before the closing tag of head.:
</head>
As much as possible, try NOT to put stylesheets in the document body or near the bottom of the document as it prohibits progressive rendering in some browsers. It is for this reason that the user sometimes gets stuck with viewing a blank page.
(6) Put JS at the bottom.
Normally, we place all JS codes at the document head. Putting it at the bottom would make the loading of the header and css faster.WARNING: There are a few guidelines in placing JS at the bottom. Wrong placement may cause the JS to break or worse, stop working.
Before making any move, you may:
(1) take one JS to the bottom at a time to check and debug; or
(2) check alternatives like using DEFER attribute or joining CSS and Javascript files together (for Wordpress/PHP hosted servers)
(7) Avoid CSS expressions.
The expression referred here is method that looks something like this:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
where background color is being evaluated based on a Javascript expression and is set to load dynamically.
Avoid using CSS expressions as much as possible.
(8) Make JS and CSS external.
Call stylesheets/scripts externally? OR inline them in the front page?Here's what Yahoo says about this matter:
The key factor, then, is the frequency with which external JavaScript and CSS components are cached RELATIVE to the number of HTML documents requested.
This factor, although difficult to quantify, can be gauged using various metrics.
If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.
(9) Reduce DNS lookups.
Check out my grade below where I used picasaweb as the host of my images.
View Full Size
YSlow Recommendation:
At least 4 hostnames.
(10) Minify JS/CSS.
Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.
Quick tips:
a. remove comments
b. delete unneeded white space characters (i.e. space, newline, tab)
c. for CSS, use shorthand properties. instead of:
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px
try this,
margin: 1px 2px 3px 4px (top, right, bottom, left)
d. for js, use tools like JSMin and YUI Compressor
(11) Avoid Redirects.
This is basically using 301 and 302 status codes.YSlow Recommendations:
Use alternatives like:
a. Alias and mod_rewrite if the two code paths are hosted on the same server; or
b. CNAME if there has been a domain name change
More information about CNAME:
Redirect with CNAME
CNAME Domain Redirect
Blogger CNAME redirect instructions
(12) Remove duplicate scripts.
Be mindful of the scripts embedded on your website. Check out mine's:
View Full Size
(13) Configure Etags.
ETags or entity tags are basically a mechanism to check for a newer version of a cached file.To configure or turn off Etags, check out:
Website Optimization's Code:Configure or Eliminate ETags
They may be instances though when you have no control on the files that have ETags. Below is an example:
View Full Size
In such cases, you may either check the website's FAQ/support for possible resolutions or if you really feel this has a great impact on your website's speed, delete the components altogether and stick to only one or two.
How To Install and Run Firebug and YSlow Firefox Add-Ons.
(1) Go to Firebug add-on page and install.(2) Go to Yslow add-on page and install.
(3) Restart Firefox.
(4) Go to your desired website.
(5) Double click YSlow icon. If it doesn't automatically run, you may click Performance or Stats or Components tab to begin.
View Full Size
Debugging YSlow's After Usage Errors
IF you will EVER encounter an "after usage" error (as I did) like missing scroll bars in the browser window (which may or may not be a result of conflict with other add-ons or resolution issues), follow these simple steps:(1) Go to your Browsers Main Toolbar.
(2) Click Tools, choose Add-ons.
(3) Look for Firebug, choose Disabled.
(4) Restart Firefox.
Just enable the add-on if you need to use it. That should certainly solve it!
NOTE: To effectively use this add-on, make sure to clear all cookies and cache on your browser. Reloading the "already visited website/blog" and running YSlow FOR THE SECOND TIME or so forth may yield a higher result grade thus cannot be considered accurate.
Credits go to my great web designer guru, Kbladez. Thanks for sharing the add-ons' info. ^_^
For more Firefox add-ons, check out this fantastic post by my friend: Knowliz's Top 50 MUST HAVE Firefox Add-Ons
Resources:
http://developer.yahoo.com/yslow/
http://getfirebug.com/
http://developer.yahoo.com/performance/rules.html
http://www.thewebsqueeze.com/articles/yslow-going-from-f-to-a.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
http://aciddrop.com/2008/01/03/automatically-join-your-javascript-and-css-into-a-single-file/
http://www.stevenhargrove.com/redirect-web-pages/
http://www.webmasterworld.com/forum23/3301.htm
http://www.webmasterworld.com/domain_names/3654331.htm
http://groups.google.com/group/blogger-help-troubleshoot/browse_thread/thread/39f4b79518613dfe/e476bcb6d5f25190?lnk=gst&q&pli=1
http://www.websiteoptimization.com/secrets/advanced/configure-etags.html
Digg this! | Save to del.ico.us | Save to technorati | Stumble it! | Print
