Some people say that responsive design is bad for performance. If you think about it – frequently this is only true if you are trying to shove a complete desktop site into a mobile environment. When a site has not been optimized it can be very weighty in its file size and can make downloading the site into a mobile device very slow. And it is for this reason, many people advocate a mobile specific site.
But that is not what we are doing in our class. We want to make sites that can adapt to their environment. So let’s talk about what are the main causes that slow our sites down in mobile environments and focus on the items we as web designers and developers can control.
Big File Sizes
Right now the average page size is 1.3MB and sizes have increased 30% in the last year. The main culprits are images, lots of javascripts and potentially bloated/extensive css, all of which are totally within our control.
To combat this issue we can focus on leaner, cleaner code and optimized images. Focus on only putting what is necessary and nothing that is not. That seems obvious — but if we really sit down and think about it there are ways we can clean up our code and there are ways we can optimize our images.
How can we write leaner code?
For one, make your own templates and stop relying upon bootstrap and other template solutions. Often times these things will provide styling that you may not even be using and that in and of itself can create code bloat. If you like Bootstraps’ styling (I do) you can still mimic the styles without importing the whole of the css. It may take more time, but it will give you leaner code in the long run. And if performance is what you are looking for — then give this its due consideration.
You can write your own CSS code bloat too — entirely unintentionally, where you have duplicate lines of styling that do the same things. This is part of why I advocate mobile first, so you add, or update to the styling as needed, rather than taking away from the styling as you would in a desktop first CSS approach. Right clicking and inspecting the element in your browser is your best friend. You can easily see what lines of code you don’t need and where to find them in your stylesheet and get rid of them.
So that takes care of CSS bloat, can there be HTML bloat to worry about as well? Sure there can be — You can write unnecessary container divs or put classes and ids on everything, some of which you may or may not use. This is why I advocate keeping your structure simple and focus on semantics. Make friends with CSS and the new CSS3 selectors so you don’t have to write classes and ids on everything. Focus on only adding those things if you really need to. Make friends with the DOM.
Including JavaScript
Carefully decide if you need to use any JavaScripts. Because JavaScript libraries can include much of what you don’t need — consider if it would be better to write your own script or if you really need to include that library and plugin. Since not all of us are fantastic JavaScript programmers, we often rely upon jQuery (or other libraries) and plugins to handle cross-browser JavaScript issues.
Weigh the inclusion of all JavaScripts carefully and focus on when you might need those scripts versus when you don’t. If you have a JavaScript validate script, you would want to include it on pages that have forms, but not include it on a page that does not have a form like an image gallery. Conversely you wouldn’t include a slide show script on a page that does not have/need a slide show. These are simple things you can do to help clean up your code and make your page leaner.
Decide if you want to use Modernizr. I like Modernizr, but it is another JavaScript and it does add more code. This means it requires consideration before including in your project. The great thing about it is that you can customize it so that it only test for the features you are interested in supporting and you can tell it to include the html5shiv.js or not. I like taking the shiv out of Modernizr and using the following code:
<!-- [if lt IE 9]> <script src="scripts/dist/html5shiv.min.js"></script> <![endif] -->
This way the shiv is only included for the browsers that currently need it.
Another great feature of Modernizr is that you can use the yep/nope with the load feature in order to load the scripts that are loaded only when they are needed. Optimizing takes thought and energy, planning and consideration – but nothing great is achieved without effort.
On Images
There’s a reason that we say a picture is worth a thousand words: people love big beautiful images as humans are visual creatures by nature. Additionally with higher resolution screens, we’ve been told that images need to be bigger and better to be best received on these devices. That of course depends on how you work your code, but none the less we need to find ways to serve up images in all environments.Here is a list of some simple ways to optimize image file sizes:
- Use background images and media queries that serve up the appropriate image in the space
- Use the up and coming <picture> element or pictureFill.js
- Use CSS wherever possible eg: border radius, gradients
- Use icon fonts, svg and basecode64 instead of regular images
- Use gray scale images if possible
- Compress large images at 0% quality (article)
- blur non-essential areas of image
- shrink after optimizing: tinypng.com or optimizilla.com
As the web grows and develops, there will be those out there continuing to solve this problem. I believe that in the future there will be even better solutions available to us — just keep an eye out for them and never ever stop learning or trying new things.