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.
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
Time is not on your side.
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.
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.
- 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.
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.
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.
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.
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.
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.