findable-sites Findable Sites

HTML Code Optimization

The Importance of Code Optimization

In the early days of the Internet – before CSS was extensively used for layouts – tables ruled the day. Most layouts were made up of an endless nesting of tables within tables. It was the only way anyone knew how to create a columnar or complex layout with HTML. The only other alternative available was to use Flash.

Table based layouts created two problems. First, they were difficult to update. Web designers dreaded having to make updates or revisions to a site using nested tables, especially if they weren’t the ones that originally designed it. In many cases, changes that are simple to make today with CSS could take days and sometimes weeks to complete. Second, nested tables combined with individual row and cell based inline styling created a lot of HTML code.

Modern CSS, a push for better web design practices and a need for responsive layouts helped bring nested table layouts (and Flash) to near extinction. This helped to significantly reduce the amount of HTML needed on a page. However, in spite of that change, the increase in Internet speed, screen sizes, content and ads, layout and style possibilities (thanks to CSS) and JavaScript has exploded the amount of code used to render one Web page.

Every extra CSS and JavaScript file, and line of code in those files, contributes to making your pages load slower. While it may seem insignificant, every second, even millisecond, matters when it comes to usability and ranking. This is especially true when it comes to sites you’re in close competition with.

Start with the Layout

Note: This sub-section requires a working knowledge of HTML and Web Design.

Most sites are poorly coded and use an excess of HTML. The best way to optimize your HTML is to start over.

Step 1: Divide

For each column or main section of content, create a DIV container.

Division HTML Example

Step 2: Recreate

Using CSS, recreate the layout, ignoring the superfluous styles. Use as little CSS as possible to mimic the the size and structure of your current site. For layouts that are more complex than one column, you may want to use a custom download of Zurb Foundation or Bootstrap to create responsive columns.

Step 3: Apply Semantics

For each DIV, apply semantic HTML elements. For example, the Living Standard HTML (aka HTML5) specifies several attributes that denote meaning, and semantic meaning is useful when trying to explain context to search bots. They include:

The general structure of your code should look similar to the following, along with the content and CSS you added during Step 2.

Semantic HTML Example

Before you go any further, add some copy into each division, and test it on different browsers and operating systems (as in Mac and Windows) to make sure your code renders correctly. You should also test it for mobile devices. You can use Chrome Developer Tools to test different mobile devices.

Chrome Developer Tools

If your ability to test is limited, you can use a service like BrowserStack or consider running virtualization software like Parallels, VMWare or VirtualBox.

Optimize the CSS

Add it to the header

Optimizing existing … 

Evaluate the JavaScript

Add Structured Data (Communicate Meaning)

Validate Everything