How You Can Optimize Front End Performance Fit For Mobile Devices

Enhancing a front end performance is not always easy, but most developers know what to work with. Performance here does not refer to speed of a loading page, but the way it is responding as the user continues to interact with the page. For example, you might want to consider how a user feels while scrolling down a home page. In case the experience is better and consistent, the performance can be considered to be great.

Poor performance causes on mobile devices

There are different reasons why performance on mobile devices might not be what you insinuated. Firstly, the CSS declarations could be complex and large. Everyone agrees that CSS3 brings some awesomeness to the design world. However, fancy declarations in various styles make your CPU labor harder than normal. If you would like to know how CSS impacts your design, find a fancy site and run it through a tool such as DevTools Profiler including paint times, if you have the time. That way, you will see all the different performance problems you need to look out for.

A site might be beautiful to look at but the designer could have sacrificed a lot of performance to accomplish the visual feel and appearance sought. In case a site you have created slows down in terms of performance on your powerful and reliable PC, you might want to ask yourself what the same site would be like in a mobile device, perhaps running on a single GHz processor.

What to look if a site is sluggish

Since you feel that your site feels a little sluggish, start by taking a peek at the CSS declarations. Note that the blends of border-radius, box shadow, text, shadow, transparency and gradients plus similar properties across a number of elements on a single page could increase the number of repaints a browser should carry out, making the user interface of a website unresponsive and sluggish. On a mobile device, these kinds of repaints will be very plain.

As the designer, everything is in your hands to determine the styles to keep and the ones that must be dropped. The sufficient performance increase will determine if you need to simplify your visual styles slightly. In most cases, if heavy declarations are dropped, the performance will be improved and user experience enhanced.

Graceful degradation and progressive enhancement

These terms are not really new since progressive enhancement is about a decade old after it was introduced in 2003 and still very relevant today. Both terms refer to important concepts relevant to responsive websites development. This is so because the number of operating systems and devices today are always increasing. In particular, progressive enhancement will definitely be important in just about any project.

Similarity

It is not hard to think that both concepts are similar or refer to the same thing. However, while they are almost the same, the main difference among them is the way a designer approaches his or her design. If you plan your features to work on any device and place some sparkles here and there for those devices capable of handling them, this is progressive enhancement. However, if you come up with some fancy design such as a unique JavaScript feature and bolt on no script substitute at the end, you will be engaging in graceful degradation.

Most designers stick with progressive enhancement due to its rendering of a cleaner and better solution.