UX Design tricks: Make a Word Press site load at Jet Speed

UX Design tricks: Make a Word Press site load at Jet Speed

We are all aware that a large percentage well above average, of websites on the internet are built on Word Press and other CMS. It is only a sweet melody to have your website running at jet speed and gaining traffic. Getting your website to rank high is a burden on its own, not to talk about a slow website,which is so much pain to any User, bad User Experience is No rank on search engines, which results in low traffic and defeats the purpose of pushing your blog contents online; too much sadness to take in, all at once.

2preview.jpg I was poised with an eCommerce website for a client, built on Word Press with their main concerns tailored around low sales and traffic. it turned out the load time was over two minutes; like a whole 120 seconds plus and the UI and responsiveness was a huge NO, i will share the quick fix i made that brought about over 500% increase in load time and pushed the page to rank better. Lets get the ball rolling.

bowl.jpg Firstly, We need to measure the Speed of the website, so we can ensure after all this hacks, we are assured of a drastic change and you can have something to show in the face of your client. I recommend Pingdom and GTmetrix to measure the speed of your website, take screenshots of the speed results of your website like the Homepage, about page , article post, product page etc, and save them somewhere, we will not compare them with each other but we will compare their before and after speed results.

We will be doing what i call the “plugins resurrection”, yes the plugins will all die and then we bring them back to life one after the other. Go to your plugins and disable all of them, then begin to install them one at a time and each time keep checking the speed result for any of the pages of your site, when you notice a substantial difference in the load time, then the plugin that caused that major difference should be disabled and alternative plugins if necessary, be used to replace it, also ensure this new plugin does not have a huge impact on the load time. Wheeew! now that we are done with that, which took a heck of a time to accomplish, we now proceed to the image optimization.

4preview.jpg IMAGE OPTIMIZATION: This simply means ensuring the images on your website are all reduced to as minimal as they can be on the site, this can be done in various ways, such as, using Adobe Photoshop or any design software to reduce the pixel and quality of each image, but this will not do justice to the size of the images as we expect but can still be done. I recommend a plugin to be installed which is Imagify ; this reduces the image size by two-third of its original size, which is a whole lot, i must say. Some other Tips to image optimizations; never use gifs on your websites and if it must be, including videos, ensure they are hosted elsewhere and just embedded on your site. Also, ensure you use jpegs format except is compulsory you use transparent backgrounds, then your permitted to use .png format. Now your website would have experienced a ton of improvement on its load time, but there is more to this, next we get to use the cache for any website, yes you read that right😀.

This is totally free, super easy to setup and install, Word Press design ladies and gentlemen, i bring to you the WP SUPER CACHE 👏👏👏👏👏, this stores cache versions, that is previous pages visited by any user on the website and so each time the user revisits the site, it loads the cache version in split seconds without reloading the page again. Giving a huge boost to the load time, especially if your not adding new content steadily on your website. We move to a bit of Front end code stuff, is time to get dirty.

5.preview.jpeg No need to get scared, the reason for using CMS is to reduce the amount of code you write as a Designer 😂. We will not be writing any code, but this is similar to Webpack , this is called the Autoptimize ; it is a plugin, that allows the CSS and JS files of your site to load last at the bottom,after the content loads, which takes up much of the site speed when loading. Also, it minifies the CSS and JS into a single file, thereby making the load time to hit a boost. With all this said and done, this fixes will work on any WordPress site and give a boost to the load time, now aside from all this back end tips that will be required to be done, another major factor to consider is the User Interface; which deals with the layouts and typography , also the interaction within the website especially the homepage. Lets not forget the aim of your project is to get traffic and thereby convert this visitors into customers, if your website loads fast but has poor UI and poor interaction flow, it still will not get the desired result you aim. Now, go back to those speed testing sites mentioned earlier and check the load time, you can do well to leave a comment with links or screenshots attached here or send them to me on twitter , as i would love to see the improvements you made. 6.preview.jpg Quick tip: if you can not design a pretty User Interface that achieves this purpose, you can look out for a UI/UX designer like myself and hire one to give you a clean Layout and interaction flow of your website. If you can design this, then ensure the pages with the highest traffic which can be measured with any Page analytics tool such as Google Analytics, be optimized to have a concise representation of what this page needs without beating around. The major things to look out for are:

Ensure your call-to-actions are as vivid as possible and properly placed.

The website is very responsive across all devices.

The fonts are updated and its icons are displayed appropriately.

The flow from one page to another are direct and relevant to the previous page.

You can visit my behance , to view the difference made on this website,where i published this design or visit to test the website and share any fix,i may have missed.