Powering up your SEO

Posted on Wednesday, March 7, 2018

Gareth Parker

Our head of development shares his technical tips for putting your best digital foot forward when it comes to technical infrastructure and speed for your site.

Continue reading
Get updates from Miramar direct to your inbox

Technical infrastructure is important. It may seem like a trivial part of web development that sits behind the site, but it can have a huge impact on your SEO. As a web developer I can’t help but inspect the source code of pages I’m on to review how the site has been put together. It may seem like a nerd’s obsession with code, but it’s these small obsessions that make all the difference.

Back in 2015, Google changed their logo – a small series of changes that meant instead of loading 14,000 bytes for the logo it now only requires 305 bytes. That’s a saving of 13695 bytes, or a reduction of 98%. But why does it matter? After all, we’re talking bytes here, not petabytes, or even megabytes, but when you’re pumping traffic all the way around the world a 98% reduction in a single asset can save terabytes per day at a company the size of Google.

But it’s not all about file sizes, it’s also about how fast those assets and pages can be served up. I’ve provided some tips below on how here at Miramar we approach these problems on our web projects for clients.

CMS choice

WordPress? Drupal? MODX? With thousands of different systems out there to choose from it can often feel like a lucky dip to picking the right system for your current and future requirements. Do you go with WordPress and its backing of literally thousands of templates and plugins, or the modularity of an MVC framework like Drupal, Joomla, or MODX? Or the integrated marketing capacities of a closed system like HubSpot? Here at Miramar we believe that the choice should be yours. We don’t lock you down to any particular platform, but we are happy to advise on what we feel would be the best solution for your requirements. We’re going to be going into more depth with this in a future post, however for now here are my top five questions you should ask yourself when choosing a CMS that will help you put your best technical SEO foot forward:

  • Does it meet my needs now for SEO, and will it meet my needs in the future without extensive development?
  • Do I have flexibility to edit the HTML mark-up that is output for every single element and part of the page?
  • Will it follow SEO best practices for functionality such as redirects, page URLs, and title tags?
  • Will it handle my expected throughput of visitors, and will it scale well in the future?
  • Was this system designed originally for the purpose I wish to use it for?

 

CSS placement

Once you’ve chosen your CMS and put some content in, it’ll need to be styled. Many CMS systems support theming and often come with default themes or free extras you can install. But is it worth it? A pre-made theme often will not be optimised for SEO and may be using sometimes in excess of 13 CSS files. I feel there is speed in being streamlined, and as such we pride ourselves on building custom templates for each client. But even if you have got only a single CSS file, is it even worth calling that CSS file externally? Here at Miramar we’ve started embedding the CSS directly into the page and have seen excellent results from doing so. Our first trial was on this site and as you can see if you’ve already inspected the code for this page, we no longer rely on any external CSS calls other than for TypeKit for our chosen font. This has increased our page load speed significantly as the visitors web browser no longer needs to make a second request to the server for the CSS file, and certinally not another 13!

 

TypeKit

Whilst we’re on the subject of TypeKit, they have recently updated their embed code for sites to be a CSS call instead of the old style JavaScript call. This is important because this JavaScript within the header can be render blocking and cause both speed issues and issues if the TypeKit site were to go down. This is a great improvement that we applaud Adobe for, and if you’ve not already done so, go grab the new code.

 

JavaScript

With multiple services or even your own scripts relying on JavaScript it’s important to be sure that it’s being loaded at the correct time during the page load cycle. In another test on this site we’ve changed from loading our JavaScript using standard script tags to instead loading them using inline JavaScript that triggers only once the rest of the page has loaded. We’ve seen no loss in functionality, but a huge increase in our page render speed. Another common option is a JavaScript require library like such as RequireJS, and whilst this adds a huge level of flexibility, it can be extremely complex to setup if you’re not a developer.

 

CMS/Server Caching

If your CMS doesn’t have it built in or doesn’t have the option of adding it relatively easily then you’re already behind the game in SEO. By getting your CMS to keep copies of your pages, images, or functions within memory you can increase the speed of your site. Instead of doing database queries for each request to find the contents of the page the server can instead simply serve up the copy it has in memory. All systems will implement differently, and if your chosen system doesn’t support it then you can use a system such as Varnish or Redis on top of your CMS to increase your caching ability.

 

Browser caching

Setup your CMS to server assets appropriately. If the page or PDF isn’t going to be replaced soon, then set a high caching time on it. Don’t force the browser to constantly reload your company logo each time you visit a new page, and where possible be sure to always use a compression engine such as gzip to serve your pages and assets.

 

CDN

Content Delivery Networks (CDNs) sound like mysterious beasts at times, but they’re not. At their core, they are servers that store copies of your assets and serve them to end users with high availability and speed, and they’re fantastic when they’re used correctly. When they exist as part of larger systems that integrates Web Application Firewall’s (WAFs) they’re even better. They reduce the pressure on your server and can serve up commonly accessed files often much faster than your own server can, and they provide a level of infrastructure redundancy to your site. We work with some of the largest CDN supplies, such as CloudFlare and ZenEdge to increase your site delivery speed and security.

 

CSS size

CSS files can vary in size greatly. Currently, our CSS file for this website is 275KB, and we’re pretty happy with it. But unless you plan your CSS carefully and use a system such as SMACSS then it’s easy for those sizes to balloon. For example, it’s common for a site to use the web font framework FontAwesome. But how common is it to use the full list of icons? Pretty uncommon. So why include them all in your CSS? Within our build system we slim down the FontAwesome file down to just the elements we need, saving up to 200KB.

You should also always be minifying your CSS because it will greatly reduce the file size, and as mentioned before, you should aim to have only one CSS file for your site. If your CMS system is outputting your page and has included 12 extra CSS includes for extras you should really consider if that system is going to provide you with the best chance of SEO success.

 

Conclusion

Sounds easy, right?! Well, here at Miramar our team of developers live and breathe this stuff. But if you’re not comfortable or feel you’d like more advice on how you could improve the speed and SEO of your site, then contact us.

Recent blogs

Like what you've read? Let's get started

Tell us what you need and one of our experienced team will get straight back to you to discuss your objectives and how we can help you achieve them.

Chat to us