Category: Blog

Posted on by — Leave a comment

Step by Step To Improve Google PageSpeed Insights Score

With Google place more weight on Core Web Vitals as a ranking factor, site owners have rushed to optimize servers, install various plugins to improve Google PageSpeed Insights Score. However, not many achieved success.

To give an example, when you search for the keyword “how to improve google page speed score”, the result, as of 18 February 2021 is this:

Step by Step To Improve Google PageSpeed Insights Score 1

At the number 2, you can see the page on neilpatel.com. When I ran the check for its pagespeed insight score, this is the result.

Step by Step To Improve Google PageSpeed Insights Score 2

Not quite convincing, right?

I’m not an expert like Neil Patel. However, by tried and true practices, I managed to improve my website page speed insight from 70 to 90+ (Some pages 97+) score.

Let me walk you through the steps I did to achieve that result. Surprisingly, I didn’t buy expensive plugins to get here. I only spent money on one thing, which is:

Step 1: Get a decent hosting provider

I cannot stress this enough. A low quality host can do a lot of damage to your site. Even if you have a perfectly optimized site but if your hosting sucks, your page speed insight score will not be improved.

As a software developer, I prefer VPS hosting since it gives me a lot of room to customize. The site you are on now is running on a Digital Ocean droplet with 4GB of RAM, 80GB SSD and 2 vCPU. It currently handle ~ 10k traffic monthly quite nicely.

I think with these specs, my site can handle up to 30k visits/month.

If you plan to have a lot more traffic, you will need to upgrade your server accordingly.

If you are starting out, a droplet that cost $5/month should be enough. You can upgrade as your site grow.

Remember, get decent hosting provider. From my experience, I would recommend DigitalOcean for developers and Flywheel for people who need an easier interface.

Step 2: Get rid of bloat plugins, themes

Plugins and themes are the main reason why so many people use WordPress. If you need to do anything, there is a plugin for that. If you need to change your site looks and feels, there is a theme for that. However, this flexibility comes with a cost: speed.

Beside adding more static assets (js, css, images), plugins and poorly coded themes can slow your server down by abusing hooks. If you place a timer inside do_action and apply_filters in wp-includes/plugins.php, you can find a lot of plugins’ code that cost your server extra time to prepare for the content.

Here is the result I got from inspecting these functions on my site:

Placing log to find out which filter cost time in WordPress

As you can see, the highest cost from the image above is 47 seconds. Each time a plugin calls add_filter or add_action, there will be time added to the total load time of your site.

So, consider using less plugins. Only keep the ones you can’t live without.

As of themes, I know that many people don’t have the luxury that I have. I built my own theme so I can get rid a lot not needed code. If you can, build one or high some good developer to build a custom theme for you.

The different will be night and day, I’m sure.

Currently, I have only 17 active plugins on mys site.

List of plugins on my site
Step by Step To Improve Google PageSpeed Insights Score 3

Step 3: Install and configure Autoptimize

This plugin single handedly improved my Google page speed insights score from 70 to 85. The good thing is it is free and there are not much options to configure. You can download the plugin here.

If you need some instructions, here are my settings:

my autoptimize settings
my autoptimize settings part 2
my autoptimize settings part 3
Step by Step To Improve Google PageSpeed Insights Score 4
Enable imaeg lazy loading can improve Google pagespeed insights score a great deal
my autoptimize settings Extra
Combine google fonts, remove WordPress emoji is also useful to improve your page speed

Step 4: Enable MySQL caching

The result

Here is the result after alll the optimization I did above. As you can see, I was able get this result without spending too much money (I spent only on hosting and domain!)

How I improve google pagespeed insights score to 98 with free tools

Conclusion

Without using CDN, paid plugins, I was able to improve my site Google pagespeed insight score dramatically. However, if the site get more traffic, I may need to upgrade server or using CDN or both. If you are starting out, following the steps above can improve your page speed insight a great deal.

Posted on by — Leave a comment

How To Redirect Page/Post to Other URL Without Plugin

If you need a quick way to redirect your page, posts to other URL, this is the place.

Simply put the code below to your page/post and you’ll get the redirection.

<script>
setTimeout(function(){
window.location.href = "https://google.com/";

}, 5000);
</script>

There are something you need to know:

  • Replace the number 5000 with the number of milliseconds you want to delay the redirect. If you want 10 seconds, put in 1000.
  • If your code is already inside a <script> block, don’t include the <script> and </script>
  • The code doesn’t appear visually on your site so don’t worry about the appearance of your page/post.
Posted on by — Leave a comment

List Of All Words In English And More

Recently, during my journey to create a better English dictionary for ESL, I came across a need of getting the pronunciation of all words in English. That means all: single, plural, past tense… are included.

My approach was to get text from books, articles and of course, Wikipedia.

As a result, I extracted over 26 million sentences. These sentences are supposed to be clean (no special characters, no encoding errors).

From these sentences, I ran a job to get all the unique words. The method is quite simple, I split the sentences into single word with space delimiter. Spaces, punctuation are removed, of course.

