Guide to Increase Pagespeed of Wordpress

Pagespeed is a term often used to describe the page loading speed of a website. It covers the time it takes for a web page to fully load and display to visitors.

Pagespeed is important because it affects user experience and content availability. Since Google announced that website speed is one of the ranking factors, as website owners, this is certainly something to pay attention to. 

We realize that every user wants to have a comfortable and fast website experience. In fact, every visitor will leave a website within 12 seconds to 7 seconds in recent years. A huge impact such as decreased conversions, reduced page views, and decreased website visitor satisfaction. 

It is unfortunate that a slow website can make users leave our website before they even see the content provided or the products that are offered.

Not only users are affected, but also search engines. Google will penalize a slow website by lowering its ranking in search results. 

So, how do we build a great website so that the quality content and products we provide are not in vain? Here's how.

What Causes a Slow Website?

There are many things that cause a slow website, some of the main causes of websites with Wordpress are as follows:

• Web Hosting - When the hosting server is not configured properly and not as needed.
• Wordpress Configuration - If the Wordpress site does not cache the pages, the load on the server will be heavier which makes the website slow.
• Page Size - This happens when the page loads a lot of assets such as fonts, images, or videos that have not been optimized.
• Poor Plugins - Overuse of unused plugins or poorly coded plugins.
• External Scripts - Scripts like ads, font loading, and others that affect web performance.

Purpose of Website Speed Optimization on Wordpress

Before optimizing Wordpress speed, it's important to understand why improving website loading speed is important. Usually, the goal is to make the website accessible quickly to visitors.

However, sometimes with the existing design, scripts that have been used such as CSS, js, external scripts (from other websites), and assets, this optimization becomes difficult to do. Therefore, from here we will learn what needs to be done to improve website speed on Wordpress.

Analyze Wordpress Website

How to analyze a Wordpress website to know what causes a slow web load. There are several tools that can be used to analyze websites, here are some examples:

1. Pagespeed Insight
   Pagespeed Insight is a tool made by Google to assess how fast a website is accessed. From here we can also assess website speed on desktop and mobile devices.
2. GTMetrix
   GTMetrix is also a tool that can analyze and test the speed and performance of a web page. By using GTMetrix, we can also find out the details of page loading time.

What are LCP, CLS, and TBT?

There are a few things to know before increasing web speed, which is to analyze things like LCP, CLS, and TBT. The following is an explanation of these terms:

1.  LCP (Largest contentful paint)

LCP is one of the metrics used to measure the speed of a web page. LCP refers to the time it takes to render the largest content element visible in the user's viewport. This content element is like the largest image, video, or text block.

The LCP benchmarks are as follows.

So, here are 4 factors and effects of LCP on websites

How the 4 Factors that influence the LCP work

2. CLS (Cumulative Layout Shift)

CLS is one of the metrics that measure the layout stability of a web page, this happens when the page layout changes unexpectedly causing visitors trouble. For example, when visitors read an article, click on a link, etc.

CLS calculates the difference between the position of elements when loaded, the greater the difference will affect the resulting CLS value. The following is the CLS score benchmark.

3. TBT (Total Blocking Time)

This is the time required by the browser to wait for a response from the server before it can continue the page rendering process. The longer the waiting time, the slower the page will load and display to visitors.

Here are the benchmarks to calculate the score of TBT.

How to Increase Wordpress Website Speed?

After we learn the objectives, know the optimization tools, and some metrics to consider, then we can optimize to speed up website loading with wordpress.

There are several main recommendations that can be applied as follows.

1. Good Hosting or Server for Wordpress 

The Wordpress hosting service that we rent has an important role and greatly affects the speed of the website later. Let's say that hosting is a house and our website is the person. Therefore, choosing the right hosting can help the website be accessed quickly.

Here's what to consider when choosing a hosting.

A. Data Center Location

Determine the geography of website visitors, is the target audience Indonesian? Overseas? or the whole world? This location selection is the first thing that must be done in relation to the target visitors who visit the website the most. 

For example, if the target visitors are only from Indonesia, then the data center is too far away if the server is in Europe. Normally, Indonesian visitors can use Indonesian or Singapore servers with pings ranging from 10-100ms.

B. Hosting Specifications

