WordPress Website Optimization, Every Aspect Perfected.

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

WordPress Website Optimization

Review Our Website

GTmetrix

gtmetrix-performance

Pingdom

Screen Shot 88

Google PageSpeed Insights

pagespeed-insights-mobile

WebPageTest

webpagetest

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 host
webserver

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.

fastest wordpress theme
best wordpress 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.

Too Many WordPress Plugins
script ordering for wordpress

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.

minification for WordPress
combine CSS and JS files for WordPress

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 and JS for WordPress
browser caching for wordpress

Browser Caching

Browser caching stores static files locally in the user's browser. Then, if that same file is used on another page they visit, the file isn't needed to be downloaded again.

This allows you to reduce repeated requests for static files, lowering HTTP requests and page size to improve loading, greatly helping your WordPress website optimizaiton.

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.

wordpress font loading issues
wordpress lazyloading

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.

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.

cdn for wordpress

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

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.

file redirect
HTTP/2 or HTTP/3

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.

  • Both protocols offer server push support
  • Both protocols have header compression, and QPACK and HPACK are similar in design.
  • Both protocols offer multiplexing over a single connection using streams

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.

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.

Prefetch, Preconnect, Preload for WordPress
HTTP/2 or HTTP/3

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.

Need WordPress Website Optimization?

We offer WordPress Website Optimization services for all WordPress websites.

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