The Ultimate Guide to Speeding Up WordPress Website in 2021

Written by Nick Li

Nick Li is a web developer and web designer who works for Concentric Digital. He helps others to add values to their WordPress website, and develop cross-platform application using Ionic framework and Angular JS!

May 2, 2021

Are you suffering from a slow WordPress Website and is losing those valuable visitors? We know the pain.

While WordPress is a lot of things, it is not well known for being fast. In fact, most WordPress website suffers from slow loading speed, and you likely stumble upon this article because you experience the same problem, and looking for tips and guides on speeding up WordPress website.

Why Website Loading Speed Matters?

No matter what the goals of your website is, it cannot achieve these goals if it has no visitors, and that’s what slow loading speed will get you – low traffic and low conversion. According to Google, best practice is to aim for a 3 second load time, and 40% will abandon it altogether if it takes longer than three.

Audiences want information and they want it now.

Speed is now a ranking factor for Google search, especially the loading time for mobile devices. And since most (if not all!) of your traffic comes from Google nowadays, improving your position in the google search result page (GSRP) by optimizing your website loading speed should be at the top of your list optimizing your website.

Why is my WordPress Website Slow?

It is important to understand that different WordPress sites works differently. You need a different tactics to tackle the problem for different websites. In general, There are three main tactics in speeding up your WordPress website: optimize server time, reduce payload, and responsive design.

Server Time

Strictly speaking, WordPress is a “Content Management System (CMS) Software”, and WordPress website is always dynamically generating the content of your website. When a visitor trying to view your WordPress website, the browser requests the WordPress website hosted on your server, WordPress then load the theme of your choice along with the templates for the page. Depending on the code of the templates, themes and plugins, it request the required data such as the content and the comments for the post/page from the database, and compute the HTML for the page, before sending it back into the browser, and present your page to your visitor.

The more widgets and fancy plugins you have on the front end pages, the more dynamic contents it needs to produces, the more time it takes before it is ready to present back to your browser.

Payload

Your website is not only the HTML documents, it has images, fonts, style sheets and JavaScript that need to be loaded to make your sites look pretty. The larger the files, the longer it takes to transfer through the network. In fact, the visitor’s device also takes longer time to render the image or to run the scripts before it can be shown on the screen.

Responsive Design

Mobile device has a smaller screen, lower compute power and operate using touchscreens. Responsive design refers to having your WordPress website to present an optimized look and experience depending on the screen size and device.

In fact, since a mobile device would likely be using a slow or unstable mobile network connection, and has much lower computing power than a laptop or desktop, it is important that your website presents a smaller payload when a mobile device is detected – and WordPress website usually does not optimize the payload for mobile device well automatically.

Tools for Identifying the Problem

There are a lot of different tools you can use to measure the speed of your WordPress website, including Google PageSpeed Insights. However, while Google PageSpeed Insights definitely provides the most detail reports, as of the date we are writing this article, Google PageSpeed Insights had some significant changes in its method (Significant network and performance throttling), and we find the score provided does not reflects the actual loading speed for most users in a developed country.

Google PageSpeed Insights score is exceptionally low even for a website with decent loading speed in real life situation.

Therefore, for this example, we are going to use one of the most popular and commonly used tools: Pingdom.

Speed Test Location Matters

Most speed test tool have different testing locations around the globe that you can choose for the test to conduct in, Be sure to choose one that is close to you or to your target audience. The reason is that this is all relative to the data center where your WordPress site is hosted. Time to first byte (TTFB)network latency, all come into play. If your target audience spread out around the world, it is important that you utilize content delivery network (CDN) such as Cloudflare, and test your site from a test location that is far away from your server as well. This will also help you see how much of an impact activating CDN has on your WordPress site. You can also disable your CDN temporarily and re-test again without to really see the difference.

Always test from the same test location you choose.

You Have to Test Multiple Times

Caching technologies from your WordPress host server, plugin and your CDN is what makes your WordPress site load super fast.

If you have enabled caching, make sure you test your speed multiple times, so the content is cached by your WordPress or CDN, and it is really reflecting the performance after the cache.

If you want to know if your site is caching properly, press F12 on chrome and look at the HTTP headers (alternatively, the speed test tool may already have a HTTP response headers section). These contain important information about each request.

For example, if the resource is cached, you will find the cf-cache-status: HIT in the header. More cf-cache-status code meaning here.

How to Speedup Your WordPress Website

Choosing a good Web Hosting provider

Let’s face it, it does not matter how much you do following our guide below – enabling page cache, reducing the payload, optimizing the scripts – if the server provided by your Web Host is a lemon, and the network to their data center is slow, it is going to significantly damage the performance of your WordPress website.

