5 Ways to Speed Up Your Site with Images, Scripts and Styles

Speed up your website

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.

2020 Update: Smush.it is no longer available. Alternative online image compressors include: tinyjpg.com and imagecompressor.com.

2. Crush/ minify code

Working on the same principal, CSS and JavaScript files can become large in size which again adds to your page load time. A simple way to reduce these file are to remove unneeded white space and comments from your code. Although the code becomes less readable the files can reduced by anything from 30-90%, which has to be worth it.

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

3. Combine JavaScript and CSS files on demand

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.)

Below is how 8 JavaScript HTTP requests look like

<script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="/js/ga.js"></script>
<script type="text/javascript" src="/js/jquery.simpleSlider.js"></script>
<script type="text/javascript" src="/js/cycle.js"></script>
<script type="text/javascript" src="/js/jquery.tweet.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/js/screen.js"></script>

Here is how a single combined JavaScript HTTP request looks like using Minify

<script type="text/javascript" src="/min/b=js&f=jquery-1.7.min.js,ga.js,jquery.simpleSlider.js,cycle.js,jquery.tweet.js,jquery.fancybox-1.3.4.pack.js,jquery.mousewheel-3.0.4.pack.js,screen.js"></script>

Nice huh?

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 .

As for JavaScript, it is important to place the scripts lower down the page to allow more content to be rendered progressively above. This is because progressive rendering is blocked for all content below the script tags.

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-image and 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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *