Release 0.6: redesign, server-side smoothing, SVN-assets and WebPageTest.org testing

Release 0.6 is packed with new stuff – first of all, smoothing that was originally implemented in JavaScript was too slow and got moved to server side in PHP code so now results are still smooth, but not clogging down the browser.

SVN Assets logoFront-end performance is always a priority for ShowSlow project and all performance-related bugs have high priority so this was time to use SVN Assets. It means that all static assets will now have unique URLs based on their versions in Subversion. Make sure you look into config.sample.php and set $baseAssetURL variable accordingly (simplest approach is to set it to $showslow_base). Also make sure you have mod_rewrite, mod_expires and mod_deflate enabled in your apache.

ShowSlow redesignWe also got some look and feel update and you can see uniform header and footer across all pages. You might notice a registration page, stay tuned for more news there. You probably also noticed that http://www.showslow.com/ got buttons for following on Twitter @showslow and like button from Facebook – don’t wait, please show your pride and help spread the word!

And last, but not least, now you can run WebPageTest.org tests right from details page. This feature was hacked together originally and had to be removed because of compatibility issues, but now it’s a solid integration using WebPageTest’s automation API! You can also configure it to run your own instance.

Running WebPageTest.org tests directly from details page

It’s a lot of changes and I hope you have no troubles upgrading, but if you do, don’t forget that you can always ask question on our mailing list here: http://groups.google.com/group/showslow

Speed up your site – drop in .htaccess file

It’s very important to speed up your web sites so you don’t loose the users.

That being said, many tasks in the checklists from Yahoo or Google are quite complex and are hard to grasp for people who didn’t work all their life configuring Apache or digging deep into the depths of HTTP.

To help this, I created a drop-in .htaccess file that will enable gzipping and long term expiration (helping with unique URLs for your assets).

<IfModule mod_deflate.c>
# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip
</IfModule> 

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^(.*)\.(\d+)(_m_\d+)?\.([^\.]+)$    $1.$4    [L,QSA]
</IfModule> 

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
</IfModule>

Gzip-ing and infinite (1 year is long enough) expiration are enabled right away.

In order for you to not have problems with cached items (infinite expirations are good, not bad), you’ll have to change URLs of all your static assets next time you change them. All you need to do is to add .XXX in front if file extension and URL will be unique (still pointing at your file, thanks to mod_rewrite rules above).

So, for example, if you have logo.png, all you need to do next time you change it is to link to it as logo.1.png and next time logo.2.png and so on, this way cache will not be used and you will no longer have cacheing problem:

    <img src="/logo.2.png" alt="Company Logo"/>

Go ahead and put it in the root of your site and let me know how it works for you.

P.S. it assumes that you use Apache 2.x and your hosting company configured apache to have mod_rewrite, mod_gzip and mod_expires modules, if they did not, just ask them, they should be able to do that easily.

Semantic FaceWeb: RDfb is strong use of RDFa

Great news for Semantic Web, Facebook announced that they are going to use more structured metadata in shared web pages then just their original meta tags.

There are two parts to it – first they are going to provide storage about all things withing Facebook and on the internet in JSON format so people can write applications that use this data.

For example, public information about me on Facebook can be seen at this URL:
https://graph.facebook.com/sergey.chernyshev

And here how it looks:

{
   "id": "504972292",
   "name": "Sergey Chernyshev",
   "first_name": "Sergey",
   "last_name": "Chernyshev",
   "link": "http://www.facebook.com/sergey.chernyshev"
}

This way all you need to know is ID, which in my case is sergey.chernyshev or 504972292.

Another side of this is that Facebook is going to also store data from pages that were shared using their share button or added to interests or in any other way loaded into facebook’s system. They will be extracting this data using RDFa format and interpret it using a vocabulary that they call Open Graph Protocol (I will be calling it RDfb).

<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

This will allow sites to add a few lines of code to their pages to get them recognized as meaningful data instead of just human-readable documents – this will allow smart agents like search engines, mobile applications, embedded systems and just simple widgets to make sense of this data and help people see it in the context that is most usable for them.

I have a feeling that Facebook being a great driver for many business decisions related to promotion and marketing through social media, this change is going to be a best thing that happened to Semantic Web so far, might be even bigger then Yahoo’s and Google’s efforts in universal search.

P.S. Such a great present for my presentation about RDFa tonight ;)

ShowSlow v0.5 is smooth

Many people were frustrated with the graphs ShowSlow was showing as rankings and other measurements change too frequently if your pages are dynamic in nature and show different content on every request.

ShowSlow v0.5 is using rolling average to smooth the graphs, hope it’s going to be easier on your eyes and will help you get more meaning from the graphs.

ShowSlow 0.5 with smoothed graphs

Go ahead and download new version:
http://www.showslow.org/Installation_and_configuration#Getting_the_code

or just type “make” if you installed from Subversion.

WebPageTest.org Demo @ New York Web Performance Meetup

New York Web Performance Group Logo
WebPageTest.org is getting more and more popular, it was included in Google’s epic announcement that site performance is now part of ranking!

So, this Thursday, April 15th, get ready for WebPageTest.org Demo by Nicholas Tang at New York Web Performance Meetup!

If you haven’t RSVPed yet, now is your chance! If you can’t attend please update your RSVP as well to let others in.

http://www.meetup.com/Web-Performance-NY/calendar/12915226/

Don’t forget that we’re back at Interactive One offices and they are also sponsoring pizza and sodas!

Getting there:
205 Hudson Street (entrance on Canal St.)
6th Floor
New York, NY 10013
212-431-4477

Directions: http://bit.ly/bnbCvB
Street view: http://bit.ly/dDrToe (entrance on Canal St.)

Hope to see you all there and please forward it to your friends so they can learn about this great tool!

Presentation will start at 7:00PM. I’ll see you there!