How to create a top performing WordPress website.

How to optimise a wordpress website for maximum speed

Hello. In this post I will guide you through the steps to achieve an exceptionally nice speed and optimisation result about your WordPress website.

Prerequisites:

If you are just starting off with WordPress, I recommend you still reading this article even though you may won't be able to implement everything in it right away. The parts you don't fully understand are good indication where you may need to do further research. Apart from WordPress, I assume that you have basic knowledge in HTML, CSS, Javascript, jQuery and PHP.

If you wish to confirm the result regarding to this website yourself, click on this link

Why this tool

There are many website speed checker tools out there. Let me say a few words about Google's own tool, why it is the best and why I am not using it for this article. Google's Page Speed Insights stands out of the crowd for multiple reasons. First it is developed by Google, second because it is very accurate. The reason I am using a different one for this article is because in my opinion Google Page Speed Insights is not really for beginners - again for multiple reasons. It is very "picky" and the result can be discouraging even if you are doing a good job. The descriptions given by Page Speed Insights are often confusing.

I like website.grader.com for its clear visual representations and a little bit more realistic approach. While Google thinks it is a good idea to tell you you could have saved 153 bytes by reducing your image size on 15 images, in the reality you don't want to have 15 versions of your images just to better satisfy Google.

So I have lost 3 points out of 100 on Hubspot's Website Grader on this website. Let's start with the things I am missing out here and let's see why.

The 3 lost points

"RENDER BLOCKING
Time is not on your side.
Remove or defer JavaScript and CSS that interferes with loading above-the-fold content."

What it really means is that on this website there are external stylesheets and javaScript libraries load before the html is displayed. Loading those external files take time (valuable milliseconds). If I would add the links to those files in the footer, I could make 100%.

So why not?

CSS: It is never a good idea to let a web page load without a style sheet load first. If the user has a slow Internet connection, then he/she will actually see the content displayed with plain default browser formatting. (the one you may remember from the early 90-s). I rather make my visitors wait 4 milliseconds longer than displaying the site unstyled for even a moment.

JavaScript: On certain occasions I want external javaScript files load in the header. While best practice is to load javaScript in the footer, small but essential scripts are better in the header. The scripts that are essential for your page to work correctly (and their absence would completely ruin the user experience) are better be loaded before anything else even though they add another millisecond to the loading time.

 

What has been done right...

Ok that's enough on lost points. 🙂 Let's see the exciting part.

Before we look closer, let me present you with my hybrid work flow that include WordPress but does not rely on plugins or ready made themes. ...apart from some absolutely time saver necessities.

So what you need:

  • Clean WordPress Install: You can download the latest version of WordPress from http://wordpress.org.
  • Clean Slate Theme: If you have been working with WordPress for a while, you are probably familiar with the theme repository. Search for Clean Slate and please do not let it scare you. I know it looks very plain. It won't bite and in no time at all you will be able to make it anything you want.
  • Plugins: The essential plugins are Advanced Custom Fields, Custom Post Types, Siteorigin page builder, Google XML sitemaps and Really Simple SSL. That's it for now.
  • Libraries and resources: I typically include Font Awesome, Twitter Bootstrap, PHPMailer and TCPDF in my clean wordpress install.

If you have done everything right, you have an ugly plain looking WordPress website without any content that is not formatted at all. 🙂 Well done!

Now you build your website...

Let me assume that you already have a Photoshop website design, content, images and site map handy. You should also be familiar with the WordPress Template hierarchy. (if not, check it out)

Blank Slate template is an excellent starting point developing your own theme since it only contains the bare bones of a wordpress theme. It saves you lots of time on not having to name your files or write your must-have functions from scratch. What you don't need however is fancy back-end theme control, additional recommended plugins or trillions of predefined styling options in case you later change your mind. These are only good for slowing down your page before you actually start adding content to it.

