How to speed up WordPress websites?

Speed up your WordPress Website                              

WordPress is the most widely used content management system (CMS). One of the reasons it is so popular is its ease of use. You don’t need to be a programmer to build up a website using WordPress CMS. In this tutorial, you will learn how to speed up your WordPress website. Web Page speed is essential for the best user experience. The speed of the WordPress website depends on many things and has a good effect on the overall SEO. According to Google, two pages with all other factors similar but speed, the one which loads faster will have a better ranking. Most of the visitors don’t even arrive at the website if it takes more time to load. Keeping the importance of speed factor in mind, many website owners are implementing the AMP version of their websites. You will notice a considerable reduction in load time if you study this tutorial with due attention.

Let’s now discuss all factors one by one. All these factors are equally important and contribute to reducing the page load time. We will explain it with practical examples. The site we have considered for practically implementing these steps is https://gctswabi.com. This website does not fulfill all the factors requirements, but still, you will see a dramatic change in page speed. For example, this is on shared hosting, no CDN, LazyLoad images are not applied. You can see in the following pictures that its speed is very less both on GTmetrix and Google Page Speed.

page speed before optimization.png

Good Host

Hosting company and the plan both contribute a lot to web page speed. The test website in this tutorial is itself on shared hosting, but it will be shifted to VPS soon when traffic increases. It is a new website and has less traffic until now. Shared hosting will not help you if website visitors are great in number. Besides hosting plans, hosting providers also contribute a lot to reducing the page load time. Many hosting providers claim to provide SSD storage, unlimited bandwidth, etc. but their servers become irresponsive when the number of active users on-site increases.

Good Theme

The theme also has a considerable contribution to WordPress page speed. A theme with a lot of functionalities and animations load slower than the one with a neat and straightforward design. Before purchasing a theme, check its page size and load time. Every theme provides a link to its demo page. Copy that demo link and paste it in Google page speed or GTmetrix. Only purchase those themes which load faster and have less page size.

Resize and Compress Images

You should not upload large file sizes to a website. An image with a large dimension is good for printing purposes but it ruins the speed of the website. For example, an image is 2400 x  5000 pixel and you need only 400×400, then you must resize it prior to uploading. Images should be resized using an image editing tool like Photoshop. You should not use HTML code to resize images with max width and height attributes as the actual image size does not change with it.

Image optimization also has a massive effect on page load time. We, therefore, recommended compressing all images before upload. There is an online tool that I use for image compression call Short Pixel. If you have already uploaded images to your website, then you will have to use their Plugin to compress all your pictures. It has some pricing plans, but the free version also works for most of the users. The free image compression quota is 100 images per month. You can also buy a onetime image compression.

Click here to view the details of shortpixel image compressor.

Cache Plugin

A cache is temporarily stored assets for quick access when requested. This cache concept on websites is similar to the one used on computers. Cache improves website performance and load time. WordPress is a dynamic CMS, so it contacts the database each time a visitor request a resource. It slows down the overall page speed, especially when a large number of users visit your website increases at the same time. Cache Plugins make a copy of the webpage when it loads for the first time in a visitor’s browser. Then it offers the identical copy to subsequent visits of the same user. The page load time thus increases significantly.

Caching static resources like HTML, javascript, and CSS also reduce page load time. There are many WordPress Cache Plugins available on the WordPress repository, but the most familiar cache Plugin is W3 Total Cache. Besides this, WP Super Cache and WP Rocket are also very common to use.

Content Delivery Network (CDN)

Content Delivery Network (CDN) also increases WordPress page speed. It is a collection of distributed servers that offer static resources of a website to users based on their location. This CDN is vital for sites with more traffic. There are different plans for using a content delivery network on your website. The choice of a particular plan depends on the monthly page views of your website. As we have distributed servers in CDN, the server nearer to the visitor offers him static resources of your site like CSS, javascript, and images.

Home Page Optimization

If you have addressed the user query efficiently, he will most probably jump to the home-page after reading your article. We, therefore, recommend paying particular attention to the load time of the home-page of your site. The following steps can help to optimize the home-page for better user experience and performance.

  • Show only the summary on the home-page and not the full post
  • Remove sharing and other unwanted widgets from the home-page.

Keep minimal number of posts on homepage

Optimized WP Database

There are a lot of database tables which you no longer need. When you uninstall a Plugin, its tables remain in the database. Besides database tables, there are post revisions, drafts, etc. which make your database load slowly. Fortunately, there is a WordPress Plugin (WP-Optimize), which makes the process simple. It is highly recommended to backup your database before using this Plugin. Because a table once deleted cannot be restored if you have not taken a backup of your WordPress database. You should also remove the tables, recommend by the Plugin for deletion, with great care.

Add expire headers

Expire headers tell the browser how long to store static resources in a local cache so that they can be served upon subsequent requests. The visitor’s browser downloads the files again when the headers are expired. This value should be set depending upon how often you make changes to CSS, JavaScript, etc. You should set short expire header values for things that you change frequently and set large values for expiring headers for items you change after a long time. You can specify file type and format in expire headers. Look at the following examples

# Images

  ExpiresByType image/jpeg “access plus 1 year”

  ExpiresByType image/gif “access plus 1 year”

  ExpiresByType image/png “access plus 1 year”

  ExpiresByType image/webp “access plus 1 year”

  ExpiresByType image/svg+xml “access plus 1 year”

  ExpiresByType image/x-icon “access plus 1 year”

  # Video

  ExpiresByType video/mp4 “access plus 1 year”

  ExpiresByType video/mpeg “access plus 1 year”

  # CSS, JavaScript                        

  ExpiresByType text/css “access plus 1 month”

  ExpiresByType text/javascript “access plus 1 month”

  ExpiresByType application/javascript “access plus 1 month”

LazyLoad Images

LazyLoad images are displayed only when they are needed. The webpage shows images above the fold only and displays other images upon scrolling. The browsers don’t need to wait for all the elements on the page; hence the speed of page increases. If we don’t apply LazyLoad, the webpage will wait for all the images to download, and the page will not be fully functional until images are downloaded. With LazyLoad, the webpage does not wait for image downloads to be functional. When the reader scrolls down the page, the original image is not visible at the start. Instead, a placeholder is displayed on the page; this placeholder gets replaced by the original image when it comes to the viewport. The process of LazyLoading, therefore, improves the overall performance of the page significantly.

W3 Total Cache has now included an option for LazyLoading images. A separate Plugin is also available which can be downloaded from WordPress repository but it is recommended to use the option in W3 Total Cache instead of using a separate Plugin.

Use CloudFlare

Cloudflare also provides the same functionality as CDN. If you have not used CDN, it is recommended to use Cloudflare. Cloudflare is free, and it also has some paid features. Another good thing is that it can be integrated into the W3 Total cache, and the combination gives astonishing results.

Look at the results after applying these steps. I have not used CDN, a shared hosting but still, I got tremendous improvements as apparent from the following screenshot.

page speed after compression.png

Thanks for reading! Please share with others if it has helped you achieve the target goals.