Default Style

Lorem ipsum dolor sit amet, consectet adipiscing elit. Praesent eu odio erat, ac imperdiet justo. Nullam elementum enim et nulla tristique quis sagittis .

Donec ornare ipsum tortor; gravida sodales enim aliquam sed. Nullam vel gravida massa, quis bibendum eros. Nam nec ultricies odio? Donec a blandit tellus.

"box1" style

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean com modo dolor.Cum sociis natoque penatibus et magnis dis turi parturient.

Module Class Suffix: "box1 fa-thumbs-o-up"

"box2" style

Lorem ipsum dolor sit amet, consectet adipiscing elit. Praesent eu odio erat, ac imperdiet justo. Nullam elementum enim et nulla tristique quis sagittis .

Module Class Suffix: "box2 fa-envelope-o"

"box3" style

Lorem ipsum dolor sit amet, consectet adipiscing elit. Praesent eu odio erat, ac imperdiet justo. Nullam elementum enim et nulla tristique quis sagittis .

Module Class Suffix: "box3 fa-pencil"

7 Steps to Increase Website Performance

>Vestibulum sit amet libero vel neque

Website performance is key to your survival.  Search engines are becoming obsessed with it and it will affect your SEO.  This is because slow websites mean fewer users and less happy users and thus lost revenue and reputation and a bad reflection on the search engine.  Here are 7 steps you can deploy to improve website performance the right way...

1.  Using htaccess files to cache your content

This is especially a problem with using a CMS (Content management system), since you don't design the site and rather just deploy most of the files.  Joomla is my favourite CMS.  When using components from the community you end up with content of all kinds.  I like to control content at a folder level and not from the root.  By this I mean creating htaccess files to help the performance of such content.  Static website content that does not change often should be cached!

Look at the code below... By adding these lines to a htaccess file and saving it in the folder you are telling the visitors browser that these items don't change for the specified time.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|html|css|js)$">
Header set Cache-Control "public"
Header set Cache-Control "max-age=2592000"
</FilesMatch>

I have included CSS and javascript file types here although generally you would do this for images and documents.

2.  htaccess files to compress content.

Again you can add a few lines to your htaccess files which will compress the content being delivered.  Add the lines below after the code from step 1.

# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE

You might find that this does not work on your server as each server is configured to use different methods of compressing website content.  Just search google for "htaccess to gzip content"

3.  Minifying CSS and Javascript files.

When developing your site keep 2 versions of CSS and your javascript.  One for the site and delivery and one for your development.  The one for delivery should be "minified".  This process strips out whitespace.  So your code will look like one continuous line - clearly not something you can work with.  Doing so drastically decrease the size of the file, shortening website download times for the browser.  To "minify" your code use plug-ins like firebug for Firefox combined with Googles Page Speed or any other online minify tool.  Your development copy is the one with all your spacing and tabs to help you keep track of your code and for debugging.

4.  Combine CSS and JS into one file.

Again this will drastically reduce the file sizes being downloaded, especially if they are minified.  Also, browsers have a limit as to how many files can be downloaded at once.  For clients with an empty cache, the browser must issue an HTTP request for each resource, and incur the associated round trip times. Secondly, most browsers prevent the rest of the page from from being loaded while a JavaScript file is being downloaded and parsed.

5.  Place your CSS at the top.

As mentioned in point 4, your browser waits for any javascript to finish before continuing.  Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.

6.  Reduce http requests by using sprites.

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads.  For this reason CSS sprites are becoming more and more important.  Trouble is this ones not easy to do always.

A CSS sprite is your images combined into one or 2.  Using CSS to display the right image from the combined collection.

7.  Defer loading of javascript.

Well we've said it already - javascript makes your browser take a coffee break, till its done.  Try placing the loading of javascript's at the end of you page.  Play around with this one as it may affect functionality, sometimes you won't be able to get away with it.