    
|
|
|
|
|
|
|
|
|
I sold my small web design business so that I could focus on my startup, Informly.
If you’re providing web design services as a solo freelancer, or are the founder of a web design agency with several employees, selling your business might be the farthest thing from your mind right now.
Perhaps you have never thought about it simply because you might not have realized that selling your business was even a possibility.
Maybe you are too attached to your company to even consider selling it to someone else.
Or the case may be that you have some fears about the things selling a business might entail.
You might want to get out of the web design business entirely, but are worried of the loss of income that might follow if you leave the industry behind.
Those are some of the things that might be holding you back from letting go.
However, it’s always good to think about your options.
Let me tell you the lessons I have acquired from selling my web design business, in case you are considering of doing the same thing. It’s not my first and only experience either, I’ve had other experiences in the area of buying and selling web design businesses prior to the sale of my own.
One of the biggest misconceptions I see people possessing, whenever the topic of selling a company to another is brought up, is that the company being sold has to be big and famous.
In my mind, that misconception comes from the fact that business brokers and tech journalists tend to talk more about the acquisition of a large, popular company by another larger, more popular company; so many of us end up thinking that acquisitions of small- and medium-sized businesses don’t happen.
In reality, there are loads of smaller acquisitions going on all the time. Like my web design business for example. It’s just that these business transactions usually don’t happen with as high a profile as, say, Yahoo! buying Tumblr.
These sorts of little transactions go on all the time because there are a lot of people who start a web design business and can’t make it work.
There are also many web design agencies looking for more clients, assets, and employees — and so one of the ways they can expand is through the purchase of a smaller web design company.
My web design agency wasn’t big. Not Tumblr big, anyways. Yet, I was still able to sell it.
Many people think that you need to work your way up to being a profitable company in order for it to be appealing to a buyer.
That was not the case with my web design business.
In my experience, when larger web design companies buy smaller ones, more often than not, they are looking for something more than just profitability.
Web design companies and entrepreneurs are looking for signs of opportunities that the company they are looking to buy will grow if they take it over.
If you have terrible business processes, expensive employees, undercharged clients, a lot of overhead, etc. your profits won’t be great.
But another entrepreneur might look at that scenario and see opportunities. Opportunities to reduce waste. Opportunities to improve business processes. Opportunities for optimization.
Entrepreneurs, by nature, are people who see opportunities in things that other people are not able to.
It’s like flipping houses in the real estate business. For example, I see that in the area where I live in, houses are bought at a very low price, renovated by the new owner, and then sold at a much higher rate.
Everyone wants to buy a company with potential.
Prospective buyers want to see metrics going up.
When I sold my web design agency, my site traffic had doubled in its last 6 months.
Recurring revenue was going up. The number of clients was going up.
Even if you aren’t profitable, as long as important metrics exhibit upward trends, buyers will see opportunity and potential.
If your profits are good, but your trend is flat or going down, that is a big problem.
The biggest problem for web design companies is finding good clients.
If you have a list of good clients regardless of whether your business is profitable or not, this is going to be appealing to a web design agency buyer.
Even better than having a good set of clients is having clients that have recurring arrangements with your business. These recurring arrangements might include monthly website maintenance fees or web design service retainer agreements.
I had my existing clients on support agreements.
I also sent them an email each month with stats about their websites (which, by the way, was the inspiration behind Informly, my startup).
I was hosting most of my clients’ websites.
In the end, the main reason I was able to sell my web design business was that I had good clients who brought in recurring revenue into my business each month.
What do you have within your business that could be appealing to a buyer? These assets might not be readily apparent.
In my case, one of my assets was actually my company’s web design blog. The blog ranked #1 in Australia for the search term "website design" and #3 for the term "web design". The blog was bringing in 1 lead a day to my business, on average.
My web design blog had a lot of value to someone who wanted web design leads.
Why?
They would have had to pay Google thousands of dollars a year through the AdSense platform to get the same amount of traffic for those keywords, so there was clear value in buying something that’s going to provide them ongoing benefits for free.
You might have something completely unrelated to your web design business that would be an asset to someone else. Look for those not-so-obvious assets and use them to help you sell your web design agency.
I used to give a lot of advice to small business owners. One of the things I would always say was "be as personal as you can in your business."
That means using your personal name, having pictures of yourself on your website, having transactional emails coming from your own personal email address instead of a robot like no-reply@webappexample.com, and so forth.
The advice about being as personal as you can is very different from what I see a lot of small businesses actually do.
What I see more of is that small businesses try to be more distant from their customers and more "corporate"-looking, to appear bigger than what they really are.
Often when I’d tell people their websites should be personalized, I would be met with criticism. A lot of people think that in order for something to be valuable, it needs to be some sort of impersonal machine, because being impersonal implies that the company is too big and too busy to have its founders and employees directly interacting with their customers.
I couldn’t have possibly been more personalized in my business.
I had a blog where all posts were by me.
I had loads of face-to-camera videos.
My face was all over the site of my web design company, including right at the start of the homepage in a big welcome message.
All of my clients dealt with me personally as the first port of call for almost everything.
When it came to selling my web design company, being small and being personal didn’t get in the way.
In other words, other companies who want to buy up web design businesses aren’t looking for some huge corporation — they’re completely happy acquiring small, personal companies like mine.
Whether you’re planning to sell your business or not, it’s good to at least consider these things for when you might have to do so, and also just to keep in mind that what you’re building might be worth more than you think it does to someone else.
If you have questions about the topic of selling a web design agency, please feel free to start a discussion in the comments below.
Dan Norris is the founder of Informly, a startup that enables web design companies to send their clients beautiful branded reports. He’s on Twitter, Google+ and Facebook (a little bit too often, according to Rescue Time).
The post Lessons I Learned from Selling My Web Design Agency appeared first on Six Revisions.
]]>
Why are magazines and books always laid out the same? Even with alternative design, there is a harmony in layout or the reader’s head will explode… or they will just stop reading and skip to the next page. Successful design in publishing, advertising, web design, illustration and anything else that ties together elements depends on drawing in the reader, and leading their eyes across the page.
Some people think it’s not a big deal and that designing a page comes naturally because of cultural lessons we learn growing up and looking at design from childhood, yet few, if any, understand why it works the way it does. In most societies, we read left to right. Still sound simple? Just start on the left, and it will all fall into place? Basically, but the challenge is to make the reader look at elements in the right order, or at least the order you want them to see, which is the challenging trick in layout design.
I was never one to follow the rules, but teachers, and great artists have some memorable quotes on the subject. “Before you can break the rules, you have to know the rules,” and “to create your own world you must first understand the real world”.
If you study the rule breakers, you can see they all had the basis of learning from the real world, the basics, and evolving from there. The rules are the basic understanding of layout, type, elements of color, illustration, and photography, and how the eye views them, and the brain deciphers it all when put together.
What most teachers try to impart in layout is called the “Z” pattern. It’s the pattern of reading (western cultures) for the strategic placement of important information. Start in the upper left corner, work across to the right, and then down and back to the left again, going top to bottom. Standard and simple.
I have to laugh at the following inclusion of 1950′s “layout design rules” I found on the web. The principles are sound, however, and they still do speak of design basics.
Well, those are simple rules, and still carry over into what is needed today, and in the future, but with our consumer culture, and so many great rule breakers in design these days, rules evolve. One evolution in design was the “grid system.” According to Wikipedia:
After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold’s Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.
By the mid 1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.
If you haven’t heard of Josef Müller-Brockmann, then he is a must on your list of designers to study. Müller-Brockmann was more than just a man who sought to form what is now labeled the Swiss School; Constructivism, De Stijl, Suprematism, and the Bauhaus, all of which pushed his designs in a new direction that opened doors for creative expressions in graphic design, influenced him. Among his peers he is probably the most easily recognized when looking at that period.
Müller-Brockmann was soon established as the leading practitioner, and theorist of the Swiss Style, which sought a universal graphic expression through a grid-based design, purged of extraneous illustration, and subjective feeling.
The grid was the prioritization, and arrangement of typographic, and pictorial elements with the meaningful use of color, set into a semblance of order, based on left-to-right, top-to-bottom. According to Wikipedia, the grid system is, “a two-dimensional structure made up of a series of intersecting vertical, and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text, and images in a rational, easy to absorb manner.”
Müller-Brockmann is recognized for his simple designs and his clean use of typography, notably Akzidenz-Grotesk, shapes and colors, which inspires many graphic designers in the 21st century. As with the French posters in the 1890s, Müller-Brockmann, and his peers also attempted to attract customers, and sell products with bold, simplicity. The posters that served to attract an audience to events, especially music events, and museum exhibitions embraced the abstract geometrical shapes the style is noted for; but it is the public service announcement posters from this time period that have been more noted than in many other periods of design. The simple, clean, and graphic messages were, as with the music event posters, able to be understood by viewers with different languages.
Ed Fella, a contemporary designer, is a real rule breaker when it comes to both layout, and design, yet he still pays strict attention to how the eye, and brain views the page. Just looking at his work, one would think that he’s a lunatic. He forces contradiction yet still plays to the grid. Not because it’s there, but because it serves his purpose to help pull the eye all over the place, and still make pleasing, readable design. There is chaos, and balance, existing side-by-side like identical Siamese twins — one good, and the other evil.
©Ed Fella
Fella referred to his work as stylistically, “getting it wrong.” His work is raw, and obsessive. It has power, and spontaneity. Born from the knowledge of layout, typography, design, and theory, he seems to have ended up getting it very, very right. He has inspiring words every designer should read:
“I am interested in graphic design as art,” he says, “This is a kind of art practice that uses forms that come out of graphic design, decorative illustration, and lettering, all mixed together-forms that come out of Twentieth Century art, out of Miró and Picasso — all of it has a genealogy, and a certain look — in the same way that artists today use comic books and graphic novels. I was an illustrator, so you see endless styles popping in, and out of the books. The drawings are an unconscious discharge of all the styles, and forms that I used as a commercial artist for 30 years — that was my profession — I did it every single day. So, my unconscious has all this stuff in it, and now, because I don’t have to make meaning anymore, I can just use the techniques, like a machine that has long ago stopped making widgets, but the machine is still running. I’m still making stuff. I love the craft of it — of carefully making some little thing.”
Paul Rand, famous designer, and rule breaker did this in a roundabout way. Mr. Rand, as a young designer, accepted a request to design the covers of a small, but notable publication in the late 1930s, and early 1940s. While the best advice to designers is to never work for free, there are some exceptions. Mr. Rand accepted, but demanded full creative freedom, and got it. When someone asks you for free work, they really don’t have much of a choice, do they?
Rand’s gamble paid off. His work for Direction caught the right attention. Success led to other successes. After being hired to design the page layout for an Apparel Arts magazine anniversary issue, an offer to take over as art director for the Esquire-Coronet magazines came his way. Initially, Rand refused this offer, claiming that he was not yet at the level the job required, but a year later he decided to accept it, taking over responsibility for Esquire’s fashion pages at the young age of twenty-three.
A former illustration teacher of mine showed me a handy tool for identifying the main focus points on a page. First, draw a diagonal line from the top left corner to the bottom right corner. The page can be vertical or horizontal. It works with any orientation.
Next, draw a line from each other corner to join the previous horizontal line at a right angle. The point the lines join is the area of maximum attention. Try an experiment — take a famous painting and draw these lines upon it (no, not at a museum because you’ll be arrested). You’ll see how great art is done using this layout technique.
Now, take a magazine page, or web page, and do the same. First, think of how the page is designed. Does it read well? Where does your eye go while you look at the page? Do you start feeling a bit anxious while looking at the page or excited? Now draw the lines, and see where the elements fall.
Chances are, if nothing of importance falls in the areas where the lines meet (general area), you were feeling anxious because your eye was fighting to look at the page, and your brain was confused as the layout was going against the flow. If the elements are laid out well, you feel excited as your eye is led across the page.
When it comes to dealing with your client, or a committee bent on redesigning your choices, give this as a demonstration as to why you placed the elements where they are. People tend to understand element placement when you use such a demonstration. It quantifies a rule they don’t want to break. Show concern for the final product, and involve the team with excitement over their ideas, and how to incorporate it all into the design, and you will find more leeway in committees, and with clients. Sometimes sticking to the rules of others allows you to break rules they don’t know… or can’t see.
Do you feel this makes sense? Have you ever heard of this layout trick and if so, have you tried it? Does it work? Let us know your thoughts in the comments.
Featured Image ©GL Stock Images
| Thirsty Rough Font Family – only $9! |
 |
