Connect with us

Hi, what are you looking for?

Mobile

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.

Written By

2 Comments

2 Comments

  1. Rahul Sharma

    March 31, 2014 at 11:26 am

    Good points about optimising website performance for mobile devices.
    Thanks for sharing this information.

  2. Sudipto

    April 27, 2014 at 7:34 am

    Hey Brandon,
    Nice post and Thanks for sharing tips on optimizing website performance for mobile devices. This post really gonna help many bloggers.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Design

There is no question that a well-designed e-commerce website is an important asset critical to your success online. It is where your customers go...

Design

Do you want to hire web design services? This web designer hiring guide is definitely for you! This guide on hiring a web designer...

Web

One-Page Website designs have become increasingly popular due to clutter-free layouts. But is this trend going to last long? Learn about the downsides too.

Digital Marketing

The interactive web design trends for 2023 are shifting quickly. We'll explore how you can use these trends to create an engaging experience for...