There is a famous saying in English, “Measure twice, cut once” which is especially important if you do anything with your hands. Once you’ve cut a piece of wood with a saw and you find you are 5mm too short it’s pretty hard to fix it. While software is hard to waste in the same way you can waste a raw material like wood, you can certainly waste your time.
A resource like the performance calendar is a really great tool for finding ideas to apply to your own work. Many of the authors of this site are lucky in that they spend a significant amount of their time optimizing large sites for companies like Facebook, Yahoo! and Google (and yours truly, Walmart). However many developers have lots of other responsibilities other than performance.
Here is the thing; When you are the author of a framework used by many thousands of sites every hour you spend optimizing the code pays off on every one of those sites. If you make helper functions used over and over your work repays itself many fold through each small usage. However, when you only care about the one site you maintain unrolling loops probably won’t make a significant or obvious a difference to your users. Optimization is all about picking the correct targets.
The key to measurement is instrumentation. Start at a macro level. What are the most important parts of your site? This might be the ones used the most, or the ones which have the most impact on your business (such as the checkout process). You might find yourself surprised, perhaps you receive a lot of search engine traffic to a page deep in your site that is poorly optimized. Improving that page by 50% might make a much bigger impact than spending the same time getting another 1% improvement on your already optimized homepage. The only way to really know which pages on your site are important are to look at the stats or to discuss priorities with whoever is in charge of the site.
Once you know what’s important, the next task is to figure out what users do with those pages, or again what you want them to do. It’s important to note in this process that what customers do now may be an attribute of the current site and not actually what you want them to do. Identify which parts of your site are used the most by finding the most common tasks on the page. Which page level items (menus, search results) do users interact with most?
So here is our formula for optimizing:
- Step 1. Use instrumentation to pick which pages/sections to optimize
- Step 2. Use instrumentation to pick which features to optimize
- Step 3. Optimize
Measure twice, cut once.
How do you go about picking which pages or sections of your site to optimize? This probably one of the easiest tasks because most conventional metrics give you everything you need to know. Start by seeing which pages get the most views. This will give you a short list of obvious targets. Your homepage is almost certainly one them, and then other popular pages on your site. These should be your shortlist.
The next thing to do is talk to your business owner. That might be your project manager, CEO, whoever. The most popular pages are not always the most important to the business. Checkout and shopping cart are very obvious examples here. If you run an e-commerce site many many people will browse many items, but only a small percentage of people will check-out. This doesn’t mean check-out isn’t important. On the contrary. Checkout is really important, it’s just something that metrics many not help you prioritize.
Now you should have a list of the pages or sections of your site which are a mix of the most popular or important ones to the business. This is your hit list. Keep it up to date periodically. Until you’ve exhausted your hit list don’t bother with other performance issues.
On modern web sites many pages share the same code on many pages. Look at the code to find these features or use a packet sniffer like Wireshark, Charles Proxy or the Chrome Inspector or the Chrome Inspector on your hit list pages will help you get a list of the remote resources that were accessed. You can also examine your HTTP logs to look at what secondary web service resources are being requested for those popular pages. Those resources could also be a blocking factor in page rendering.
In general the goal is to figure out which things the user will need most readily. As an informal rule of thumb consider prioritizing items to load in this order:
- Items above the fold
- Navigation item (Menus, search bar)
- Items that provide information (Product description, News stories)
- Items to take an action (Add to cart, etc)
- Items below the fold
You can check how fast various things load on your site using WebpageTest‘s film strip feature.
There are lots of resources out there, once you know what you need to optimize go and find something to solve your problem, and then measure, measure again.