Dramatically improving your responsive website – how and why

responsive

Since the boom of mobile devices on world market, internet became an even more accessed source of information, as Wi-Fi networks and mobile data plans became faster and more accessible for the regular user. Nowadays every Smartphone is capable of accessing internet websites, allowing the user to browse them. Still, as mobile phones have different resolutions and smaller screens than computers do, it is a great challenge to deliver content in such a matter that it will both look good and load fast on any mobile device as Smartphone or tablets.

The need of making websites load and look well on any device lead to development of responsive websites.  Responsive web design offers the possibility for web programmers and designers as well to create optimized design layouts for smart phones and tablets. A great reason to work with responsive design is the fast changes that mobile devices’ displays are suffering in terms of resolution and size; using a framework as bootstrap makes responsive development easier, in the same time creating a great learning environment.

Users are closing the window before it loads

Even so, working with responsive websites isn’t a job without any impediments or challenges; in fact, the first element that comes into the way of obtaining performances in responsive design is the quantity of information delivered through mobile networks. On other words, each time a page is loaded into the browser, the full HTML content is served to the device, no matter if it’s mobile or not. This way, because every time there are non-required elements that load up, the overall loading time is quite high. On a world average, the regular internet user closes the browser if a web page takes longer than 3 seconds to load.

Although responsive websites are serving smaller amounts of content by default, there is still a lot to improve in order to turbo charge the loading time. Listed below are the best methods any responsive developer could use in order to obtain maximum efficiency while dealing with the smallest loading time for every web page. This is how 2013 looks in terms of page size per resolution, according to Guy Podjarny, a web performance analyst:

page-size-per-resolution-in-2013

Reducing the number of http requests is the first step towards a lower loading time for any type of website, including responsive websites. Using a better stylesheet texture or a new syntax may lower the loading time; still, the best improvement can be seen when using the proper tools to concatenate and compress CSS and JavaScript. Tools like Saas or Compas are great when it comes to doing just that; squeezing the same amount of information in smaller bits of data, so the final product is smaller and faster on the line towards the viewer.

How to deal with images

Next up, a large part of the content served to a web browser consists of images. Dealing with images in terms of size and resolution will bring the highest positive impact over responsive website loading time. Firstly, it is important to deliver the right images to the right devices. There is no point in delivering a bigger image than the resolution of the smart phone accessing the website, as well as it is important to deliver a high quality image for a computer display resolution which is capable of displaying high definition content. In the end, it is important that the user sees what he should see; an image of a horse is not an image of a horse if there are only some pixels brown present over a green pixelated background.

We must admit that there aren’t any HTML-only websites that are getting success in terms of visitors and conversion. Most modern websites, and this includes responsive websites, are usually full with css scripts and other legacy content that can’t be edited manually; for example nobody is going to edit each <img> attribute of all the pictures from their website just to make it serve the right dimensions for the right display size and resolution.

One way to deal with the large number of legacy content which can’t be edited manually is using Adaptive Images. This tool uses a PHP file to route images through it, and then serves the images according to the resolution of the device accessing the content. If required, the same PHP file will create (meaning crop) the image in order to perfectly fit the size of the screen. The only problem that responsive web developers may encounter when using Adaptive Images might consists in its requirements; although it works mostly through the .htaccess file, which can’t exist without an Apache Server. Also, because the tool uses PHP to route the images, it will be incompatible with websites built on python or Ruby on Rails.

Being responsive is not enough

Going further, it must be mentioned that choosing what images to deliver to mobile browsers should not be done exclusively according to the receiver’s screen resolution; that should be only half of the process. On the other hand, because we are talking about responsive content, bandwidth plays a very important role behind the scenes. Serving a high resolution image to a computer that supports it, but which features a low level bandwidth will only result in a failure of improving the loading time.

Instead, using a tool as Foresight.js or HiSRC, the website is able to do a bandwidth test in order to determine if the bandwidth is large enough in order to receive the image fitted for the screen resolution. The test itself requires a file to be transferred in order to measure the bandwidth, and while this is a time loss on the first hand, it saves a lot when it comes to the whole lot of images that are going to be served next. Another thing to remember is that the test is done once per session, so it won’t “slow down” the process each time an image is served.

In the end, as you can see, optimizing a responsive website should be done no matter how fast the website loads; optimizing JavaScript and css content along with serving the proper images for the device accessing the website, based on its screen resolution and available bandwidth will in the end prove to be performance benefits.