INCREASE THE SPEED AND PERFORMANCE OF MY WEBSITE – ADVANCED RESPONSIVE TECHNIQUES



TL; DR
The receptive design approach is a prevailing technique of beginning websites that has become accustomed for today’s multi-screen world. However, the design payback has a substitution – exclusively in performance. In the midst of a few enhancements, script concatenation and compression and picture resizing, it’s promising to overcome these performance hurdles and lead with a design that not merely looks good, but is tremendously fast for your site users/visitors.


BECOMING RESPONSIVE
Numerous website/blog designers and admin consider responsive design to be the best approach for building new websites.  Proof for this is all the way through top web design magazines and online shops (A List Apart or CSS activities that disclose a wealth of information on the topic). However, if you’re not so familiar with the subject, here is an explanation; responsive web design lets designers create websites with optimized web experiences for visitors on a diversity of screen sizes and resolutions. There is a good cause for responsive design’s attractiveness; with screen size and resolution changing yearly, users always want websites to look good on the newest mobile devices.  Easy to use responsive front-end frameworks such as bootstrap are making it much less complicated for designers to create new responsive projects and learn the techniques necessary for going responsive.

Becoming responsive in website design is not achieved without challenges, particularly when it comes to performance and speed. Through responsive design, the HTML is the same for every visiting device and each time a page loads on mobile it also loads all of the HTML elements including images & scripts intended for the tablet and desktop sites. Every time a user visits your site they download the full page content by default – no matter which device they are using.

An analysis was conducted into 20 top responsive e-commerce websites which discovered that the average responsive website home page consists of 87.2 resources and is made up of 1.9 MB of data. If the number of resources sounds high, that’s because it is; together they dictate how the web page should deliver on all desktop, smartphone and tablet devices. What’s more, these numbers are trending in the wrong direction – the average responsive page has grown over the past few years.

Looking at the advantage, you’ll observe in the above chart that the difference in page size between screen resolutions has increased between the year 2012 and 2013. In actual fact, almost 30% of responsive websites have started delivering slightly smaller payloads to smaller screens. Truly speaking, it’s a good beginning, but the performance benefits are negligible when you take into account the overall increase in page size. Many internet users are still waiting for large and over-resourced pages to load on their different devices. Today on the globe where 57% of your mobile visitors will abandon your website/blog if they have to wait more than three (3) seconds for the page to load, there’s a pressing need to supercharge your responsive website.

What a web designer needs is a means to quickly decrease the number or resources and size of a webpage with minimal impact on an existing website:

Before: a responsive e-commerce website, before performance enhancements. It loads 136 resources, and is 9.02 MB.

After: the same responsive e-commerce website, after script and image optimization. It includes 23 resources and is 581.81 KB, leading to a much faster load time, reduced bandwidth costs and much happier customers.

Below, you’ll find the two most important methods you can address the performance of your responsive website and rapidly make important performance gains. Compress and concatenate CSS and JavaScript to reduce the number of HTTP requests

One of the most successful ways to quickly speed up the performance on your responsive website is to make sure that only the essential resources are sent to customers’ smartphones, tablets and desktops. By optimizing the number of HTTP requests, you can reduce the amount of time a users spends waiting for the DOM to load.

To accomplish this, you can compress and concatenate CSS and JavaScript resources. Important Tools such as Sass and Compass are great for CSS compression. A web designer can use them to eliminate overhead by using an additional well-designed syntax and better stylesheet structure.

For Javascript compression, you can use a tool like Uglify. Uglify is one of the elements that powers the JavaScript compression in Mobify.js, our open source framework. We like it because it’s the fastest and the least error-prone of the JavaScript compressors.

SERVE THE RIGHT IMAGES TO THE RIGHT DEVICES
Images make up the majority of kilobytes in most web pages. As such, they also pose one of the biggest problems in responsive design. If a responsive design uses one markup across devices, how can you ensure that only big, beautiful images are served to your Retina Macbook Pro, while making sure that a standard definition smartphone is sent smaller images that make sense for its lower-resolution screen?

The good news is that there are a number of different solutions to the responsive image problem. One way people have been making headway is by modifying existing backend markup, changing the “src” of all their img elements to something like data-src, and accompanying that change with a <noscript> fallback. Others have tried to avoid the need for changing your existing backend, such as the PHP solution Adaptive Images.

Our team workers have created an open source (and free as in beer!) JavaScript solution that lets you dynamically optimizes your images for all screen sizes and resolutions. Using a single JavaScript tag inserted into your HTML, you can deliver responsive images through our global CDN. This means that you can always send the right images to the right devices, and do so at remarkable speeds – without needing to change your website.  

This tutorial was originally written by Martins Chima who is a founder and CEO of Martins Library but edited by an SEO team member. Read more About Us here.

You can decide to write a guest post (article/tutorial) for Martins Library; Click Here to see the procedures of submitting your work on this library.

Tags: css, javascript, js, maxcdn, mobify, mobile, netdna, responsive, webperf

Click on the related links below and read more.
We can keep you updated on this information, please Subscribe for Free by entering your email address in the space provided.

Do you like this article? Share this article
Follows us on Google Plus Facebook & Twitter
Share on Google Plus

Declaimer - MARTINS LIBRARY

The publications and/or documents on this website are provided for general information purposes only. Your use of any of these sample documents is subjected to your own decision NB: Join our Social Media Network on Google Plus | Facebook | Twitter | Linkedin

READ RECENT UPDATES HERE