Speed Part 2: 14 further tips to improve your sites performance

1. iFrames

Common content such as FaceBook Like buttons and Twitter Tweet buttons are good ways of adding social functionality to your sites. Unfortunately they utilise iFrames which block all further content from loading. You can conditionally load in them using a JavaScript solution.

2. Server Solutions/ CDN’s

Varnish sits in front of your server and is helpful if its under big loads. CloudFlare and Amazon S3 can be used as content delivery networks (CDN’s).

3. Bad scripts

A badly written 2kb file can cause more problems than a well written 200kb one.

4. Minimise CSS, JavaScript and HTML

Minimising removes spaces and comments from files.

5. Avoid inline styling

Put scripts and css in external files.

6. Reduce DoM elements

Loading in a lot of elements can hinder browsers.

7. Don’t have 404 errors

Each 404 increases server requests.

8. Don’t scale images

Why have a 100 pixel images that is really a 500 pixel images but scaled down?

9. Redirect

Minimise redirects as much as you can.

10. Watch SVG’s

SVGs (Scalable Vector Images) are great but they can bloat file files.

11. Use Base 64 in CSS

Believe it or not you can out “images” in CSS. Using a convertor you can encode images and paste that into your css files. Great for small backgrounds but large images can bloat css.

12. Minify HTML

A lot of people minify their JavaScript and CSS but not their HTML. Can be easily done in ExpressionEngine with Minimee.

13. CSS features

Modern CSS3 features such as drop shadows and gradients can slow pages.

14. Animations

Always use CSS for animations and not JavaScript when you possible can. There is a huge performance difference.