Quick Tips Tech Topics

Optimizing WordPress Websites for A-Grade Speed Index

In this article, I’ll be sharing my knowledge and expertise on WordPress performance/speed improvements. WordPress is a free and open-source content management system written in PHP and paired with a MySQL or Maria DB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

Nowadays it’s essential to maintain a good website speed grade to get higher rankings on search engines. It is stated that the websites take more than 5 seconds to load get a lower ranking of popular search engines, therefore, maintaining a higher page loading speed is crucial.

Many methods can be used to enhance the speed of your website. Many people think that increasing hardware specs might help out to get good rankings on search engines, this method might not work all the time, and it should be done only at the last stage where the system runs out of resources. The importance of optimizing websites comes to play before doing any kind of hardware optimization.

Let’s have a look at some of the important optimization and website auditing methods.

Website performance auditing

Before you apply any optimizations it’s required to do a website audit to check the page speed rankings. By doing such an audit you will be able to analyze the durations that each component takes to load. By doing this it makes it much easier to debug what makes your web page slow. Maybe it could be images, fonts, page rendering issues, or issues with server response time also known as the time to first byte (TTFB). There are solutions for all the issues that are analyzed at this stage.

Now let’s learn to generate an audit report. You can simply generate audit reports by visiting https://gtmetrix.com/ and entering your website URL at the text field provided. Within a few clicks, you will be able to generate a detailed report on your website.

As you can see in the above screenshots they have given accurate benchmarks of your website’s performance. This content seems to be user-friendly and readable by anyone. But there are some sections that you’ll need to pay attention to. When you visit the Waterfall tab here it gives you a detailed Gantt chart type timeline that takes all the components to load. By using the content type filters you can easily filter and analyze for a particular content type. Make sure to check which elements take a long time to load.

Gtmertix Report

Apart from Gtmertix, there’s another tool offered by Google known as Google Page Speed Insights. When you generate an audit report with this service, it’ll automatically give you useful suggestions that could be done for your website.
Simply visit https://developers.google.com/speed/pagespeed/insights/

Google PageSpeed Insights Report

Server caching / Browser caching

Caching is one of the methods how you can reduce the initial server response time and the overall page loading time. There are two types of main caching methods.

Workflow of a Cached System; Source:: https://networkencyclopedia.com/cache-server/

Server cache: This is a method of caching the dynamic PHP pages in static HTML format within the server. When the user requests a particular webpage, the user will be shown the cached HTML page. This process will prevent a large number of requests from executing SQL queries for the same data. Since it’s a static HTML it’ll eliminate page rendering and waiting times.

There are many plugins and solutions for server caching. I’d personally recommend the WP Super Cache plugin for this purpose. The plugin automatically generates static HTML files and resides them within the server.

Common configs for WP Super Cache

Browser cache: This is a technique that prevents redundant requests from being sent to the server from your browser, instead, your browser keeps a local cache of the static content and media files. You can manually configure the content expiration times of the cached files.

Image optimization / WEBP serving

Generally, images are the heaviest components of a website. The heavier your website is, the more time it takes to load. Therefore it’s advisable to make your page lightweight as much as possible. Sometimes you might feel that large-sized images should be there for better resolutions. Yes, it’s true, but there’s a better format for serving large images. This format is known as WEBP. Many plugins could be used to convert your existing heavy-weight images to WEBP. Short Pixel is one of the most popular plugins that do the job perfectly, but there’s a small fee involved after the free tier. Short Pixel comes as a CDN and a bulk image converter tool. If you use the CDN your images will be displayed via their own CDN network by automatically changing the format of the photos to WEBP. If you use the standard version it’ll convert all the images within your own server and serves as WEBP, it might consume some significant amount of graphic memory! The choice is up to you 😉

Image Source: https://www.wpblog.com/shortpixel-image-optimizer-review/

CDN Plugin: https://wordpress.org/plugins/shortpixel-adaptive-images/

Converter tool: https://wordpress.org/plugins/shortpixel-image-optimiser/

More information available at https://shortpixel.com/

Static files optimization

