Google Webmaster Guidelines > Blog

HTML Document Head – Ordering Elements for Page Speed

September 25th, 2012 by Patrick Sexton

The head area of a HTML document contains some really important things. There is of course the title of the page, the meta data such as “description”, and the calls to your external CSS or Javascript files.
The order in which you place elements in the head can drastically change how fast your page displays in web browsers.

<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Your page title</title>
<meta name=”description” content=”your page description.” />
<meta name=”Keywords” content=”your keywords” />
<link href=’your css file’ rel=’stylesheet’ type=’text/css’>
<script src="your js file"></script>
</head>

All of these things either tell a web browser how to display your page or tell search engine spiders a little bit about what your webpage is about.

These are both very important things. You would think then that we would pay close attention to this under appreciated part of our webpage, but it often becomes a jumbled together place in our static pages or a strange mysterious place in our wordpress pages.

Below is a representation of how your head elements should be ordered and why.

The Head element

Let’s start by opening the head…

<head>

 

Character encoding

The next line should be the character encoding…

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

Why? In order for a web browser to display your webpage it needs to know what it is dealing with. Setting the character first allows a web browser to just move forward and display your page, with out it, it has to “guess” and take other steps. With it, it just can move on and display your page. note: Your character encoding may be different than mine so don’t just copy and paste this one.

Title and Description

Next we can place a title and description meta tags, let’s place the title first and the description next so we have some order to our pages and we can quickly see what our page is about…

<title>Your page title</title>
<meta name=”description” content=”your page description.” />

If you choose to use the keyword meta tag, place that next.

<meta name=”Keywords” content=”your keywords” />

 

External CSS

The CSS should go next. This very important. Always put your CSS and calls for CSS prior to other external calls for other files like javascript. If you call a javascript file before your CSS the Javascript has to download before anything else can happen (like displaying your webpage).

<link href=’your css file’ rel=’stylesheet’ type=’text/css’>

If you put the CSS first, the CSS and other files can be downloaded in parallel (at the same time) whereas if you call for javascript file first, the same files have to be downloaded one at a time. This creates sometimes massive speed changes. Always call your css before your javascript files.

External Javascript

Now that our CSS file is being called we can call for our javascript without messing anything up…

<script src="your js file"></script>

Close the head

Now we can close the head like so…

</head>

A well ordered head section

Let’s put it all together now…

<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Your page title</title>
<meta name=”description” content=”your page description.” />
<meta name=”Keywords” content=”your keywords” />
<link href=’your css file’ rel=’stylesheet’ type=’text/css’>
<script src="your js file"></script>
</head>

There are many things that can be placed in the head of an HTML document, but following the above few rules will help speed up your webpages and make your code look better and easier to use.

Leave a Reply

You must be logged in to post a comment.

Author

Patrick Sexton

This blog is written by Patrick Sexton, who has been helping webmasters with the Google Webmaster Guidelines and other issues since 2005.

blog

tools

see all webmaster tools

Google resources

  • Webmaster Help Forum
  • Help Documentation
  • Webmaster Central Blog
  • Webmasters on YouTube