Yoseob Lee iOS Engineer

Improving User Interactions via Instruments

A common tool that developers often overlook is the Instruments tool that ships by default with Xcode. Apple describes the tool as:

“Instruments is a powerful and flexible performance-analysis and testing tool that’s part of the Xcode tool set […] designed to help you […] better understand and optimize their [app, processes, and devices] behavior and performance.” — iOS Developer Library

Similar to analytics, incorporating the usage of Instruments early in the development cycle can spare a lot of time, sweat, and tears, but if you are reading this at the end of the cycle — fret not — we’ll take a quick look at three of the most common Instruments of… Instruments.

Color Blended Layers

When designing a beautiful UI, it can be easy to gloss over the use of transparency — especially when it comes to background colors and alpha values. Color blended layers are views whose alpha values are less than 1 or with a clear background color where the color underneath blends through.

Having lots of blended layers in your views can hinder your app’s performance and slow table scrolling as the phone needs to dive deeper down the view hierarchy to figure out the correct color.

Before we begin, note that we will be using the Core Animation profiling template, so here’s a quick PSA by Apple:

“Use the Core Animation template to profile an app on a physical device. Profiling an app in iOS Simulator does not produce true real-world results.” — Apple

Now that’s taken care of, let’s go ahead and fire up Instruments and check Color Blended Layers:

1. Connect your device
2. Launch “Instruments”
3. Xcode → “Open Developer Tool” or ⌘ + I
4. Core Animation
5. Select the device and target app
6. Press the “Gear” on the right-hand side
7. Select “Color Blended Layers”

Hopefully, you should see regions of both green and red (if you only see green — great work, you have no blended layers!). Red regions signify views that currently have color blending enabled. Having some red on your view is acceptable but you should strive to avoid red dominating green.

Thankfully, in addition to being one of the most common issues, fixing color blended layers is relatively simple as a majority of cases will involve labels and their parents views. For example, if you have an array of table view cells with a gray background color and a label (with a clear background color) — simply set the label’s background color to be the same as the cell background and/or make it opaque.

As mentioned before — the place where these minor adjustments really shine is in scrolling behavior where content is continuously being rendered and redrawn. By eliminating the need for your app to blend these layers, it can focus on getting things drawn faster.

Color Blended Layers Takeaway:

1. Key: Red → Color blended layers
2. Avoid large areas of red
3. Less red = faster scrolling / rendering

Image Scaling

It can be tempting to saturate your application with only the highest resolution images but you have to keep in mind the trade-off between performance and aesthetics.

While high resolution images look great, scaling your image (up or down) to fit the UIImageView is not free and can gum up a ton of memory and CPU time — especially if the UIImageView is embedded within a scroll view.

The steps to check out scaled images in your application follow the same vein as Color Blended Layers. At the step where you selected “Color Blended Layers,” instead select “Color Misaligned Layers.”

Unlike “Color Blended Layers,” “Color Misaligned Images” will have two colors; yellow denotes scaled images while magenta represents misaligned images. We’ll be focusing on scaled images mostly as it is much more common than misaligned images.

Whenever you include image assets in the application bundle, try and ensure that the size of the assets correspond as much as possible to the size of the corresponding UIImageView. It’ll relieve the burden from the phone and allow for a smoother scrolling experience.

For images where you don’t have as much control — downloading assets from a remote service — perform any image manipulation on the background thread before updating the asset back on the main thread.

Image Scaling Takeaway:

1. Key: Yellow → scaled images
2. Magenta → misaligned images
3. Scaling images is expensive
4. Bundle → resize images beforehand
5. Remote → perform image manipulation on background thread

Visual Effects

The UIBlurEffect API (introduced in iOS8) allows developers’ to mimic the blur effect found in the notification center as well as in navigation bars.

However, while the blur effect looks nice — multiple off-screen rendering passes (rendering via software as opposed to hardware) can be very expensive. Axel from WWDC 2014 Session 419 has this to say:

“UIBlurEffect [has] multiple offscreen passes depending on the style […] effect is very costly so UI can be easily GPU bound […] so therefore you should keep the bounds of the view as small as possible.”

In talking about the UIVibrancyEffect:

“To emphasize again, we should really restrict the VibrancyEffect on a small area to avoid this huge GPU overload […] adds two offscreen passes […] uses expensive composition filter for content.”

Unlike debugging and optimizing “Color Blended Layers” and “Color Misaligned Images,” optimizing UIVisualEffects deal more with aligning to Apple guidelines and limiting the use of these new APIs to areas where they are absolutely necessary.

The steps to check out UIVisualEffectViews in your application follow the same vein as Color Blended Layers. At the step where you first selected “Color Blended Layers,” select “Color Offscreen-Rendered Yellow.”

Visual Effects Takeaway:

1. Key: Yellow → offscreen rendered images
2. UIVisualEffectViews can add multiple off-screen passes which are very expensive
3. Limit bounds to small areas

Conclusion

At the end of the day, these small tips might not seem very important, but they will work wonders when it comes to improving the speed of your app — especially in terms of scrolling components. Just remember, take these optimization techniques with a grain of salt and strive to strike a balance between design and optimization.