How to optimize images on your website?

Do you know how to optimize images on your website to improve the speed and performance of your website?

One of the main factors that affect your site performance is the speed of your site. And you just have to know which factors are affecting your site speed.

To load your site faster and improve the performance of your site, you must use optimized images on your site. The loading speed of your site will increase the number of visitors on your site and optimized images increase your page speed.

In this article, I will discuss the basics of image optimization methods. So I will try to make it a full guide by Applying different changes.

Things we are going to discuss:
  1. What is image optimization?
  2. Different formats of image.
  3. How to optimize images?
    1. Optimization tools and techniques
    2. Optimization in WordPress using Plugins
  4. Importance of optimization of images
  5. Compression between optimized and not optimized images.

What is image optimization?

Basically, image optimization is the reduction of image size. Reduce the image size as low as possible. The use of optimized images reduced the size of the page. And the size of the page affects the page speed.

Acutely in image optimization, you have to reduce the size of images by reducing dimensions, file format, size, and resolution.

Optimal images is always be the major factor for your site.

Let start with a small compression I will show you the optimized and unoptimized images:

This image is optimized and size 252 KB (258,367 bytes)

unoptimized image
optimized image

This image is unoptimized and size 1.75 MB (1,839,519 bytes ).

PNG image
unoptimized image

This a simple optimized image you can see that image is reduced by almost 1.5 MBs.

Different formats of image:

Image format also affects image optimization. Some format gives you high-resolution pictures but not the optimized one. Some give you an optimized image that has less size and good resolution also.

There are different types of image formats. Here we discuss different formats of images and also discuss which one image format is optimal and have a better choice than the other one on the website.

Some papular formats of images Like PNG, JPG, JPEG, GIF, SVF, WebP, and others. Some formats are better for optimization and some are not good for optimization.

PNG:

PNG stands for “Portable Graphics Format”. It is one of the latest image formats.

PNG is a lossless data compression format that was created to replace GIF (Graphics Interchange Format). PNG format is open and there are no copyright limitations. PNG format is also used for transparent background images.

PNG transparent image
PNG transparent background image

JPG:

JPG is the most used format. In the digital market, JPG is one of the common and used formats. This is a compressed image format used for digital images.

JPG is mostly used format in digital cameras and the internet. it is an optimized image format with less data loss.

IMG 0023
JPG image

GIF:

This is one of the most common low quality used format. GIF stands for Graphics Interchange Format. Basically, you will find short videos in gif format. GIF is a slide show of images in low graphics.

GIF IMAGE
GIF File

WebP:

WebP is one of the new formats in the digital market. WebP stands for Web Picture format. This format provides you lossy and lossless quality. This format also supports transparency.

Here I added a WebP file.

I will discuss some common and popular formats here you can check about others also. These formats are very important with respect to optimization.

How to optimize images?

Now we have to know how to optimize any image. The image that is good for our website and which didn’t affect your page size and speed much.

To optimize images there are many ways and methods. You can optimize images before and after uploading images.

We will discuss all methods and tools here which are used for the optimization of images.

To achieve a good site speed and performance you have to reduce the page size of your website and to reduce page size you have to reduce the content size that you added. Video and image files are the most important files which need optimization on your website.

Best Tools and Programs use to optimize images:

These tools and programs are used to optimize images before uploading them to the site. This is a good practice to use an optimized image on your website. we can call it pre-image optimization.

Here we discuss some tools and programs using those you can do image optimization before uploading images on site. There are a large number of other tools as well but we discuss some of them here.

  1. Abode Photoshop
  2. Pixler
  3. Tiny PNG
  4. Compress Now
  5. Resize Photos

Abode Photoshop

Adobe Photoshop is an advanced photo editor. This is used to edit photos and images. Adobe Photoshop is available for windows and macOS.

This is one of the most popular and used photo editors. This is a premium tool that is used for image optimization in the digital market mainly on websites.

Adobe Photoshop allows you to compress, resize, change image format and you can do many more things with this tool.

Abode Photoshop

Pixlr

Pixlr is an online editor. This online photo editor makes it easy to edit images. This editor has a large number of features for its users. You can easily edit your picture using this image editor.

This is an online editor so it also does not need any space to store it on your local computer. You can crop, resize, change the format, change transparency, and can do many more.

Here i will show you how to optimize image using this online editor.

You can optimize your image by resizing, changing the format, reducing quality, etc. Here I show you some techniques to reduce the size.

Let me show some option for the image optimization in pxlr.

You can easily resize images in pxlr it will reduce the image size and make the image optimized.

image size

You can change the image format and the quality of the image. The image below shows you the quality ratio that you want to keep for your image.

pxlr image compression

Tiny PNG

Tiny PNG is an online image compressor that compresses the image and reduced image size to a minimum to make your website fast.

Tiny PNG uses smart lossy compression to reduced the image size. Ting PNG only keeps that byte which is useful and removes all useless.

PNG is useful because it’s the only widely supported format that can store partially transparent images. And Tiny PNG also reserve this format.

I will show you the Tiny PNG compression process:

Visit there official website and select the file need to compress.

Tiny PNG

You can see the compression and can download the compressed.

You can see the compression and can download the compressed.

On your screen, you can see the difference between the compressed and uncompressed images.

Compress Now

Compress Now is another image compressor tool available online. Just upload your JPG, PNG, or GIF file and you can download the compressed file.

Compress Now allows you to compress files according to your choice. Just upload your image optimize it and download it.

The process of optimization using compress now is very simple. You need to follow these three steps to compress any image.

Select images from your desktop computer or device. Or just drag and drop files to the drop area.

Select images from your desktop computer or device. Or just drag and drop files to the drop area.

Select a compression level (%), then activate the compression with the button.

Select a compression level (%), then activate the compression with the button.

Download compressed images one by one or get the ZIP files.

Download compressed images one by one or get the ZIP files.

In this image compressor you can select 10 images at a time

Resize Photos

Resize Photo is another image compression tool. This image compression tool allows you to compress the image by resizing it and by changing the image type.

Resize Photo allows you to resize image according to your requirement and change the image type to JPG, GIF etc. any.

Process of optimization of image in Resize Photo is very easy.

Just select the image you want to compress.

Just select the image you want to compress.

Resize the size of the image and you can change the image type. This thing will do image optimization for you. you can download the optimized image now.

Download image

These are some image optimization process to optimize images before uploading. This is an optimal method to optimize images. This will save your space on the server as well as reduce the page size and improve page speed as well.

Optimization in WordPress using Plugins:

WordPress is a popular CMS use to manage websites. In WordPress, you can manage your website even without a computer background. For WordPress, we have a large number of Plugins and themes which you can use to manage your website content.

WordPress has many free and paid version of plugins and themes.

No matter your website is managed on WordPress or not. But page speed is always a core factor for your site. And without page speed, your SEO will not as effective for your site. And with optimizing your page size you cant reduce page speed.

And your page size depends upon your images. You must optimize images t reduce page size and increase page speed and rank your site.

WordPress has many image optimization plugins that automatically done image optimization.

WordPress Image Optimization Plugins:

  1. ShortPixel Image Optimizer
  2. Optimole
  3. Imagify
  4. WP Compress
  5. Smush Image Compression and Optimization
  6. Compress JPEG & PNG images

Here we have some WordPress image optimization plugins but there are a large number of more plugins that you can use for image optimization.

ShortPixel Image Optimizer:

ShortPixel is an image optimization plugin. ShortPixel image optimizer reduced the size of your image on the website without losing the quality of the images.

ShortPixel start comperssion of your image when you install and get an API from the short pixel. This is one of the wells know image optimizer for WordPress. Shortpixel has free and paid versions for image optimization.

In the free version of the short pixel, you can optimize only 100 images if you want to optimize more images you have to buy a paid version. ShortPixel done three types of optimization lossy, lossless, and glossy.

ShortPixel Image Optimizer:

Optimole:

Optimole is a new image optimization plugin. This plugin Automatically compresses, optimize, and serve scaled images along with next-gen WebP all from CloudFront CDN. Also, help in lazy loading.

Optimole is one of the easy and fast image optimization plugins. Optimole Plugin done the image optimization on the cloud so no slow down during the optimization process.

Just install this plugin and activate it. after this get the API key by signing up and optimize your images.

Optimole:

Imagify:

Imagify is also an image optimizer. Imagify is an image optimization plugin by WP Media. Imagify optimize images of your website using three types of algorithms.

The first one is Normal, a lossless compression algorithm. In this optimization, the quality of the image remains the same there is no effect or loss of bytes in the image. The image quality won’t be altered at all.

Aggressive is a lossy compression. This type gives you more compression but the quality may be less than that.

Ultra, our strongest compression method using a lossy algorithm. In this, you should lose the quality but will get the full optimized image.

Imagify:

WP Compress:

Another image optimizer plugins WP Compress also compress, resize and reduce the size of your images on websites to load the website fast and improve site performance of your website.

Just install the WP Compress plugin and provide access to the key. For key, you have to create an account on their plat from. Click here for the platform.

