Treating performance as design improves the user experience. No matters how perfectly we have design the information architecture and a great user experience with everything just one click away. Usability is useless, if performance is slow. Based on the survey , almost half of the web users expect a site to load in 2 seconds, and they abandon site, if it’s not loaded within 3 seconds.

Performance is design – Do not ignore it!

Responsive web design harms performance by default

Yes, it’s the default nature of the RWD, especially when it is accessed on mobile. More than 70% responsive websites delivers same numbers of bytes to all devices, regardless of the screen size or slow mobile network connection. It can be mitigated by careful implementation of technology.

Some tips to enhance the performance and maintainability of RWD project

1. Ask yourself, do we really need a responsive grid framework?

   Flexible grid is one of the principles of responsive web design. But it doesn’t mean we must use a flexible grid in a responsive project. Grid framework comes at a cost because it is designed to cover many use cases. It includes many things that we do not use.

   If we are developing a micro site or a small application, that has to be responsive. We need not to use a grid framework. We can make it responsive with media query only; without using any grid framework.

2. Choose grid framework carefully

   If grid framework is used in RWD project, it is the backbone of a responsive project. It should be chosen carefully. Framework like bootstrap and foundation are good for a quick prototyping but if we want complete control over the design and markup with maintainability. There are frameworks like susy and singularity, where we can create our own highly customizable grid and proper decoupling of HTML from CSS. Explore and compare more frameworks.

3. Build mobile first responsive design

   Rather than degrading the experience on mobile by choosing the desktop first approach take mobile first approach with progressive enhancement.

   • Keep the CSS default for mobile and move to desktop
   • Move the mobile media query above the desktop media query
   • Keep basic style outside of the media query

4. Use display none property carefully

   Display ‘none’ slow down the page because image, div, any widget that have been restricted on the viewport using the CSS. It will still load and render in the background and impact on the page speed.

   Load the image as background image and use media query to conditionally hide them. Go through this research done on the different browsers to test, display none property. Though, it was done in 2012 but still relevant to address the issues.

5. Conditional loading using matchMedia

   mediaquery are very useful in RWD. It reacts on the screen size, resolution and orientation. But it loads all the given resources that bring the extra HTTP request and the latency issue.

   It will load both the CSS in small devices. An html5 API matchMedia can be used for the conditional loading of the CSS, JS or other stuff. But make sure the requirement, as JS dependency on the presentation or content layer bring the accessibility issue.

   
if (window.matchMedia("(min-width: 900px)").matches) {
/* Minimum 900 pixels wide viewport */
} else {
/* Less than 900 pixels wide viewport */
}


6. Image should not only be responsive but contextual

   It doesn’t make sense; a high resolution image is being downloaded in mobile and hampering the performance. We have the solution like picture and srcset that download the contextual images but do check the browser compatibility of this solution as it is still in progress and improving.

   We can use polyfill like picturefill and srcset-polyfill. It will deliver the responsive images via javaScript.

7. Make content available as quickly as possible

   External style sheets block the rendering of the page. Browser do not paint content on the screen until our CSS has been downloaded. We need to identify above the fold CSS or critical CSS rules applied to the elements visible in the viewport. Now inline this critical above the fold CSS in the head.

   It seems daunting to identify above the fold css, but there are some scripts to do this task for you. CriticalCSS, LoadCSS

8. Use custom Icon font

   Font icon can be used to reduce the http request and speed up the performance with better maintainability using vector icons. There are many free custom font icons available online like font-awesome, icomoon and font-forge (font editor)

9. Accelerate the use of CSS3 to avoid images

   Browser compatibility of CSS3 has improved a lot. We can avoid image and create drop shadow, gradient fill, rounded corner and smooth animation with CSS3 to reduce the number of http request and speed up the loading time. Browsers are improving quickly refer the link ShouldIprefix to check where we need to add vender-prefix.

10. Responsive typography

    CSS3 has some new value -for sizing relative to viewport. Vw = 1% of the viewport width and vh= 1% of the viewport height. This special unit makes typography for responsive project easier to maintain on different devices.

11. Automate performance improvement

    There are build tools like grunt and gulp that take care of the maintainability and performance improvement using different plugins like – uglify, autoprefixer, sass, compass, mobify etc.

Conclusion

Let’s consider Performance as design, and make better use of technology by improving the implementation. Any technology should not be used just because it’s new and everyone is talking about. User care a damn of your site is responsive or not. They demand better user experience and better loading performance is the gateway of better user experience.

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding. View all posts by Gopal Juneja