WordPress Website Optimization, Every Aspect Perfected.

Optimize user experience and Search Engine Optimization with a fast website that simultaneously achieves high PageSpeed scores.

lighthouse

WordPress Website Optimization: What’s Involved

Start With Hosting

A good host is extremely important for many reasons – among the most important for speed and user experience is server level caching, and the inherent performance to provide a fast TTFB or Time To First Byte.

If you can’t manage a server yourself or have someone like us look after hosting for you, we recommend Kinsta for Managed Hosting.

In our own test, moving a site to Kinsta from Vultr added at least a 30% speed boost, helping our WordPress website optimization greatly.

WordPress Hosting
Web server

The Web Server

We won’t rehash the usual debate between Nginx and Apache – combined taking up ~75% of all web traffic in the world. We’re here to let you know about OpenLiteSpeed, a better alternative.

OpenLiteSpeed has a better TTFB and can handle very high concurrent users when compared to Nginx or Apache. OpenLiteSpeed also uses fewer server resources, which results in reduced server costs.

OpenLiteSpeed comes with LS Cache, a built-in, natively connected caching and WordPress website optimization plugin that lets you achieve the vast majority of the tips from this site. And it’s all free.

The WordPress Theme

Typically the biggest offender of slowing down websites, non optimized themes includes extra requests, styles, and load items on pages they’re not needed, and sometimes not replacing the theme will make WordPress website optimization a losing battle.

There are many good options out there now – we recommend GeneratePress (free) with it’s premium plugin, for a fully featured but lightweight theme. A default WordPress install with GeneratePress theme is less than 30kb.

Other contenders we like are Astra and Hello.

WordPress Theme
Page Builder

The Page Builder

It’s easy to hate on page builders (the wrong builder could mean the end of your WordPress website optimization journey!), the reality for most professionals is that the end-client needs to be able to manage their own website, including editing and adding new content.

The only real way to achieve this is through page builders – which have improved a lot more than you may think.

We recommend BeaverBuilder as an extremely lightweight, user friendly and mobile friendly page builder.

Other solid choices include Oxygen and Elementor.

Plugins

Another great offender for loading additional scripts where they’re not needed, or inefficiently being used they are meant to be – the bane of WordPress website optimization.

It’s easy to point to the total number of plugins on a website and surmise that’s why it has poor performance. However, lots of plugins are for background functionality and don’t have any impact on the front end for the user.

Our goal should be to minimise the number of plugins loading resources on the front-end, especially if that resource is not needed on certain pages.

Plugins
Script Ordering

Script Ordering

To go back to how a web page loads or is ‘painted’ by the browser, you need to understand that for the page to show up, it has to first load the HTML, then the CSS. At this point the JS and other resources such as images can load.

Knowing how many scripts are loading, in what order, and what they do is a large part of WordPress website optimization.

Minification of CSS, JS, HTML

When creating HTML, CSS and JavaScript (JS) files, developers tend to use spacing, comments and well-named variables to make code and markup readable for themselves. It also helps others who might later work on the assets.

While this is a plus in the development phase, it becomes a negative when it comes to serving your pages. Web servers and browsers can parse file content without comments and well-structured code, both of which create additional network traffic without providing any functional benefit.

Every page speed tester will recommend minification to improve your WordPress website optimization, and for good reason – it helps, and there is no reason not to.

Minify
Combine CSS & JS

Combination of CSS and JS

CSS and JS files can be combined into a single file each. This greatly reduces the number of HTTP requests each page load requires, however, it can introduce style or functionality issues as the natural ordering is disrupted.

This step more than any other requires extensive testing, and usually results in several CSS or JS files to be excluded from the combined files, but the end goal will assist WordPress website optimization.

Inline CSS and JS

Inline CSS and JavaScript will help the site to load faster than loading the external files. It can be better to reduce the external CSS codes by making it as internal CSS files. Inline CSS and JavaScript files won’t be a part of SEO activities but it is one of the important factor in page speed optimization.

Inlining all CSS can improve performance for sites with a low pageviews/ visitor-rate, but may slow down performance otherwise.

Inline CSS & JS
Font Loading

Font Loading

Do you have the problem where your website loads, and then suddenly the text font changes, slightly moving the page as styling is applied?

This can be referred to as a Flash Of Unstyled Content or FOUC, and is caused by the page rendering before the CSS – in this case the font file – loads.

This can be fixed by utilising various CSS display parameters, such as display:swap, which lets us combine and link or preload the fonts in the head.

This is very noticable for normal users, hence a big impact on user experience. Even if fixing this doesn’t help the speed of the site, not having a jarring experience will make it feel faster, drastically helping your WordPress website optimization.

Lazyloading

Lazyloading can be applied to images and iframes, instructing the browser not to load these until they enter the viewport.

This can sometimes cause issues. Sometimes, you’re better off without lazyloading, as the browser inherently loads resources based on their order. As always with WordPress website optimization, this will require testing to determine the helpfulness for your site.

Lazyloading
Content Delivery Network

CDN – Content Delivery Network

Content Delivery Networks deliver your web files from PoP’s (Points of Presence, their datacentres), rather than your own web server.

If your clients aren’t solely located in your geographic area, this is a perfect way to ensure that every visitor will be server from a local PoP, rather than their request travelling all the way to your web host.

CDN’s are also packed with features such as compression, uptime reliability, DDos/bot protection and improving TTFB, a great help with WordPress website optimization.

We recommend QUIC.cloud and KeyCDN.

Critical CSS

This is where the styling solely for the first fold of content is separated and loaded first, to ensure the first screen is loaded as fast as possible.

If properly optimized this practice is typically not required, however it can help improve sites.

This may not have an impact on loading time, but it can greatly improve user experience – as they see the first content ASAP (minimal critical path), and hence the overall experience feels better (and faster) – the goal of our WordPress website optimization.

Redirections

Redirections

Not 301 redirects on your website, but rather when you have an external script redirecting to another script – causing a delay.

Every effort should be taken to ensure the correct file is being linked, however, typically this is the result of third partys, such as social media advertisers’ tracking codes.

HTTP/2 and HTTP/3

HTTP/2 and HTTP/3 are made to presend internal CSS and JS to the browser to optimize page loading.

The two protocols offer clients virtually identical feature sets

HTTP/3 is designed for QUIC, which is a transport protocol that handles streams by itself.

HTTP/2 is designed for TCP, and therefore handles streams in the HTTP layer.

HTTP/2 and HTTP/3
Prefetch, Preconnect and Preload

Prefetch, Preconnect and Preload

Prefetch is a low priority resource hint that allows the browser to fetch resources in the background (idle time) that might be needed later, and store them in the browser’s cache.

Preconnect allows the browser to setup early connections before an HTTP request is actually sent to the server. This includes DNS lookups, TLS negotiations, TCP handshakes. This in turn eliminates roundtrip latency and saves time for users.

Preload allows the browser to set resource priority therefore allowing web developers to optimize the delivery of certain resources.

The Functions.php File

WordPress by default loads certain things we simply don’t need, and can actively harm our website’s performance. Updating the functions.php file to dequeue certain scripts and/or add filters can assist with you WordPress website optimization.

In addition, there are a few things we can add to improve SEO.

These can be added and removed via the functions.php file.

functions file

Need WordPress Website Optimization?

We offer WordPress Website Optimization services for all WordPress websites.

We also build websites, if that is what you need.