Fine-Tuning Your App's Performance
Take a look at the results that the Audits tool gave for our new, slower, WatzThis app. The items with the red bullets next to them are the ones we should address first because they have the largest potential payoff. So let's start at the top of the list and work our way through several of them.
Before we continue, visit the Supplementary Material for this lesson and download the Zip file I included. Then open up index-slow.html in Komodo Edit.
Future versions of Chrome may change the recommendations that the Audit tool gives or the order in which they appear. The principles are the same, however, and these same recommendations are solid ways to increase performance.
The first recommendation from the Audits tool is Combine External CSS.
If you click on the arrow to the left of the recommendation, the rule will expand and show you details. It turns out that the WatzThis designer added some new style sheets to the app, so we've gone from having one tidy little style sheet to having five. Here they are:
The first thing I notice is that there's a style sheet called "print.css" that has the attribute media of "print." Since it's unlikely that anyone is going to be printing out WatzThis, it's safe to remove this tag.
Next, the style sheet right under the print style sheet contains styles for manipulating text. We're not using any of these, so we can delete that tag as well.
The next style sheets are watzthis_part1.css and watzthis_part2.css. Open them both. Now copy all of the contents of watzthis_part2.css and paste it at the end of watzthis_part1.css. Your new file should look like this:
Delete the tag that links to watzthis_part2.css, and now we're down to two style sheets. If I rerun the Audits tool on this page, you'll see that the recommendation to combine the external style sheets no longer comes up!
The next recommendation is Combine External JavaScript.
This recommendation is similar to the previous one, so I won't bother to go through each step of how to implement this improvement.
You'll see, however, that this latest version of WatzThis has organized all the different JavaScript that we've added to WatzThis into several files. Someone even added a few placeholders for files that don't even exist yet!
While this may be great for people who are obsessed with organization, it slows down the app. The best thing to do is to combine the contents of the first three JavaScript files into one file (I'll call it watzthis.js) and include that instead of these six script elements. So replace all the JavaScript I listed above with this one line:
Once you make this change, if you rerun the audit, you'll see that the recommendation to combine the JavaScript files goes away.
Another recommendation on the Web Page Performance list is Put CSS in the document head.
Good catch, Audits tool! It looks as if one of the designers accidentally put the CSS links inside the body of the HTML document rather than in the header. By putting the CSS in the header, you give the browser the information it needs to style the page before it starts to display the page. That means the browser can display correctly styled content to the user faster.
To resolve this issue, move the remaining CSS links to somewhere in the <head> element—preferably before any JavaScript. The Audits tool doesn't tell you this, but CSS should come before JavaScript in a document whenever possible in order to optimize the page rendering speed.
With these three changes made, let's test the speed of WatzThis.com again.
Speed test of the modified app
Compare these results to the results of the last speed test. We're making progress! The performance grade has shot up, the number of requests is down, the load time is slightly faster, and the page size is smaller! And we accomplished all this without changing the new design or removing any functionality!
WatzThis still has many areas in which its performance can be improved. Here are some of the things I would do:
- Optimize the background image. You can crop it to just the part that shows in the app and reduce the image quality somewhat in order to reduce the file size of the image.
- Optimize the other graphics. The header graphic and the What's WatzThis graphic are both larger than they need to be. You can use an image editing program to reduce the dimensions of these images--and thus reducing their file sizes.
- Remove unused CSS rules.
Can you think of some additional optimizations? I'm looking forward to hearing your ideas for additional improvements in the Discussion Area!
Please continue to Chapter 5 to wrap up another lesson.
WatzThis with some classy design elements
WatzThis used to be blazingly fast!
Redesign leads to slowdown of WatzThis
Now for the big secret: Users don't really care about latency. What they care about is whether an app feels slow—its perceived speed. You may have a large amount of latency in your app, and the users may even have slow Internet connections, but if you keep the users busy looking at something else, they won't even notice.