Apart from images, there are many static files such as CSS, JavaScript, and Fonts on a website. These files need to be served with a good caching strategy. That means cache rules have to be written for both the server-side and browser side. Also, there’s an important process called minification, which means that the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality. By doing this process it helps to reduce the file sizes and serve with better performance.

Let’s have a look at how we could do these with a plugin called Autoptimize which I highly recommend. With this plugin, the process becomes much easier as it handles multiple things for you. Simply go to the WordPress plugin registry and install the plugin with the following settings.

Autoptimize recommended settings

Use of Content Delivery Networks (CDN)

“A content delivery network, or content distribution network (CDN), is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance by distributing the service spatially relative to end-users.” — Wikipedia

As described above a CDN makes your website loads much faster than ever before. There are many free and paid services. The choice is up to you depending on your requirement. Some CDNs are capable of doing many things on behalf of the website, such as handling cache, content minification, load handling, and much more.

Image Source: https://stackoverflow.com/questions/50789237/difference-between-cloudflare-cdn-and-nginx

I’d personally recommend using Cloudflare as a primary CDN as it’s the world’s most popular and free service. Also, they offer many services such as free SSL, page rules, performance insights, higher security, high-speed DNS service, etc. Let’s see the recommended Cloudflare settings for WordPress.

You can download the Cloudflare WordPress plugin and install it on your WP site, and it gives you instructions on how to connect Cloudflare with your website. Simple check the documentation at https://www.cloudflare.com/integrations/wordpress/

Before you install the plugin make sure you have linked your DNS and hosting settings with Cloudflare. See the guide at https://support.cloudflare.com/hc/en-us/articles/201720164-Creating-a-Cloudflare-account-and-adding-a-website

Object Caching

Let’s assume you are building an online store with a large number of products (> 10000) in this case you might notice that, the more products get added the slower your site becomes. That’s due to a large number of concurrent database calls from your client-side. The database calls are mandatory to retrieve data for clients, but why can’t we cache these DB calls for the same types of data? Yes, that’s possible too! This process is called object caching and it has to be handled from the server-side.

Image Source: https://scalegrid.io/blog/using-redis-object-cache-to-speed-up-your-wordpress-installation/

As a prerequisite you need to have a Redis server installed in your server, as well as you need to have a Redis extension installed concerning your PHP version.

If you have a dedicated hosting provider (VPS), you should be able to install Redis on your own. The step by step guides are provided at https://redis.io/topics/quickstart

Also, the PHP Redis extension can be found at https://github.com/phpredis/phpredis and all the installation instructions are given in the docs.

Finally, you need to install the WP Redis plugin to connect your WordPress website to Redis. It won’t be that hard to follow the instructions that are provided at https://wordpress.org/plugins/wp-redis/

The content loading order optimization

When you carefully analyze the Waterfall tab in the Gtmertix report you’ll find out that some of the resources have been loaded late, while those are capable of loading at the initial stage, due to internal misconfigurations sometimes different contents loads late. This issue can be solved by prioritizing component loading order.

Gtmertix Waterfall

When you want to use native services such as Google Analytics, Facebook Pixel, Hubspot, etc. that allow embedding JavaScript codes, it’s always better to avoid using third-party plugins for ease of use. Instead, you can use a custom snippet plugin and embed the desired services directly on your WordPress website. I’d highly recommend the code snippets plugin for WordPress

Sample Snippets on WordPress

Hardware/Hosting Package Upgrades

If you try all these tasks and still get higher traffic to your website and slows down for no reason, it’s time to check the server resource usage logs. If you see high resource usage at a peak level it could be high time to upgrade your hosting package or virtual machine hardware. This process varies from hosting provider to provider, therefore you might have to consult your hosting provider for this matter.

If nothing works out, contact us at [email protected], we are always there to make your technical needs a reality for affordable rates. We at Inforwaves offer a large number of services for all your tech needs.
Visit us at https://inforwaves.com/

Also if you want to reach me out, don’t hesitate to drop a message on LinkedIn https://www.linkedin.com/in/sureshmichael/