The result is over 1.9 million unique words. As a went through the list, a portion is not words. Most of these ones have two letters. They could be abbreviations, ordinal number…

However, all English words should be in this list.

My next step would be creating recordings for these words so learners know how to speak them correctly.

If you are interested, you can download the database here. It is a PostgreSQL backup. You can import with pgAdmin.

Posted on by — Leave a comment

Woocommerce Hide Out Of Stock Products In 1 Minute

Woocommerce Hide Out Of Stock Products In 1 Minute 5

By default, out of stock products are visible on your store even they are not purchasable. For many store, hide out of stock products is a good choice since doing so lets customers pay attention to available products only.

When a product is out of stock, you’ll see this notification on its product page:

Woocommerce Hide Out Of Stock Products In 1 Minute 6

To hide out of stock products, simply go to WooCommerce->Settings, click on Products tab then Inventory:

hide out of stock products

Nearly at the bottom of that page, you’ll see a checkbox says: “Hide out of stock items from the catalog”. Check that box and save the settings and you are done. Out of stock products are now hidden from your shop.

How to accept order on out of stock products

There are times you have hot selling item that is constantly sold out. The nice thing is you know that in a short time, it will be available again. In this case, it is unwise to hide out of stock products. Instead, we put the product in a status called “allow backorder”. That means the customers still order the product as usual and we ship it when it is available in our store.

To do so, first, undo the steps you done to hide out of stock products. We need them to be visible.

Next, go to edit the out of stock products, click on Inventory tab (under Product data) and set the options as below:

enable backorder for out of stock products

As you can see, the Manage stock checkbox is checked. Stock quantity is 0 since the product is currently out of stock. The most important option here is “Allow backorders”. You set it to “Allow, but notify customer” or simply “Allow”. Now, save the product and you are done.

Let me show you the difference between “Allow, but notify customer” and “Allow”. When you set it to “Allow, but notify customer”, on the cart page, the customer will see this:

allow backorder and notify customer

When simply set the option to allow, the notification I pointed to in the above image is not available. Customers just see it as normal, in stock product:

allow backorder and don't notify customer

Conclusion

As you can see, hiding out of stock products is not always the best thing to do. If you can restock quickly, it’s best to enable backorders to maximize the revenue. However, if you don’t plan to restock the products or they may not be available in a long time, hiding them is the best bet.

Posted on by — 2 Comments

Easy Way To Create WooCommerce Combo Products For Free

woocommerce combo products

The idea of WooCommerce combo products is not new. Creating combo offers is a great way to increase revenue since people tend to make the purchase if there is a discount offer.

Creating WooCommerce combo products is easy and I’m going to show you how with a free (and awesome) plugin.

Download WooCommerce Combo Offers

Your first step would be downloading the plugin WooCommerce Combo offers here.

After that, you can install the zip file to your site and activate it. Another good way to install a plugin when it’s available on WordPress.org is to search for it in Plugins->Add new and install it from there.

Now I assume that you have the plugin installed and activated. It’s time to create our first WooCommerce combo product.

How to Create WooCommerce Combo Products

For this example, I’m going to create a combo product for these three products:

Easy Way To Create WooCommerce Combo Products For Free 7

Now, let’s click on Products->Add new. If you scroll to product data and click on the select box at its right, you’ll see there is a new product type: combo offer:

new product type combo offer

This is the option we need to select.

After you select this option, there is a new tab appears:

new tab to configure woocommerce combo products

This is where you configure the combo product.

There are some important options in this tab that you need to pay attention to.

The first option is the top most input box says “type any keyword to search”. This is the box where you search for products to add. Simply type the name of the products then you can select it to the combo.

select products to create woocommerce combo products

As you can see, I have added three products mentioned at the beginning of this section. After adding the products, I can change the quantity of each product. If I don’t want any product to be in the combo, I can easy click on the x icon at the right to remove it.

The next thing you need to do is to set the price for the combo. By default, the plugin will sum the prices of all single product. However, doing so gives no reason for the shopper to get the combo.

You may want to give your potential customers a discount. With the plugin, you can configure a percentage discount or a fixed price discount.

As you can see from the screenshot, the total of my three products is $78. To set a fixed price for this combo, I’ll go to General tab and set the price from there. Before doing so, make sure you disable the Auto price check box:

disable autoprice for woocommerce combo products

Another type of discount is based on a percent of the regular price (the sum of all products). This option works better than fixed price discount if you allow the customer to change the quantity of items in the combo:

setting percentage discount for the combo

Once you check the “Optional products” checkbox, you’ll see new fields appear. Here, you can set the minimum and maximum quantity for single products in the combo. Thus, you can prevent customers set some particular products to 0.

Finally, you’ll have an option to set some text before and after the combo products. It’s totally optional to set text here.

Test a WooCommerce combo product

Now it’s time to test our product.

woocommerce combo product

As you can see, all the products I selected are available in the combo. I can now add this product to cart and proceed to checkout as I do with other product types.

woocommerce combo products in cart

Conclusion

There you have it. This free plugin is what you need to do to create WooCommerce combo products. If done right, combo products can be an awesome tool to increase sales for your store.