Site   Web

April 3, 2015

Design vs. Speed, the Compromise?

Image courtesy of (Stuart Miles) / FreeDigitalPhotos.net

When you were designing your website, how much time was spent on a) the design and b) website speed (e.g. the time it takes your pages to load)?

It’s almost certain that you spent very little time on b) and, if you did, it would have accounted for less than five percent of the overall time spent. Website speed frequently is not taken into account until a website is already live and then the owner notices that it is slow. Is it then too late? Of course not, there’s something you can do at any stage of the development process to improve the speed (even after the site has been live for while) … but where do you start?

To be able to fix speed issues on your website, you first need to be able to identify where the bottlenecks are, i.e. which parts of your website are slow. There are a variety of tools available to help you with this and at least 100,000 articles on the subject. For argument’s sake this post will be using this article on testing and understanding your website speed.

The process is relatively simple, you test your website using the tools suggested and, after a bit of reading and understanding, you’re able to make changes to your site which will speed up the loading time. Your visitors want faster loading pages — it makes them happy, and keeps them coming back, and the more they come back and the more popular your site becomes.

This article will explain how to test your site and how to understand what it all means — some of the terminology and information provided can be quite technical. For example, do you know you can speed up your website page loading speed considerably just by compressing the images using a handy (and free) online tool? This is a great way to speed up your site because images are generally the largest items on any one page, and a lot of the time the file size is needlessly bloated. Using an online compression tool removes the bloat and reduces your image sizes as much as 40 percent in some cases.

Of course it’s possible to take it too far, before you know it you’re redesigning your site or spending hours optimizing very complicated and minute details just to squeeze out a few extra milliseconds — that’s not to say this is a bad thing, but it’s important to know where to draw the line between speed and design. A website can still be super quick, while being beautiful and detailed.

A lot can be achieved with CSS alone. Of course, CSS is much less bloated than images. In days gone by, if you wanted rounded corners on a box you would need to use either a large background image, or four corner images and position them with CSS. Or take for example gradients — before you would slice an image with a gradient and background repeat it using CSS. However, thanks to the advances in modern browsers (particularly Internet Explorer catching up with the rest of them) things such as rounded borders and gradients can be achieved completely in CSS, with a few simple lines too, and the best part is you can achieve cross-browser compatibility, including mobile, with minimal effort. This advancement alone has helped pave the way for faster sites by cutting the requirement down for images even further.

Another interesting concept is compression and minification. Take for example your typical website which has many javascript files: by combining those javascript files into a single file, stripping out all the useless stuff (such as white space, code comments and line breaks) you can turn multiple, large files into a single small file. On top of this, you can then apply compression, which is supported by almost all Web servers and browsers. Your one javascript file is then sent compressed down to the user’s browser, and this process can cut your file size down by 80 percent — which is huge.

The last point to note is cross browser compatibility. As you push your optimization and designs further and further, you’re bound to discover all sorts of quirks between browsers. Consistency across browsers is important. Although Google Chrome is the most used browser these days there is still a large share of users spread between Internet Explorer, Firefox and others. Make use of matrix which details what features different browsers support. Don’t forget to test, test and test again in all browsers to make sure it looks right.

The main thing to remember is that speed is important, in fact, it’s very important. And finding the right balance with design is essential. So how do you do this? The answer is quite simple: design your site first and make it look exactly how you want it. Next comes optimization. You may have to modify a few design elements for some big gains, but it will be worth it, and most importantly you’ll have the perfect mix of speed and design that you and more importantly your users require.


avatar

Jason Dceiver successfully assists various businesses with their writings.

css.php