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