What is WordPress Optimization?

Everyone wants an A grade or 100% score, but this is not always possible. Excuse the brutal honesty but If you take a piece of “crap” and optimize it, all you have is an “optimized piece of crap”.

This holds true when you take a bloated theme, bloated plugins, and non-optimized elements and add a speed cache plugin to the site, you achieve a faster site with still subpar speed scores and low core vitals, but they are a little better than they were before. In order to get true optimization, every element of the website needs to be 100% optimized.

Those that are just starting out and have not built their website yet, are on an easier path. When we develop a site for you it will be already optimized.

For those of you with an existing WordPress website, the path is harder.  You have already invested in your site and financial resources are not readily available to rebuild your site from scratch.  If you fall into this category, sign up for a free consultation and we will let you know what are the essential things you can do now, then over time optimize the elements in your website.

Let’s face it, not everyone has the financial resources to start with VPS or higher hosting.  Build an optimized site on shared hosting if it is a Managed WordPress hosting plan, and as traffic increases (which is a good thing) move to a higher plan to handle that traffic.

Some developers will tell you to start out with VPS, dedicated, or cloud-based hosting, do not use shared hosting. At PW.A we tell you to start out with a hosting plan that has the resources to run your website.

The server equipment should be top-notch and use an operating system that is designed for WordPress Optimization. At PW.A we know that the operating system is LiteSpeed. You can read more about this in our blog entry “WordPress the Right Way“.  It is built for speed and is the fastest WordPress stack.

If you already have an existing website check with your host to see if they have a LiteSpeed package, if so migrate to that.  If they do offer Litespeed, is the crawler enabled for shared hosting (if shared is what you require). If not migrate to a host that does.

Start with a lightweight, minimal blank theme, with no styling at all except for reset.css. At PW.A we recommend the Hello Theme by Elementor as it meets all of these requirements. The best thing about starting out with a blank canvas is it inspires creativity. You end up with a customized unique theme, just as unique as your business is.

The thing you do not want to do is to take a demo of a theme and just change the images and content. You will end up with a “bloated” theme and lots of unused CSS/JS. 

Keep the Home Page to a minimum, but still enticing. Remember, you want to get your visitor to engage with your website and it should be designed that way. If you put everything on the Home Page, there is no reason for them to click anything on the website to find out more. It creates a very large page that will load slowly.

Adding fancy elements that serve no purpose will slow down the main page of your website, and today’s visitors will not wait long for that page to load.

Also, a lot of websites put up sliders and hero (large) images.  Before you put any fancy elements on your Home  Page, ask yourself for 3 valid reasons it should be there. However, you can not use these reasons: looks slick, my family member says it is neat, or XYZ has it on their site.

40% of users leave a webpage if it takes more than 3 seconds to load. The one that leaves, may have been the one who needed your product or service and probably would have purchased it.

Do not go and install everyone you think you may need, just install the ones that you absolutely know that you need. When you install the typical plugin, its CSS and JS are loaded on every page and post even if you do not use its function on that page or post.  This means “bloat” and lots of it.

Less is more. Less is more. Less is more.  I repeated that because it is true.  When you first install WordPress and go to the plugins page and hit add new you will see more than 58,000 plugins.

At PW.A we aim to bring an affordable web presence to SMB/SME owners. In order to do this we use Elementor Pro as our page builder in order to complete the job faster.

Elementor Pro offers widgets (serve the same purpose as plugins) that only load their CSS/JS on the page it needs to.  With the numerous widgets it offers, you cut down the need for 3rd party plugins. Also, It uses the Hello theme. To us, that is a win-win.

For example, if you want a custom WordPress online store and you use Elementor Pro, the only 3rd party plugin you need to install are WooCommerce and the desired payment processors. With this package, you can customize the Home and/or Shop Page, the product category pages, the individual product pages, the shopping cart, and the checkout page.   As we said, win-win.

Prioritize, then remove the bloat. To do this right, you want to start out with creating the global CSS. Isolate the CSS that is used on every page/post of the website and that is your global CSS.

That should be a relatively small file and pre-load it. This should contain, for example, the CSS for text and headings, the background color, page width, etc. 

Then you create the critical CSS for each post and page for the area called “above the fold”. This is the area that is immediately visible to the visitor as soon as the page/post loads. Be sure not to repeat the CSS you have in the global CSS. Critical CSS should be loaded in the header of the page/post.

Then it is time to create the unique CSS for every page/post.  This is the CSS that is left over, less any unused CSS.

But do not forget the external CSS.  A lot of plugins or features may put their CSS in external files loaded from external sources.  They operate on the premise that a visitor’s browser may already have loaded the CSS when visiting another site, so that file may be already in the browser’s cache. 

The problem here is if it is not, the file contains a lot of CSS that will not be used and would become bloated. You can take the external css and but it on your server, this way you are serving it locally. So before you start the process above combine the external and internal CSS first.

You then repeat the same process for the JS on the site. If it sounds like a lot of work, that is because it is. But there is a savior out there called LSCWP which will discuss in a bit. There are also 3rd party plugins (usually premium plugins) that do a pretty good job of helping out here.

Everybody loves those fancy fonts provided by Google.  Have you ever seen the “Waiting for fonts.googleapis.com” message on the status bar of your browser? For every Google font you use, on average add 0.75 seconds. 

