WordPress Speed

WordPress by itself isn’t necessarily slow. In fact, it can be really fast. It’s the theme that plays a large part in how resource intensive the pages are. Aside from slow PHP code, I think most people are looking to speed up the front end. This means loading resources (stylesheets, images, scripts, interactive elements, etc) in a manner that they don’t significantly affect page loading times.

And a tool that a lot of people use to guage their pagespeed is Lighthouse PageSpeed.

Scores are based from 0 to 100, with 100 being the fastest.

How To Speed Up WordPress

This isn’t a full fledged guide on how to speed up WordPress. This is a guide to help you get going in the right direction. There are some general best practices that you can follow and apply to your pages so that they can get a good pagespeed score.

Avoid Layout Shifts

Shifting elements can be really annoying. Especially on mobile. I’m sure we’ve all tried to click a link only to have the page shift and we click on something else. It’s frustrating. This mostly applies to images but can apply to fonts, too. Images should always have width and height set so the browser knows how much space to reserve for them. Fonts should be loaded with display: swap.

Load Only Necessary Styles and Scripts

When your page loads, you should be loading only the things necessary to load that page. Anything else can be loaded after the page finishes loading.

This means your structure styles and styles for elements on that page only should be loaded.

Only the very necessary scripts should be loaded. If you have accessory scripts or third party scripts, they can usually be loaded after the page finishes loading, when they come into the viewport, or on user interaction.

Do Not Load Interactive Elements Immediately

Interactive elements like YouTube Videos and Google Maps can be loaded after the page has finished loading. Interactive elements will absolutely kill your pagespeed score. You can put a placeholder element in it’s place and swap it out for the real thing after the page has loaded. This can be done with intersection observer or on user interaction.

Checkout how I load a youtube video without affecting pagespeed.

Use Next-Gen Format Images & Proper File Sizes

It’s easy to just upload images from your computer into WordPress. But the format and size matters. Next-Gen image formats like WebP offer lower file sizes than their jpg or png counterparts. You can convert to webp before uploading or use a plugin like WebP Express. WebP Express is one of my favorite and most recommended plugins. It can easily convert all of your existing images to webp format.

File sizes matter, too. If you have an image that will never be 300px x 300px on the screen, but you’re loading an 1800px wide image in that place, your user has to download the whole image just to see it in a low resolution. WordPress creates multiple image sizes on every upload – so make sure you’re using the appropriate one!

Minify & Cache

You should have a build process that combines and minifies your css and javascript. If you don’t, there are lots of plugins that can do it for you. I prefer W3 Total Cache because it can minify and combine AND cache your website at the same time.

It has many different caching options including disk cache, page cache, database cache, object cache, and browser cache. It also connects your wordpress site to a CDN.

Taking advantage of W3 total cache’s many options can speed up your website by a lot. All you have to do is configure it.

Previous: WordPress E-Commerce
Next: WordPress Plugins