SEO Juice - Home

On page SEO coding

Front end & back end page optimisation

Online SEO tools Off page  SEO advice On page SEO advice

Fast PagesOn page SEO coding

The purpose of this article is to show you how to format the code of your web pages for optimal performance and speed.

Sections in this article


Introduction

The structure of your web page as well as your file system is very important. Not only to keep all your assets to the smallest possible size and in one centralised place but to also give your customers a good experience on your site and to get some good rankings too.

There is so much that can be done to boost ON Page SEO and performance that many people don’t seem to consider.

Below you will see all the best optimisation techniques to ensure that your pages have a fighting chance of beating the competition.


Cleanliness is next to Googleness

If you work as clean and as streamlined as possible in your web projects then you will reap the benefits later on, guaranteed!

To start off with, keep all your assets like images, JS files, includes and CSS in a folder as shown below.

This helps to keep your backend server nice and clean as these are pages that never get indexed, so you might as well keep them out of the way. Also, if you adopt this practice for any sites you work on then things will get easier for you, and you will work faster as you will know where everything is kept.

File structure


HTTP/1.1 requests for CSS&JS files

This is something that you need to understand as it determines how fast your pages load and how long your visitors have to wait.

HTTP stands for Hypertext Transfer Protocol and HTTP/1.1 allows you to load 2 files of the same type at the same time. The idea though is to have the least amount of HTTP request on a page as possible; this in turns lowers the Round Trip Time delays.

Example

In an ideal world you would have 1 CSS file and 1 JS file, but as we all know, this does not happen. So the best thing to do is to load the assets in 2s as shown below. Always remember to load any CSS first so that the visitor has something to see on the page whilst the JS files are loading any functionality afterwards.

If you so desire, you can load 4 files at a time very easily. The solution to this would be to create a sub domain on your website as show below.

With a sub domain, you can now load 4 CSS files at the same time then 4 JS after that. If you had multiple sub domains then you can add 2 more connections for each sub domain you have. See the example below.

  • Asset 1a - http://www..mydomain.com/assets/css/css1.css
  • Asset 1b - http://www.mydomain.com/assets/css/css2.css
  • Asset 1c - http://static.mydomain.com/assets/css/css3.css
  • Asset 1d - http://static.mydomain.com/assets/css/css4.css
  • Asset 2a - http://www..mydomain.com/assets/js/js1.js
  • Asset 2b - http://www.mydomain.com/assets/js/js2.js
  • Asset 2c - http://static.mydomain.com/assets/js/js3.js
  • Asset 2d - http://static.mydomain.com/assets/js/js4.js

Remember, you want as few HTTP requests as humanly possible so, only use the http://static method above if you absolutely need to.


Meta data, variables & H tags

This example is based on a PHP page that will be placed onto an Apache Server. The structure is a guide that works for me on my personal sites and saves a lot of unnecessary typing.

<?php
$page = "onpageseo";
$h1 ="Page Speed";
$h2 ="How fast do you think your website is?";
$title = $h1." | Off page SEO | SEO Juice";
$keywords = "tools, advice, SEO, juice, free, advice";
$description = "The purpose of this article is to show you what page speed is all about, inform you of the tools out there for monitoring your site's performance and how to speed your site up...";
include $_SERVER['DOCUMENT_ROOT'].'/assets/includes/header.php';
?>


  • Your title needs to be descriptive and less the 70 characters
  • Your description needs to be punchy and entice people to click through and come in at around 150 characters. Be aspirational, emotive and give people that desire to come visit you.
  • Keywords, humm. Google say they don’t use them. As far as I’m aware Bing only use them to catch spammers. I would say use them if you want to. Some people leave them out as it tells their competitors what keywords they are going after.

The rest of your page should have the following:

  • 1 H1 tag
  • 1 H2 tag
  • H3, H4, H5 – as many as you want

Also try and get keywords and synonyms into these tags as well, but ensure that they aid the user. What I tend to do is create variables at the top of the page that I can use throughout the page with a PHP echo command.

  • <?php echo $h1 ?>
  • Example usage -
    • <h1 title=”<?php echo $h1 ?>”><?php echo $h1 ?></h1>

This comes in handy if you have a lot of pages to write and you want to create a template to put all your content into without having to perform the same tasks, over and over again.


The PHP Flush command

There is a command that you can incorporate into your PHP pages that will allow for the screen to be updated with any visual content first whilst the JS content loads in the background afterwards. The Flush command sort of gives an impression that the site is loaded to the untrained eye, when in fact, the functionality is still loading.

