CSS and (X)HTML lessons and tutorials

Optimisation of your website's weight

There are several techniques to reduce the weight of your web pages. The most fundamental are by taking a look at the HTML code (suppress tags and scripts that are not necessary) and by optimising images and illustrations (format and compression).

In this article, we will suppose that these two steps are done already and we will look at other methods that can be beneficious to the weight of your website: separated style sheets and the Include instruction.

CSS style sheet

a CSS style sheet is a web tool that is indispensable if you want to give a quality presentation to your website. It is part of the W3C recommendations editing internet standards.

CSS style sheet is more and more used because of its numerous advantages: it principally allows a dissociation of the content and the pages presentation, which makes them compatible with all browsers, and it also makes them accessible to diasabled users, laptops, WAP...

The most common examples for the use of CSS style sheets are the change of colors for hovered links, texts placement, change of fonts and spaces, interaction on size and forms for borders...

We won't learn how to use a CSS style sheet here, if you need more info please take a look at our tutorials here), but we will study their interest to optimise your website.

Style sheets can be written directly within the html code for each page, but also on a separate sheet, an external file (.css).

This second solution is the most advantageous since it has at least three assets:

• The HTML code for each page is lighter
• the CSS file included is placed in the cache for the index page and it makes the following pages faster to load
Future updates for your website are easier: you only need to change one file to change the whole website, no matter the number of pages.

How to use a separate CSS style sheet?

• You need to start by writing the instructions on a page that you will name for example "styles.css".
• This sheet will on contain the instructions for style and will not contain any HTML tags (as HEAD and BODY for example).
• This page will be called up with the link below placed within the HEAD of each of your pages:

<link rel="stylesheet" type="text/css" href="styles.css" />

There you go, that's the secret!

PHP INCLUDE instruction

Conditions:

• No need of programmation notions.
• Your web host must accept PHP language (PHP include will work only if the file has a .php extension)
• Your website's structure is the same for each page (example: a title, a menu and a footer)

The PHP include is a simple way to make your pages code much simpler and to make its updates easier as well.

Suppose that all the pages function with a principle close to the one below (view illustration):

• "title" part: it contains the top of your page (title, logo, banner, horizontal menu)
• "menu" part: that's where your verticla menu will be (textm buttons, synamic scripts)
• Principal part: the different content of each of your pages will be in this area
• "footer" part: for your footer (copyrights, partners, stats...)

The Include principle will be the same as the separate style sheet.

We will create the following files: "title.htm", "menu.htm" and "footer.htm": they wil be external and will be called within each page of the website.

All the pages will have the same structure (view illustration).

Inclusion syntax is quite simple: it is only a small PHP script with a few characters to place where you want the external files to appear (this document can be written in the format htm, php, txt...)

However, attention: the included files must not have a HEAD or BODY tag because they "belong" to the parent file and these tags would be conflicting.

The advantages on the Include instruction are the same as the external style sheet, that is a code that is a lot lighter and quicker and easier updates.

Go further

To go further, please read this toturial: "Avoid frames and iframes thanks to CSS and PHP" which will show you how to create scrollable pages with dynamic content.

Raphaël GOETTER
www.alsacreations.com