WP Compress:

Smush Image Compression and Optimization:

Smush is one of the popular image optimization plugins. That can resize, compress, lazy load your images on the website. Smush image optimization improve your page speed.

Smush optimized your website image by using these main functions like Lossless compression, Lazy load, Bulk Smush, Resizing images, incorrect image detection, and have many more features like that.

Smush Image Compression and Optimization:

Compress JPEG & PNG images:

This plugin mainly optimized JPEG and PNG images on your website. This plugin is by the TINY PNG an image compression tool. we discussed this tool above in the tools section.

Compress JPEG and PNG reduce the size of the image by compressing them. This is one of the fast plugins for PNG and JPEG image optimization.

This plugin has some brilliant features like automatic compression of new images, Backgroud optimization for images, Easy for bulk optimization, and many more.

Compress JPEG & PNG images:

Importance of optimization of images:

After knowing about these methods to the optimized image. Now I would tell you what is the benefit of optimizing images? Image optimization is very important for any website.

Image optimization is important for all WordPress and nonwordpress website. Here I will discuss some important factors on which image optimization effects.

  1. Improve Page Speed
  2. Improve SEO rank
  3. Improve User experience

There are many other things on which image optimization effects but here we discuss these which are I think the most important.

Improve Page Speed:

Whenever you want to improve the performance of your site the first thing is to do is improve the page speed. And you know if your page size is high your page speed should be high as you have a 2.3MBs of a page on your site.

Obviously page speed of that page should be slow that will damage your site performance.

But you know the image has a great impact on the size of the page. More than 50% of the page size is due to the high sized images.

So if you want to reduce the page size you must have to reduce the image size. you can use the pre-optimization or post-optimization method.

Improve SEO Rank:

Do you know your page speed also effects the SEO rank of your site?

More your page speed is more your site rank. This thing also increases the User experience that improves the rank of your site. Due to image optimization, you can achieve a good page speed as I stated above.

When your page size is less than your page speed is high and that thing improves your SEO ranking also.

As you have a quick load website people also suggest you others on different platforms than this thing will also help you to improve the rank on different platforms.

Improve User experience:

What a basic user need when it come to any site?

A user always wants a quick response from the site he visits. The fast loading website attracts more users and visitors.
And when you have an optimized image then the site should load fast because of less size.

Do you know Google also likes the sites which load fast and other search engines as well? So keep the size low to increase the interest of your visitors.

This thing also enhances more users to your site weather from any search engine or any personal recommendation. Because if someone likes your site he/she will recommend your site whenever anyone asks him for help.

READ: HOW TO INSTALL WORDPRESS WITH OPENLITESPEED

Follow US on Facebook / Twitter  for update.

How to Install WordPress with OpenLiteSpeed

Do you know How to Install WordPress with OpenLiteSpeed?

OpenLiteSpeed is a high performant web-server especially for WordPress sites because of LSCache plugin.

A great deal of people are opting for OpenLiteSpeed stack to power and speed up their WordPress site, in this article we will see how you can do exactly that.

Install OpenLiteSpeed:

First of all, we have to know how to install OpenLiteSpeed. To do so we are going to mention all the installation steps here. OpenLiteSpeed installation is very easy. Installation for different Operating systems is different but I will add here installation for Centos and Ubuntu.

Here in this article, we will install OLS from CentOs repositories. The difference in the installation process is just the commands steps and the sequence of steps remains the same throughout the process.

  1. You have to add the repositories in order to install OpenLiteSpeed. Here the commands to add repositories to the centos and Ubuntu.

Centos:

rpm -ivh http://rpms.litespeedtech.com/centos/litespeed-repo-1.1-1.el7.noarch.rpm

Ubuntu:

wget -O - http://rpms.litespeedtech.com/debian/enable_lst_debain_repo.sh | bash

Adding repository is the first step to install OpenLiteSpeed.

2. After adding repositories to the machine now its time to install OpenLiteSpeed. OpenLiteSpeed is just one command install. Here is the Command.

Centos:

yum install openlitespeed

Ubuntu:

apt-get install openlitespeed

By default, this command installs the latest stable version of the OLS. if you want to install any specific version then the command will be

yum install openlitespeed-x.x.x

Replace x.x.x with any version you are required like 1.2.2 or any you need to install. Once OLS has been installed successfully. You OpenLiteSpeed directory is /usr/local/lsws.

3. To start OpenLiteSpeed server use the command

/usr/local/lsws/bin/lswsctrl start

4. To stop OpenLiteSpeed server use the command

/usr/local/lsws/bin/lswsctrl stop
image 35

Configuring OpenLiteSpeed:

In order to set up WordPress on the LiteSpeed server, you have to do some configurations on your server.

For the configuration, we have to access the LiteSpeed Web Server to access the webserver. You can use the port 7080 with your IP address. You can reach the webserver from the following link https://<your_server_ip>:7080. Once you reach this you can see this screen

OpenLiteSpeed

Provide credentials to log in to the webserver. Usually username=”admin” and if you don’t know the password you can change it by running this simple command

/usr/local/lsws/admin/misc/admpass.sh
image 17

After providing the details you can see the dashboard of LightSpeed Web Server.

image 18

Now it time to do some configurations on the webserver. First of all, from this OpenLiteSpeed dashboard find Server configuration on the menu.

image 19

Go to the External App section present in the Server configuration. And you see LightSpeed SAPI App click Edit.

image 20

After getting to the next page by clicking the Edit button. Now you have to do some configuration according to the PHP version that you have. This is important because OpenLiteSpeed installation won’t be able to correctly execute PHP Scripts. So we have 7.3 We will do configurations according to our version. By default there is lsphp but we have to make it lsphp73. 73 is for my PHP version you can do it for your own version.

We have to correct three things Name, Address and Command according to our version.

image 21

Once you edit these go and save these settings.

Now its time to edits some Virtual Hosts settings. To do so go to the Virtual Hosts section from the left menu.

image 22

You can see an Example Virtual host on the screen view this for some configurations.

image 23

In the Example virtual Host go to the General Tab. And click the edit button. These are some Configurations that are important for WordPress.

image 24

In order to install and setup WordPress, we are going to create a directory WordPress in the next steps so in Document Root we add this. OpenLiteSpeed looks at the contents of the Document Root field for content to serve.

image 42

Once you done click save.

In LightSpeed by default, there is only index.html file as index file but for WordPress, we will need index.php also because its core file for WordPress and This will allow the main logic of WordPress to function correctly.

To do so in General tab go to the index files and click to the edit.

image 26

Add the index.php file also in index file with index.html. and save

image 27

Now we have to do some setting on rewrite rules for this go to the Rewrite tab in the Virtual Host window.

image 28

In Rewrite Enable Rewrite and Auto Load from .htaccess. Make these option yes. And click to save.

image 29

Now we are going to take a look on some security options. As OprnLiteSpeed installation includes some Password protected areas for the authentication features. And we know that WordPress uses its own authentication mechanisms and we will not going to use file-based authentication by Openlitespeed. So we have to remove these so WordPress works properly on its own.

To do so got to the Security tab in the Virtual Hosts option.

image 30

At the end of this screen, you can see a Realm List which has a SampleProtectedArea. Click on the Delete button to remove it.

image 32

It will ask you for confirmation click the Delete button and go on.

Now you have to delete the protectd from context. Go to the Context tab. Here you find /protected/ click delete and delete it.

image 33

Once all done now its time for  Graceful Restart in order to configure all changes we made. To do so click the restart button on the top of screen.

image 34

Now your OpenLiteSpeed is fully configured and good to go.

Installing MySQL

As we know that WordPress uses MySQL. WordPress needs MySQL to store and manage its data. So in order to install WordPress On OpenLiteSpeed, we must have the MySQL installed on the server. Go to the terminal and check the installation of MySQL to check this type of command

mysql -v

This will show you the version of MySQL. If MySQL is not installed there then it will give you MySQL command not found. You have to follow the process.

  1. Download and add the repository
wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm
sudo rpm -ivh mysql-community-release-el7-5.noarch.rpm

2. Install MySQL as usual.

sudo yum install mysql-server

3. Start the service

systemctl start mysqld

Now you have to log in to the MySQL root account. to login to the root access type the command:

sudo mysql
image 36

Now we are going to create a database using this command:

CREATE DATABASE webssite DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

The name of the database is whatever you want to use but here we used “website”. Now we have to create a user how has all rights for this database. You can specify a username and password according to your choice.

GRANT ALL PRIVILEGES ON webssite.* TO 'user'@'localhost' IDENTIFIED BY 'password'; 

Now FLUSH PRIVILEGES which tells the server to reload the grant tables and put your new changes.

FLUSH PRIVILEGES;

Now exit from mysql.

exit;
image 37

Installing PHP Extensions:

We need to install different PHP extensions and modules in order to run and fulfill the required result for our WordPress Site. Here we mention some of the modules and will install them for PHP 7.3 Installation is the same for every PHP version jus the change of version in command.

Centos:

