Category: Programming

Using Filmstrip

Measuring and optimizing performance is an important part of website development. There are a couple of tools that are irreplaceable in the process, and also some that are just plain cool. :)  Filmstrip is one of the latter, but it is certainly very useful!

Filmstrip is a feature that shows exactly how the page looks during the loading of specific resources. This way we can actually see which resources make the page loading an unpleasant experience for the users, so we can do something about it.

WebPageTest is a valuable resource for testing website performance. Here we can test page loading using different browsers and a number of locations from around the globe.

The tool is easy to use. After entering a website URL and choosing an appropriate browser and location from which the test will be run, the test will start. When it finishes, we are presented with the statistics for the first view and repeat view (got after the reload). For both of them there are waterfall views, screen shots, filmstrip and even the whole video of the page load!

When you click on Filmstrip View, the page load waterfall is presented, as well as screen shots taken every 0.5 seconds. Observe how resources loading affects user experience and how the page is rendered at different points in time. By clicking on a resource in the waterfall, you can see the request and response details: DNS lookup time, time required for establishing initial connection, time to first byte, content download time, resource size etc. Analyze which resources block the page rendering and make a plan for how to fix the issue.

I’ve set up a short demo to show how to use WebPageTest. Check it here:

When it comes to filmstrip, WebPageTest has had this feature for some time already, but recently it was also introduced to Chrome Developer tools. At this point, it can be found only in Chrome Canary and honestly, you have to be a kind of a detective to enable and use it! Here is what you have to do:

1. First, install Chrome Canary if you haven’t already. You can download it from here. I recommend that you install it even if you are not interested in filmstrip, since it has some features that are not yet available in ‘regular’ Chrome browser Developer tools.

2. Type chrome://flags/ in the address bar. Don’t be intimidated by the message:

Careful, these experiments may bite

:)

Find the option Enable Developer Tools experiments in the list and enable it.

Enable Developer Tools Experiments

This step is necessary for the Experiments menu to be visible in Developer tools.

3. Press F12 or Ctrl+Shift+I to open Developer tools. Click on Settings icon.

Settings icon 

Settings

4. Go to Experiments tab.

Settings Experiments

5. Click Shift button 6 times to reveal hidden options.

Settings Experiments hidden

(Yeah, I know – Experiments option is by itself secret, and this is its even more secret part! But the Chrome team wanted to be sure that these features weren’t turned on by mistake.) Anyway, check the option Filmstrip in Network and Timeline Panel and you’re ready to go!

At this point, new options appear in Network and Timeline panel. By turning them on, you’ll be able to start using the Filmstrip feature.

In Developer tools Network panel you’ll notice the small image of a camera, which can be turned on or off, as required:

Network

Also, in Timeline panel, there is a ‘Screenshots’ check box:

Timeline

Finally, go to the page you want to analyze. Turn the Developer tools on and go to Network panel. Hit F5 to refresh the page. When the page loading finishes, the screen shots are presented below the menu bar. Important – and this applies to Timeline panel also: be sure that the focus during page refresh is on Developer tools window, not the whole browser window, or you won’t get any screen shots!

Network  filmstrip

You can double-click on a screen shot to see a magnified image of the page, taken at the specific moment during the page load:

Network screen shot details

Similarly, after the page reload, the screen shots are presented on the Timeline panel. By hovering over them, you can see how the page was loading in time.

Timeline dcreen shot

I have to say that I was pretty excited when I found out that the filmstrip feature has been introduced to Chrome Developer tools, but at this point I find it easier to use WebPageTest to get better (visual) overview of the page loading. We’ll see what the future Chrome DevTools releases will bring us.

#PerfMatters Free Resources

If you are interested in website performance optimization, here you will find some useful links to free resources related to the subject – e-books, tools, videos etc. I will keep updating the list whenever I find some interesting stuff.

Feel free to comment and share some other links you find beneficial, and I will include them in the list.

Basics

Optimizing Performance

E-books

High Performance Browser Networking

HTTP/2: A New Excerpt from High Performance Browser Networking

Courses

Website Performance Optimization

