Hi there guys! In yensdesign, we are continuously talking and publishing tutorials, tips, tricks and cool effects to improve the user’s experience by making our websites more friendlies and accesibles.
But there is a very important thing that you must not forget and which is the main cause by which users leave the site : LOADING SPEED.
We are going to review some important concepts about website’s performance and explain best practises to speed up your websites to reduce the loading time. Your server and your users will be happier at the end of these articles
Actually we have published these articles:
- Minimize HTTP Requests
- Selecting the Right Format for your Images
- Optimizing JPEG images
- Optimizing PNGs images
- Optimizing GIFs images
So let’s dive into the first part of these series: Minimize HTTP Requests.
Why HTTP Requests?
Taking a look at some interesting articles about Front-End optimization like this one from Yahoo, we can know that the most of sites take 80% of the loading time in downloading components of the Front-End.
When we say Front-End, we are talking about the components that users download to render the website, including:
- And more…
Reducing the number of these Front-End components will reduce the number of HTTP Requests to render the page, so we will have faster pages.
The first idea that may come to our mind to reduce these HTTP Requests is simplify our designs, but we need to find a balance between the optimization and the design.
Let’s see some good practises to reduce them.
Reducing HTTP Requests
Because we want to still having our great design and optimize the number of HTTP Requests we are going to see how to achieve this:
Using CSS Sprites is the best way to reduce the number of image requests. In most of cases we are making layouts with more than one background-image in different divisions. For example if we have 5 divisions with their different 5 background-position images we have 5 image requests. We only need to make a single image containing these 5 images, so we reduce from 5 requests to 1 requests. How to achieve that? Take a look at this tutorial: Mastering CSS background-position.
Combining CSS files is another recommended practise. In some cases we have more than one CSS file but if you find the method to put all into a single file it will be faster. If we have some small CSS files, it will be better to have all into a single bigger CSS file because it will be in cache for future sections, avoiding the load of multiple small CSS files for each section.
Combining Script files is another good practise. In some cases it’s harder to implement all scripts into a single script file, but as we said it’s important and recommended spend time in this if you want to optimize your pages. Remember that you can / must minimize all your scripts to get lighter files.
And that’s all in this first article guys! Remember that reducing the number of HTTP Requests is the first step in the optimization process, specially for first time visitors because they have not all these components in cache.
In this Tenni Theurer’s blog post Browser Cache Usage – Exposed! says that the 40-60% of daily visitors of a site come in with an empty cache.
It will be great if we can do faster websites for our first time visitors, right?
See you on next tutorial and remember that we want you suggest tutorials to write!
See you on next tutorial guys!
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)