yum install lsphp73-common lsphp73-curl lsphp73-imagick lsphp73-imap lsphp73-json lsphp73-memcached lsphp73-mysql lsphp73-opcache lsphp73-redis

Ubuntu:

apt install lsphp73-common lsphp73-curl lsphp73-imagick lsphp73-imap lsphp73-json lsphp73-memcached lsphp73-mysql lsphp73-opcache lsphp73-redis

LiteSpeed Repository installs PHP unber /usr/local/lsws/lsphpxx

These are some extensions like redis, mysql, imagick, etc you can also install any other if you wan to.

image 38

Installing and Configuring WordPress:

Now we have to discuss the installation and configuration process of WordPress with the OpenLiteSpeed. We are done with Server configuration and now we are on the installation. You can download the latest version of WordPress from the there official site. You can download WordPress and any directory. I created a directory “mywebsite“. Create the directory using the following command:

mkdir mywebsite
image 39

Go to that specific directory that you created to download WordPress. Use the command cd “your_directory”.

Now its time to download WordPress. You can do it using a command and the command is stated here:

curl -O https://wordpress.org/latest.tar.gz

If you want to download any specific version. Go and get the proper link for that proper version. Now extract the compressed file that you downloaded.

tar xzvf latest.tar.gz

Now your directory look like this:

image 40

Now for the OpenLiteSpeed we have to create a file before going to further process. OpenLiteSpeed Support .htaccess files. this is so important for us to create this file to go for the next steps because WordPress managed and create permalinks using this file. for this purpose, we will use touch command. Here is the whole command to create the .htaccess.

touch /root/mywebsite/wordpress/.htaccess

You can add the path where your WordPress is on the server.

One more important file for the WordPress Installation is the wp-config.php file. All the configuration of WordPress depends upon this file. Whenever we download this file from there official website this there will be a sample file like wp-config-sample.php. for this setup, we are going to copy that sample file into the wp-config .php file to use it. And will configure it. We are going to do it using a command you can do to with any other method too.

 cp /root/mywebsite/wordpress/wp-config-sample.php /root/mywebsite/wordpress/wp-config.php

You can see we have .htaccess and also wp-config.php on our server now.

image 41

For the safe side, we are going to create an upgraded directory so WordPress will not run into permission issues while updating. A very simple command is used for this:

mkdir /root/mywebsite/wordpress/wp-content/upgrade

Always check you changes that you made. Now its time to move the WordPress content to the place from where we can access this. As you remember that we added the path for our WordPress site in the OpenLiteSpeed in the virtual host-> Example -> root document.

We have to move this in /usr/local/lsws/Example/html/mywordpresssite

Now here I mention the command to move my WordPress content to that specific.

cp -a /root/mywebsite/wordpress/. /usr/local/lsws/Example/html/mywordpresssite

This is the command for specific my setup. And also note the “.” in the command. This will copy all the hidden files also.

Now its time to do some critical configuration for your WordPress to be working. We have to do some permission configurations and wp-config.php configuration the most important. First of all, we will go for the permissions of files. We are going to set nobody user and nogroup to the group. OpenLiteSpeed web server runs these as default and gives the ability to read and write these.

Use these command to do so. incase of centos this one will work:

sudo chown -R nobody:nobody /usr/local/lsws/Example/html/mywordpresssite

In case of ubuntu this will work

sudo chown -R nobody:nobody /usr/local/lsws/Example/html/mywordpresssite

Now in the next step, we have to find two more permission sets. We have to specify the permissions for files and directories. First, we are going to set permission for the directories for that we will use

sudo find /usr/local/lsws/Example/html/mywordpresssite/ -type d -exec chmod 750 {} \;

Set permissions to 750 And for files permissons we use:

 sudo find /usr/local/lsws/Example/html/mywordpresssite/ -type f -exec chmod 640 {} \;

These permissions are required and suitable for the process and the proper functionalities properly.

Now we all done with the permissions part now we have to set set up wp-config.php. We copied the content of the sample file in the wp-config file. So we have to add some real value in order to word the wp-config properly. In the default file, you can see that they ask you for real value now we have to generate these values.

image 43

We can do so from the official API of WordPress for these use this command:

curl -s https://api.wordpress.org/secret-key/1.1/salt/
image 44

Once you run this command you will receive value like these. Copy the value from the terminal and replace these values in the wp-config.php file I am going to do this from the terminal using vi editors.

You can use this command to do so on your end:

vi /usr/local/lsws/Example/html/mywordpresssite/wp-config.php

this one is default one and have to replace with real values.

image 45

After updating with real values it look like.

image 46

The configurations for keys are now set up and now we have to set up database configurations in the wp-config.php file.

You remember the Database you created and the user for that. Now we have to add these in this file.

image 47

Now in this default configuration now we will add out real values in it.

image 48

All done for the wp setup. Its time to open and launch the final site.

Install WordPress with OpenLiteSpeed

Setup WordPress

Now we will go to the last WordPress Setup. First of all, you have to know how you can access your WordPress to setup. Be careful in this process. You can open your WordPress installation through your IP or server domain but check the firewall may in my case I was able to open the site on port 8088

http://<ip_address>:8088
WordPress

Here the process is started for installation. You have to select your language and click Continue.

Here you have to provide the required information. Username, Password, Site tile, and Email after providing all these clicks to the Install WordPress button.

Install WordPress with OpenLiteSpeed

You will receive the confirmation screen for the process.

image 51

Click to the login button and provide the detail to login.

image 52

After login, you can visit the admin dashboard and do whatever you want to.

image 53

Now you can do any operation regarding your site from here. Add any plugin, posting, and anything you want to do.

Benchmark of WordPress Site with LS Cache:

At the last, we are also going to check the benchmark for the WordPress Site with and without ls cache. In this way, we can evaluate how LS Cache effects the site. First, we will see the results without LS Cache and then we enable LS Cache and see the results. we are going to use h2load for performing benchmarks. You can visit here to check how to install it.

For the benchmark, we chose a fixed value which we are going to use after and before the LS Cache installation.

h2load -n10000 -c100 -m10 https://mydomain.com/

We are going to use this command that means we have three parameters here:

-n The number of total requests. we are going with 10000

-c The number of concurrent clients. we are going with 100

-m The max concurrent streams to issue per client. we are going with 10

Benchmark without enabling LS Cache

image 54
starting benchmark…
spawning thread #0: 100 total client(s). 10000 total requests
TLS Protocol: TLSv1.2
Cipher: ECDHE-RSA-AES128-GCM-SHA256
Server Temp Key: ECDH P-256 256 bits
Application protocol: h2
progress: 10% done
progress: 20% done
progress: 30% done
progress: 40% done
progress: 50% done
progress: 60% done
progress: 70% done
progress: 80% done
progress: 90% done
progress: 100% done
finished in 1.61s, 6195.49 req/s, 154.30MB/s
requests: 10000 total, 10000 started, 10000 done, 10000 succeeded, 0 failed, 0 errored, 0 timeout
status codes: 10000 2xx, 0 3xx, 0 4xx, 0 5xx
traffic: 249.06MB (261158611) total, 120.81KB (123711) headers (space savings 96.91%), 248.42MB (260490000) data
min max mean sd +/- sd
time for request: 27.77ms 287.59ms 113.67ms 56.38ms 77.80%
time for connect: 175.54ms 317.87ms 206.94ms 43.20ms 83.00%
time to 1st byte: 205.29ms 438.45ms 287.47ms 71.38ms 66.00%
req/s : 62.07 106.24 77.41 16.47 76.00%

Benchmark after enabling LS Cache

image 55
[root@cyberpanelubuntu ~]# h2load -n10000 -c100 -m10 https://shoaibkhankhattak.tk/
starting benchmark…
spawning thread #0: 100 total client(s). 10000 total requests
TLS Protocol: TLSv1.2
Cipher: ECDHE-RSA-AES128-GCM-SHA256
Server Temp Key: ECDH P-256 256 bits
Application protocol: h2
progress: 10% done
progress: 20% done
progress: 30% done
progress: 40% done
progress: 50% done
progress: 60% done
progress: 70% done
progress: 80% done
progress: 90% done
progress: 100% done
finished in 1.40s, 7117.72 req/s, 177.27MB/s
requests: 10000 total, 10000 started, 10000 done, 10000 succeeded, 0 failed, 0 errored, 0 timeout
status codes: 10000 2xx, 0 3xx, 0 4xx, 0 5xx
traffic: 249.06MB (261156355) total, 118.61KB (121455) headers (space savings 96.97%), 248.42MB (260490000) data
min max mean sd +/- sd
time for request: 22.52ms 190.04ms 94.97ms 32.20ms 66.87%
time for connect: 146.85ms 303.13ms 194.98ms 47.78ms 77.00%
time to 1st byte: 192.92ms 410.21ms 272.01ms 68.73ms 67.00%
req/s : 71.36 132.70 91.69 21.77 77.00%

Now you can see the difference between the both results.

Read More: HOW TO CHANGE TIMEZONE ON LINUX SERVER

Follow US on Facebook / Twitter  for update.

How to enable full/advanced WordFence protection on OpenLiteSpeed

Website security is always a fundamental and important part of any website especially WordPress. Today we will see how to enable full/advanced Wordfence protection on OpenLiteSpeed.

If you are using LiteSpeed Enterprise you don’t need to do anything as it is fully Apache compatible so Wordfence full protection will work out of the box. So you can stop now and enjoy your coffee.

However, if you are using OpenLiteSpeed then go ahead, make sure to use OpenLiteSpeed with CyberPanel, and ease your life.

What is WordFence?

Wordfence is one of the most popular WordPress scanner and firewalls. Wordfence comes in both free and premium versions. Wordfence has enough features to secure your websites like endpoint firewall, malware scanner, malicious IP addresses detection, 2FA, and all. In short, Wordfence is the most comprehensive WordPress security solution available. Wordfence is enough to secure your site.

Why do we need to configure OpenLiteSpeed for full Wordfence protection?

Setting up WordFence is a bit tricky in the case of OpenliteSpeed. With OpenLiteSpeed, you have to do some manual settings. In this article, we will discuss how to configure Wordfence with OpenliteSpeed to enable advanced firewall options.

Enable full Wordfence protection on OpenLiteSpeed:

  1. Install Wordfence on your WordPress site.
  2. Edit Vhost Configuration for Wordfence.
  3. Enable full Wordfence protection with CyberPanel.

Install Wordfence on your WordPress site:

The installation of Wordfence on your WordPress site is just like the installation on any plugin. Follow along the steps to install Wordfence.

Setp 1: Install Wordfence Plugin:

To install WordFence on your WordPress site first log in to your admin dashboard:

Go Plugins->add New

advanced wordfence protection on openlitespeed

Now search Wordfence in the search bar, You will receive the results for Wordfence select the first one (The one with the Wordfence logo) and Click install.

image 64

Setp 2: Setup Wordfence Plugin:

Once installation is done click Activate to activate the plugin:

image 65

After activation, they will ask you for an email address where they sent you emails regarding your website. Provide your email, click yes if you want to receive emails, check the box for agreement and press continue.

image 67

If you have a premium version enter the key here otherwise click on thanks and use the free version.

image 68

Now your Wordfence is installed and good to go. You can see the Wordfence on the left menu. When you click that you will see a notice to configure full/extended Wordfence protection.

image 69

Once you click the configuration a prompt appears that asks to download the .htaccess file. Click on download and press continue.

image 70

In the case of LiteSpeed Ent. configuration is done out of the box but in the case of OpenLiteSpeed, we’ve to perform some additional steps that we will discuss below. I found an official video guide for you to install Wordfence you can check that also.

Edit Vhost Configuration for Wordfence:

For OpenLiteSpeed you have to configure the Wordfence to enable Advanced WordPress Protection. Without setting these configurations to OpenLiteSpeed you can see that there is the Basic WordPress Protection.

image 71

To enable the advanced protection you have to access the OpenliteSpeed web server dashboard by navigating https://<your_ip>:7080. In the OpenLiteSpeed web, server Dashboard go to the VHost -> General

image 72

Go the end of page you will find the php.ini overwrite click the edit button.

image 73

add this to php.ini overwrite

php_value auto_prepend_file /path/to/wordfence-waf.php

Most Common path if you created site from cyberpanel

php_value auto_prepend_file /home/example.com/public_html/wordfence-waf.php

If you added the domain with CyberPanel then first you have to find the path of the wordfence-waf.php file. After adding this graceful restart the OpenLiteSpeed with this server did not get the changes.

image 74

Once done go back to your WordPress site and check the firewall you can see the Extended Protection level there.

image 75

Instead of doing this from the OpenLiteSpeed, you can install CyberPanel on your OpenLiteSpeed server, and then there is an easy way to do this. I will describe that in the next step.

Enable advanced firewall with CyberPanel.

When you have the CyberPanel installed on your server to manage your site you can follow the guide stated above but in this part of the article, I will tell you a simple way to do this using CyberPanel. To enable an extended or advanced level of protection using CyberPanel, you have to log in to CyberPanel using your credentials.

From you CyberPanel Dashboard go to the Websites ->list websites

image 76

You can see all of your websites there Click on the Manage button. To open the website dashboard.

image 77

Once the manage Dashboard for the web site is opened go to the configuration part and click the VHost

image 78

Go to the php.ini section

image 79

Add the following line to enable the extended protection.

php_value auto_prepend_file /home/example.com/public_html/wordfence-waf.php 

Now your extended protection is enabled .

image 81

Follow US on Facebook / Twitter  for update.

How to configure Redis Object caching for WordPress on CyberPanel

Redis is open-source software that is used as a database cache. At times when MySQL becomes a bottleneck for your WordPress installation due to heavy queries, Redis can help reduce that load by using in-memory data structure storage. In this article, we will see how to configure Redis Object Caching for WordPress on CyberPanel using the Redis plugin.

CyberPanel is one of the emerging and popular choices among web hosting control panels and with its current new feature timeline, CyberPanel developers are introducing more and more features into it. With a team that is very quick with updates and bug fixes, CyberPanel is becoming one of the first choices for a free hosting panel.

Currently, CyberPanel stable version is v2.0.3, and the CyberPanel team is about to launch the next version very soon. The v2.0.3 version includes very exciting features and one of those features which CyberPanel has introduced is the Redis Application installation with PHP extension.

Table Of Content:

  1. How to install Or upgrade the CyberPanel :
  2. Install Redis and Redis PHP extension on CyberPanel.
  3. Install Redis Plugin on WordPress.
  4. Redis setup with Redis WordPress plugins.
  5. Benchmarks

How to install Or upgrade CyberPanel:

If you are looking for how to install CyberPanel? Then you are in the right place and if you are looking for how to get the latest version of CyberPanel then this article will tell you how you can upgrade CyberPanel to the latest version.

How to install CyberPanel:

Honestly, CyberPanel installation is very easy. It takes 5-20 minutes to install depending on your server specs, and one command to run.