Why are magazines and books always laid out the same? Even with alternative design, there is a harmony in layout or the reader’s head will explode… or they will just stop reading and skip to the next page. Successful design in publishing, advertising, web design, illustration and anything else that ties together elements depends on drawing in the reader, and leading their eyes across the page.
Some people think it’s not a big deal and that designing a page comes naturally because of cultural lessons we learn growing up and looking at design from childhood, yet few, if any, understand why it works the way it does. In most societies, we read left to right. Still sound simple? Just start on the left, and it will all fall into place? Basically, but the challenge is to make the reader look at elements in the right order, or at least the order you want them to see, which is the challenging trick in layout design.
I was never one to follow the rules, but teachers, and great artists have some memorable quotes on the subject. “Before you can break the rules, you have to know the rules,” and “to create your own world you must first understand the real world”.
If you study the rule breakers, you can see they all had the basis of learning from the real world, the basics, and evolving from there. The rules are the basic understanding of layout, type, elements of color, illustration, and photography, and how the eye views them, and the brain deciphers it all when put together.
What most teachers try to impart in layout is called the “Z” pattern. It’s the pattern of reading (western cultures) for the strategic placement of important information. Start in the upper left corner, work across to the right, and then down and back to the left again, going top to bottom. Standard and simple.
I have to laugh at the following inclusion of 1950′s “layout design rules” I found on the web. The principles are sound, however, and they still do speak of design basics.
Well, those are simple rules, and still carry over into what is needed today, and in the future, but with our consumer culture, and so many great rule breakers in design these days, rules evolve. One evolution in design was the “grid system.” According to Wikipedia:
After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold’s Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.
By the mid 1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.
If you haven’t heard of Josef Müller-Brockmann, then he is a must on your list of designers to study. Müller-Brockmann was more than just a man who sought to form what is now labeled the Swiss School; Constructivism, De Stijl, Suprematism, and the Bauhaus, all of which pushed his designs in a new direction that opened doors for creative expressions in graphic design, influenced him. Among his peers he is probably the most easily recognized when looking at that period.
Müller-Brockmann was soon established as the leading practitioner, and theorist of the Swiss Style, which sought a universal graphic expression through a grid-based design, purged of extraneous illustration, and subjective feeling.
The grid was the prioritization, and arrangement of typographic, and pictorial elements with the meaningful use of color, set into a semblance of order, based on left-to-right, top-to-bottom. According to Wikipedia, the grid system is, “a two-dimensional structure made up of a series of intersecting vertical, and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text, and images in a rational, easy to absorb manner.”
Müller-Brockmann is recognized for his simple designs and his clean use of typography, notably Akzidenz-Grotesk, shapes and colors, which inspires many graphic designers in the 21st century. As with the French posters in the 1890s, Müller-Brockmann, and his peers also attempted to attract customers, and sell products with bold, simplicity. The posters that served to attract an audience to events, especially music events, and museum exhibitions embraced the abstract geometrical shapes the style is noted for; but it is the public service announcement posters from this time period that have been more noted than in many other periods of design. The simple, clean, and graphic messages were, as with the music event posters, able to be understood by viewers with different languages.
Ed Fella, a contemporary designer, is a real rule breaker when it comes to both layout, and design, yet he still pays strict attention to how the eye, and brain views the page. Just looking at his work, one would think that he’s a lunatic. He forces contradiction yet still plays to the grid. Not because it’s there, but because it serves his purpose to help pull the eye all over the place, and still make pleasing, readable design. There is chaos, and balance, existing side-by-side like identical Siamese twins — one good, and the other evil.
©Ed Fella
Fella referred to his work as stylistically, “getting it wrong.” His work is raw, and obsessive. It has power, and spontaneity. Born from the knowledge of layout, typography, design, and theory, he seems to have ended up getting it very, very right. He has inspiring words every designer should read:
“I am interested in graphic design as art,” he says, “This is a kind of art practice that uses forms that come out of graphic design, decorative illustration, and lettering, all mixed together-forms that come out of Twentieth Century art, out of Miró and Picasso — all of it has a genealogy, and a certain look — in the same way that artists today use comic books and graphic novels. I was an illustrator, so you see endless styles popping in, and out of the books. The drawings are an unconscious discharge of all the styles, and forms that I used as a commercial artist for 30 years — that was my profession — I did it every single day. So, my unconscious has all this stuff in it, and now, because I don’t have to make meaning anymore, I can just use the techniques, like a machine that has long ago stopped making widgets, but the machine is still running. I’m still making stuff. I love the craft of it — of carefully making some little thing.”
Paul Rand, famous designer, and rule breaker did this in a roundabout way. Mr. Rand, as a young designer, accepted a request to design the covers of a small, but notable publication in the late 1930s, and early 1940s. While the best advice to designers is to never work for free, there are some exceptions. Mr. Rand accepted, but demanded full creative freedom, and got it. When someone asks you for free work, they really don’t have much of a choice, do they?
Rand’s gamble paid off. His work for Direction caught the right attention. Success led to other successes. After being hired to design the page layout for an Apparel Arts magazine anniversary issue, an offer to take over as art director for the Esquire-Coronet magazines came his way. Initially, Rand refused this offer, claiming that he was not yet at the level the job required, but a year later he decided to accept it, taking over responsibility for Esquire’s fashion pages at the young age of twenty-three.
A former illustration teacher of mine showed me a handy tool for identifying the main focus points on a page. First, draw a diagonal line from the top left corner to the bottom right corner. The page can be vertical or horizontal. It works with any orientation.
Next, draw a line from each other corner to join the previous horizontal line at a right angle. The point the lines join is the area of maximum attention. Try an experiment — take a famous painting and draw these lines upon it (no, not at a museum because you’ll be arrested). You’ll see how great art is done using this layout technique.
Now, take a magazine page, or web page, and do the same. First, think of how the page is designed. Does it read well? Where does your eye go while you look at the page? Do you start feeling a bit anxious while looking at the page or excited? Now draw the lines, and see where the elements fall.
Chances are, if nothing of importance falls in the areas where the lines meet (general area), you were feeling anxious because your eye was fighting to look at the page, and your brain was confused as the layout was going against the flow. If the elements are laid out well, you feel excited as your eye is led across the page.
When it comes to dealing with your client, or a committee bent on redesigning your choices, give this as a demonstration as to why you placed the elements where they are. People tend to understand element placement when you use such a demonstration. It quantifies a rule they don’t want to break. Show concern for the final product, and involve the team with excitement over their ideas, and how to incorporate it all into the design, and you will find more leeway in committees, and with clients. Sometimes sticking to the rules of others allows you to break rules they don’t know… or can’t see.
Do you feel this makes sense? Have you ever heard of this layout trick and if so, have you tried it? Does it work? Let us know your thoughts in the comments.
Featured Image ©GL Stock Images
| Play Blu-ray Movies on Your Mac – only $25! | |
 |
Today we’ll discuss how to improve the paint performance of your websites and Web apps. This is an area that we Web developers have only recently started looking at more closely, and it’s important because it could have an impact on your user engagement and user experience.
Frame rate is the rate at which a device produces consecutive images to the screen. A low frames per second (FPS) means that individual frames can be made out by the eye. A high FPS gives users a more responsive feel. You’re probably used to this concept from the world of gaming, but it applies to the Web, too.
Long image decoding, unnecessary image resizing, heavy animation and data processing can all lead to dropped frames, which reduces the frame rate, resulting in janky pages. We’ll explain what exactly we mean by “jank” shortly.
Smooth, high frame rates drive user engagement and can affect how much users interact with your website or app.
At EdgeConf earlier this year, Facebook confirmed this when it mentioned that in an A/B test, it slowed down scrolling from 60 FPS to 30 FPS, causing engagement to collapse. That said, if you can’t do high frame rates and 60 FPS is out of reach, then you’d at least want something smooth. If you’re doing your own animation, this is one benefit of using requestAnimationFrame: the browser can dynamically adjust to keep the frame rate normal.
In cases where you’re concerned about scrolling, the browser can manage the frame rate for you. But if you introduce a large amount of jank, then it won’t be able to do as good a job. So, try to avoid big hitches, such as long paints, long JavaScript execution times, long anything.
Before getting started, we need to step back and look at our approach. We all want our websites and apps to run more quickly. In fact, we’re arguably paid to write code that runs not only correctly, but quickly. As busy developers with deadlines, we find it very easy to rely on snippets of advice that we’ve read or heard. Problems arise when we do that, though, because the internals of browsers change very rapidly, and something that’s slow today could be quick tomorrow.
Another point to remember is that your app or website is unique, and, therefore, the performance issues you face will depend heavily on what you’re building. Optimizing a game is a very different beast to optimizing an app that users will have open for 200+ hours. If it’s a game, then you’ll likely need to focus your attention on the main loop and heavily optimize the chunk of code that is going to run every frame. With a DOM-heavy application, the memory usage might be the biggest performance bottleneck.
Your best option is to learn how to measure your application and understand what the code is doing. That way, when browsers change, you will still be clear about what matters to you and your team and will be able to make informed decisions. So, no matter what, don’t guess it, test it!
We’re going to discuss how to measure frame rate and paint performance shortly, so hold onto your seats!
Note: Some of the tools mentioned in this article require Chrome Canary, with the “Developer Tools experiments” enabled in about:flags. (We — Addy Osmani and Paul Lewis — are engineers on the Developer Relations team at Chrome.)
The other day we were on Pinterest, trying to find some ponies to add to our pony board (Addy loves ponies!). So, we went over to the Pinterest feed and started scrolling through, looking for some ponies to add.
Addy adding some ponies to his Pinterest board, as one does. Larger view.
The first thing we noticed as we scrolled was that scrolling on this page doesn’t perform very well — scrolling up and down takes effort, and the experience just feels sluggish. When they come up against this, users get frustrated, which means they’re more likely to leave. Of course, this is the last thing we want them to do!
Pinterest showing a performance bottleneck when a user scrolls. Larger view.
This break in consistent frame rate is something the Chrome team calls “jank,” and we’re not sure what’s causing it here. You can actually notice some of the frames being drawn as we scroll. But let’s visualize it! We’re going to open up Frames mode and show what slow looks like there in just a moment.
Note: What we’re really looking for is a consistently high FPS, ideally matching the refresh rate of the screen. In many cases, this will be 60 FPS, but it’s not guaranteed, so check the devices you’re targeting.
Now, as JavaScript developers, our first instinct is to suspect a memory leak as being the cause. Perhaps some objects are being held around after a round of garbage collection. The reality, however, is that very often these days JavaScript is not a bottleneck. Our major performance problems come down to slow painting and rendering times. The DOM needs to be turned into pixels on the screen, and a lot of paint work when the user scrolls could result in a lot of slowing down.
Note: HTML5 Rocks specifically discusses some of the causes of slow scrolling. If you think you’re running into this problem, it’s worth a read.
We suspect that something on this page is affecting the frame rate. So, let’s go open up Chrome’s Developer Tools and head to the “Timeline” and “Frames” mode to record a new session. We’ll click the record button and start scrolling the page the way a normal user would. Now, to simulate a few minutes of usage, we’re going to scroll just a little faster.
Using Chrome’s Developer Tools to profile scrolling interactions. Larger view.
Up, down, up, down. What you’ll notice now in the summary view up at the top is a lot of purple and green, corresponding to painting and rendering times. Let’s stop recording for now. As we flip through these various frames, we see some pretty hefty “Recalculate Styles” and a lot of “Layout.”
If you look at the legend to the very right, you’ll see that we’ve actually blown our budget of 60 FPS, and we’re not even hitting 30 FPS either in many cases. It’s just performing quite poorly. Now, each of these bars in the summary view correspond to one frame — i.e. all of the work that Chrome has to do in order to be able to draw an app to the screen.
Chrome’s Developer Tools showing a long paint time. Larger view.
If you’re targeting 60 FPS, which is generally the optimal number of frames to target these days, then to match the refresh rate of the devices we commonly use, you’ll have a 16.7-millisecond budget in which to complete everything — JavaScript, layout, image decoding and resizing, painting, compositing — everything.
Note: A constant frame rate is our ideal here. If you can’t hit 60 FPS for whatever reason, then you’re likely better off targeting 30 FPS, rather than allowing a variable frame rate between 30 and 60 FPS. In practice, this can be challenging to code because when the JavaScript finishes executing, all of the layout, paint and compositing work still has to be done, and predicting that ahead of time is very difficult. In any case, whatever your frame rate, ensure that it is consistent and doesn’t fluctuate (which would appear as stuttering).
If you’re aiming for low-end devices, such as mobile phones, then that frame budget of 16 milliseconds is really more like 8 to 10 milliseconds. This could be true on desktop as well, where your frame budget might be lowered as a result of miscellaneous browser processes. If you blow this budget, you will miss frames and see jank on the page. So, you likely have somewhere nearer 8 to 10 milliseconds, but be sure to test the devices you’re supporting to get a realistic idea of your budget.
An extremely costly layout operation of over 500 milliseconds. Larger view.
Note: We’ve also got an article on how to use the Chrome Developer Tools to find and fix rendering performance issues that focuses more on the timeline.
Going back to scrolling, we have a sneaking suspicion that a number of unnecessary repaints are occurring on this page with onscroll.
One common mistake is to stuff just way too much JavaScript into the onscroll handlers of a page — making it difficult to meet the frame budget at all. Aligning the work to the rendering pipeline (for example, by placing it in requestAnimationFrame) gives you a little more headroom, but you still have only those few milliseconds in which to get everything done.
The best thing you can do is just capture values such as scrollTop in your scroll handlers, and then use the most recent value inside a requestAnimationFrame callback.
Let’s go back to Developer Tools → Settings and enable “Show paint rectangles.” This visualizes the areas of the screen that are being painted with a nice red highlight. Now look at what happens as we scroll through Pinterest.
Enabling Chrome Developer Tools’ “Paint Rectangles” feature. Larger view.
Every few milliseconds, we experience a big bright flash of red across the entire screen. There seems to be a paint of the whole screen every time we scroll, which is potentially very expensive. What we want to see is the browser just painting what is new to the page — so, typically just the bottom or top of the page as it gets scrolled into view. The cause of this issue seems to be the little “scroll to top” button in the lower-right corner. As the user scrolls, the fixed header at the top needs to be repainted, but so does the button. The way that Chrome deals with this is to create a union of the two areas that need to be repainted.
Chrome shows freshly painted areas with a red box. Larger view.
In this case, there is a rectangle from the top left to top right, but not very tall, plus a rectangle in the lower-right corner. This leaves us with a rectangle from the top left to bottom right, which is essentially the whole screen! If you inspect the button element in Developer Tools and either hide it (using the H key) or delete it and then scroll again, you will see that only the header area is repainted. The way to solve this particular problem is to move the scroll button to its own layer so that it doesn’t get unioned with the header. This essentially isolates the button so that it can be composited on top of the rest of the page. But we’ll talk about layers and compositing in more detail in a little bit.
The next thing we notice has to do with hovering. When we hover over a pin, Pinterest paints an action bar containing “Repin, comment and like” buttons — let’s call this the action bar. When we hover over a single pin, it paints not just the bar but also the elements underlying it. Painting should happen only on those elements that you expect to change visually.
A cause for concern: full-screen flashes of red indicate a lot of painting. Larger view.
There’s another interesting thing about scrolling here. Let’s keep our cursor hovered over this pin and start scrolling the page again.
Every time we scroll through a new row of images, this action bar gets painted on yet another pin, even though we don’t mean to hover over it. This comes down more to UX than anything else, but scrolling performance in this case might be more important than the hover effect during scrolling. Hovering amplifies jank during scrolling because the browser essentially pauses to go off and paint the effect (the same is true when we roll out of the element!). One option here is to use a setTimeout with a delay to ensure that the bar is painted only when the user really intends to use it, an approach we covered in “Avoiding Unnecessary Paints.” A more aggressive approach would be to measure the mouseenter or the mouse’s trajectory before enabling hover behaviors. While this measure might seem rather extreme, remember that we are trying to avoid unnecessary paints at all costs, especially when the user is scrolling.
We now have a really great workflow for looking at the overall cost of painting on a page; go back into Developer Tools and “Enable continuous page repainting.” This feature will constantly paint to your screen so that you can find out what elements have costly paint times. You’ll get this really nice black box in the top corner that summarizes paint times, with the minimum and maximum also displayed.
Chrome’s “Continuous Page Repainting” mode helps you to assess the overall cost of a page. Larger view.
Let’s head back to the “Elements” panel. Here, we can select a node and just use the keyboard to walk the DOM tree. If we suspect that an element has an expensive paint, we can use the H shortcut key (something recently added to Chrome) to toggle visibility on that element. Using the continuous paint box, we can instantly see whether this has a positive effect on our pages’ paint times. We should expect it to in many cases, because if we hide an element, we should expect a corresponding reduction in paint times. But by doing this, we might see one element that is especially expensive, which would bear further scrutiny!
The “Continuous Page Repainting” chart showing the time taken to paint the page.
For Pinterest’s website, we can do it to the categories bar or to the header, and, as you’d expect, because we don’t have to paint these elements at all, we see a drop in the time it takes to paint to the screen. If we want even more detailed insight, we can go right back to the timeline and record a new session to measure the impact. Isn’t that great? Now, while this workflow should work great for most pages, there might be times when it isn’t as useful. In Pinterest’s case, the pins are actually quite deeply nested in the page, making it hard for us to measure paint times in this workflow.
Luckily, we can still get some good mileage by selecting an element (such as a pin here), going to the “Styles” panel and looking at what CSS styles are being used. We can toggle properties on and off to see how they effect the paint times. This gives us much finer-grained insight into the paint profile of the page.
Here, we see that Pinterest is using box-shadow on these pins. We’ve optimized the performance of box-shadow in Chrome over the past two years, but in combination with other styles and when heavily used, it could cause a bottleneck, so it’s worth looking at.
Pinterest has reduced continuous paint mode times by 40% by moving box-shadow to a separate element that doesn’t have border-radius. The side effect is slightly fuzzy-looking corners; however, it is barely noticeable due to the color scheme and the low border-radius values.
Note: You can read more about this topic in “CSS Paint Times and Page Render Weight.”
Toggling styles to measure their effect on page-rendering weight. Larger view.
Let’s disable box-shadow to see whether it makes a difference. As you can see, it’s no longer visible on any of the pins. So, let’s go back to the timeline and record a new session in which we scroll the same way as we did before (up and down, up and down, up and down). We’re getting closer to 60 FPS now, and that’s just from one change.
Public service announcement: We’re absolutely not saying don’t use box-shadow — by all means, do! Just make sure that if you have a performance problem, measure correctly to find out what your own bottlenecks are. Always measure! Your website or application is unique, as will any performance bottleneck be. Browser internals change almost daily, so measuring is the smartest way to stay up to date on the changes, and Chrome’s Developer Tools makes this really easy to do.
Using Chrome Developer Tools to profile is the best way to track browser performance changes. Larger view.
Note: Eberhard Grather recently wrote a detailed post on “Profiling Long Paint Times With DevTools’ Continuous Painting Mode,” which you should spend some quality time with.
Another thing we noticed is that if you click on the “Repin” button, do you see the animated effect and the lightbox being painted? There’s a big red flash of repaint in the background. It’s not clear from the tooling if the paint is the white cover or some other affected being area. Be sure to double check that the paint rectangles correspond to the element or elements that you think are being repainted, and not just what it looks like. In this case, it looks like the whole screen is being repainted, but it could well be just the white cover, which might not be all that expensive. It’s nuanced; the important thing is to understand what you’re seeing and why.
The last thing we’re going to look at on Pinterest is GPU acceleration. In the past, Web browsers have relied pretty heavily on the CPU to render pages. This involved two things: firstly, painting elements into a bunch of textures, called layers; and secondly, compositing all of those layers together to the final picture seen on screen.
Over the past few years, however, we’ve found that getting the GPU involved in the compositing process can lead to some significant speeding up. The premise is that, while the textures are still painted on the CPU, they can be uploaded to the GPU for compositing. Assuming that all we do on future frames is move elements around (using CSS transitions or animations) or change their opacity, we simply provide these changes to the GPU and it takes care of the rest. We essentially avoid having to give the GPU any new graphics; rather, we just ask it to move existing ones around. This is something that the GPU is exceptionally quick at doing, thus improving performance overall.
There is no guarantee that this hardware compositing will be available and enabled on a given platform, but if it is available the first time you use, say, a 3D transform on an element, then it will be enabled in Chrome. Many developers use the translateZ hack to do just that. The other side effect of using this hack is that the element in question will get its own layer, which may or may not be what you want. It can be very useful to effectively isolate an element so that it doesn’t affect others as and when it gets repainted. It’s worth remembering that the uploading of these textures from system memory to the video memory is not necessarily very quick. The more layers you have, the more textures need to be uploaded and the more layers that will need to be managed, so it’s best not to overdo it.
Note: Tom Wiltzius has written about the layer model in Chrome, which is a relevant read if you are interested in understanding how compositing works behind the scenes. Paul has also written a post about the translateZ hack and how to make sure you’re using it in the right ways.
Another great setting in Developer Tools that can help here is “Show composited layer borders.” This feature will give you insight into those DOM elements that are being manipulated at the GPU level.
Switching on composited layer borders will indicate Chrome’s rendering layers. Larger view.
If an element is taking advantage of the GPU acceleration, you’ll see an orange border around it with this on. Now as we scroll through, we don’t really see any use of composited layers on this page — not when we click “Scroll to top” or otherwise.
Chrome is getting better at automatically handling layer promotion in the background; but, as mentioned, developers sometimes use the translateZ hack to create a composited layer. Below is Pinterest’s feed with translateZ(0) applied to all pins. It’s not hitting 60 FPS, but it is getting closer to a consistent 30 FPS on desktop, which is actually not bad.
Using the translateZ(0) hack on all Pinterest pins. Note the orange borders. Larger view.
Remember to test on both desktop and mobile, though; their performance characteristics vary wildly. Use the timeline in both, and watch your paint time chart in Continuous Paint mode to evaluate how fast you’re busting your budget.
Again, don’t use this hack on every element on the page — it might pass muster on desktop, but it won’t on mobile. The reason is that there is increased video memory usage and an increased layer management cost, both of which could have a negative impact on performance. Instead, use hardware compositing only to isolate elements where the paint cost is measurably high.
Note: In the WebKit nightlies, the Web Inspector now also gives you the reasons for layers being composited. To enable this, switch off the “Use WebKit Web Inspector” option and you’ll get the front end with this feature in there. Switch it on using the “Layers” button.
Now that we’ve concluded our Pinterest case study, what about the workflow for diagnosing and addressing your own paint problems?
Spend some quality time with Frame mode in Chrome Developer Tools to understand your website’s runtime profile. Larger view.
H) shortcut.
Switch on extra Developer Tools features for more insight. Larger view.
Although at the time of writing, Chrome has the best tools to profile paint performance, we strongly recommend testing and measuring your pages in other browsers to get a feel for what your own users might experience (where feasible). Performance can vary massively between them, and a performance smell in one browser might not be present in another.
As we said earlier, don’t guess it, test it! Measure for yourself, understand the abstractions, know your browser’s internals. In time, we hope that the cross- browser tooling for this area improves so that developers can get an accurate picture of rendering performance, regardless of the browser being used.
Performance is important. Not all machines are created equal, and the fast machines that developers work on might not have the performance problems encountered on the devices of real users. Frame rate in particular can have a big impact on engagement and, consequently, on a project’s success. Luckily, a lot of great tools out there can help with that.
Be sure to measure paint performance on both desktop and mobile. If all goes well, your users will end up with snappier, more silky-smooth experiences, regardless of the device they’re using.
Addy Osmani and Paul Lewis are engineers on the Developer Relations team at Chrome, with a focus on tooling and rendering performance, respectively. When they’re not causing trouble, they have a passion for helping developers build snappy, fluid experiences on the Web.
(al)
© Addy Osmani for Smashing Magazine, 2013.
]]>Another take on the biggest innovations to pay attention to.
Putting together this publication’s annual 10 Breakthrough Technologies list, which comes out each spring, is a long and involved process. So I’m exceedingly curious about what other people come up with when they take on roughly the same question, which is “what are the most important technologies to watch in the coming years?” One such report is now out from researchers with the McKinsey consulting company who identify 12 technologies that they think will be the most “disruptive” over the next decade.
]]>