Are you an experienced freelance, full stack developer, who loves building things for WordPress?

Codeable needs people like you!

Do you have a special relationship with the WordPress Codex, dream about coding standards and are able to build your own custom plugins from scratch? 

Do you work well with clients, have amazing communication skills and can solve the most difficult of WordPress customisation problems?

Want to be part of the best WordPress outsourcing platform in the world? Then Codeable wants you!

If you’ve followed this blog over the past few years you will know how joining Codeable changed my life. Well, now is the chance for you to experience the same life changing experience, by applying as a Codeable Expert developer.

Codeable is currently looking for expert WordPress full stack developers who love building elegant plugin or theme customisation solutions for clients around the world. If this is you, and you want to join the #1 outsourcing service for WordPress, then apply today.

P.S. I don’t get anything out of this, other than the satisfaction of maybe helping someone else become part of the Codeable family.

P.P.S if you don’t consider yourself a full stack (hardcore coder) developer and more of a WordPress developer (website builder) then you should also apply. I just happen to know that Codeable is looking for full stack developers at the moment.

New focus in 2019.

Usually, towards the end of a year, I start looking back at the year that has been, and looking forward to the year ahead, planning my new goals and resolutions.

This year, however, I have one very specific goal in my head. It’s an idea that actually birthed itself way back in July of 2016, when I wrote a post about why I got into development and blogging about development, in the first place. 

2018 has been a year of personal goal achievement and so for 2019 I want to get back to sharing my (limited) knowledge and experience with others, to assist them in achieving their goals, both personally and professionally. So with that in mind I’d like to announce a few changes that will happen on this blog and my podcast, and a few other additions I’m making that will hopefully help support my efforts.

The Jonathan Bossenger Patreon

I have retooled and relaunched my Patreon page. The goal of this page is to give those of you who read my blog, listen to my podcast, or generally follow me online, the ability to help fund my work. I get a lot of folks asking questions in the comments area of my blog posts, and I’d like to be able to spend more time in helping them solve the problems they present. The Patreon is the perfect place to do this.

If you’d like to be able to get a little more out of me, from answering your questions to helping you solve your WordPress or web development problems, or you want me to write about specific experiences or topics, or even interview specific people on the podcast, the Patreon is the perfect way to have your voice heard. For a small monthly fee you can help me bring you the kind of content you are looking for.

The Jonathan Bossenger Mailing List

At the bottom of every blog post there is a ‘subscribe to my mailing list’ form. If I’m honest I’ve not really used my mailing list to it’s full effect. I intend to do so moving forward. I promise I won’t bombard you with rubbish, but I will select a few useful topics or articles, from either my blog or the web, that I think you will find useful, to send to you, no more than twice a month. 

I will also use this mailing lists to announce any new exciting things I am doing.

A new focus for the blog.

You may have noticed that I have been blogging a lot more the past few months. This is because I’ve recently started working with a copywriter, who is helping me get my content out there. While I will still use this blog to share my personal experiences, it is my hope that with the assistance of the copywriter I will produce more useful and relevant content to my readers.

WP HackerCast – Season 2

If you were a regular listener to the podcast, you will have noticed things went very quiet after episode 18. This was mostly due to not really having enough time to find guests and prepare podcasts. For 2019, and with the help of my Patreon, I hope to relaunch the podcast with more interesting guests and interviews.

So, if you like the sound of all this, and you want to be more involved in what’s happening here or on my podcast, then please consider becoming a Patron, subscribe to my newsletter, or visit and subscribe to the podcast.

The evolution of a work space

It’s amazing how stories mutate. What started as a simple ‘this is my setup’ post, then turned into a ‘what a day in my life looks like’. This morning I woke up and realised it might be more interesting, and less braggy, to look at how, and why, my workstation has evolved in the last two years, since I moved from office worker to freelancer.

A long, long time ago…

