Tips&Tricks Managing website performance while slicing
Website performance is a pretty important topic these days. This is understandable given the number of people accessing the internet on their smartphones and tablets is increasing daily. Studies show a steady increase in the number of people who prefer to use their phones/tablets for web interaction.
It was also proven that well performing websites enjoy higher visitor engagement, retention and conversion rates.
In 2007 Amazon reported that for every 100 ms increase in load time of Amazon.com, their sales decreased by 1%. Google also reported similar results in 2006 with their Google Maps product. Google found that by reducing the size of the page from 100KB to 80KB, their traffic shot up by 10% in the first week and then 25% over the following three weeks.
That’s why its important that you do everything you can to increase your website performance.
It’s never too early in the development process to start optimizing for speed.
It’s good practice to start as soon as you start transferring your design from PSD to HTML/CSS (sliceing). You just have to keep a few simple things in mind for better website performance:
Write clean HTML and CSS
It’s never a good idea to start writing code as soon as you open the first PS file containing your website design. Take some time to plan things out. Examine all the pages and look for repeating design patterns so you can prevent code repetition.
Separate your content and presentation. Avoid writing CSS code inside your HTML files.
Keep your HTML clean and simple by avoid extra markup.
Use CSS as its name suggests (cascading style sheet). Don’t repeat the same css rules across multiple elements. Group them.
These few simple actions will lead to smaller HTML and CSS files size down the line.
Properly including stylesheets and scripts
You probably already know that you should add stylesheets at the top and scripts at the bottom of the page. But do you know why?
Most current browsers can download a maximum of two components in parallel. However, when downloading a script, no other downloads can occur. That download must finish before moving forward. Script files block subsequent downloads.
This means that the only way to load CSS files in parallel with the script is to add them before the script files.
So, when feasible, it’s always good practice to add script files to the bottom of your document in order to allow the other components (images, css, etc) to load first.
Reduce the number of HTTP Requests
One of the most important aspects of improving a web page’s performance is minimizing the number of round trips that the browser needs to make to the server. Every file that your website includes (such as CSS, JavaScript or images) all need to be downloaded to the browser. By minimizing these requests you’ll speed up the page significantly. If you include separate CSS files for different parts of your site then you’ll find it beneficial to include all the CSS in one stylesheet, likewise for JavaScript or other resources.
Reduce the number of css and js files you call in your HTML. For a small project you can add all your css in one css file. On bigger projects it would be better to have a more organized file structure. The same thing is also true for js files. You can add all your js plugins and code in one external js file.
Its also good practice to avoid @import rule in your css.
Besides reducing the number of css and js files your browser has to download, you can reduce the number of images by using image sprites (link na css sprite clank detaljniji).
Using CSS Sprites will reduce the number of images the browser has to download and will load the page faster.
Minify Resources (HTML, CSS, and JavaScript)
When you are done writing all your code, minify it.
Minification is the process of removing unnecessary data without affecting how the resource is processed by the browser.
Unnecessary data can include white space, comments and new line characters. These can be removed without affecting the code’s performance. By removing them we’re reducing the file size of our code, therefore the amount of data that needs to be downloaded to the browser.
For minifying CSS, you can try YUI Compressor and cssmin.js.
For minifying JavaScript, try the Closure Compiler, JSMin or the YUI Compressor.
NOTE: Since it’s almost impossible to work on minified files, deploy them only in production and keep non minified copies for yourself to make changes and work on.
Optimize Images
Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and website performance improvements: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth. Equally the faster the browser can download and render content on the screen.
You probably optimize images while slicing the design from PS but nevertheless it’s good practice to run the same images through one of these online image optimisation tools:
JPEG & PNG Stripper
Smush.it
Online Image Optimizer
SuperGIF
Conclusion
In this blog post I’ve shown you a few ways you can ensure you optimize your website performance from the moment you start writing your code.
By following these few guidelines you can be sure that your website will run fast as soon as you deploy it on the server.
Of course there are more ways you can increase page load times but these are just a few that are available to you while you slice.
Remember. Fast and optimized pages lead to higher visitor engagement, retention, and conversions.