We were very disappointed disappointed in the performance and stability of our previous Web Hosting Provider for years, but we did not change because we were afraid of migrating all the WordPress website that we host for our clients. But enough is enough, and we look for another provider, and we are glad we settle with SiteGround in the end.

SiteGround Migrator plugin allow one-click turnkey migration to move a WordPress site from any other hosting company to your SiteGround account, no manual fix of URL or configuration whatsoever needed. Our experience migrating over 20 WordPress Website was a breeze done within a working day.

On top of that SiteGround provides Auto Update function that ensure all the WordPress installations and plugins are up-to-date, and one-click staging lets you make and preview changes to your site without losing its previous versions. It is the perfect tool for testing new templates, design and new code, and allows you to create a backup copy of your site on a separate environment with just a click. Very handy when you are trying new design or actively developing without disturbing visitor serving your WordPress website.

We shamelessly admit that we have become their affiliate, and all the links to SiteGround in this page are affiliated. That is because we had such a great experience with them: less-than-12 hours technical support respond time, extreme server performance with SSD, and not once had our server went down in the past 3 years. We believe their products and services are one of the best in the market, and it is worth recommend to other users, especially if you are looking for an excellent WordPress Hosting Provider .

Turn off unused plugins

The best thing about WordPress is that you can extend it by using WordPress plugins. However, each time a user requests a page from your WordPress site, WordPress starts a loading process. During this process, all active plugins installed on your website are being load. The more loading, the longer the loading time before your website is ready to be served to the browser. Turn off unused plugins is one of the easiest and simplest way to ensure you get your WordPress website speed up.

Installed plugins

Enabling Cache

Since WordPress generates HTML pages dynamically as we have explained earlier, Caching is a fundamental factor in determining a site’s overall performance. With properly configured caching protocols your WordPress site can become a lot faster. It helps prevent redundancy and speeds up load times of your site! Speeding up your WordPress site can be done by Using a Content Delivery Network (CDN) such as CloudFlare or Configure WordPress Caching.

A CDN (Content Delivery Network) is a highly-distributed platform of servers that helps minimize delays in loading web page content by reducing the physical distance between the server and the user. This helps users around the world view the same high-quality content without slow loading times. One of the

Setting CDN requires you to register for an CDN service such as CloudFlare, and modify some of your DNS record. It is not hard but can be challenging if you never manage the DNS before. Most Web Hosting provider – including Site Ground which we highly recommend from our experience – provides CloudFlare integration with just one-click.

Dynamic caching stores all the HTML output of your web application. For example, a WordPress-generated page consists of a dynamically generated HTML part that is cached by the Dynamic Cache and a number of static resources – JS, CSS, images, and other media.

Plugins like W3 Total CacheWP Super Cache and Cache Enabler can be easily installed and will cache your WordPress posts and pages as static files. These static files are then served to users, reducing the processing load on the server. This can improve performance several hundred times over for fairly static pages.

Depending on whether your Web Hosting provider support or not, Memcached may also be deployed. The Memcached service speeds up database calls, API calls, and page rendering by storing data and objects in the server’s RAM to reduce the number of times a database is queried. These greatly reduces the TTFB (Time to first byte) of your site and can reduce the loading time of your pages more than ten times!

As we have already mentioned, we highly recommend SiteGround for your hosting solution, and if you use SiteGround as your Web Hosting Provider as we do, on top of one-click CloudFlare CDN integration and its in-house SG optimizer WordPress plugin that allows easy activation of dynamic caching and memcached.

Reduce your page size and initial payload

Page size refers to the file size in all the resources in your web page, while initial payload refers to how much is loaded initially for your page to be visible in the first place, and these two factors are connected to each other.

More likely than not, the page size of your WordPress website is much larger than it should and provides no functional or cosmetic benefits, hence only harming the loading speed of your WordPress website. Here we list 10 different ways how you can optimize the page size. Some are as simple as activating certain plugin, but some require a bit more thinking and manual input.

Avoid Inappropriate Image Sizes
Properly Size Images

You may have noticed images that were too low in resolution as they would have look fuzzy on your page, but you may not have noticed the images were too high in resolution that just makes it bulky but provides no actual benefits.

Whenever you upload an image to WordPress, not only does WordPress save the original image, but thumbnails of the same image but of different resolutions are generated at the same time.

While most themes should have taken advantage of the responsive image built into WordPress, most of themes on the market did not implement this correctly if at all. The simplest way in this case is to choose the appropriate thumbnail size. If your image is served as an avatar at the navigation bar, it needs a max size of 256px x 256px which is only few kilobytes at best, there is no point of serving the full size 5120px x 5120px image that is few megabytes in size, and cramp it into that small div block on your page. you can choose the correct thumbnail size when choosing the image through the media windows.

Register image sizes for use in Add Media modal - Afterimage Designs
Compress Images