First, a little background. In 2011 I moved from being employed to being a combination of self employed (in the business my wife and I run together) and contract worker (at a local web development agency called Reamdigital). This meant I was working half the time from on office and half the time from home. This lead to me purchasing my first ‘developer’ laptop, a 17 inch Dell Vostro with a Core i5 processer, nVidia graphics, 16GB of RAM (manually upgraded) and a 750 GB hard drive. About a year later I upgraded the hard drive to a 500GB SSD and put the 750 GB drive into an external housing, but that laptop lasted me for a good 5 years in that configuration.

This laptop replaced my then current desktop computer, which I had custom built in 2010, while I was still employed at a company. Using my bonus that year I built a mid range gaming computer. The original specs aren’t important, but by the time I purchased the laptop it had the original AMD Phenom II 945 processor, 8GB of RAM, a 128GB SSD boot drive, a Radeon GPU, and a 1TB Hard drive for storage. My monitor was a 23 inch Samsung Syncmaster, which my wife had kindly purchased for me as a birthday present the previous year.

Other peripherals I had purchased for the computer over time included a Logitech gaming mouse, a Logitech 2.1 surround sound set and a Logitech gaming headset. Some years before my wife got me (another present) a Microsoft ergonomic keyboard, after my previous one died.

As this computer was originally built as a gaming rig, when I purchased the Dell laptop I turned this into a media streaming centre, and played the odd game on it in my lounge. Much fun was had with my oldest when I re-discovered the MAME emulator, and we had hours of joy playing the Teenage Mutant Ninja Turtles arcade game together.

The ‘dad-station’ days

So, fast forward to January 2016 and I’m 100% freelance/self employed and working from home with a 1 year old at home all day and a 4 year old at home for the afternoon. Part of the reason I left the agency was to be able to spend more time with my boys, so I had a bright idea.

Scouring the local online classifieds, I found a second hand (this will become a recurring theme in this story) computer stand and set the laptop and monitor up in what I affectionately called ‘the dad-station’. This allowed me to work in the house seated or standing. The standing option was so that I could strap the 1 year old onto my chest and work while he sleeps, or just keep him busy while my wife tries to get some work done, or just take a break for sitting down all the time.

In the picture you can also see the Microsoft keyboard, Logitech  gaming headset and mouse, and the R2D2 bobble head I received from the Reamdigital for my last birthday there.

It was during this time that the first of a few incremental changes happened to my work setup.

Firstly, having never previously worked on the Microsoft keyboard for a full day, I discovered that the so called ergonomic keyboard I had was causing a repetitive strain injury. For whatever reason, the way I use my right little finger on the shift key on the keyboard was leading to the top joint of the finger being slowly bent to the right over time and causing pain. To this day that top section of the finger is not straight when compared to the other hand. 

While I was at Realmdigital someone suggested I look into the Logitech Marathon mouse, which I had done, and discovered it’s not only amazing battery life, but the fact that it uses the Logitech unifying software to connect, meaning you only need one USB dongle to connect multiple devices. When the keyboard starting giving me issues I went searching for a Logitech keyboard that was similar to a laptop keyboard (as I’d never experienced the problem when working on my laptop keyboard) and found a keyboard that was very similar, and also used the unifying software, so I purchased the wireless keyboard and mouse to replace my current gaming set.

Side note, the person I sold the mouse and keyboard to, a friend I know through jiu-jitsu, recently let me know that he is still using them, so I’m glad they found a new home.

At more or less the same time I purchased a second hand 27 inch monitor to replace the 23 inch, and moved from the house into our home office space. I also purchased a Gigabyte laptop stand so that I could have the bottom of the laptop screen at roughly the same height as the bottom of the monitor.

Towards the end of 2017 the Vostro laptop was in need of an upgrade, having served me well for 5 years. I opted for another Dell laptop, this time a Core i7 Dell Inspiron gaming laptop, RAM upgraded to 16GB, and a nVidia GeForce GTX 960M graphics card. It came with a 128GB M.2 SSD and I took the 500 GB SSD from the Vostro and installed it into the Inspiron, dual booting Ubuntu on the 500 GB drive and Windows on the 128 GB. I had a 320 GB notebook drive spare, which I installed in the Vostro and sold second hand to help pay for the Inspiron.