These are render-blocking resources, meaning the fonts need to be loaded before the page can load.  You can load the standard fonts first and then swap in the Google fonts, but this could increase your cumulative shift, hence giving you lower core vitals. 

Seems kind of ironic that the fonts supplied by Google will give a lower score for what Google uses to rank your website speed.  It is built on the premise that the visitor’s browser may already have the font in its cache.

So you should keep down the number of these fonts and sizes to a minimum and load them from your server locally rather than externally and include them in your CSS optimization.

Images are a large part of the problem, especially unoptimized ones.  You take a photo with your new Apple iPhone or get one from the internet and then upload it to your site. The problem is that image may be 2MB or larger in size. 

The average website page size is around 2.2 MB for desktops and a little smaller (2 MB) for mobile pages. So 1 of these images can double that size and 3 of them will triple that size.

With unoptimized images, your site will be much slower in loading than it would be if they were optimized.

This does reduce the file size of the image. WordPress if set up correctly will resize the images for you. Then you should optimize the resized images and put them in an optimized format such as WebP.  We can take this 2 MB image and reduce the size to around 20 KB with no visible loss in quality to the human eye.

When you optimize an image you resize it to the largest size that will be needed and resize it for every device (wide screen monitors, desktops, laptops, tablets portrait, tablets landscape, mobile portrait, and mobile landscape). 

Make sure the database engine is InnoDB and not MyISAM. It is a transactional database and is more stable than MyISAM. Rebuild/Repair the database when necessary.when necessary.

Remove unused transients. Transients are a type of temporary data cache. Expired transients are not deleted automatically. They will be deleted when something tries to access the information in an expired transient or by you manually.

Control the number of revisions. “The WordPress revisions system stores a record of each saved draft or published update.”

I recommend controlling the number of revisions anywhere for 3-5 and do not keep revisions more that 180 days old.

WordPress by default is set to keep all revisions, so if you have site that is 5 years old, you will have all revisions of the pagepost for 5 years. I have run into instances where i have seen over 500 revisions of a single post or page.

These suggestions will keep your WordPress database lean and efficient.

The first thing to do is to optimize the database. This will speed up the administration area in Word Press.

The second thing to do is to restrict the WordPress heartbeat.  It does quite a few things, but it also increases the RAM used and CPU consumption due to the fact it runs every 15 seconds.

The third thing to do is to control the WordPress cron. It is an internal function by default, that performs scheduled tasks like checking for updates, publishing scheduled posts, sending email notifications, and other tasks.

By default, it is triggered every time a visitor opens your website.  But if you have a lot of visitors this will affect the speed of the website by consuming excessive resources. 

You can disable the internal mechanism and make the cron an external one by setting up a cron job on your server. You can tell it to run every 15 minutes. You can have your hosting company set it up for you.

Cache the resources. This ways the page/post does not have to be rebuilt each time it is visited. The visitor will see a cached version of the page/post. Make sure it is an “intelligent” cache mechanism so the cached versions of the website elements are rebuilt when the element changes.

Ideally you want to cache both static and dynamic content. Use a CDN for better geographic distribution of your website.

Each of the previous items listed prior are a part of this optimization for speed.  There are some free and commercial plugins that are available to do each of the recommendations above.

The problem with getting individual plugins to do this is you could be looking on average of 7 or more additional plugins in total. This goes against the optimization of keeping the number of plugins to a minimum.

Other issues you could run into is that these plugins may conflict with each other, causing additional problems.

This is why we recommend Lite Speed. At ProWebW.Agency we know that LSWS (LiteSpeed Web Server) is the best operating system for your server.

It uses HTTP3 (QUIC) which is the fastest protocol and the fastest PHP available, but also includes an advanced server-level cache with hole punching through ESI. 

Now when you add what we call the “savior”, LSCWP (LiteSpeed Cache for WordPress) it becomes truly awesome.  LSCWP is an all-in-one site acceleration plugin, that utilizes and controls the advanced server-level cache in LSCWP and has a superb collection of optimization features.  It integrates with Memcached or Redis for an object cache and also sets up the browser cache settings for the user.

As for optimizations, it allows for granular settings. It also covers all of the key optimization points in this article, so you only need this one plugin and it is FREE.

When it comes to CSS Optimization it is a beast. It will minify, combine both inline and external, generate Critical and Unique CSS (dropping the unused CSS), load CSS asynchronously, let you generate CSS per URL, and inline CSS Async Lib to avoid render blocking. It even does font display optimization.

It will minify the HTML, prefetch the DNS, remove query strings, load Google fonts asynchronously or remove them (if you are serving them locally. LSCWP will remove WordPress Emoji, and even remove Noscript tags.

The image optimization settings are fantastic. It will automatically optimize your images for you even when you add new ones. It offers WebP replacement. It will lazy load images, create a responsive placeholder to reduce layout shifts, and even add missing sizes. 

For JS it will minify, combine, and give an option to load JS deferred or delayed.

It will also lazy load iframes. LSCWP also incorporates viewpoint images so images above the fold are not lazily loaded.

It offers database optimization, heartbeat control, and you can even set the number of revisions to keep. 

LiteSpeed even has its own CDN (Content Deliver Network) which delivers your content from a network closest to your visitor. It also offers a free plan.

When PW.A builds your website it comes to you fully optimized.  If it is already built we do offer an optimization service utilizing LSCWP.

You can tell it what JS to localize on the server. You also get granular control to fine-tune JS and CSS. The optimizations do not stop there.