Recommendations:

  • Have custom javaScript files for your specific pages when needed. On this website, the Project Builder is using many scripts that have absolutely no use on any other page. If you add an event listener to a non existing dom element, it still takes time for the browser to declare that it is not found on that page.
  • Have only one css file. It may sounds odd since it is the opposite to what I just said about javaScript, but it is absolutely on purpose. It takes very little effort (processing power) to read through a css file and apply the rules on your site. To go out, find another file and load it requires more time, so it is still better to load a longer style.css with half of the rules never used on the page than separating your styles.
  • Write your custom php code. Probably the best thing about WordPress is that it does not force you to use templating and routing like MVC frameworks. You can specify a template file following WordPress's naming conventions, add your wordpress hooks, use custom wp queries, add custom sidebar or do whatever you like while still writing all your specific code in plain php. Templating engines like Smarty, MVC frameworks like Laravel or Symphony are great but not for our purposes to build a website quickly, easily and with a fully functional user-friendly back-end. A templating engine need to load first, so does a router. With WordPress however once we have our wordpress core loaded, no more time has to be wasted adding more layers to the stack.
  • Minify! Once your shiny new theme looks as in Photoshop, you are getting closer to your goal. Now minify your css and javaScript files. There are many tools on the web to do this. My personal choice is this but feel free to go with any. Save your minifed files as (original filename).min.css and (original filename).min.js files and change the links in your enque hooks in your functions.php. If you see no difference on your website, you are good to go.

Optimise your page for SEO

  • Use only one h1 tag/page. It may seem obvious but worth mentioning that h1 tag is for page title only. You shouldn't have more than one page title on a page. Technically you can add as many h1 tags as you like but it is highly recommended not to do it.
  • Add Meta descriptions. Meta descriptions are used by Google in more than one ways. The most important is that they often displayed under the title in the search results. Make sure to take some time adding meaningful  meta tags to your pages. Find what Google has to say about it here and here.
  • Add titles to your pages. Similarly to meta tags, title tags are also doing good to your SEO efforts.

Responsive design

Mobile and tablet layout is a must on all modern websites. Add @media queries to your style sheets and specify as many layouts as you need. On this website, the header has 6 completely different layouts as I believe it is a good idea to fine-tune it. Search engines like mobile friendly websites just as your visitors do.

 

External optimisation

Browser caching:

You can (and should) specify how long will your web pages be cached in the browser. Loading a saved file takes almost no time compared to downloading it from the web. To control this, you need to modify your .htaccess file located in the root folder of your website. Read this article about the details.

SSL Certificate:

If you will process card transactions on your website, then you don't have option not to install an SSL certificate. It is basically the protocol encrypting all outgoing data from your website. So if it sends data to a bank while validating the transaction, the packages surely need to contain the card details including the security code somewhere. Hackers are out there watching and catching those packages. You can prevent this by using an SSL certificate. On this website there is no credit card processing going on, but I still decided to install SSL. The reason is to help me with SEO. Your website scores on security and search engines will pick up on it. The installation process has become much easier these days as well as the prices are much friendlier than they were few years ago.

Check out this website.

Once you have your ssl certificate, your website will be accessible through https protocol that stands for httpS(ecure). You need to make sure that all internal links are updated. I recommend using really simple SSL WordPress plugin that is exactly what its name suggests. It requires no setup to do the job perfectly.

Sitemap.xml

You can help the spiders (Google's crawling programs that read through your website before indexing it) by explaining them your website structure in their language. This is sitemap.xml. To keep an up to date version of this file in the root folder of your website, install another wordpress plugin. Your job is not done here with your sitemap. You also need to send it to search engines. Find our more about this here.

That's about it...

If you followed along and used my practices, you have a very good chance to get similar results by testing your site. If that is the case or you have any question, please do not hesitate to email us/me, give a call and/or leave a comment in the comment section. Thank you.

Write a Reply or Comment

Your email address will not be published. Required fields are marked *