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.
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.
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.
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.
Add it to the header
Optimizing existing …
- Call elements
- Consolidate styles with different classes
- Place CSS in header so it doesn’t have to make a separate call
- Using SASS
- Remove what’s not needed/used
- Consider including it on page instead of making a separate call
- Place at the end of the page (unless you can’t)
- HMTL5 elements that convey meaning: article, aside, footer, header
- AMP Project
- Validate HTML
- Validate Structured Data