Unfortunately, as the year progressed, and as my workload and stress levels increased, it became obvious that working at home wasn’t productive or beneficial to anyone. My sons, as much as I love them, don’t understand either what a closed door means, or ‘the headphone rule’, and the constant interruptions caused me to start looking for an office space within a few kilometres radius.

In September 2017 I moved into my current office. Here is the original Instagram post I shared when I started in the new space.

What you can see in this image is the 27 inch monitor, the Inspiron laptop on the Gigabyte stand, the wireless mouse and keyboard, and the original gaming headset. As you can see R2D2 moved with me. The desk is a 6 seat dining table that was already in the office and the chair is an AllOffice contract office chair I used at home.

This is what my work space looks like now.

As you can see, quite a bit has changed.

Making the perfect space.

I replaced the dining room table with a second hand adjustable desk that I’ve made slightly higher then a standard office desk, to suit my size. I purchased an AllOffice Accent, which is a cost effective ergonomic office chair. I have definitely noticed the difference in purchasing an ergonomic office chair.

Next to my desk I have a small bar fridge and various coffee making paraphernalia, including a pour over coffee maker for when I want good coffee and a jar of Jacobs for when I just want OK coffee.

The workstation

upgraded the custom built workstation, to be powered by an MSI x470 gaming motherboard, 6 core AMD Ryzen 5 2600x, 16GB of DDR4 RAM and a Zotac Geforce GTX 1060. OS is taken care of by two 128 GB SSD hard drives dual booting Ubuntu and Windows, with the original 1 TB hard drive and a new one purchase for storage for each OS. This handles every thing I throw at it, including some down time gaming between work sessions.

My peripherals now include a new Dell 27 inch LED, the 7 year old Samsung 23 inch Syncmaster and a Philips 24 inch monitor I picked up second hand recently. My wife is currently using the other 27 inch monitor, as I found the frame around it to be too big when I wanted to add additional monitors. The side monitor stands are a combination of phone books and Dos 6.2, Windows 3.1, and Office manuals I found in the office when I moved in.

You’ll see my R2D2 bobble head stayed, and he’s joined by the Lego Mini-Me I got from WordCamp Cape Town 2017. Next to that is the travel mug we all got as swag from WordCamp Cape Town 2018.

The wireless mouse, keyboard and headset are all the same, and I dug out my Logitech 2.1 surround sound set. I was actually pretty happy to be able to use my speaker set again, as it’s been sitting in a cupboard for almost 7 years now, since the days of the ‘dad-station’. Because I switched from a laptop to a workstation, I had to purchase a separate webcam which, if you’ve not already noticed the trend, is a Logitech one.

Finally I also purchased a Samson mic for meetings and podcast recordings.

I had previously purchased a Griffin stand to replace the Gigabyte one after I moved into the new office, mostly to allow for more space. I keep it around for when I need to use my laptop at the office (mostly to copy something I’ve forgotten to sync to the cloud). In this picture it’s on my desk, but I usually pack it away when I’m not using it.

Operator

My main OS is currently Ubuntu 18.04 LTS, and I generally stick to the LTS version unless something cool is coming out on a newer version. The Windows 10 install is mostly for gaming (those games that don’t work via Steam on Linux) or if I need to test something in a true Windows environment.

Remote work

I still use the Inspiron laptop, mainly when I’m travelling, either for meetings or conferences, or working from home. I took the 128GB SSD out of the laptop for the workstation and installed Ubuntu on the 500 GB SSD as the main OS. At the moment I am considering selling this laptop and replacing it with something lighter, slightly less powerful but with better battery life, as I still do some development on it, but not as much as I before, and definitely not enough to warrant such a powerful laptop.

The Office

The office is 5 minutes drive away from home and my morning commute takes me directly past a Vida, Xpresso and Seattle, so I can mix up my morning coffee flavours.

The office has a wall size street map of the Cape Peninsula, which is a talking point whenever I have video calls with folks from outside Cape Town and provides fun conversations when my 6 year old comes to visit.

