Everyone wants an A grade or 100% score, but this is not always possible. 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 piece of crap 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. 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, we will let you know what are the essential things you can do now, then over time optimize the elements in your website.
How to optimize your WordPress hosting?
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. 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.
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 not migrate to a host that does.
How do I optimize my WordPress theme?
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 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. 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.
Keep the Home Page to a minimum. 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. 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. You can not use these reasons, however; it looks slick, my family member says it is neat, or XYZ has it on their site.
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. 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.
How do I optimize my WordPress Plugins?
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. 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.
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. Some developers will say you should build everything custom. If you have $7,000 and upwards to develop your site, then do that (We do that for our larger clients). If you want to use a page builder to complete the job faster, then go with Elementor Pro. It 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.
How do I optimize CSS/JS on a WordPress Site?
Remove the “bloat”, then prioritize. 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 redefine 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. 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.
How do you optimize Google Fonts?
Everybody loves those fancy fonts provided by Google. 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. But the savior can help.
How do you optimize images for WordPress?
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 page webpage 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.
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). This does reduce the file size of the image and WordPress set up correctly will resize the images for you. Then you should optimize the resized image and put it 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.
But remember 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.
How do you optimize the database in WordPress?
Make sure the database engine is InnoDB and not MyISAM. Rebuild/Repair when necessary. Remove unused transients. There are plenty of 3rd party plugins out there that will do this for you, even convert MyISAM into InnoDB. But remember our savior.
How do you optimize the administration area in WordPress?
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. You can use a 3rd party plugin to limit when and where the heartbeat is triggered (there is also the savior to remember).
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.
How do I optimize WordPress for Speed?
Each of the previous items listed prior ar a part of this optimization for speed. There is a reason that at PW.A 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. If you already have an existing website this is the second thing you can do to optimize the site, as long as you are on a LiteSpeed server.
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 is a free plugin.
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. For JS it will minify, combine, and give an option to load JS deferred or delayed.
It will minify the HTML, prefetch the DNS, remove query strings, load Google fonts asynchronously or remove them is serving locally, remove WordPress Emoji, and even remove Noscropt 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. It will also lazy load iframes. LSCWP also incorporates viewpoint images so images above the fold are not lazily loaded.
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. It offers database optimization and also heartbeat control. LiteSpeed even has its own CDN, which 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.