Choosing hosting specifications that can accommodate our website properly is the main thing, not too big and not too small for the size of Disk Space, RAM Memory, Bandwidth, and Inodes. I recommend choosing Hosting with NVMe SSD disks instead of HDD disks. Because NVMe SSDs transfer data 25x faster than HDDs.

C. Hosting Providers

There are many types of hosting provided by providers but broadly speaking there are 3 types of services sold:

1. Shared Hosting
2. VPS
3. Dedicated Hosting

D. Choosing a WebServer

A web server is a piece of software or hardware that receives requests from website visitors and sends them back in the form of responses such as web pages, images, files, and other data. Choosing a web server is important and currently, there are 3 web servers that are commonly used by hosting providers:

1. Apache
2. NGINX
3. Litespeed

As much as possible to avoid Apache Web server, I suggest NGINX or Litespeed are better. 

E. PHP Upgrade

Wordpress uses PHP as its code base and every Wordpress version update also needs to adjust to the latest PHP version to avoid code errors. In addition, it can also increase a few percent of the code script execution speed. 

It should be noted, Wordpress must be compatible with the latest PHP version, if an error occurs after upgrading the PHP version, most likely there is additional code, themes or plugins that are not compatible with the latest PHP version.
 

2. Wordpress Performance Optimization

In this digital era, making changes to wordpress performance optimization is a way for websites to be accessed quickly. Therefore, load speed optimization is one of the important factors. Here are some ways:

A. Update Wordpress Site

Wordpress is a well-maintained open source that is updated frequently. Each update also provides new features and fixes certain security issues and bugs. Wordpress themes and plugins also have regular updates. Therefore, as a website owner, it is necessary to update the latest version of the site, themes, and plugins.

B. Use an Optimized Theme

How to determine a theme that has been optimized? When choosing a theme we need to pay attention to a good theme, not choosing a theme that is poorly coded and can slow down the website. 

It is better to use a simple theme than a theme with a large coding size with a complicated layout and flashy animations. If you are looking for a theme reference, consider the following specifications:

1. Optimized code.
2. Responsive.
3. Lightweight file size.
4. Use of caching.
5. There is image optimization.
6. Theme performance that has been integrated with JavaScript.

C. Page Builder Optimization 

Page Builder is popularly used to create page views because it is very easy and fast. However, with a one-page builder component, there will be a lot of HTML, CSS, and js loaded. Then how to optimize it?

1. Elementor

If the website uses Elementor, in the Elementor builder settings some of these features can be enabled to increase Wordpress speed.

2. Divi

For the Divi page builder, you can check the Options section then Performance, and enable it according to the needs of the website.

D. Optimizing Images

Images are one of the factors that slow down website loading the most, due to the size and format displayed on the website. Some things that need to be optimized from images before uploading.

1. Image format selection

Generally, there are 4 image formats for websites, namely png, jpeg, gif, and webp. Of the several formats provided, it is more advisable to use the webp format because it is the latest generation format and is in accordance with the standards for website load speed.

2. Adjust Image Size

Many people upload images with large sizes, for example (2500px) X (1600px) even though the sidebar section only needs a size of (675px) X (432px). So, we need to adjust the layout that we want to display.

3. Compress The Image

Images that have been adjusted in size will reduce the size of the image. To be more optimal, you can compress the image so that it is even smaller and ready to be uploaded to the website. Ideally, the size of the uploaded image is no more than (50kb) for images below (1000px) and less than (100kb) for images above (1000px).

4. Responsive Image

Fortunately, wordpress by default has created a responsive image structure. So, there is no need for settings in terms of responsive images. In addition, responsive images also help from the SEO side to increase the loading speed of a page, improve user experience, be mobile friendly, and reduce bounce rate which refers to visitors who leave the website.

E. Determining Background Transparency

Usually, website layouts use background images that have certain images/patterns. However, if the background only uses plain colors or gradients, it would be better not to use images. Thus the website has fewer images loaded. 

F. Removing Unused Image Size

Images uploaded to wordpress will be stored on wordpress media and assets files in the wp-content folder. Unused image files weigh down the hosting and make the server require more resources.

Although it doesn't directly slow down the website for the user, deleting unused images will help the upload process because the server will feel lighter. On the other hand, certain themes or plugins can make the image size from the wordpress default.