There’s also a spare chair, if I ever have physical meetings, or the 6 year old is visiting. I like to keep the rest of the office as tidy as possible, but at the time of this photo there were a few boxes of stuff left over from WordCamp.

Downtime

One advantage of my office is that because it’s actually at the back of my father-in-law’s home office, I get to enjoy the pool whenever the Cape Town weather gets too hot. This is helpful as the office itself has no air conditioning.

It also means that if my children want to visit the grandparents for a swim, all I have to do is make sure I have my costume and towel, and I can join them for some water fun.

And in case you’re wondering, all that is in the bar fridge is some long-life milk for coffee, and a few bottles of water. I leave the beers at home, to be enjoyed on my couch with my family, after a long day 😉

The future

As it stands, I probably won’t make any changes to this setup any time soon. As previously mentioned, I might replace my laptop, but there’s no real need to yet. I will probably only start looking at upgrading the computer hardware in about 5 years.

During that time, the only hardware I might consider upgrading or replacing is my headset, to a wireless option, and possibly replacing the second hand monitors with newer Dell ones. I really like the minimalist build of the Dell monitors, but at around R3000 a piece for new 24 inch models, there’s no real desire to do so.

If I do spend money on the office space in the near future, it will probably be on air conditioning. Currently it can get quite hot in the summer and quite cold in the winter, and comfort is more of a current priority than computing power.

Either that, or a bean to cup coffee maker!

WordCamp Cape Town 2018 is over, now what?

Last weekend marked the beginning of the end of my journey as lead organiser of WordCamp Cape Town. Over the course of the past two years I’ve worked with an amazing team of local volunteer organisers plan and execute our yearly WordPress conference.

The question on my mind as I wind down from the joyride that is planning a WordCamp is, what next?

So what I do know, is that I am not going to jump straight into the next big thing. Planning a WordCamp is time consuming and mentally draining, so I’m going to take a break from my contributing activities for a few weeks to recover. There are also a bunch of small WordCamp wrap up related tasks I need to complete anyway.

Once that is over however, I’m looking forward to resuming my community deputy duties, namely meetup vetting and orientations. I’ve also applied to be a WordCamp mentor, so I look forward to helping another lead plan and execute their WordCamp next year. 

Besides that, the next big thing that I’d like to help with is the next Global WordPress Translation Day. I hosted a very small translation meetup during the 2016 event, but I’d really like to plan a much bigger meetup for the next one. We have 11 official languages in our country and it would be amazing to mentor local volunteers and help them get WordPress translated into their own language.

It’s just software! WP Builds chats to Matt Mullenweg about Gutenberg.

My friend Nathan over at the WP Builds podcast had the opportunity with chat with Matt Mullenweg about the pending WordPress 5.0 release and Gutenberg.

Worth a listen if you are worried about the 5.0 release.

While you are there, take a listen to the chat I had with Nathan regarding the GPL. Probably not as controversial as Gutenberg but interesting nonetheless.

This is why you want to become a Codeable Expert Developer

Is the Codeable Expert Developer certificate worth the weight of the digital paper it’s printed on?

In 2016 I certified as a Codeable Expert Developer. I’d already spent a number of years working with freelance platforms such as Upwork and Freelancer but Codeable has stepped out from this crowd to become my preferred platform of choice.

Why?

There are quite a few reasons why Codeable is the kingdom where every developer should hang their hat and here are six of them…

Reason 0ne: You don’t just sign on the line and instantly become a Codeable Expert

Entering into the Codeable world isn’t as simple as filling in a few forms, locating the perfect profile pic and waiting for the work to come to you. The application process tests you on your development knowledge, ability to handle difficult clients and skills in managing complex situations. For Codeable, technical knowledge is essential but customer service is critical. 

Experts have to pass stringent tests to gain access to Codeable – tests that are improved upon daily by the Codeable expert community. You have to know the web, WordPress and development inside and out before you can even be considered. You also have to demonstrate the ability to manage expectations and a willingness to engage in open communication and collaboration.

Codeable Experts are project managers, quality testers, customer relationship managers and so much more. This assures Codeable Experts that they will be connected with genuine clients and it assures clients that they are going to get connected to incredibly talented experts. And everybody knows that this level of skill doesn’t come at cost price.

