Blog Page

Responsive Web Design: Tips to Improve Performance and UX with server side image optimization

Smartphones and tablets have changed the approach toward design and user experience. Before the proliferation of mobile devices with advanced web-browsing capability, web designers had only one primary challenge to deal with – keeping the same look and feel of their websites in various desktop computer browsers.

However, interacting with websites on smartphones and tablets is not the same as doing that on a desktop computer monitors. Factors such as Click versus Touch, Screen-size, Pixel-resolution, support for Adobe’s Flash technology, optimized markup and many more have become crucial while creating websites with Responsive Design.

But, why is responsive design so important for your website? Before we understand that, we must understand what is “Responsive Web Design”.

WHAT IS RESPONSIVE WEB DESIGN?

Responsive Web Design (RWD) is an approach of laying-out and coding a website such that the website provides an optimal viewing experience — ease of reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones).

responsive-design

The designer creating a Responsive Design should ensure that the website’s navigation elements, screen-layouts, text, images, audio/video players and other UI elements re-adjust themselves on a variety of devices. Thus, one need not spend extra time and money in creating and maintaining one “mobile-site version” and another “desktop-site version” of her website.

While, content is king and discoverability of content are foremost success metrics, it is the user experience that enables visitors to consume content on any website through the device of their choice and preference, anytime. Thus, responsive web design is about providing the optimal user experience irrespective of whether they use a desktop computer, a smartphone, a tablet or a smart-TV.

Responsive Websites are agnostic to devices and their operating systems. A responsive web design ensures that users get the best and consistent experience of a website on any device of the user’s choice and preference – be that the iPhone, the iPad, the smartphones running the Android OS, or the Windows OS and several others. As a result website owners and content publishers can need not exercise the option to build versions of their website for every popular device platform which they expect their audience might be using.

A NOTE ABOUT PERFOMANCE

Google recommends that your server response time should be less than 200ms and another 200ms for the above-the-fold content on your page to render.

They also recommend that:

  • Number of redirects should be minimized
  • Number of roundtrips to first render should be minimized
  • Avoid external blocking JavaScript and CSS in above-the-fold content
  • Optimize JavaScript execution and rendering time

But there is another problem here./p>

WEB PAGES ARE GETTING BIGGER

The average web page size is now a hefty 2225 kB and growing bigger every day. This is bad for site owners and users alike. You don’t need to be an expert to know that larger pages lead to slower performance and higher bandwidth costs.

While bigger pages do have an impact on desktop users, the people who this impacts most are mobile users. People use their smart phones to discover information as it is quick and easy to do so, but with the ever increasing page bloat, it can take a long time to load a web page on a mobile device, especially if you are using 3G.

Most responsive web design sites download the full content of the page on different screen resolutions, despite the fact that there were some differences in the content and size of images shown on the various sized screens.

rwd-page-size-by-ftype-res_opaorp

As expected, and matching the trend we see across all websites, images make up the bulk of the bytes. Images account for about 6x the average weight of JavaScript files, and 9x that of CSS.

Images are also consistently the biggest component on a page, regardless of screen size. This implies optimizations like Responsive Images, which deliver smaller images to smaller screens, are not being applied.

TWO WAYS TO OPTIMIZE IMAGES – IN BROWSER VS. SERVER SIDE

While most of the Javascript libraries like PictureFill allows you to scale and optimize your hosted images right in the browser, they do not solve the issue described above – large images load into the end-user’s browser, loading slowly while wasting bandwidth.

There are some options available to actually scale and optimize images to the screen size even before the files are transmitted.

Imagizer Media Engine is able to scale and optimize images right at the source, on the server level, even before the images are sent to the browser. If you are already using as many developers and companies already do – you could integrate Imagizer right on top of your S3 buckets.

Imagizer does not require registration or licensing. Just visit AWS Marketplace and launch Imagizer with one-click launch – right on your own EC2 instance.

There are few other ways to accomplish the same. Various wordpress plugins allow image resolution reduction on the server level, but you are required to integrate those plugins tightly with your product. There is also some anecdotal evidence that to the lack performance of such solutions – it is quite possible that image resizing will take a long time to perform per request, slowing down your site and deminishing any advantage of lower image resolutions required for the responsive web design patterns.

Imagizer Media Engine works as an image proxy server, requires a minimum configuration and no upkeep. It also runs in your own cloud (your own EC2), so there is no need to send images to third party service providers – yielding no extra bandwidth charges while providing faster processing of your images without regard of your AWS region’s geolocation.

Written by Jack Levin

© 2016 nventify, inc. All rights reserved.