7 SIMPLE WAYS TO OPTIMIZE YOUR WEBSITE

 We’re creating more and more demanding websites, with more and more assets.

Now more than ever we need to make our sites blazing fast on desktop and on mobile.

Fortunately there are some simple steps that we can take to achieve this…

1) OPTIMIZE IMAGES

This may seem obvious, but it’s surprising how many people fail to optimize their images.

What’s more, there’s a huge difference between using a medium sized image, and a fully optimized image.

Image optimization doesn’t just reduce the image size, it remove certain extraneous meta-data, such as when the image was created, what camera took it, and so on.

There are plenty of tools that can do this for you, such as JPEGmini, Yahoo! Smush.it and ImageOptim.

2) ACTIVATE GZIP COMPRESSION

Just activating Gzip compression can save up to 50% on load time. We all know that when we compress files on our local machine these become smaller and that is exactly what Gzip does it compresses your files before sending them to the browser this means the browser has less to load and will render the webpage much faster than when you are not using Gzip compression.

Most websites nowadays have this activated because of their large files and activating it is not really that hard.

First you need to find your website’s .htaccess and assuming your server is running on Apache just paste this on the file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

This small amount of code will greatly improve the performance of your site.

3) MINIFY YOUR FILES

Thanks to tools like Codekit, Prepos and CLI tools like Grunt this is becoming more common, but it’s still something you should remember to do when you finish your project.

4) CONCATENATE ALL YOUR CSS AND JAVASCRIPT

If you are using plugins, frameworks or anything external to your website the most likely scenario is that you have more than one or two files of JavaScript and CSS. That means the browser will have to get those two files which is wasteful seeing that you can concatenate all the CSS files into one file and all the JavaScript files into another this way making sure there are no wasteful HTTP requests.

This process is even painless using tools like Gulp or Grunt to do all the heavy lifting for you.

5) USE SPRITES

One thing that uses a huge number of wasteful HTTP requests is images, you have sometimes dozens of images for one page which results in dozens of HTTP requests. You could simply turn them into a simple sprite sheet and only load that once, then just change the CSS background position on every element to show the correct image.

There are also tools that help you create these sprites like CSS Sprite Generator and Stitches

6) USE A CONTENT DELIVERY NETWORK (CDN)

Major websites always have their static files, like images or text, on CDNs because it makes their websites load files faster.

Even if your website isn’t big enough for this, you should still load external CSS and JavaScript from CDNs where possible.

If for example you are using Bootstrap or jQuery you can get both these files from CDNs instead of hosting them yourself.

7) USE CACHING

If a file has been downloaded, why download it again?

Setting up caching is somewhat similar to setting up Gzip compression, it all happens in the .htaccess file and all you need is:

<ifModule mod_headers.c>
ExpiresActive On

# Expires after 2 Weeks
<filesMatch ".(gif|png|jpg|jpeg|txt)$">
Header set Cache-Control "max-age=1209600"
</filesMatch>

# Expires after 1 day
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=86400"
</filesMatch>
</ifModule>

Using mod_headers you can set the type of files and how long you want them to be usable for in seconds.

CONCLUSION

Website optimization is very important and following these steps will ensure that your website is delivered as fast as possible, whether over wifi or 3G.