Aesthetics can definitely make it better

It’s the performance you fool (me)!

7 min readMar 27, 2017

Quick ways to improve your conversion

The mobile web… What a difficult world. You need to fit everything on such a small canvas, you need to be careful as hell about mobile usability and after all, you can never be sure what your user is up to at the same time he explores your website.

I am telling you, it’s a nightmare! But it is a beautiful one if you are up for the challenge.

Control what you can and live with that

It is common to see designers or entrepreneurs trying to fix any minor issue, adjusting their designs a thousand times, trying to make them pixel perfect. I, myself, am a big fan of aesthetics. It has proven to be a major factor affecting perceived usability and enhancing user experience [1].

What designers usually forget is that users are using their website for a purpose. And no matter how beautiful your canvas may look, there is a simple fact that will make users leave your site. And that’s performance.

You only have… 10s

Well, that’s partially a lie. You only have 2–3s for your above-the-fold content to load and maybe a little more for inner navigation. Make sure that you use it properly, otherwise your amazing design is going to fail… badly. If you are used to desktop implementations, you need to change your mental model of the web. Connections are usually very slow and 10s maybe convert to 1–2s in desktop grade connections. Be friends with your Dev Tools, slow down your connection and test.

But I am just a designer!

Are you? Don’t you boast that you write the most amazing CSS? Don’t you shit nearby to your dev? Then NO, you are not just a designer. If you care about UX, then you are the most suitable person to deal with this issue. I bet that your designs will feel much better after you take care of some little things.

Check the behavior of your users when load time is higher and you will be amazed [5].

I am ready. What I need to do?

In this article I am going to talk briefly about the how and focus on the what and why. The more technical aspect of it will come later, or you can start digging by yourself.

A small Bag of tricks

CSS affects rendering speed.

I am sure you know that, but is it that big? Well it depends. Do you use plain HTML elements as selectors?

For example do you ever use this?

.myclass li { }

Or this

#mydiv .test p { }

The problem lies deep in the way CSSOM (similar to the DOM) works. You might thing that using an ID and a class after it, selecting the actual paragraph is very specific, but there is a simple fact that will destroy you. CSS is getting read from right to left! Yes, right to left! So your pretty little selector is going to select ALL paragraphs first and then filter them by your class and then by your ID.

How hard is it to add a class to everything? Get used to it, it will save your users time. Maybe, a lot of it.

Nesting!!!

I love SASS, but it is really stupid. Same goes for LESS or any other post or pre-processor. Imagine SASS as a magic wand that can make your life really easier. At the same time, imagine SASS as the worst browser nightmare. Why?

I know… it is really really helpful. It makes your code cleaner and maintainable, but it makes the selectors so complicated for the browser that you should really try to avoid it.

I was really reluctant about this to be fair. I was trying but I was usually not happy about my selectors depth. And then I attended a UX conference and talked with some fellow designers about a BEM or ECSS. I don’t really like to follow generic rules about code structure and CSS, and I don’t want you to feel obligated to follow mine as well. This is the only thing you will want to keep.

This

.level1 .level2 .level3

Coverts to

.level1_level2_level3

Yes, if you write plain CSS that’s a nightmare but take a look at how easy this is by using SASS.

.level1 {
 &_level2 {
   &_level3 { 
     /* Some CSS */
   }
 }
}

You only have to change your habit of starting any nesting with dots and change it to ampersand + underscores! It will make your browser suffer a lot less and by using correct naming it will also make your HTML elements better self identified.

Clearly there is a disadvantage that you should think of before going with that. You will end up having some HTML classes that are 50 characters long. Of you have 50 of them, you will end up having maybe 2000 more characters in your HTML. Remember, a character worth 4 bytes, so you can expect your HTML to be 5–10kb more than before. Is that a Lot?

Again it depends. If you have managed to make your site less than 200kb it might be significant. From my experience though, websites tend to be around 1–2MB which only makes this change affect your size by 0.05%.

TIP: When you start feeling more confident with this, it will be a good moment to start thinking more about your CSS architecture. This will make your nesting more viable and your code more flexible. Why don’t you check ECSS slides [2] ?

Compress.

Everything. Of course you do. At least most of the times. The trick here is the way you do it. You need to start using a task Automator like Gulp or Grunt. Or maybe something more powerful like Webpack. Personally, I love Gulp, but any of them do. Learn how to create Gulp tasks that minify and compress CSS, JS and images with one of these tools and use it in all your jobs.

Here is a task that I use a million times a day (!)

// This task minifies my SCSS files, ignores the partials _file.scss // and prefixes the outcome making it compatible with my selected  // browsersgulp.task('styles', function () {
  gulp.src('./scss/**/[^_]*.scss')
    .pipe(sass( {outputStyle: 'compact'} ).on('error', sass.logError))
    .pipe(removeEmptyLines())
    .pipe(prefix({ 
        browsers: ['last 3 versions', 'last 5 Android versions', 'last 5 and_chr versions', 'last 5 and_ff versions', 'last 5 op_mini versions', 'last 5 bb versions', 'last 5 and_uc versions'],
        cascade: false
    }))
    .pipe(gulp.dest('./build/css'));
});

Use an Iconfont or SVG Sprite.

Stop creating unique image icons for every new block or page you create. Choose a method that will fit your purposes. Don’t overthink it. If it works for you, any of these will do. Personally I prefer iconfonts, but I know some people are very strong on SVGs. I do use SVGs though on any shiny non linear icon I need to use like a company logo. In terms of performance, anyone of these will be so much faster. At least, if you don’t use to parallelize your assets serving using a CDN or you already work with HTTP2 somehow.

This is also something you will need to automate at some point or right now. There are a ton of articles explaining how to do that or you can start by reading this [3].

Above the fold.

This is a tricky one… It will require a number of changes at your project if you want to keep it working without thinking about it. A mix of Gulp and SASS magic will be required but it is doable. If you still wonder about what this is… Well it has to do again with the way the browser renders your page. Scientifically (!), it is called critical rendering path, but what you need to know is that if you somehow serve first the HTML and CSS needed for the part of the page that is visible on the top of the browser, then what the users see will appear instantly, creating the perception of faster loading times even if the total stays the same.

According to Google this is huge. They even made a couple of classed about that I really encourage you to take [4]. For me, if you make it part of your thinking process and development pipeline it is a nice to have feature. Otherwise, managing the previous issues will be enough, most of the times.

Invest time on performance tools.

You need to become a performance evangelist for your team. This will require some real life paradigms, which means you need to start measuring [6]. If you can show your manager how much of a difference you can make by doing the above (or more!), I am sure he will love it. As Amazon says, every 100ms you lose, conversion is decreasing.

To name a few, Lighthouse extension can be extremely helpful in your way to improving your website in all possible ways, the same goes for PageSpeed Insights. A more old fashioned WebPageTest, while simple extensions for Chrome like Performance Analyzer and Page Load Time will help you out. Never forget thought that Chrome Dev Tools should become your final destination as they will allow you to understand in depth the why and how.

Invest on performance and you will make more money

A final note. Keep a lot of figures before and after the changes that you made. Prove to your manager and yourself that the increase on sales is not a coincidence. Users will love your new faster website and you will love seeing them adoring your design that now feels and works better.

Your thoughts?