The Codeable process may be rigorous and complex, challenging your skills and your experience, but it is worth every hurdle and hoop.

Reason Two: Client focused but expert friendly

The founder of Codeable, Tomaz Zaman, jokingly refers to Codeable as the Tinder for WordPress. It’s easy to see why. It connects the best WordPress experts to the best clients and everybody walks away happy and in a new, fulfilling relationship.

This is primarily driven by Codeable’s commitment to making both the customer and the Codeable expert happy. A commitment that’s clear from the moment you apply. Codeable gives every applicant personal attention and team members take the time to explain each part of the application process. They also provide immediate feedback when sent questions or concerns. I dealt with people who cared and who understood that sometimes life got in the way of the application.

Once you’ve been accepted, you need to spend some time getting to know the Codeable process. The entire platform has been designed to provide you with a really strong support structure so you can quickly learn about how to engage with customers and how to deliver the ideal Codeable customer experience.

There is a very delicate balance between the needs of the client and support for the experts and Codeable manages this perfectly.

Reason Three: Defining the ideal customer

There are three things that define a great customer within the Codeable universe:

  1. A great customer is someone who understands that a freelancer is a human being and not just a tool. Developers have lives and families. We get sick and we have to juggle the unexpected moments that life throws at us just like everyone else. Knowing that a customer can understand and accept this makes everyone’s experience so much better.
  2. The customer understands their product or service and can succinctly explain or describe the problem. They make suggestions, not assumptions. You may look at a web page and think that it should be easy for the expert to change the font but you likely don’t understand that perhaps the CSS rules aren’t structured properly or that a font change on the home page will knock on to other parts of the site.
  3. As Codeable experts we pride ourselves on our communication skills but if a client goes quiet, especially when it’s time to mark the project as complete, it can leave a bad taste. A communicative customer is wonderful to work with.

Reason Four: Codeable creates collaboration

Codeable doesn’t limit you to the Codeable workroom system. Once a project has been funded you can use any communication tool that you and the customer prefer. That said, the Codeable workroom system has some nifty tricks and treasures hidden in its depths that add enormous value to client communication.

  1. The Credentials Vault – you can share sensitive information, such as site logins, with relevant experts.
  2. The File Storage System – you can upload images, documents, video tutorials and other file objects for easy, shared access.
  3. The Live Chat System – this is also replicated as emails to both the customer and the expert so that communication is seamless and easy. The only thing missing is a voice option…

Reason Five: Collaboration really is key

There is one thing that Codeable doesn’t have…Expert Wars. On this platform the experts aren’t competing, they’re helping. It’s more like a distributed family that steps in to ensure that clients always get the best out of their chosen expert.

Codeable is the first platform I’ve experienced that has captured the true heart of the community-driven ethos of the open source platforms we use.

Reason Six: The value of Codeable

The fact that we, as Codeable Experts, are not in competition with one another makes this one of the best platforms in the world. The expert community is perhaps the biggest reason why I am passionate about Codeable and its potential. We help one another on projects, give each other advice when entering into pre-hire discussions, and share expertise on the forums. It is open access to the most impressive group of WordPress experts in the world. You are constantly surrounded by intelligent people who can teach you something new every day.

Last year I had the opportunity to meet up with a group of my fellow Codeable Experts at WordCamp Europe 2018 and it was like meeting up with old friends.

Codeable has also taught me that the knowledge and experience I have is invaluable. If you work with the right clients you don’t have to kill yourself to make a living. Since joining Codeable in 2016, my income potential has doubled and I have been able to do things I’ve never done before. I built the perfect development workstation, I took time off without worrying about my next project and I learned new technologies while taking on exciting new projects.

Some tasty tips for Codeable success…

