How to optimize the loading of a website?

June 2, 2008

The speed of loading a website depends on many factors:

- Flow internet user

- Capacity bandwidth provided by the host

- Weight and number of objects in the pages

- Site Design

- Etc ...

As everyone does not have a dedicated hosting comfortable (in my case with FREE accommodation in when I win the lottery I'll think), optimizing a website is necessary (heh heh attention, even if you have a super server, it does not mean that we can implement like a pig!) to make navigation more user-friendly and attract (or at least keep) visitors on its site because of boredom before a Waiting too long can quickly become detrimental.

This article will give some ideas to analyze and improve your site by optimizing its load:

Analyze the loading of your site

Before putting your hands dirty, start by analyzing the critical points:

Firebug : Firebug is a plugin for the browser Firefox to analyze the weight and load time of the objects that make up your website, it provides a set of reports on your site. An example:

YSlow : This plugin requires Firebug and advise you by showing you how to optimize your site, you now choose your areas of optimization.

http://tools.pingdom.com : The same kind of tool Firebug , but for online use. Just to get an overview so ...

Finally, you can also install tools that can simulate a flow smaller than yours so you realize the reality of some users (not everyone live in Paris or Lyon, and I do not think that Those on plain (I'll let you look where that is) we have the same speed internet).

Optimize CSS

Smarty : Smarty is a tool to clean and optimize CSS file, you can test the online version of the tool , I tested a style.css file of 11KB, which now weighs 7KB, this is something gained ...

Other tools to optimize CSS: CleanCSS , cssoptimiser

Minimize Javascripts

JSMin : The same as for CSS but Javascript files, the code is reduced, the bandwidth is happy!

Some practices that I used (or will use) on my site

- Enable compression of HTTP responses, for my Wordpress installation I installed the plugin for Wordpress gzippy

- Use common sense: widgets, inclusions of YouTube videos, commercials, etc ... it's nice but you are dependent on a functioning of a third service. Use sparingly so! (I will think about removing or not my MyPageBlog widget in the sidebar)

- When using images, choose the right format (do you need a format that supports millions of colors if only four are present in the image), the right size (note for example when you resize a large image to display in miniature).

- Consolidate CSS into one to avoid multiple loads

- Consolidate JS files (when possible) and include them in the end page, the page will load first and JavaScript thereafter (again, when possible)

- Audit queries to the database that display data such as titles, authors, etc ... values that can sometimes be hard-coded (I mean ... sometimes hard coding is not a good practice in general)

Conclusion

You may have noticed, website optimization is a long process, I will also surely on this ticket to add or edit the contents of this post according to the results of my research and my work on this site.

If you also have some ideas, tools, links, let me know and I welcome your comments on topic.