How to Speed Up Your WordPress Website and Why It Is Essential

Making your big debut online is more than just designing and developing a website that looks as pretty as a picture, your WordPress website needs to be functional, user friendly and, more importantly, fast! Think back to the times when you have tried to purchase goods or discover more about a business’ services – what was your biggest bug bear?

Slow loading WordPress Website page speeds are one sure-fire way to make browsers, a large proportion of which may be potential customers, switch off and move on over to the websites of your competitors. Retail giant Amazon reported an increased revenue of 1% for every 100 milliseconds of site speed improvement, so why shouldn’t you realise improved profits through your online platform too? Google is now also factoring in site speed in its ranking algorithm so a faster site could in fact mean better visibility across the web.

Decrease your WordPress website’s page load time dramatically, increase conversions and improve your SEO rankings to keep you and your customer base happy by implementing the simple steps below, just like we did on our website, which now has a Google PageSpeed score of 98/100 on both Mobile and Desktop.

Step 1: Begin with a baseline

When completing any upgrades to your website, it helps to know exactly what you are working with. Pingdom and PageSpeed Insights (a handy tool from our old friend Google) can both be used to analyse the current state of your website speed and in turn make load times faster across all devices. Simply enter your web page URL and hit test now or analyse to see your results.

Both Pingdom and PageSpeed Insights will give you in-depth analysis regarding the items on the page (such as images and files) and how long each item is taking to load along with a score or performance grade out of 100. PageSpeed Insights goes one step further to offer suggestions regarding how you can speed up both your desktop and mobile sites.

Step 2: Reduce HTTP requests

Everything you see on screen has been delivered by requests to a server from the browser. If your web page contains images, then for each image a separate HTTP request is sent. However, by converting smaller images into CSS sprites (essentially one image), you can limit the amount of requests thus improving load times. Where CSS sprites aren’t appropriate and image tags are required – for example, when content is generated dynamically through WordPress while constructing a post and adding a featured image – specifying the height and width attributes of the image will ensure the browser can lay them out and read the document as quickly as possible.

In addition to this reducing database calls is a vital part of the equation, and these should be replaced with static HTML where possible as browsers can read HTML must quicker than PHP and calls to the database. Combining multiple external scripts into one (including JavaScript and CSS) can also reduce the number of browser requests significantly.

Step 3: Minify JavaScript, CSS and HTML

Every piece of code contributes to the size of your web page and the bigger your web page is, the longer it will take to load. When using JavaScript, CSS or HTML, line breaks, extra spaces and indentations can increase the length of the code and the size of the page significantly. By removing these items from the code you can make it easier for the browser to read, with minifying turning several lines of code into a neat and easy to read few.

Avoid minifying code that you edit on a regular basis as completing changes will be more time consuming and difficult as whilst the code is easier for the browser to read, the lack of line breaks, extra spaces and indentations will make it a challenging read for you.

Step 4: Enable Gzip compression

Whilst the addition of high quality content to a web page makes it great for SEO, pages over 100kb can be particularly slow to load, however, by enabling Gzip compression you can have the best of both worlds. Gzip is a handy tool that decreases the bandwidth of your pages, whilst lowering the number of HTTP requests. According to search engine Yahoo!, compressing large pages using Gzip can reduce download time by up to 70%.

Step 5: Self host fonts

Using fonts hosted elsewhere adds another costly HTTP request than if you were to host the font on your own server. Fonts hosted locally give you more control as these fonts can be stored in the cache meaning no time has to be spent making requests at all!

Step 6: Lazy load images

Loading images that your visitors aren’t using can significantly slow your site down, particularly if you display a large amount of generously sized images on site. Lazy loading can be used to improve load time by loading the images that are only visible to the user. Lazy loading can be unlocked through manual coding whilst plugins are also available for WordPress sites looking to lazy load with no coding required!

Step 7: Don’t forget the mobile site

With many consumers browsing on the go, having a functional and fast website doesn’t just apply to desktop users. Due to launch on 21^st April 2015, the upcoming Google algorithm change will shine the spotlight on mobile sites and penalise the websites that don’t take on this mobile friendly mentality. According to a recent study around 50% of your traffic is from mobile devices, meaning websites that don’t move with the times to improve their mobile AND desktop sites will be missing out.

Improving the speed of your mobile site is just the start, whilst amending issues like this can also improve your SEO rankings and conversion rates. Complete a mobile-friendly test to check your results and find out how you can up your score long before the algorithm comes into force.

How to Speed Up Your WordPress Website and Why It Is Essential