If you want to enter into the world of Codeable, then here are four top tips that will help you get in, get involved and get insight from brilliant Codeable minds…

  1. Know WordPress inside and out. You don’t need to be a core contributor, although that would help, but you do need a good understanding of WordPress APIs, hooks and core fundamentals.
  2. Understand web development in general – a good grasp of this will come in handy as clients will often have requirements to connect their WordPress sites to third party applications and systems.
  3. Be a problem solver – the ability to install a WordPress theme and a bunch of plugins isn’t enough. You need to create custom themes or plugins and have the ability to extend those. You must have a higher than average skillset in creating custom solutions for WordPress.
  4. Customer collaboration skills – you need great customer service and a healthy attitude towards project management and communication. At Codeable you don’t win projects based on price – you need to be prepared to go the extra mile during new project discussions and to provide value to new customers.




WordCamp Johannesburg 2018 – Workshop Resources

I learned a valuable lesson yesterday, if your workshop prep requires a lot of involved setup, you might want to reconsider your workshop. 

Anyway, for those who want to try and replicate the workshop process at home, here are my slides and the workshop notes I used. You should also be able to followed the numbered branches on each of the GitHub repositories.

My Slides

My workshop notes

The GitHub Repositories

The Laravel app GitHub repo

The WordPress plugin GitHub repo

If you have any questions about the process, you can usually find me in the WP South Africa Slack.

WordCamp Johannesburg 2018 – Workshop prep

On Thursday the 25th of October 2018 I will be presenting a workshop titled “Turning your WordPress plugin into a SaaS”, where I will be sharing some insight into connecting a WordPress plugin to a Laravel App through HTTP requests.

As with most workshops, there is some preparation work required to attend. However because we are dealing with two different platforms, (Laravel and WordPress) setting it all up might take a bit longer than usual.

TL;DR – Requirements:

This article is aimed at folks who a) have never set up local development environments or b) have only ever used applications like WampServer or Mamp for their local development. If you already use something like Vagrant or Docker environment, you probably don’t need this article 😉 It would however be good to skim through it to make sure you have a set up that matches my own.

1. WordPress environment.

To participate in the workshop, you will need a local WordPress environment. Make sure you have the latest version of WordPress installed (4.9.9 at the time of this article).

If you use WampServer or Mamp, you should be fine, as long as the WordPress install can be accessed via a local IP address (we’ll get to that in a bit).

My recommendation would be to try something like Chassis.io, or my own BossBox. These are pre-configured WordPress ready Vagrant boxes that replicate a Linux server and any installed software you might need. If you already use VVV, this is also a good option.

To install any of these options you will need to install VirtualBox and Vagrant first. Each project has instructions on how to set up and run your WordPress install. Obviously I favour BossBox, because I built it and I know it works well out of the (ahem) box.

What I like about a Vagrant option is that you can configure each instance with it’s own IP address, which makes it easier to develop and test API end points on two different instances at the same time, which is what we’ll be doing in the workshop.

You will then need to download and install the base plugin we will be using, which you can download from this link.

For the purposes of the workshop, my WordPress environment will be using the default IP address which ships with BossBox, which is 192.168.33.10.

2. Laravel Environment.

Firstly you’ll need to follow the installation instructions to create a new Laravel project.

Then you’ll need to choose which local environment you use. There are a few options to for setting up a local Laravel environment, the two most popular being Laravel Valet and Homestead.

Laravel Valet as a Mac only option, that requires very little in the way of set up. The only downside is if you don’t own a Mac, you can’t use it. I develop on a Linux OS, so I can’t speak for if it will be sufficient for the workshop, but I don’t see why it wouldn’t. As with the Wamp or Mamp options I also don’t know if you can configure the Valet set up to a local IP address.

The option which I prefer is Homestead. Again, it is also a pre-built Vagrant box, so if you go with one of the Vagrant options for WordPress you already have the required software installed. If you do go this route, I suggest using the Per Project installation method, which is the one I’ll be using for this workshop.

For the purposes of the workshop, my Laravel environment will be using the default IP address which ships with Homestead, which is 192.168.10.10.