sh <(curl https://cyberpanel.net/install.sh || wget -O - https://cyberpanel.net/install.sh)

But I recommend you to also read CyberPanel Official tutorial for this.

How to Upgrade CyberPanel:

You can also update CyberPanel using only one command and as the installation, it also takes 5 minutes and a single command.

sh <(curl https://raw.githubusercontent.com/usmannasir/cyberpanel/stable/preUpgrade.sh || wget -O - https://raw.githubusercontent.com/usmannasir/cyberpanel/stable/preUpgrade.sh)

You can read the official guide for this also.

Install Redis and Redis PHP extension on CyberPanel

First of all, I am going with a short introduction to Redis. I know most of you know what Redis is and what are the uses of Redis. But some may be new to Redis so let me explain what it is.

Redis is an in-memory data structure store. Redis is used for caching, Session management, Subscriber base messages. Basically, Redis makes the process quicker. Let me be clear with an example of Twitter. Twitter is using Redis for subscribing, Liking, and all of that. You notice that when we have a new feed on twitter the whole page is not refreshed and you can see the message-like.

image 58

That is Redis. That did not allow the refresh of the whole page but adds the new content. Redis is an effective component to improve the speed of the site. If you want to know more about Redis goto there official site by clicking here.

Do you know? You can install Redis using CyberPanel in one click. CyberPanel developers added this new feature to install the Redis directly from the CyberPanel.

In the previous version of CyberPanel, if you wanted to install Redis and configure, you were required to install it using commands and then you have to install Redis extension from PHP extensions from CyberPanel. But this hustle is about to end in v2.0.3. Now CyberPanel makes it easy for its users.

I am going to explain what you have to do now in v2.0.3.

Install Redis:

To Install Redis first you must have a CyberPanel version v2.0.3. If you have this version then go to https://<your_ip>:8090/ and log in by providing credentials.

image 59

Once you login to your system now go to the ‘Manage Services->Applications‘. Let me make it more clear. Visit this link to install Redis https://<Your_IP>/manageservices/manageApplications.

image 60

Once you reach this page. No matter through the Option Stated above or using the link. You can see the option to install Redis Daemon.

Configure Redis Object Caching for WordPress on CyberPanel

Now to Click install button present in front of the Redis on your screen.

image 63

Now the real process starts. Once you click the window you can see a popup window appear which shows you the installation process and at the end of the process, you can see the version and all about the Redis information.

image 65

Once Installation is completed the page refreshes automatically and you can see that Redis is now installed, How cool is this?

For the removal of Redis, there is also one click in CyberPanel v2.0.3. You can see the status of Redis that it is installed and you can uninstall it by just clicking the remove button on the same page.

image 67

This one-click installation is an amazing feature in CyberPanel. Now you are done with the Redis installation its time to install the Redis PHP extension. For this follow the next step.

Install Redis Extension in CyberPanel:

Its time to install the Redis extension on CyberPanel. As you all know this one is not a new feature in CyberPanel. For the installation of Redis Extension go to the PPH->Install Extensions. You know we have an alternate path to access this point also and that is the link https://<Your_IP>/managephp/installExtensions

image 68

When you are on this page. Here you have to select a PHP version to install the extension for. Mostly the version that you are using for your site on which you want to setup Redis.

image 69

Select the required version and install the Redis extension for this version. For me, I selected PHP 7.4 for installation. Because I use this for my site. After selection, you search Redis in the search box and you get the required result. And you can see the install button.

image 71

Once you clicked the install button you can see the installation process.

image 72

After Installation go back and check the status of the extension.

image 74

All done from the CyberPanel. Now its time to setup on your WordPress site.

Install Redis Plugin on WordPress:

Now its time to install Redis on WordPress. The installation of every plugin is almost the same.

  1. Go to the admin dashboard in wp-admin
  2. Go to plugin
  3. Add new
  4. Search Redis in the bar and you can see the Redis plugin
  5. Click on install and then activate
image 56

Benchmark of WordPress site with and without Redis setup:

After activating this plugin now we are going to perform a benchmark for Redis which shows the difference after and before Redis results.

For both type of benchmark we select a constant value of data

h2load -n10000 -c100 -m10 https://ourdomain.com/

We are goin to use this command that mean we have three parameters here:

-n The number of total requests. we are going with 10000

-c The number of concurrent clients. we are going with 100

-m The max concurrent streams to issue per client. we are going with 10

Results Before enabling Redis:

According to the command motioned above we have the following results for our benchmark without enabling Redis.

image 58
[root@cento ~]# h2load -n10000 -c100 -m10 https://shoaibkhankhattak.tk/
starting benchmark…
spawning thread #0: 100 total client(s). 10000 total requests
TLS Protocol: TLSv1.2
Cipher: ECDHE-RSA-AES128-GCM-SHA256
Server Temp Key: ECDH P-256 256 bits
Application protocol: h2
progress: 10% done
progress: 20% done
progress: 30% done
progress: 40% done
progress: 50% done
progress: 60% done
progress: 70% done
progress: 80% done
progress: 90% done
progress: 100% done
finished in 208.14s, 48.04 req/s, 1.19MB/s
requests: 10000 total, 10000 started, 10000 done, 10000 succeeded, 0 failed, 0 errored, 0 timeout
status codes: 10000 2xx, 0 3xx, 0 4xx, 0 5xx
traffic: 248.57MB (260644306) total, 145.97KB (149469) headers (space savings 95.87%), 247.74MB (259770000) data
min max mean sd +/- sd
time for request: 104.87ms 67.20s 14.39s 11.88s 90.34%
time for connect: 102.45ms 162.19ms 144.00ms 22.98ms 76.00%
time to 1st byte: 158.23ms 67.16s 24.80s 24.80s 76.00%
req/s : 0.48 1.75 0.96 0.57 60.00%
image 60
Mean time stats

Benchmark results After enabling Redis:

First of all you have to enable Redis for that Go to Admin Dashboard then Settings->Redis->Enable Object cache

image 59

Now we will look for the bencmark results:

image 61
starting benchmark…
spawning thread #0: 100 total client(s). 10000 total requests
TLS Protocol: TLSv1.2
Cipher: ECDHE-RSA-AES128-GCM-SHA256
Server Temp Key: ECDH P-256 256 bits
Application protocol: h2
progress: 10% done
progress: 20% done
progress: 30% done
progress: 40% done
progress: 50% done
progress: 60% done
progress: 70% done
progress: 80% done
progress: 90% done
progress: 100% done
finished in 180.50s, 55.40 req/s, 1.38MB/s
requests: 10000 total, 10000 started, 10000 done, 9991 succeeded, 9 failed, 0 errored, 0 timeout
status codes: 9991 2xx, 0 3xx, 0 4xx, 9 5xx
traffic: 249.24MB (261343519) total, 149.02KB (152593) headers (space savings 95.78%), 248.40MB (260466602) data
min max mean sd +/- sd
time for request: 20.74ms 180.35s 11.68s 11.02s 91.20%
time for connect: 90.91ms 251.48ms 148.32ms 36.94ms 73.00%
time to 1st byte: 172.45ms 54.38s 13.31s 15.11s 81.00%
req/s : 0.55 1.25 0.95 0.29 56.00%
image 62

How to setup QUIC.CLOUD CDN on a WordPress site?

Overview of QUIC.cloud

QUIC.cloud is a highly optimized CDN (Content Delivery Network) created by LiteSpeed Technologies. Currently, only WordPress can use this network. In this tutorial, we will see how to setup QUIC.CLOUD CDN on a WordPress site.

Table of Contents

  1. Why QUIC.cloud?
  2. Prerequisites
  3. Link QUIC.cloud to WordPress
    1. Request a Domain Key
    2. Link to QUIC.cloud
  4. Enable QUIC.cloud CDN
    1. Enable CDN and get CNAME Records
    2. Update DNS
  5. Verify If CDN is Enabled
  6. Unable to Fetch Server IP (Optional)

Why QUIC.cloud?

LiteSpeed Cache plugin of WordPress is always in sync with the QUIC.cloud network and it knows when to invalidate your cache so that end-users won’t receive outdated data from the edge servers, which makes it the only full-page cache CDN for WordPress with an intelligent purge.

It will make your website faster and more secure and your website will be cached on servers all around the world making its response rate faster to end users around the globe. When a user request data from the website, a response will be given from the user nearest located server rather than your main server which is available only in one location, which basically speeds up your website.

Prerequisites

  1. WordPress Site
  2. LiteSpeed Cache WordPress Plugin (Read our LSCache WordPress guide to setup LSCache plugin)

Link QUIC.cloud to WordPress

To setup QUIC.cloud on WordPress, First step will be in the WordPress,

Request a Domain Key

  • Open your WordPress site dashboard and Navigate to LiteSpeed Cache and select General.
  • Under General Settings tab click on the Request Domain Key button, which is located on the right side of the Domain Key Text Field.
quic.cloud

After doing the above step, You will see a notification at the top informing you that your request has been made, please wait for the result.

Refresh the page and you will see that your Domain Key Text Field is updated with the new generated key and Link to QUIC.cloud button is enabled.

2nd

Link to QUIC.cloud

After completing the above step, we will have to link the WordPress site to QUIC.cloud account.

  • Click on the button Link to QUIC.cloud

You will be redirect to QUIC.cloud to Log In / Sign Up

4

Enter your Email, If you already have an account you will be signed in and your WordPress site will be automatically linked to your QUIC.cloud account and then you will be redirected back to your WordPress Dashboard.

7 1

Visit My Dashboard on QUIC.cloud button verifies that your site is linked to your QUIC.cloud account.

Now, Your WordPress site is linked to QUIC.cloud account and you can use most of its features like image optimizations and critical CSS generation but CDN is still not in use. To Setup CDN, we will have to make some DNS changes.

11

Enable QUIC.cloud CDN

Now your WordPress site is connected to your QUIC.cloud account but it is still not using the CDN. To Enable usage of CDN, you will have to point your domain DNS to CNAME which will be provided by QUIC.cloud.

Enable CDN and get CNAME Record

  • Go to your QUIC.cloud account settings and select the website you would like to enable CDN for.
  • Select the CDN tab and click on the button Enable CDN
12

QUIC.cloud CDN will be enabled for the website you selected and you will be provided with the CNAME records. You will have to point your website to this CNAME to use Full QUIC.CLOUD CDN services.

14

Update DNS

Now to enable CDN effect on your site, Head over to your domain DNS settings and make sure your domain points to the CNAME provided by QUIC.cloud as shown in the above image.

17

and that is it! Your website is now using QUIC.cloud Content Delivery Network ( CDN ).

Verify If CDN is Enabled

Still curious, If your site is using the CDN or not? Well, There is a way to verify that your site is using QUIC CDN.

You can use HTTP/3 Check to verify it. If your site is using the QUIC CDN and it is working properly, you will see something like this as shown in the image below.

20

To make full use of QUIC.CLOUD, read our article -> How To Optimize WordPress Site Using LSCache Plugin


Unable to Fetch Server IP

This topic is optional for those who face this error.

Well, There is a chance some of you may have come across this error (shown in the below screenshot). There is no need to worry about it. When you link your site to QUIC account it fetches your Server IP (through your website URL), where your site is hosted, to enable its CDN services. But,

In some cases your website is under a proxy to hide your actual Server IP from its visitors, so QUIC.cloud can not fetch it correctly and shows you this error.

It has a very simple solution, All you have to do is Paste your Server IP (where your site is actually hosted) into the server IP block you see in the below screenshot and Save it.

It will be fixed, Simple as that!

error

Enjoy Boosted site by QUIC.cloud!

How to Speed up Your Site via Cloudflare Page Rules for HTML

HTML is one of the most important aspects with regard to the speed of your webpages. If we cache HTML it will reduce the usage of resources and improve the performance of the site. Caching HTML is very useful in a site performance perspective. You know that Cloudflare usually caches all static resources which has also a great impact on site performance. Like CSS, Javascript, images, and all. But what about HTML?, so in this article, we are going to explain how to make HTML caching work with WordPress and Cloudflare Page Rules

HTML caching is called full page cache it is not a default cached code from the Cloudflare we have to create rules for this. So what we need to do so let see.

Required Features for HTML full page caching

Page Rules

As I already stated above that by default, Cloudflare is not caching HTML. to do so we need to use page rules and have to enable the cache everything setting. This means you enable the caching of HTML by making a rule that cache everything. But to do this there is a problem and you have to take care of these two factors while making page rule for HTML.

  1. The HTML content for which you are creating the rules has to be static. In simple words, it does not change over time. Like a dynamic front page.
  2. The second thing the content is anonymous. This means that it is the same piece of content that is intended for any visitor to this resource.

These all thing shows that Caching everything is not engough for the setup.

Cache Everything

Cache Everything means you cached everything even the content not needed to cache. When you cache everything this will be a risk. Maybe you cache those content that is not intended for the next visitor. Let me explain with an example if you are login as an admin in WordPress dashboard and visit your front page and you cached everything, literally everything. Then the next visitor who is a normal visitor who accesses the site will see the admin edit bar that only was intended for you. So to not get stuck in this type of stuff you need to do and other things and that is to Bypass Cache on the Cookie setting.

Bypass Cache on Cookie

A cookie is a small piece of data stored on the user’s computer by the web browser while browsing a website. To login to a website, cookies are needed to maintain a link between your local computer and server. A cookie from your local computer, it is sent with every request you make to the server. This means that you can tell the server to pass the request through to the origin server, given the user has a certain cookie. With this enabled, you can deliver cached responses to Anonymous visitors, while you as an Administrator, or a logged-in customer in your WooCommerce, are getting served a tailored HTML page that will not be cached. In this way you have to do so you will not face the everything cache problem.

Always chose a best and correct plan to do this.

Configure Cloudflare for HTML caching for WordPress

Caching HTML is one of the important and critical issues. Keep in mind that when you are going to leverage Cloudflare for the HTML caching, always reduce the number of plugins you are using for caching, Optimization, aggregation, and all that. The use of more plugins makes it complex and complicated. Made the thing harder to resolve and understand. maybe they also cause a conflict. And I honestly tell you that caching with Cloudflare is more efficient and worthy. There’s nothing more annoying than trying to debug cache issues on a CDN. A visitor would report some error, and when you test this hitting another CDN node the results could be entirely different.

Now its time to setup page rules for html. To do so follow the steps.

Setting up the Cloudflare Page Rules

In order to process the different requests from Cloudflare, you need to set up different rules for it. The first-page rule that matches the incoming request is the one that will be applied. 

To add Page rule go to Page Rule

image

Here is some configuration, These are some basic configurations for a WordPress site.

Cloudflare Page Rules

Explanation for these Cloudflare Page Rules:

Now let’s explain these rules we provided above. These three rules are different and have there own importance according to there values.

1: Enable Cache for all requests going to anything in the folder wp-content. And this rule includes all the themes and plugins all.

2: Now I think you got it for which contains the second rule is. Yes, it is for all requests from the wp-. This rule bypass the cookie. This makes it possible for you to log in wp-login.php, and work in the admin wp-admin/* without running into caching issues. When you log in to the Control Panel, you will get the no-cache cookie

3: This third rule is for the whole website. All the rest requests. I didn’t set the bypass cache on it you can set for this.

This is for a stranded WordPress site but for a woocomerce site you need some other rules as well.

Additional required Cloudflare Page Rules for WooCommerce:

As you know the woocomerce site is very different from the normal site and there is a huge difference between the caching of woocomerce and a normal blog site. Although the basic rules for woocomerce are the same it need some additional rules for this purpose. These rules are specified for specific paths of sites. Like checkout, cart, etc. I will show you some rules.

Cloudflare Page Rules

With the rule mentioned above, you can also use these two rules for your woocomerce site. The checkout often involves multiple steps, therefore the checkout wildcard rule is used to bypass the cache. and also the cart.

In this article, we will go for some other details but first, we have to know how we can purge cache in cloudflare.

Purge cache in Cloudflare

Purge meaning clearing cache in Cloudflare. Sometimes you need to clear the cache in order to visible changes and getting some new content. Purging cache is different in Free and Enterprise plans. I will discuss here the method. For the free version, we have Purge by single-file (by URL).

Purge by single-file (by URL):
  1. Login to Cloudflare
  2. Select the site you need to purge
  3. Go to the Caching from the top menu.
  4. In the Purge Cache pane, click Custom Purge.
Cloudflare Page Rules
  1. Select URL in the Purge by field.
  2. Enter the appropriate value(s) in the text box
  3. Perform any additional instructions to complete the form.
  4. Review your entries.
  5. Click Purge.
Cloudflare Page Rules

The purging for Enterprized is different from the free plan. Follow the guide to do so.

You can do more customization of Cloudflare Page Rules

Different sites need a different type of setup because they have a different type of requests. All sites are different, and there are usually certain paths and requests you’d like to exclude from caching. Both plugins and themes sometimes require customization. Also, API requests are generally not something you’d like to cache.

Including and excluding the content is specific for every site and you have to do it according to that specific site. there are some extra settings like Edge cache TTL, Browser cache TTL, Origin cache TTL you have to take care of these for caching.

Edge Cache TTL:

Edge Cache TTL is used to tell the Cloudflare how long to keep the asset in the cache. We can say that this is an edge of time to keep the data in the cache. Let say we want to keep the cache for a month or more then we set that limit for the cache. Usually, it depends upon you I mean the user. How long you are using the same content and when you want to change it. Read more about this here.

Browser Cache TTL:

Browser cache is special. You can set these using page rules. Unless specifically set in a Page rule, Cloudflare does not override or insert Cache-Control headers if you set Browser Cache TTL to Respect Existing Headers. It cannot be cleared by clicking a button. The only way to bypass the browser cache is to force-reload a page (which will make the browser reload the page from the server) or let it expire. The upside of the browser cache is that it is the cache closest to the users – so it will make HTML load in just fractions of a second because it doesn’t require any network traffic.

If you want to know more about it and want to know how to set up click here.

Origin Cache Control:
These are used for CND. These Cache-Control headers are one way for web administrators to tell Cloudflare how to handle content from the origin. This is a very nice feature for advanced users, that know how to manipulate headers and instruct the Edge cache using headers.

Read more about Origin Cache Control here.

How To Solve The Redirection Error Of Your Hacked Website And, How To Get Back Your Hacked Website

Follow US on Facebook / Twitter  for update.

Migrate WordPress Site using Migrate Guru complete guide

Moving a website from one place to another place can be a difficult process. The main difficulty during this task is the risk of losing data. this article is about Migrate WordPress Site using Migrate Guru. WordPress is one of the most used CMS and the process of migrating a WordPress site from one place to another is now made easy with the use of different plugins and techniques. A WordPress website consists of files and a database, both of which need to be set up to talk to each other in the correct way.

Migrate Guru is a plugin that makes the migration of the site from one server to another very easy. Migrate Guru will transfer a site quickly, requires minimal knowledge. You did not need to worry about any database, data, and files loss. In this article, we mention Migrate WordPress Site using Migrate Guru

Table of Contents

  1. Installation Of Migrate Guru
  2. Migrate Guru Features
  3. Setup on Remote Server
  4. Move Website using Migrate Guru

Installation Of Migrate Guru

You can install Migrate Guru from the WordPress admin Dashboard, Plugin section. And also you can install it manually. We mention both methods below.

Install Automatically:

  1. Go to the Plugin section on WordPress admin Dashboard.
  2. Search the Migrate Guru in search box.
  3. Click the install button and activate to use.

Install Manually:

  1. Search Migrate Guru in any search engine or click here.
  2. On this page click Download button and download the zip of plugin
  3. Upload this plugin in plugins and active it.

Migrate Guru Features:

Fast One-click Migration

Using Migrate Guru you can move your site quickly and with one click. Let you have a 1GB of the site you can clone or migrate it less than 30 minutes. Just enter host details and click ‘Migrate’. If you entered the details right it will be done in just a few minutes.

Compatible with almost every Web Host

Migrate Guru has a large number of web Host option. Move your site from and to any web host.

Migrate WordPress Site using Migrate Guru

No Overload On Site

When you start the migration of your website the plugin will monitor the server resources ensuring that it does not overload until the site migration is completed.

Built For Large Sites

Migration Guru works for large sites. Move or clone sites as large as 200 GB in a breeze. Large site migrations usually fail because of live-site server import limits.

No Space Required

You do not need any extra space for migration. Migrate Guru automatically copies your site to our servers. After the migration is complete, the copy is erased.

Fully Automatic, Built-in Search

Comfortably handle serialised data with accurate Search & Replace.

Timely Alerts

Sit back. Relax. Our real-time & email alerts will keep you up to date with the website migrate status.

Setup On Remote Server

There are some steps to do on the remote server before doing migration.

Create your Site:

Before transferring the site first create the site on required server with the same name and credentials. Once your site is created move to next step.

Install WordPress

Install WordPress on the newly created website. Complete the setup of WordPress installation. Fellow the video guide to complete the setup.

Move Website using Migrate Guru:

Fellow the steps to move your site:

After installing Migration Guru plugin click on the migration guru in the left menu you can see dashboard

image 50

Provide Email and agree the agreement. After providing all information click on the Migrate button.

image 51

Select your host from all these host listed on the screen.

image 52

For this tutorial we are using FTP to transfer site. Provide the required information in the from.

image 54

After providing all this information click the migrate button.

image 55

if all information is true you can see the migration process.

image 56

After successful migration of site you can see the screen showing success massage. and also you will receive a email regarding the completion.

image 57

How to Setup Rank Math SEO Plugin On a new site?

Rank Math is an SEO (Search Engine Optimization) Plugin. Rank Math is one of the most powerful and popular SEO plugins for WordPress sites. In this article, we will discuss how to setup Rank Math SEO Plugin on a new site? We will briefly discuss the method for installing and configuration of Rank Math SEO Plugin. Read all steps carefully.

Table Of Contents:

  1. About Rank Math SEO Plugin
  2. How to Install Rank Math
  3. Configuration For Rank Math

About Rank Math SEO Plugin:

Rank math is one most used SEO plugin for WordPress. Rank Math helps your content to reach the top position in Search Engines. Rank Math SEO has some exclusive features like:

  1. Easy to Follow Setup.
  2. Clean, & Simple User Interface.
  3. Google Crawl Errors
  4. Automated Image SEO
  5. XML Sitemap

TO read more Rank Math features click Here.

How to install Rank Math:

Installation of Rank Math Plugin is very easy. Like all other WordPress plugins, there are several methods to install Rank Math Plugin on your Website.

  1. Install Directly From the plugins Section.
  2. Upload on-site from local computer
  3. Upload from FTP.

Install Directly From the plugins Section:

You can directly install Rank Math plugin by visiting ‘Plugins’->Add New from the WordPress Admin Dashboard.

Setup Rank Math SEO Plugin

Once you click the ‘Add New‘ button you can see the screen present below. Search Rank Math in the Search box.

image 1

When you search for Rank Math you can see the result. the first result of your search is the required one. (Remember the logo and By sections may be searching ranking will be different in future).

image 2

Click the ‘Install Now‘ button After installation Click the ‘Activate’ Button.

image 3

Once you Press activate button its time to configure your Rank Math SEO plugin.

Upload on-site from local computer:

Download Rank Math SEO plugin from its official site click here. In this Link, you find a Download button as shown in the screen below.

image 4

After completion of the download. Now you have to visit your WordPress admin dashboard. And go to the Plugins section and then ‘Add New‘.

image 5

Click on Add New and you can see the Upload Plugin button on the top of the screen.

image 6

Press this upload button and choose the file you downloaded from the Rank Math official site.

image 7

Once you select the file you can see the Install Now option. Install and Activate.

image 9

Upload from FTP:

You can also upload this File using your FTP account. follow the Guide.

Configuration For Rank Math:

Once you successfully installed Rank Math SEO plugin after activation you can see this screen. Here the Configuration begins.

image 10

Here you ‘Connect Your Account‘ click that to processed.

Connect Your Account

In the next screen see the Login option you can log in using your Google Account, Facebook Account, and your Email. (No preference on this login with the method of your chose )

image 11

After login, you can see the activation massage on your screen press the OK button to reach the next step.

image 12

All done for activation its time to ‘Start Wizard‘.

Run Wizard:

The actual configuration and setup of Rank Math starting from this Part. Wizard has serval steps:

Getting Started:

Rank Math has three types to start with Easy, Advance, and the custom.

image 13

If you have a pro version you must go with custom but for Free version, we will go with Advance option. Select the Advance one and Start Wizard.

image 14

Your Site:

In this step, you have to define what really your site is a Personal Blog, Community Blog, News Site, Personal Portfolio, etc. Select according to your site description.

Add a logo for Google AND Default Image for Social media(If any post didn’t have a featured image that will automatically appear in the post).

image 15

Save and Continue for next step.

Search Console:

Get Authorization code using this tutorial

image 16

Save and continue to next step.

SiteMaps:

In this step check all option turned them all.

image 17

Save and continue to next step.

Optimization:

Turn on the features according to your requirements.

image 18

Noindex Empty Category and Tag Archives

Setting empty archives to noindex is useful for avoiding indexation of thin content pages and dilution of page rank. As soon as a post is added, the page is updated to index.

Nofollow External Links

Automatically add rel="nofollow" attribute for external links appearing in your posts, pages, and other post types. The attribute is dynamically applied when the content is displayed, and the stored content is not changed.

Open External Links in New Tab/Window

Automatically add a target="_blank" attribute to external links appearing in your posts, pages, and other post types. The attributes are applied when the content is displayed, which does not change the stored content.

Almost done with settings of Rank Math. Click on the Advanced Options button to see the last setting.

image 20

Role Manager:

The Role Manager allows you to use WordPress roles to control which of your site users can have edit or view access to Rank Math’s settings. Turn it on if you want this feature for your website and press save and continue for the next step.

image 21

404 and Redirections:

The 404 monitor will let you see if visitors or search engines bump into any 404 Not Found error while browsing your site.

Redirection Set up temporary or permanent redirections. Combined with the 404 monitors, you can easily redirect faulty URLs on your site, or add custom redirections.

Turn them on so if any page is not found it will redirect Automatically.

image 22

Schema Markup

Here you have to set your schema for the website. You can choose schema type for the post, schema type for a page, Article type, etc.

image 23

Your setup completed. Now you can see the Rank Math Dashboard.

image 24

If you want to make any changes or add any module you can do it from Rank Math Dashboard.

Join our Affiliate Program and get bonus.

Read More: HOW TO CHANGE TIMEZONE ON LINUX SERVER

Follow US on Facebook / Twitter  for update.

How to Setup CyberPanel on AWS EC2

If you want to setup CyberPanel on AWS EC2, read the article and follow the steps to do so. We will go from signing up on Amazon AWS to setting up an instance and installing CyberPanel

After reading this article you can easily set up an EC2 instance with Cantos 8 and install CyberPenel on it. Follow all the steps mentioned below.

Table Of Contents:

  1. AWS Access and Basics
  2. Create an EC2 instance on AWS
  3. EC2 Setup with Centos 8 minimal
  4. Ports Configuration (Firewall Configurations)
  5. Access Key Setup
  6. Access server using Bitvise
  7. Install CyberPanel

AWS Access and Basics:

To Set up an EC2 instance and install CyberPanel on AWS. First of all, you need an AWS account to do this. If you already have an AWS account. Log in using this link. And provide the required information.

image 35

If you do not have an account, go to this link. And provide the required information.

image 34

Amazon Web Services is a platform by Amazon that provides Web services globally.

Create an EC2 instance on AWS:

You can see this dashboard when you access the AWS console.

Setup CyberPanel on AWS EC2

Go to the Services option on the top menu.

image 37

Click on the Services and you can see this screen.

image 38

EC2 Setup with Centos 8 minimal

You can see the EC2 option on you screen click to start the process.

image 39

Once you click on the EC2 option now this screen appear.

From here you can create an EC2 instance with Centos 8 as OS. You have to click on the Launch Now option and proceed to the next steps.

image 40

1.1.  Choose AMI

Choose an Amazon Machine Image (AMI). Here you have to select the operating system image that will be used in this Instance.

image 41

On the screen above you have to go on the AWS Marketplace Option.

Here you have to search for Centos. (You can also go for any operating system you want to install but make sure it is supported by CyberPanel).

image 43

From the different versions of Centos, we go for the CentOS 8 Minimal (CentOS 8.2.2004).

Click on Select button to proceed with the instance set up.

image 44

After selecting the operating system you can see a Pricing Page. Click Continue to processed (this is just a description of how much you will be charged depending upon the instance size you choose on next screen)

image 45

1.2. Choose Instance Type:

In this step, you have to choose the instance size of your choice. And click for the next step. I choose a general that has a free trial.

image 47

1.3. Configure Instance

In this step leave the settings as default if you want to change anything go according to your requirement. If you don’t want to change anything then leave this as default and processed to next.

image 49

1.4. Add Storage

Add or change the storage according to your requirement. Processed to the next after changes.

image 50

1.5. Add Tags

Add any tags you want to add in this step. Like name, title etc.

image 51

Add the information like this:

image 52

After this processed to next.

1.6. Configure Security Group

This is the most important part of this process. You must have to add all CyberPanel ports before actually installing CyberPanel otherwise some features of CyberPanel may not work.

There is only one port in default configuration which looks like:

image 53

Add all the ports as seen in the picture below

image 54

Add IP as 0.0.0.0/0, ::/0

Ports that are needed to open for CyberPanel to work properly (In IP Address section you may want to replace 0.0.0.0/0 with your IP for some services like SSH to better protect your server against attacks):

IDNameProtocolIP AddressPort
1paneltcp0.0.0.0/08090
2httptcp0.0.0.0/080
3httpstcp0.0.0.0/0443
4ftptcp0.0.0.0/021
5smtptcp0.0.0.0/025
6smtpstcp0.0.0.0/0587
7ssmtptcp0.0.0.0/0465
8pop3tcp0.0.0.0/0110
9imaptcp0.0.0.0/0143
10simaptcp0.0.0.0/0993
11dnsudp0.0.0.0/053
12dnstcptcp0.0.0.0/053
13ftptlstcp0.0.0.0/040110-40210
14POP3Stcp0.0.0.0/0995
15quicudp0.0.0.0/0443
16terminaltcp0.0.0.0/05678
17lswstcp0.0.0.0/07080

1.7. Review

In the last step of the EC2 setup review all the information you added before in the previous steps.

image 55

Access Key Setup:

Once set up is completed you have to create a key pair to access server otherwise you can not enter SSH to install CyberPanel. You can upload an existing key as well but we will create and download new key.

image 56

Download this Key Pair in your local computer, so that we can use it later to access this instance.

Use this key and Launch this instance.

image 57

You can see the Amazon EC2 will not set-up your instance in few seconds and it will be ready to use.

image 58

After completion of this process, you can check your instances through. Services-> EC2 -> Instances here you can see all information.

image 59

Access server using Bitvise:

Once all is done for the EC2 setup. Its time to access the server and install CyberPanel. You can access your server using different tools but for this article, we will use Bitvise. If you don’t have Bitvise installed on your computer download it from here.

After downloading provide your IP address for Host field, Username will be centos(Default username is centos). Port 22. Set the initial methods to a public key and client key to auto.

image 60

To grant the access to your key click on the Client key manager. and on the next screen click on the import option.

image 61

Select you key file and i will appear on the Client Key Manager.

image 62

After all, click on the login button to get server access.

Install CyberPanel:

Once terminal was launched.

Follow this guide to install CyberPanel.

Read More: HOW TO CHANGE TIMEZONE ON LINUX SERVER

Follow US on Facebook / Twitter  for update.

How to setup WordPress Multi-Site on CyberPanel

A multi-site setup for WordPress enables the end-user to create multiple WordPress sites from the WordPress dashboard. Each site with-in a WordPress network acts as a separate WordPress installation and can be managed from a single dashboard.

This feature is provided by WordPress to ensure that its users can easily create a network of sites without digging too much into server-side problems.

In this article, we will describe how to setup WordPress multi-site network using CyberPanel and then issue Wildcard SSL for multi-site operations.

Table of Contents:

  1. Setup Catch all vHost
  2. Things to do before enabling Multi-Site on WordPress
  3. Configuring WordPress to allow Multi-Site
  4. Create/Install a Multi-site Network
  5. Configuration of Multi-site setup
  6. Create a new site on Network
  7. Setup wildcard SSL on multi-site

1. Setup catch All vHost:

The first thing to do before setting up multi-site is the setup of Catch all vHost. Catch all vHost is the must thing to do before enabling the multi-site configuration in WordPress. A multi-site setup is not possible without the setup of Catch all vHost.

The method for catch-all vHost is different for LiteSpeed Ent and OpenLitespeed.

Setup catch all vHost for LiteSpeed Ent:

Open your vHost file from the website manager and edit this line

ServerAlias www.abc.com
wildcard SSL

Change this to

ServerAlias *.abc.com

Setup Catch all vHost for OpenLiteSpeed:

The setup for OpenLightSpeed is very different from LightSpeed. Follow the steps to do this:

Open “/usr/local/lsws/conf/httpd_config.conf” via command line or using an SFTP software.

image 25

Once you open this file find the Listener Default portion for port 80 (HTTP). It look like:

listener Default{
map example.com example.com
address *:80
secure 0
}

Now if you want to set up catch-all vHost for example.com, change the map line to following:

listener Default {
map example.com example.com, *.example.com
address *:80
secure 0
}

After this portion similarly you have to edit the listener SSL by default it looks like:

listener SSL {
map example.com example.com
address *:443
secure 1
keyFile /etc/letsencrypt/live/example.com/privkey.pem
certFile /etc/letsencrypt/live/example.com/fullchain.pem
............
............
enableStapling 1
ocspRespMaxAge 86400
}

Edit this file add *.example.com on the last of this portion:

listener SSL {
map example.com example.com,*.example.com
address *:443
secure 1
keyFile /etc/letsencrypt/live/example.com/privkey.pem
certFile /etc/letsencrypt/live/example.com/fullchain.pem
.........
.........
enableSpdy 15
enableStapling 1
ocspRespMaxAge 86400
}

vHost Configuration for OpenLiteSpeed:

After editing httpd_config.conf file (/usr/local/lsws/conf/httpd_config.conf) you need to open vHost option from Website Manager and edit vHost.

Default vhAliases

vhAliases www.$VH_NAME
image 26

Edit vhAliases to:

vhAliases *.$VH_NAME
image 27

2. Things to do before enabling Multi-site on WordPress

There are a few things you need to do before enabling and using Multi-Site on WordPress. Here are some key points:

Backup your full single website:

Always make a backup of your whole site (files and databases) before creating a network. this is an important step so you don’t lose your data and files.

Pretty Permalinks

Check and verify the pretty permalinks work on your single WordPress site.

like: https://wordpress.org/?p=1

image 11

Deactivate Plugins

Deactivate all WordPress plugin before the creation of the network. And activate again after creation.

Go to Plugins->Active and then click on the deactivate button present below every plugin name as shown below in the picture.

image 12

3. Configure Allow multi-site setup

To allow the multi-site setup or network setup you have to check your wp-config.php file on your file manager of the website and add this code to that file.

define( 'WP_ALLOW_MULTISITE', true );

wp-config.php file is present in public_html folder of site.

image 13

4. Create/Install a multi-site Network

After enabling multi-site mode from wp-config.php file now you can see a new option under the tools tab in wp-admin.

Before enabling multi-site network from wp-config.php file.

image 14

After enabling the mode.

Multisite On WordPress

Now go to this new option Network setup in the tool menu. You can see this screen.

image 16

In this screen the first note is for the pretty permalink.

You can select the option. Your sites will be subdomains or subdirectories in the network.

Sub Domian:

subdomain is a domain that is part of a larger domain. A domain-based network in which on-demand sites use subdomains. Like if our domain is “www.abc.com” then “site1.abc.com” or “site2.abc.com” are your subdomains.

Sub Directories:

Note: This does not require setting up catch-all vhost.

A path-based network in which on-demand sites use paths. Like “www.abc.com/site1” or “www.abc.com/site1” are subdirectories.

Use can set network titles according to your choice also provide the network admin email. and after that click on the install, button to process.

5. Configuration of Multi-site setup

Once the network installation is complete. Setup shows a screen which has code for the configuration of wp-config.php and .htaccess files. Copy these lines of code and paste into wp-config.php and .htaccess files accordingly.

image 17

Copy the lines of code and add these to the wp-config.php and replace the second lines of code and replace all these with .htaccess file present in the public_html folder.

After editing these files must log in again to the wp-admin. So you can see the changes on the dashboard. You can see these two new options on your dashboard.

image 18

6. Create new sites on Network

To create new sites Go to the My sites->Network admin->Dashboard option from the top bar of wp-admin.

image 19

When you visit this option you can see a different type of dashboard on your screen.

image 21

To create a new site visit Sites->add new option.

image 20

After clicking the add new button. A screen appears that requires information about your subdomain or subdirectory. As I selected subdirectory its look like:

image 22

In the case of sub domain it look little different.

Once you click the add site button you can see the Dashboard and edit site button on the top of the page.

image 23

You can access the site Dashboard or edit newly create site from here.

7. Setup wildcard SSL on multisite.

For a multi-site setup, we can use the wildcard SSL. Once you create a wild card SSL you have no need to create SSL for every sub domain as WildCard SSL will cover all subdomains.

Create wildcard SSL

Create a wild card SSL for your network using this command on the server terminal.

/root/.acme.sh/acme.sh --issue -d <youdomain.com> -d '*.<youdomain.com>' --dns dns_cf --cert-file /etc/letsencrypt/live/<youdomain.com>/cert.pem --key-file /etc/letsencrypt/live/<youdomain.com>/privkey.pem --fullchain-file /etc/letsencrypt/live/<youdomain.com>/fullchain.pem

CloudFlare File configuration

After creating that wildcard ssl its time to edit information in dns_cf.sh file present in “/root/.acme.sh/dnsapi” directory.

Replace the CF_Key and CF_Email by your key and email. Also, remove # Singh to active them.

CF_Key="sdfsdfsdfljlbjkljlkjsdfoiwje"
CF_Email="[email protected]"

You can also Use CF_token for this process.

Fellow this guide to check CF_Key or generate CF_token.

https://support.cloudflare.com/hc/en-us/articles/200167836-Managing-API-Tokens-and-Keys

Read More: HOW TO CHANGE TIMEZONE ON LINUX SERVER

Follow US on Facebook / Twitter  for update.