To be honest with you, I’m not sure if I noticed any difference but I use it just to make sure:-)

The placement of the Flush command is shown below.

</head>
<?php flush(); ?>
<body class="<?php echo $page ?>">



Duplicate content & canonical tag

This can be a very confusing subject so I’ll try and keep it simple.

If you use query strings or UTM tracking codes like the examples shown below, then Google can class these page links as duplicate content, which in turn can affect your rankings and lose any inbound link juice to the page as it will be diluted.

  • http://www.mydomain.co.uk/sales-page.php?utm_source=google&utm_medium=banner&utm_campaign=promo
  • http://www.mydomain.co.uk/sales-page.php?news-feed-id=4

So just to reiterate, all the following pages, even though they are the same, would be classed as 4 duplicate pages.

  • http://www.mydomain.co.uk/sales-page.php?news-feed-id=4
  • http://www.mydomain.co.uk/sales-page.php?news-feed-id=5
  • http://www.mydomain.co.uk/sales-page.php?news-feed-id=6
  • http://www.mydomain.co.uk/sales-page.php?news-feed-id=7

To combat this you have to use something called a canonical on the pages that are affected by the issue above. You can do this with the aid of a PHP rewrite script that works out when a page needs the query string suffix removing or you can do this yourself manually on each page.

WARNING

If you don’t know what you’re doing with a canonical tag then find somebody that does.

If you implement the tag incorrectly then you run the risk of diverting all your website’s pages back to the homepage and getting all your pages de-indexed from Google’s search engine! That could be the end of your online business! Well, until you realised what you’ve done and waited a month or so to get back to normal.


Implementing a canonical tag

Each page that has a query string in, should have a canonical tag in the page’s header, similar to the one below. The tag itself is quite simple. It just links to the page that you are on.

Example canonical tag and placement

<link rel="canonical" href="http://www.mydomain.co.uk/sales-page.php" />
<meta name="description" content="My Description." />
<meta name="keywords" content="My Keywords" />



What happens here is that when Google crawls your site and finds a page with a query string suffix, it looks for the canonical tag for the true name and location of the page. Then any link juice from inbound links will all be attributed to the one page and all the back linking anchor text will be attributed to that one page as well.

Just to reiterate, the canonical tag is unique to every single page. NO two pages will ever have the same canonical tag. Ever!


Image management

Websites have many, many images and quite a lot of them can be bloated, causing increased load times, extra HTTP requests and unused keyword usage. To get full use out of your images, follow the steps below.

  • All images, where possible should be less than 25k. Some mobile devices will not cache images over 25k in size, causing future load times of your pages to be just as slow.
  • File names for images should all be lowercase and have hyphens to separate words e.g. my-page.php
  • All images MUST have a Height and a Width associated with them to improve page rendering times.
  • Use image sprites where possible to decrease the number of HTTP requests for hover images etc.
  • Give your image a meaningful name like diving-watch.php, to add to your on page keyword density. When your images get crawled they will also appear in Google’s image index and could lead to additional traffic to your site.
  • Also, give every image an ALT tag description like alt=”Diving watch”. Many people forget the simple things that all increase on page SEO.

See the image section in the Page Speed article for an easy way to get pre-compressed versions of images for you to upload straight to your website.


No on-page CSS styles

There should be no on page CSS styles in your web pages. This includes styling on elements and at the top of the page in the style tag.

CSS is kept in a style sheet for a reason as it cascades throughout your website from one central location. Extra CSS in your pages will increase their size and cause confusion later on.

Do yourself a favour and don’t do it:-)

Did you know that CSS put directly into your HTML and PHP files will overwrite classes and ids from the main styles sheet?

Leave a comment


TechSEO360

With TechSEO360 you can
do all your website auditing
in one amazing tool! And, it's
FREE for the 1st 500 pages! Show me

Keyword density

Increase keyword density
in your pages and see
how to monitor it.

Show me
Create an RSS feed

Understand the power of
RSS and your social media
efforts will be made easier!
Show me

Page Speed

Are your website visitors
having to wait more
than 2 seconds for
your pages to load?

Show me
CSS 3 Buttons

Graphics are large in size
and slow the page down,
CSS3 is faster!

Show me
TechSEO360

With TechSEO360 you can
do all your website auditing
in one amazing tool! And, it's
FREE for the 1st 500 pages! Show me

Articles

My SEO ramblings can
be found here as and
when I have something
to say.

Show me
Get your domain name here