A note on Vagrant options: because these pre-built virtual Linux web servers, they can be quite large when you first download them. BossBox is around 750mb (the last time I checked) and the Homestead box is almost double that. So make sure you have a good internet speed and enough data to complete the downloads. If you only use mobile data, I recommend visiting an internet cafe or WiFi enabled coffee shop or co-working space. It’s also the reason I suggest you do this before you come to the workshop, as downloading everything during the workshop is going to take too long on conference WiFi. The upside is that once they are installed, you use the same installed base box for every other instance you set up.

3. Database Access

You will need some way to access the database for both set ups.

If you use the BossBox route for your WordPress setup, you can access the database via PHPMyAdmin, which comes pre-installed on the box. You will find details on how to do this in the project readme file. If you go with the Homestead route for Laravel, you can use an application like MySQL WorkBench. For the Laravel app the defaults are:

  • Hostname – 192.168.10.10
  • Port – 3306
  • Username – homestead
  • Password – secret

For which ever set up you choose, make sure you can connect to and view the database for both.

3. API Testing – Postman.

Postman is an application for testing software API’s. We’ll be using it to test the API end points we create during the workshop. To make sure your WordPress and Laravel environments are accessible to each other, test them via Postman.

In order to test them, you need to install Postman and create two new requests, one for WordPress and one for Laravel. Set the URL for each request to the IP address for both WordPress and Laravel. You should see some html data returned, which means Postman can send a request to either one.

4. Code Editor/IDE.

Obviously we’ll be writing code, so we’ll need a code editor. If you are already writing PHP code you probably have an editor you prefer, and that’s great. If you don’t I can recommend Visual Code Studio (free) or PHPStorm (paid). PHPStorm comes with a free 30 day trial, so if you’ve never tried it, now is a great time. I’ll be using PHPStorm in the workshop.

The importance of WordPress website optimisation with Justin Frydman

Website optimisation

Build it. Theme it. Watch it fail. Or not. If you know how to optimize.

Few things are as frustrating as a website slower than molasses going uphill.  Even fewer people stick around to see whether the website was worth waiting for in the first place. There are plenty of other websites in the great online sea and if yours is slow visitors will just go somewhere else.

Website optimisation is the key to online success. It really is. So, to pin it down and get clarity around the issues that influence it, I spoke to Justin Frydman. Justin is a full stack web developer, systems administrator and (in his words) ‘passionate problem solver’ and since I joined Codeable he’s become one of my go to guys with regards to website optimisation. Justin and I had a chat about the how, the why and the what of website optimisation…

JB: Why is website optimisation so important?

JF: The short answer is that people hate slow websites. It doesn’t matter if you’re selling a product, trying to increase reader conversion or gain leads that result in sales. A slow website is going to impact your goals significantly.

There are a lot of studies that prove this point but one of the most popular is how Google found that a .5 second loading variable cost them a 20% dip in traffic. While your business may not match the sales of a giant like Google, removing roadblocks to potential sales makes sense. Right?

Considering how many people use their mobile devices to shop online it is even more important to focus on web optimisation now than ever before. Any slowness on your site is magnified on mobile. These devices have slower hardware and connectivity and will load far more slowly than the desktop.

JB: What are the top three worst and best WordPress themes in terms of performance (themes or plugins that affect site performance)?

JF: It’s the themes that try to ‘have it all’ that tend to suffer from performance degradation. The more that a theme does in each page load, the harder the server has to work to serve up your page. There are ways you can hide these shortcomings from your visitors such as using caching methods or other techniques but you did ask for a list. Here it is…

The worst three themes:

  1. Avada
  2. Divi
  3. Flatsome

The best three themes:

  1. Custom built and tailored to your needs. This way you don’t have more or less than YOU need.
  2. Many of the themes built on the Genesis Framework
  3. The Beaver Builder theme for a visual builder

JB: What are the factors that influence website optimisation?

JF: There are numerous factors that can affect your website’s performance. It’s about ensuring that each of them is as good as possible so they add up to having a truly fast loading website.

01: Host

You must have a good host with a good stack (server software) that is properly configured to serve WordPress as fast as possible. A great host doesn’t have to cost a fortune but if you’re spending less than a cup of coffee a month on your host, well, you’re probably getting what you pay for. It’s also important to ensure your server is as close as possible to your target market. The closer it is to your visitors, the faster your website will be.

02: Plugins

Every plugin you add to your website has the potential to slow it down. Not all WordPress plugins are created equal. Many are developed without performance in mind. So, a single plugin could perform a taxing database query that adds seconds to your page loading.

If you have too many plugins it will complicate the technical debt and debugging of your site. This will make it harder to track down any problem plugins. Some can add bloat to your database as time goes by so the slowing down of your site won’t show until your database queries take seconds instead of milliseconds. Ensure you have a staging website and thoroughly test and vet every new plugin before you use it.

03: Themes

Themes that include a lot of JavaScript can visually slow things down on the front-end of your website. Some CPU intensive JavaScript can really slow older computers to a crawl. Depending on when that JavaScript is loaded, it can even render block your website.

Themes that make heavy use of animations can look slow to the visitor even if they aren’t. It’s also worth noting that the heavier themes need a lot more time to process a page before it can even be rendered. The longer it takes to process a page, the longer things are loading before the website is visually drawn in the browser.

04: Images

Using images that haven’t been optimised (and using many of them) increases loading times. Images can be compressed, saving up to 80% in file size without compromising on quality. The less the browser has to download, the faster your website. Sliders with 10 images or large background images can increase page size significantly. So, to optimise your website, consider each image’s purpose on the page and ensure the dimension and file sizes are appropriate.

05: Videos

Fully loading videos will destroy your website metrics and often cause a laggy experience. Use videos sparingly and make decisions based on the data you collect. If a video really is converting sales, then it is probably worth keeping.

06: Adverts

While ads are often needed to help you make a living, they can really slow things down. Even once they are fully loaded they can slow scrolling and the functionality of the website, especially on slower devices.

07: CDN

A Content Delivery Network (CDN) can help in serving your static assets (images, JavaScript and CSS) to your visitors at speed. Often this lightens the load on your server as well.

JB: How can you test your website’s performance?

JF: There are a number of online tools to help you with website optimisation and performance. That said, the grades don’t always align with a faster website. If you are shooting for straight As that doesn’t actually mean you will end up with a visually faster loading website.

The Page Load Time Google Chrome Extension is an interesting tool but it tracks fully loaded time, including JavaScript that is running after your website has rendered. In my opinion, the goal is to show your visitor your website as quickly as possible. If things are going on in the background that aren’t affecting user experiences then they are not a priority.

Here are some steps you can take to website optimisation:

Step 01: Your browser

Really use your website, logged in and logged out. Does it feel fast? Is the initial load pretty fast? What about clicking on additional pages? How about the WordPress dashboard?

Human testing goes a long way towards website optimisation as it is humans who use your site.

Step 02: Pingdom 

Not all items in the Performance Grade can or should be fixed. It’s important to understand this report in detail but what should matter to you the most are: Load Time, Page Size and Requests. The ultimate goal is to get these as low as possible. Increasing the grades is a bonus and only IF they don’t affect the ultimate metric – Load Time – negatively.

I’ve seen websites taken from a C to an A but at the cost of 400ms. It’s just not worth adding that extra loading time to increase a score.

Step 03: Gtmetrix

The recommendations here must be properly analysed by an expert GTmetrix tracks Fully Loaded Time. This considers the background scripts running – if they are running after the page is visually drawn in the browser that’s not a big deal, however, if your page is waiting for them to load before it shows your site then you have a problem. Ideally, you want to get Fully Loaded Time, Total Page Size and Requests as low as possible. This may involve removing items you don’t need on your site.

Step 04: Google PageSpeed Tools Insights

Until recently, this test didn’t even show your actual website speed and still doesn’t for many websites. What this does is make suggestions around how you can improve your speed. Keep in mind that these are suggestions and may not result in lowering the key speed metrics mentioned earlier. Some of these suggestions can be complex and expensive to solve and the payoff may not be worth the effort. Google has a FAQ that explains a lot of these elements in more detail.

Want to get your hands on Justin? Need a bit more website optimisation expertise?

Click here, hire Justin, and fix your problems…