The importance of WordPress website optimisation with Justin Frydman

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…

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.

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.

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.

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?

Related

Subscribe To MyNewsletter

You have Successfully Subscribed!

4 Comments

Thibault
on Sep 28, 2018 at 12:20 am

Hi Jonathan, thanks for this nice posts. I especially looked to the themes you pointed as worst and best !

And I have to admit that I use one of the less good ones “Divi”, the one that in the mean time made me discover your work and on which I am writing 🙂
All in all, I see once more that the Beaver Builder has one more good point, but in the mean time, while I am willing to switch from Elegant themes’s divi builder to another one I would like to ask some advises in this important moment.

About Divi : I feel the Divi builder often buggy and especially slow to load. Up to now there is no option to build themed templates, 100% custom header Menu templates, 100 custom footers using he builder. As you know this should come in a future update – but without any milestones it’s hard to predict what to expect. Now speaking about the Divi theme itself you pointed that it’s a quite heavy one “and would like to see a technical report that points it”, but all the !important states in it seem already to much to be a good one.

2 + 1 choices seem to be offered today :

– Elementor or Beaver Builder
– Looking for coming Gutenberg addons that could be promising

It’s probably to early to go for the Gutenberg way, especially for themed templates … so let’s stick on the page builders if you agree.

– Beaver Builder is technically certainly the most robust BUT it’s far from cheap! so I try to avoid it. It may also seem to lack a bit of sexyness in their third party plugins.. but nothing sure here.

– So think more of going for the Elementor way since it offer a full Templating system, even for menus & footer, and one other good thing its that it doesn’t use shortcodes such as Divi & WP-bakery (I don’t talk more about this one since it doesn’t seem the most robust, but maybe i’m wrong). One little question is about their menu templates, I’m not sur it’s using the default WP setup and selectors to make it compatible with other plugins…
By the way it’s also compatible with any theme and that’s where this comment is going to : I am still a beginner in WP web design and am more interested to have one way to work with a single universal theme rather than relying on others that by the way can stop their development at any time + many other complex aspects hard to see when purchasing themes, behind their lazy workload approach.

So here is my final question : What do you think of builders as presented and Would you suggest one or a few best universal themes to start with and stick on it, for best performance of course ! I never used frameworks but they seem at first quite more complex to without obvious gains, so a little point on that could be pretty interesting.

Sorry for this exceptionally long comment. I guess this could help many others by the way if you can answer to the point.

Here’s the thing, I’m a firm believer in the right tool for the job. If you need to build a site for a client, and Divi is the right tool, then use it. Just be aware of the pitfalls and plan accordingly. All page builders will have some pitfalls, perhaps even Gutenberg. There are many ways to take a site built with Divi and optimize it for speed.

To give you another example, I use my pre built Vagrant boxes for development. Just yesterday I had a discussion with another developer who uses Docker. He says he can get a local development site up in 30 seconds, while my vagrant environment takes about a minute. Well, I am comfortable with my environment and if comfort means I can get my work done in a good time, I’m not going to quibble about 30 seconds on every site build. It might not be the best or the fastest, but it suits my and my style, and I can rely on it. I am aware of the pitfall of the longer time to get it up and running, so I plan other tasks during that time.

I know this doesn’t answer your question, because the answer really is, know your tools, know their strengths to maximise them, and know their weaknesses to work around them.

Well ok Jonathan, telling here that knowing that fruits and vegetables are different and should be experienced doesn’t bring much to any discussion probably.
So to conduct my question here in a more streamlined manner, would you maybe suggest some particular theme(s) / framework(s) for universal use and best performance, as it’s the subject of this article. I won’t blame you if you won’t have the one and single answer but your experience should certainly bring some facts to enrich your shared knowledge articles.

I agree with Justin Frydman that the best way to ensure performant WordPress sites is to build your own custom themes. My first WordPress jobs were doing performance optimizations and I noticed that all commercial themes are very bloated. The more customizable a theme the more tradeoffs developers have to make on performance.