Not all image format are equals, and this is especially true for images served in a web page. JPEG is the most common format for images, but not all JPEG are compressed to reduce the size without noticing loss in image quality.

In fact, a Next-Gen image format called WebP is a modern image format that provides superior lossless and lossy compression for images on the web.  WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

While Smush is one of the most user friendly and most popular WordPress plugin to optimize images, converting to WebP images is a paid version feature. Therefore, we suggest using EWWW image optimizer instead, which provides all the same functions + WebP, but a slightly less user friendly user interface.

EWWW image optimizer
Lazy Loading

Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time – when those images are actually needed, instead of loading them up front. These techniques help in improving performance and loading speed of web page.

Once again, this function should be built into WordPress, but that requires images have a specific height or width properties, which may not be properly implemented depending on your themes. In that case, Lazy Loading can be achieved using WordPress plugin such as Lazy Load or Lazy Load Optimizer, but since EWWW image optimizer already include such feature, might as well just use this instead.

Minify CSS + JavaScript

The term ‘Minify’ is used to describe a method in removing white spaces, lines, and unnecessary characters from the source code, hence making your website file size smaller. The most commonly minified files including the JavaScript and CSS files.

Keep in mind the benefit from minifying the codes is far less than optimizing your images – by correctly optimising one image may already save you few MB in size, while minifying all the codes in your sites may only save a few kB at best. But it is still one step in the process and worth doing it nonetheless.

You can use plugin like Fast Velocity Minify or Autoptimize, which Autoptimize is what we recommend as it also optimize Google Fonts as well. (its image optimizing function is not as good as EWWW image optimizer though, so we recommend you use that for image optimization instead)

Remove Unused CSS + JavaScript

It is likely the scripts from your plugin just loaded onto every page of your website…but that usually is not necessary. For example, your contact form may have loaded across your entire site while it should only be loaded on the contact page. Plugins for social sharing, sliders, rich snippets, live chat, and others can often be disabled or only enabled on certain content. 

Asset CleanUp and Perfmatters can trim the size of CSS and JavaScript by providing you with a script manager to disable CSS/JS on pages where they don’t need to load. This may requires you to have a bit more advance knowledge on how each plugin works, or at least, what plugin is activated on your site.

Optimize Google Fonts

Most of the themes nowadays use one or more Google Fonts. When a font is requested by the user’s browser, the font is grabbed from one of the Google server, and at the same time, their IP is logged by Google and used for analytics.

By hosting those fonts locally,  you minimize DNS requests to Google server and speed up your WordPress website, additionally, it also makes your website more GDPR compliant . You should also Add “font-display: swap” to ensure text remains visible during webfont load.

You can achieve Google Fonts optimization by using Autoptimize or EWWW image optimizer.

Optimize Third-Party Code

When trying to avoid enormous network payloads, you may notice files are being loaded from a third-party site. These resource would be out of your server controls and may harm your loading speed when the third-party server is the culprit.

There is no easy way to optimize this, but most plugin provides certain options to delay or lazy load the third party resources. Make sure you check the options for all your plugins

Delay JavaScript

JavaScript files can be huge, and those takes computer resources to run and executes. Delaying JavaScript won’t help avoid enormous network payloads since you’re just delaying JavaScript (not optimizing it), but it can improve your site’s initial load time and first contentful paint, which are your web vital scores and ensure your visitors have something all their screen first faster.

The benefit is especially obvious if you delay large, resource hunger scripts such as AdSense.

Identify Your Slowest Plugins

Flooded with over 50,000 plugins in the WordPress Plugin Directory, some of them are well made…. while some of them are not. Some may have too many unnecessary quries to the database while they only need one query. The more queries, the longer it takes to complete its action, and the slower your website.

Query Monitor is a great tools for finding slow plugins.

Query Monitor has a “queries by components” tab which shows your slowest loading plugins. If you have plugin that is exceptionally slow, and is not essential for the function of your website, you may want to deactivate it, or at least, find a better alternative.

Query Monitor Slow Plugins
Reduce Number Of Elements On The Page

It is tempting to have images, videos and sliders everywhere on every page of your website, but the truth is all of these increase the payload and requires more resources than plain text and CSS to render on a browser.

We put it as the last methods in reducing your page size because we know it is hard work to go through the design and take things out of your already made website. However, while optimizing image size was a good way to reduce payload, it is far better off to eliminate the image at all if it is not really needed. For example, if the background is a simple color gradient, you do not need to use an image background but achieve the same (or even better) effect using simply CSS. You can achieve reducing number of elements by:

  • Reduce images
  • Reduce videos
  • Reduce sliders
  • Reduce featured posts
  • Reduce social media feeds
  • Break blog comments
  • Show smaller excerpts

You May Also Like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *