Technical SEO For the Front End Developer

Google has demanded more speed. Like Quintus Arrius ordering the crew to go from battle speed to ramming speed, Google wants us to deliver websites faster or else suffer their wrath.

Unlike some SEO tactics like link building, technical SEO is fully within your control. By executing technical SEO, your developers and sever admins can get your site to load as fast as possible.

Build Technical SEO Into Your Code

Your front end web developers should have already addressed on-page SEO i.e. the use of H1 tags, URL structure, etc… . What if I told you not only what they code, but how they code, will impact your site’s loading speed? Now that I’ve piqued your interest, let’s take a look underneath the hood.

Reduce File Size by Minifying the Code

Minification is the process of removing all the unnecessary spaces, comments, and css/java that could be placed in an external file. Let’s start this process by minifying the HTML. Take a look at the screenshot below . This is raw HTML before minification.

Notice all the spaces and paragraph breaks. This is done intentionally because it makes coding easier. The down side is that all that formatting adds extra bytes to the size of the file. The next screen shot is of the same site only with the code minified.

HTML isn’t the only place where we see all this formatting. These spaces and line breaks are also in CSS and Java Script files. Individually each file un-minified isn’t too large. When you start including CSS and Java Script on top of the HTML then you start racking up some savings.

Combine Multiple CSS and JS files

The next step in minification is to combine multiple CSS and Java Script (JS) files together. These files are used to add formatting and functionality to your page. Sites often use multiple CSS and JS files on a single page. This is particularly true with WordPress running several plugins. All these additional calls for multiple CSS/JS files slows down your website because of the way web servers work.

The Apache web server, which is the world’s most popular, loads files in series when called from an individual domain e.g. YouDomain.com. So everything that is hosted on YourDomain.com is loaded one after the other. Think of it like knocking down dominoes. The domino before it has to fall before the next one is triggered. If the web server sees two different domains then it will load those items in parallel which we’ll discuss later.

Combining these types of files together means the web server only has to make a single call for each individual file instead of multiple calls. Depending on how your site is coded, all these files will have to load before the user actually sees the page. That means they can be staring at a blank screen and we all know they will do that for a fraction of a second before hitting the back button. And as noted above, you can minify these files as well to keep the file size as small as possible.

Load Content In Parallel

Now that you understand how web servers load content (images, CSS, JS, HTML) , we need to trick Apache into loading your files in parallel e.g. all at the same time. For this one we don’t need to get our hands dirty with server configurations. What we can do is create subdomains where your images, JS, and CSS will be stored.

Here is an example setup:

1. Create 3 directories on your sever: images, css, and JS
2. Create DNS entries so images.YourDomain.com, css.YourDomain.com, and js.YourDomain.com resolve to the directories noted in step 1
3. Store your files in their respective directories

When you code your website you will use these subdirectories to call files. For example: css.YourDomain.com/main.css, images.YourDomain.com/header.png, etc… . This effectively tricks Apache into loading all these files at once because it sees image.YourDomain, css.YourDomain, and js.YourDoman as 3 different domains.

 

Use a Content Delivery Network (CDN) to Supercharge Loading Speed

A Content Delivery Network, is simply a bunch of web servers geographically distributed throughout the world that deliver your content from the sever closest to the person requesting it. This allows someone in Sydney Australia to get content from a sever in Sydney instead of having to wait the additional time as the file travels from the other side of the world. There are a lot of providers that offer this service. Two popular services are: MaxCDN and Amazon CloudFront.

 

Using a CDN isn’t exactly revolutionary but how you implement with your code is. Building on what we have learned about tricking Apache into loading content in parallel, we can do the same thing only this time we’ll use a CDN.

Example setup:

1. Upload all your static content to the CDN
2. Create 10 subdomains for your domain that point to the CDN. E.g. CDN1.YourDomain.com, CDN2.YourDomain.com, etc… It’s OK that they all resolve to the same place. This is on purpose.
3. When you code your site, use a different subdomain for each item.

If your site has 1 CSS, 1 JS, 3 image files you will use a different subdomain for each one:

• CDN1.YourDomain.com/image1.png
• CDN2.YourDomain.com/image2.png
• CDN3.YourDomain.com/image3.png
• CDN4.YourDomain.com/main.css
• CDN5.YourDomain.com/big.js

This setup enables you to load each item in parallel from a sever that is geographically closest to the visitor.

Speed is Only One Component

In this article we covered several ways that you can make your site load faster. These techniques are well within the bounds of front end web developers and should be a part of their workflow when designing a site. Keep in mind that this is only half the puzzle. There are also server side optimizations that contribute significantly to site speed. I’ll address those in the next installment. Just remember that speed is only one component of SEO. It’s not a magic bullet and link building with quality content will over come a slow site. With that said, SEO is about putting several small pieces together to create something bigger than the sum of its part. Take technical SEO seriously and it will add strength to the foundation of your Internet marketing campaigns.