Speed Up Your WordPress Site: The Desktop Diaries, Part 2

To recap quickly, people are impatient and it’s important to take some time to speed up your WordPress site. Search engines are picky. A large portion of business websites aren’t up to par in terms of demand for page speed. WordPress is great but has room for improvement. You as a website owner have a vast opportunity to edge out competitors and perform better on the web by optimizing your site for speed.

 

If you want to learn more details about how page speed is measured, what current statistics state about website speed, and how you can benefit from on page optimization check out A Speedy Overview, Part 1.

 

After perusing ways to optimize and speed up WordPress websites, we have found several key areas of improvement. All of these are going to speed up your website load time. Your LCP (Largest Contentful Paint) and FID (First Input Delay) will be greatly improved making Google happy. For this blog installment we will discuss items that are going to improve overall website performance, with specific relevance to desktop sites. (Although, like any good website, it will also improve mobile speed.) The key areas of focus will include image optimization, code cleanups, font consolidation, and a few bonus tips.

 

Let’s Start at The Beginning:

Before making any adjustments to speed your site up, it’s important to look at the foundation it is built upon. The foundation must be streamlined, user-friendly, and optimized for quick loading. In WordPress, this means you better make sure your chosen theme is the right choice. If you browse a theme market, you’ll find thousands of great looking options. You can find a template or demo for nearly any type of business with the necessary functionality already built in. However, don’t only look at the style of the theme before making a choice.

Key things to look for when purchasing a theme to improve speed: 

1. Responsiveness: Being mobile responsive isn’t optional anymore. It’s required. Plus, themes that are built to be responsive to different screen sizes will save you time, effort, and code work when it comes to speeding up your mobile site too.
2. Browser Compatibility: In order to make sure your site loads quickly, you have to make sure your theme will actually function well with all major browsers. Be sure it is compatible with Google Chrome, FireFox, Safari, and the like.
3. Overall Size: Select a theme that is smaller in size. Most of these themes will be advertised as “sleek” or “lightweight”. Strive for minimal and simple. No bulk.

 

Some of our favorite themes that fit the bill include the 7, X Theme, Monochrome Pro, and Hestia Pro.

 

Image Optimization:

When you run a speed test, one of the biggest hurdles we’ve seen impacting speed times revolves around images. This is especially true in marketing websites built with WordPress. They look great. One reason they look great is because you can add as many beautiful, customized images as you want. The only problem with this is that oftentimes the optimizations required to make your site both beautiful AND fast aren’t built in.

 

Key Issues related to images and load time with WordPress Sites:

1. Serving Images in NextGen Formats: WordPress allows you to upload a variety of file types for imagery including the most common PNG and JPEG file types. These file types have lower compression and take longer to load.
2. Proper Sizing: WordPress is nice in that it has default image sizes in Large, Medium, and Thumbnail to resize your images with ease. It also allows for images to be displayed at full-size or a custom size in pixels. The plus side is you can use virtually whatever size image you want. The downside is that you have the ability to upload huge or tiny images and make your website do a lot of work causing long load times.
3. Deferring Offscreen Images: Most websites, including many WordPress sites, try to load all of the images for a page upon the initial load. This means until all images are loaded the website won’t be visible or reactive to visitors.

 

What you should do about it:

1. Correct your sizing: Upload images in the size you want them displayed in and/or utilize the default sizes in lieu of a custom resizing. Make sure they are not too big.
2. Choose an image optimization Plugin: To automatically display your images in NextGen formats, like WebP, and bulk compress images you can use a FREE plugin designed to do just that. Two we would recommend are Smush and Imagify.
3. Lazy Load: Combat the downtime caused by offscreen images by lazy loading those you don’t need immediately. Some themes have this option built in, you just have to select it when setting up your image widgets. Otherwise, you can use a plugin! Several like Smush have multiple functionalities to optimize images and set up lazy loading.

 

Font Consolidation:

One of the great customization options offered by many WordPress themes is the availability of a million fonts to choose from. Most modern themes incorporate font systems like Google Fonts, Adobe Fonts, Fontspring, and more to provide many choices from san serif to handwritten fonts. The downside of this is that all of those fonts are being stored and sometimes inadvertently loaded within the theme event when they are not actively used.

What you should do about it:

1. Pick your fonts: Slow down on the customization. Pick a couple of fonts that you want to use and stick to them. No need to have different fonts for every section of every page.
2. Disable/Remove unused fonts: It’s nice to have libraries on libraries of fonts, but once you decide which direction to go the rest is excess. Remove any font libraries you are not in need of to speed things up. How to do this varies depending on theme and font libraries used. Here’s a good ‘how to’ for several methods.
3. Bonus Item! Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading. Here’s how to do that!

 

Cleaning Up Your Code

This is especially pertinent if you have had your website for a long time. Or in “tech time” at least a year. When your website was initially designed either in-house or through a dev shop you likely had to do some customizations to the codebase to get things looking or functioning how you wanted it. These changes could’ve been super simple or complex. However, overtime some of that work may now be unused (if you’ve rebranded or refreshed the site) or unnecessary (if the theme has updated their core code to include changes like those you made).

What you should do about it:

1. Check Your Plugins: Make sure you only have plugins activated that you are actually using. Unused or outdated plugins could interfere with performance of other plugins or page performance. Deactivate any that you don’t need. Make sure those you do need are up to date.
2. Check Your Custom CSS: One of the key things that impacts WordPress page speed is excess, unnecessary CSS code. Here’s a step by step how to do that without a plugin. For those that are not as tech savvy, a good plugin to help with this is WP-Rocket that boasts up to 88% less CSS used.

 

To Summarize

In short, don’t put anything on your site it doesn’t have to have. Make sure you understand what capabilities your WordPress theme allows and compare that to what you want your site to be able to do and look like. Once you’ve evaluated your needs vs. your capabilities, trim the fat. Get rid of any functions, code, images, fonts, etc. that you don’t have to have. If you’re following along to speed up your WordPress site, then you should be able to re-run a speed test and see an improvement already. Think sleek and minimal. A great looking site can still be fast and score well on performance if you do the extra steps to get it in shape.

 

Bonus Speed Tricks:

1. Lose the excessive animations.
2. Cut back on background images.
3. Only use videos when necessary.
4. Keep the number of pages to a reasonable number.

 

 Speed up your WordPress site for mobile users in part 3

Want us to handle speeding up your site? Talk to Glass Ivy now.