VT’s Tech Blog

Web developers have to check out Google’s new Firefox + Firebug addon called Page Speed. This addon inspects your webpage to see how you can optimize the load time. Yahoo’s YSlow was good, but Google takes it a few steps further to even inspect your html and styles to see what can hider the render time of the page once it’s loaded.

Apart from the standard tests on if your content is gzipped, server headers are correct and enable client side caching and parallelizing downloads from differnent host names, this addon also does the following:

• Inspect your CSS files for unused styles
• Inspect your Cookie size – the bigger the cookie size, the bigger the request sent to the server everytime, since every request will send your cookies from the browser to the server
• Checks image compression ratios to see if you’re running on the optimal compression.
• Checks to see if your Javascript is minified, if not, it’ll show you how much you can save if you minify your javascripts
• Inspects the execution of Javascript on the page on load to show which Javascript files can be deferred in loading, by placing the Javascript loads at the end of the page instead of the head. This can drastically increase the page render times.
• If you load multiple Javascripts and CSS files, Page speed will give you recommendations to merge these into a single file.

Page Speed helps you improve your site’s performance based on the following categories of best practises:

• Optimizing caching — keeping your application’s data and logic off the network altogether
• Minimizing round-trip times — reducing the number of serial request-response cycleshttp://code.google.com/speed/page-speed/
• Minimizing request size — reducing upload size
• Minimizing payload size — reducing the size of responses, downloads, and cached pages
• Optimizing browser rendering — improving the browser’s layout of a page

Get Google Page Speed at: http://code.google.com/speed/page-speed/

Screenshots:

Google Page Speed Recommendations

CSS Optimization Recommendations

Javascript Minify Savings

Suggestion to Defer Javascript Loading

If you are spending a lot of time going through your feeds using Google Reader, here’s a firefox addon which you shouldn’t miss out on. Feedly takes your feeds from Google Reader and displays it in a magazine like format. This format’s easier to scan through than Google Reader’s display format.

I’ve been using this for the past 5 days and I haven’t used the Google Reader interface since I installed this. You can share and star your articles from the Feedly interface and any post you read or mark as read from the feedly also are marked as read in Google Reader. Feedly preserves the folders you’ve defined in Google Reader so you can also browse through the feedly interface using your defined folders. The plugin also shows you search results from your feeds when you search for a term in Google:

So if you’re looking at scanning more news sources for your blog or your daily read, try out the Feedly firefox addon.

Link: Feedly

Anthony Short’s got a great article which shares tips on how to get your CSS cross-browser compliant everytime.

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. I’ve collated all the information I could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes.

He summarizes the article by saying:

1. Always use strict doctype and standards-compliant HTML/CSS
2. Always use a reset at the start of your css
3. Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
4. Never resize images in the CSS or HTML
5. Check font rendering in every browser. Don’t use Lucida
6. Size text as a % in the body, and as em’s throughout
7. All layout divs that are floated should include display:inline and overflow:hidden
8. Containers should have overflow:auto and trigger hasLayout via a width or height
9. Don’t use any fancy CSS3 selectors
10. Don’t use transparent PNG‘s unless you have loaded the alpha

Read the whole article: How to get Cross Browser Compatibility Every Time

Twitbin’s a cool addon for Firefox which allows you to follow you friend’s tweets and send your own tweets. It shows up as a sidebar on the browser. The latest version of Twitbin works on Firefox 3 RC1.

All you need to do is to install the addon, open the sidebar, login by clicking on the Home icon in the sidebar and you’re all set.

Link:
Twitbin Home page
Install Twitbin
Follow Twitbin on Twitter

Here’s a cool extension for Firefox which gives you a quick look at the javascripts which are linked within the HTML page. No more hunting for JS includes in the HTML source !

“All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/css you would have to manually look through the source code to find the url and then type that into your browser. ”

Link: JSView :: Mozilla Add-ons :: Add Features to Mozilla Software