5 Ways to Speed Up Your Site with Images, Scripts and Styles
Recently i’ve been super keen on speeding up my site, especially since Google announced page load time is a ranking factor.
Believe it or not the whole task can be compelling, especially when you see huge improvements in your load times.
Here’s a small list of great online tools you can use and some simple measures to take to speed up your site.
1. Optimize Images
If like me you sometimes build websites heavily based on images, either including image galleries or using images for backgrounds and layouts, then it’s important to note that uncompressed images add unnecessary bytes to files.
smush.it by Yahoo is a fantastic tool that optimises your images, making them as small in file size as possible without losing any visual quality.
You can optimise multiple images at once and to top it off it tells you how many bytes have been saved.
2. Crush/ minify code
If you do need to edit the compressed files again in the future but you are struggling to read the huge block of uncommented, zero whitespace code, then there are tools to reorganise/beautify your CSS and JS code in the correct format. Just be sure that when you make your changes you compress them again!
Below are two FREE tools to compress your JS and minify your CSS
Did you know that 80% of the end-user response time is spent downloading webpage components such as images, stylesheets and scripts. The less HTTP requests required to render the page, the faster your page loads.
You could simplify your pages design to reduce these requests. However this could be a huge shame if you have gone to a lot of effort building a kick ass and complex design.
An alternative would be to combine your scripts into a single script, so there is only one HTTP request.
Minify is a great script that combines your files in to one request on demand without having to physically combine all the code together. For example 5 JS files and 4 CSS files could all be called in just 2 separate requests instead of 9. (One for JS files and one for CSS files.)
4. Put Stylesheets at the Top and Scripts at the Bottom
Progressive rendering is when an element is loading constantly in the background until it is fully loaded while the rest of the page is rendering.
With images for example, a full image is rendered at low resolution, then enhanced to higher resolution as more image data becomes available.
Progressive rendering is blocked until all CSS stylesheets have been downloaded, that is why it is important to place your stylesheets in of the <head> your document. As they are downloaded first, your users get a better user experience and the rest of the page can load progressively .
5. Create CSS image sprites
Image requests can add load time to your website in the same way your CSS and scripts can. With CSS sprites, using the CSS
background-position properties to display the desired image segment allows you to combine background images into a single image, which means less image requests.
In recent years people resulted to slicing images up thinking the page was loading faster by loading bits and pieces all over at once.
In reality each one of those images is a separate HTTP-Request and the more of those you have, the less efficient your page is.