G. Optimize Existing Images

When we find a website that has many images that have not been optimized, the solution is to optimize them with a plugin. From some research, here's a comparison of image compression plugins.

The Lossy method has a better compression rate, but the result will be more broken when used at a high compression rate. Lossless, on the other hand, has a lower compression rate than Lossy, but there is no difference between the original image and the compressed image.

H. Lazy Load on Images

It is necessary to delay the loading of assets until they can be seen by website visitors. There is no point in creating assets that cannot be seen by users except for ads. Here is the information when using Lazy load on images:

Pros

• Minimize requests during load.
• Speed up loading.
• Save bandwidth.

Cons

• Blank when doing a fast scroll.
• CPU usage is slightly higher.
• Visitors feel lag when visiting the website.

3. Increase Website Speed with Plugins

Want a fast website but in a fast way too? We can use plugins to fix the problem. 

A. Cache

For caching, you can use Litespeed if you are using a Litespeed server as well, as this can significantly increase website speed. In addition, there are already some hosting providers that provide Litespeed by default. In addition, the plugin is free.

Main Features of Litespeed Plugin

• Server Caching: Faster than other file-based caching, as it is also supported by Litespeed servers.
• Guest Mode: Improves first-time visit load time.
• Public/Private Caching: There are settings to control public and private caching. 
• Optimize HTML, CSS, and JS: Optimize such as minify, merge, or delete unused files.
• Lazy HTML Loading: Load HTML elements with a lazy load such as in the comment section and footer.
• Image Optimization: There are more image optimization settings than any other cache plugin.
• Gravatar Cache: A cache plugin that can cache Gravatar externally.
   

If you use another web server like NGINX, you can use Flying Press, but unfortunately, this is not free.  

The main features of Flying Press are as follows

• Remove unused CSS: remove unused CSS by means of a separate file.
• Lazy render element HTML: Similar to the lazy load image, only on HTML elements, such as the comment/footer section.
• Youtube placeholder: Prevents external requests to embed videos. 
• Lazy Load background image: Can be used to select the background image class section.
• Page Preloader: Preload to prevent CPU spikes.
• Important image preload: Preload a number of images that are visible in the screen viewport.
• Host fonts locally: Prevents fonts.gstatic.com requests when using Google Fonts.
• Fetchpriority: One of the features that can set the image priority (high, low, default) and can improve LCP by setting LCP to the highest priority.
   

B. CSS & JS Script Optimization

By default, wordpress has several HTML scripts that are automatically obtained, JS to load functions on the front-end, or CSS from plugins and themes. 

So, it is necessary to do this optimization to reduce the load of scripts that are not used on the website. There are several methods that can be done such as using plugins or done manually when adding scripts separately.

1. Remove unused CSS

Some CSS files in plugins are sometimes not used, it is better to delete these files or do not need to be loaded. Here's an example script of an unused file.

In Wordpress, CSS can be cleaned up using the Perfmatters plugin which can manage CSS or JS faster in a separate file. This is an example of setting up one of the plugins that are disabled and can choose at what page location you do not want the plugin to load.
 

Besides the Perfmatters plugin, we can also use the WP Rocket plugin to delete unused CSS. By selecting the URL path, class, section id, or tag.
 

2. Remove unused JS

Just like unused CSS, deleting unused JS file scripts needs to be done as well. An example is the Perfmatters plugin that deletes the js file of the Contact Form 7 plugin on the article details page.

3. Minify or Combine HTML, CSS, or JS files

Minify is a way to reduce the file size by removing white space and comments in a script file. Here is an example of a file that has been minimized. It can be seen for the jquery file size (260kb) after being minimized to (84.6kb). This will have a big effect if the file we provide has a large size.

As for the way to combine, namely by combining files into one which is used to reduce the number of requests, this is not recommended on websites that have many files or plugins. Because it can damage the website in terms of layout and functionality. 

To combine files, you can check first whether it has a big impact on the website or not.

There are many Cache plugins that provide this feature. Below I provide one example of the Autoptimize plugin for its features.

4. JS file placement

The last optimization for js scripts is file placement, in caching it is called critical assets to determine which files are loaded first. There are 3 ways to load, namely:

