Shoot me now…responsive design has seemingly become confused with an opportunity to reduce performance rather than improve it.
Stephanie Rieger
Responsive design is a very popular solution in modern IT world. After such giant companies like Disney or Microsoft began to use responsive design, other businesses took interest in it. In addition, Google’s decision to improve ranking positions in mobile search for responsive sites made this design option even more demanded.
So, today responsive technologies are used in nine of 10 cases of project creation or improvement. At the same time, designers create good-looking and bright layouts, content managers try posting very high quality images, programmers try to offer users maximum of useful features. As a result, a lot of heavy images, scripts, and libraries are loaded on every page. Few ever think of how all this will work on a mobile device with low speed Internet connection.
Disadvantages of “heavy” websites
Today in many companies, employees who got used to having high-speed Internet connection and using expensive mobile devices do not even think how less advanced users of small screen devices view their site. That is a very big disadvantage.
Even 4-megabyte web site loads fast and looks very attractive on a mobile device with high processor capacity and high-speed Internet connection. But they go online even on usual inexpensive smartphones, while the most popular option of a wireless Internet connection is 3G, and in some cases, users even try using a 2G connection to get necessary information!
What is next? In practice, a 5,942-kilobit site, for example, will be loaded in around 90 seconds on a usual Android device with a 3G connection, which means that for one minute and a half the user will look at the white screen or see part of the page loaded!
Now think what number of users will close the tab without waiting for the site to load. And how many potential customers of your resource will be among them?
Increasing the performance: starting with simple things
HTML code optimization offers a set of methods, which very many web masters do not use for some reason. At the same time, there is a direct connection between the number of HTML requests, number of different constructions and elements on the page and the loading speed. Some developers wrote very well about how you can optimize your code for HTML pages (have a look into “Yahoo rules“).
If you use background images, do not forget to combine them in sprites, especially, because there are user-friendly tools exist for their creation. In addition, you should optimize your images. The less each image “weighs”, the more quickly it will load. Do not forget about such simple things!
Working with images: be careful!
It often happens that unnecessary images (or several files of different resolution instead of only the one that fits best) are loaded on your web pages. Try to carefully check your code and do not forget that the “display:none” attribute only hides your image from users, but it still loads.
Another popular error in working with background images is loading of several identical pictures instead of only one. Here you need to be careful and check whether your image file is requested in your code more than once.
If your site is loaded on a small screen, the loaded image must be small, too. Make sure that a big image is not loaded; not doing so will lead not only to reduction of the page loading speed, but also to littering of the device’s memory. To create responsive design you should necessarily use Adaptive Images or tools like src.sencha.io.
Also, note a <picture> element, which is very useful in responsive design. Starting from 2014, almost all popular browsers support it, therefore be sure to use its functions to load and display images of a necessary resolution, depending on a screen size.
Use selective loading
On devices with a small screen, you should not offer to load features that will not be used. For example, if some script works only on desktop computers, in responsive design you should use matchMedia polyfill. You should do the same with CSS files. If they are used only in certain cases, define whether they load or not with the help of eCSSential.
You should also note an opportunity to use selective loading, which was first presented by Jeremy Keith. Really, on mobile devices, some part of content is simply not necessary. That is why it should not be loaded. A very convenient tool for selective loading of content was created by Filament Group and entitled Ajax-Include Pattern.
Do not use unnecessary frameworks!
Big JavaScript libraries, which are loaded in case you use frameworks, make sites significantly “heavier”. On the one hand, the use of frameworks has already become a certain standard for many web developers and they use them very often without even thinking. On the other hand, JavaScript is justly considered one of the most slowly loading and displaying resources.
That is why every time you intend to add another framework or plugin, think whether it is actually necessary in this case. Perhaps using simple JavaScript and CSS methods will be enough?
When you create design, always remember about performance
If you want to get high quality responsive design, which will work well on any device, do not consider only design appearance. You should check your website performance and optimize it. Your customers will be grateful to you!
For your PSD design to HTML conversion to take less time give your layout to us to work on it and get high quality and neat html markup that can be further improved and adapted. “Robots” do not make careless mistakes and it will be very convenient to work with code, which is guaranteed to be neat!