Browser Rendering Optimization

Tools

Chrome Developer Tools

PageSpeed Insights

WebPagetest

IE Developer Tools

Firefox Developer Tools

Videos

And more…

Lara Hogan: Designing for Performance

Oh, Barbie!

Well, this is something that definitely made my day!

Apparently, there is a children’s book called I Can Be an Actress/I Can Be a Computer Engineer (Barbie), which (I guess) was supposed to empower young girls and show them they could excel at various professions. Alas, it fails miserably!

The book consists of two separate stories – one about Barbie being a great actress with little or no effort; and the other one – about Barbie as a bad, bad computer engineer. What happens is that computer engineer Barbie designs a game, but needs her male colleagues’ help to actually create it. (This would make her a game designer, not a computer engineer, but who cares?) Further more, she infects her own and her sister’s computers with a virus, that have to be cleaned by men, since she has no idea how to handle antivirus programs, of course. In the end, Barbie takes credit for both the game and fixing computers and her sister is proud of her.

So basically, young girls are told that:

  • they can’t do important stuff without men’s help
  • they should let guys do technical stuff, like programming and fixing computers
  • it’s OK to take credit for someone else’s work.

To get the idea how it all looks:

(The screenshots are taken from Feminist Hacker Barbie site)

In fact, the book in question exists for couple of years now, but for some reason, the Internet users found out about it this week and got really upset, which led to a very funny response! The idea was to rewrite the whole story and help Barbie become a better computer engineer. If you want, you can help her yourself on Feminist Hacker Barbie site, and add different text to the images from the book. Here are some examples which make me laugh today :) :

And, my personal favorite, since I too often feel the same way when it comes to JavaScript:

Barbie & JavaScript

For more of these hilarious images, check #FeministhackerBarbie on twitter.

I’ve read some comments stating that it’s wrong to take Barbie so seriously and that one can’t expect anything smart from Mattel, but I disagree. I think we should use every opportunity to fight sexism, especially in STEM fields, since women around the world are (explicitly or implicitly) still told that they are just no good for them.

Seems that this kind of clever, funny and sarcastic response to a deeply wrong message that this book has been sending (to both girls and boys!) was the right thing to do, since its Amazon page doesn’t exist anymore and there is an apology on Barbie’s facebook page. On some days I really love Internet! :)

A Quick Note on COALESCE and ISNULL

I’ve noticed couple of commentators on my blog post on Entity Framework and setting primary keys on views pointing out the difference between COALESCE and ISNULL. Apparently they were using COALESCE and expecting it to return non-nullable value, but instead, got the different result. I would like to clarify this a bit further.

In my example, I’ve been using ISNULL. It is a function which returns some replacement value in case an expression equals NULL. This basically means that (given the replacement value is not NULL) return value will always be non-nullable.

On the other hand, COALESCE returns the first expression which is not NULL. Only if all expressions are non-nullable, the result is considered non-nullable. Here’s the explanation from msdn site:

The NULLability of the result expression is different for ISNULL and COALESCE. The ISNULL return value is always considered NOT NULLable (assuming the return value is a non-nullable one) whereas COALESCE with non-null parameters is considered to be NULL. So the expressions ISNULL(NULL, 1) and COALESCE(NULL, 1) although equivalent have different nullability values.

To demonstrate this, here’s a quick example. I’ve created a view extracting a column (of bit type, nullable), using ISNULL, COALESCE and NULLIF (I’ve added the last one since it was used in my previously mentioned post).

CREATE VIEW test1
AS
SELECT ISNULL([Activated],1) AS Col1,
COALESCE([Activated],1) AS Col2,
NULLIF([Activated],1) AS Col3
FROM [User]

The resulting view:

test1

As expected, ISNULL returns non-nullable column, unlike COALESCE and NULLIF.

Also worth noting: ISNULL and NULLIF return type matches the column type, while COALESCE returns the data type of expression with the highest data type precedence.

Another note: I’m not familiar with Oracle, so can’t give an advice on which function to use instead of ISNULL. If you have an idea on that, feel free to comment this post.