• Default: HTML will be stopped when loading JS files.
• Defer: When using the defer attribute on the script tag in HTML the Javascript file will still be loaded without stopping the HTML rendering process, but the Javascript file will be executed after the HTML is loaded.
• Async: The JS file will be loaded at the same time as the HTML.

Here is an illustration of the difference during execution, make sure to place the file correctly. Also, make sure to load the files you want to load first before executing them.

To organize the order of files, you can use the Async Javascript plugin.
 

C. Fonts Optimization

Fonts loaded on the website affect LCP (Largest contentful paint) this is due to the use of external fonts or the display fonts method instead of swap. In addition, it would be nice for fonts to be accessed locally and not taken from external plugins or themes. This can also appear on Pagespeed reports like this.

There are ways to optimize font display or preload on Wordpress:

• Elementor - Supports Google font loading settings.

• Theme or Plugin - Change the display font in the Theme or Plugin file.
   

• Plugin Swap Google Fonts Display - Install and enable to find Google Fonts, but does not work on fonts dynamically or using JS files.
• Plugin Pre* Party Resource Hints - Plugin that can determine preload (fonts in the head), preconnect (fonts that use CDN url + fonts.gstatic.com), prefetch (third-party fonts URL).
   

Pagespeed Maintenance

Some changes will make the wordpress website speed faster, but there are times when we need to check regularly. Because Wordpress plugins and themes can have updates and may affect the existing code and need to be re-optimized.

Improving User Experience with Pagespeed Optimization on Storylabs Website

Storylabs is a website that provides various media content with different categories ranging from culinary, transportation, education, finance, parenting, etc. Storylabs wants to provide a pleasant experience to its readers by providing a website that can be accessed quickly. 

At a certain time, the website underwent a major revamp where there were changes in terms of appearance design, the addition of AdSense features, and some websites were constrained by servers which resulted in slow website speeds. In addition, this also results in low conversion rates and a decrease in website visitors. Now to overcome this problem, the Storylabs team focuses on improving the pagespeed of their website in the following ways:

1. Fast and Proper Server Selection

Having a fast server is the basic thing to improve website speed, imagine if the website has been audited but the rendering time of the server is slow. Then it becomes useless, the Storylabs team uses hosting with an Indonesian server because most users are from the Indonesian region and use Litespeed server technology.

2. Analyzing Website Pages

The Storylabs team conducts a thorough audit of the performance of all website pages using tools to identify page loading issues, such as large images, uncompressed css and javascript files, and inefficient cache usage. 

3.Compress & Convert Images

The first step taken is to compress the images throughout the website as large image sizes can lead to slow page loading. Compressing images without sacrificing visual quality can significantly improve website speed. In addition, for the image format Storylabs uses webp which is already supported by Google and is supported by several leading browsers today such as Chrome, Firefox, etc.

4. Optimize CSS and Javascript files

Minimize the number of CSS and Javascript files on all pages of the website and separating some CSS and Javascript files for specific pages that use these files. Then combine the CSS files that are needed and delete unused code, this can reduce the number of requests that the website must make. Here the Storylabs team uses the Litespeed plugin to optimize it, besides that the plugin is also supported by the Litespeed server.

5. Use of Cache

Storylabs implements a more efficient caching strategy to reduce the server load and speed up page loading time for users who have visited the website before. With proper caching, unnecessary pages are reloaded every time a visitor returns which saves server time and resources. 

6. Improve Google Pagespeed score

By performing Pagespeed optimization, Storylabs managed to improve the user experience significantly. The loading time of web pages is drastically reduced and improves user experience both from the website and mobile. Now visitors can more smoothly explore the website and read articles without having to wait long for pages to load. In addition, the improvements in website speed also improved the ranking of the Storylabs website on search engines which helped more organic traffic.

The Storylabs team illustrates on one of its websites how this improves website performance and this is the result of Google Pagespeed testing.

Before

1. Desktop

2. Mobile

After

1. Desktop

2. Mobile

Conclusion

Improving wordpress load speed affects the experience of website visitors and Google's assessment for ranking on search engines. Therefore, we can see the changes before and after optimization practices. In addition, doing some trial and error will let you know more about how to improve website speed with Wordpress.