Archive

Category: Optimizations

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 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.

Installing CyberPanel

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.

Upgrading CyberPanel

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

OpenLiteSpeed vs NGINX

Updated: On 22 September 2020.

OpenLiteSpeed is an open-source version of LiteSpeed Enterprise Web Server that shares the same code base so the same Enterprise-Grade performance. Today we will see the performance of openlitespeed vs nginx and we will look into various scenarios such as;

  1. Static file performance of openlitespeed vs nginx.
  2. Simple PHP file performance.
  3. WordPress site performance with and without LSCache and FastCGI Cache for NGINX.
Continue reading “OpenLiteSpeed vs NGINX”

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.

Top WordPress Page Builder Plugins

WordPress is one of the most popular content management system (CMS). Now more than 60 million websites are using it. WordPress offers many themes and plugins to manage their websites. WordPress Page Builder plugins are also available for WordPress which makes the designing of a website easy.

Using a WordPress page builder anyone can make and edit their website according to their choice. Even a non-technical person can do it without any programming or designing skills.

There are many page builder plugins for WordPress. Here we discuss the most popular, user-friendly, and easy-to-use plugins. Which are also available for free.

Table of Contents

  1. Elementor
  2. Divi
  3. Beaver Builder
  4. Page Builder by SiteOrigin
  5. WP Page Builder
  6. WPBakery Page Builder
  7. Nimble Page Builder

Elementor:

Elementor is one of the best WordPress Website Builder powered by Elementor.com. Elementor is available in Free and Premium versions, with over 5 million active installs. You can create beautiful sites and pages using a drag and drop interface.

Elementor has a large list of powerful features that enable you to build your website quickly and easily.

WordPress Page Builder plugins

Elementor Features:

Drag and Drop Editor

Elementor plugin allows simple drag, Drop, and customize editing. This has one of the fastest and easy editors in WordPress.

300+ Designer Made Templates

Elementor has more than 300 built-in templets. You can choose from them and use them. It has almost a templet for a very kind of industry.

90+ Widgets

There are more than 90 Widgets for users. Buttons, headings, froms, and other like them. Youc can easily choose and use them.

Responsive Editing

Responsiveness is the backbone of your site. Elementor plugin allows responsive editing ti its users. Switch to mobile view, and tweak every element to make it look perfect on any device.

Popup Builder – Pro

The popup builder feature is only available in the pro version of the Elementor plugin. It allows users to create perfect popups. It also includes many advanced targeting options.

Theme Builder – Pro

This feature is also for the Pro version only. By using this feature you can edit each and every part of your site without code. Its like making your own theme.

WooCommerce Builder – Pro

This paid feature take control over your WooCommerce online store by utilizing the power of Elementor.

More Features of Elementor

Click More Elementor Features

Pricing Plans

image 38

Divi

Divi is one of the best WordPress Website Builder. According to the Divi website, Divi takes WordPress to a whole new level with its incredibly advanced Visual Builder Technology. Divi makes building websites for your clients so much easier, faster, and more enjoyable.  You can create beautiful sites and pages using a drag and drop interface.

Divi has a large list of powerful features that enable you to build your website quickly and easily.

image 44

Divi Features:

Drag and Drop Editor

Like Elementor plugin Divi also allows simple drag, Drop, and customize editing. It allows you to add, delete, and move elements around on the front end of your website.

True Visual Editing

Divi allows visual editing to its users. You can design your page in real-time and see the results instantly. Create and customize your pages using intuitive visual controls.

Inline Text Editing

Inline text editing is one of the important features for any site and Divi provides it for its customers. Just click and start typing! Editing your page has never been this easy. Draft pages on the front end and see the results instantly as you type.

Responsive Editing

Divi plugin allows responsive editing ti its users. Building beautiful responsive websites is easy. Divi is responsive by nature and also gives you full control over how your website looks on mobile devices.

Undo, Redo, & Revisions

Nowadays Undo, Redo is the basic functionality that almost every new program provides. Divi works like a modern software application. Easily undo, redo, and travel through your entire editing history. If you make a mistake, Divi has your back.

Custom CSS Control

Divi allows custom CSS for its user. So developers easily combine and modify CSS. Divi’s visual design controls with their own custom CSS. Divi’s interface is simple yet not limiting.

Design Options Galore

Enjoy dozens of unique page elements and thousands of design options. Divi gives you full design control over your website.

More Features of Divi

Click for more features

Pricing Plans

1 License. Complete Access. Unlimited Websites. Unlimited Users.

image 39

Beaver Builder

Beaver Builder is a drag and drop builder for WordPress. Beaver Builder has about 1,000,000 websites. Beaver Builder is a flexible WordPress plugin that uses for the frontend editing of websites without any code.

Use Beaver Builder and Make a stunning website  Whether you’re a beginner or a professional.

image 45

Beaver Features:

Live, Front End Editing

Beaver Builder provides live editing on the front end of your page. Live work gives you real-time output on the front end. What you see is what you get! No more guesswork.

Shortcode and Widget Support

Sometimes we need to add shortcodes and widgets to our pages. Beaver Builder supports shortcodes and widgets so you can use your other favorite plugins. Want to use Ninja Forms or an Easy Pricing Table? We’ve got you covered!

Reusable Templates

Every layout you create can be saved and reused an unlimited number of times to quickly build new pages.

Responsive Editing

Responsiveness is the backbone of your site. As long as you’re using a responsive theme, any page built with Beaver Builder will be totally responsive.

Theme Builder – Pro

This feature is also for the Pro version only. By using this feature you can edit each and every part of your site without code. It’s like making your own theme.

WooCommerce Support

Beaver Builder also provides woocommerce support. Beaver Builder plays great with WooCommerce. It’s never been easier to design a storefront.

More Features of Elementor

Drag and Drop WordPress Page Builder

Pricing Plans

image 40

Page Builder by SiteOrigin

SiteOrigin Page Builder is a popular page creation plugin for WordPress. It allows page building using many widgets, Content, Button, and other things.

A large number of WordPress users are using this for page creation on their site.

image 46

Page Builder by SiteOrigin Features:

Compatible with Theme:

This plugin is compatible with every WordPress theme. It’s not a commitment to a single theme or theme developer. The advantage is that you’re free to change themes as often as you like. Your content will always come along with you.

No Coding Just drag and drop

Like all other, this plugin also allows drag and drop. Page Builder’s simple drag and drop interface means you’ll never need to write a single line of code. Page Builder generates all the highly efficient code for you.

Live Editing

Page Builder supports live editing. This tool lets you see your content and edit widgets in real-time. It’s the fastest way to adjust your content quickly and easily.

Row and widget styles

Styling is also an important factor for any site design. Row and widget styles give you all the control you need to make your content uniquely your own. Change attributes like paddings, background colors, and column spacing. You can also enter custom CSS and CSS classes if you need even finer-grained control.

More Features

Page Builder by SiteOrigin

Pricing Plans

This plugin is free and always be free. Just install activate and use it.

WP Page Builder

WP Page Builder is a free WordPress Website Builder powered by  Themeum.com. You can easily design, and use your site using this plugin on WordPress. WP Page Builder is a free and completely front-end based tool with plenty of design options.

image 47

WP Page Builder Features:

Drag and Drop Editor

WP Page Builder enables you to edit your website on the frontend and see the output in real-time. You can use the ready-to-use elements, create simple to complex layouts, and bring different styles to a website in minutes. It’s superbly easy to create and design pages or edit existing ones with this WordPress page builder’s drag and drop system.

Undo and Redo Option

Like all modern applications, this plugin also allows undo and redo options. The best thing about this feature of plugin that you can undo and redo as many times as you want there is no limit for this.

Font styling and colors

This plugin also helps in typography and colors for the website.  Plenty of IcoFont and Font Awesome font icons are available to use with this WordPress page composer plugin. You can utilize any of the 340+ IcoFont line icons and 670+ Font Awesome icons on your site.

Responsive Editing

No matter how many rows and columns you take on a single page, it will have no issues with responsiveness. WP Page Builder ensures 100% responsive layouts and eye-catching look at the same time. Using the device-specific responsiveness controls, you can render the pages as on different devices (computers, tablets, mobile phones) while editing, and make necessary changes for the perfect responsiveness.

Built-in Blicks

With this plugin, you will get many blocks for your page. These blocks are already present in the plugin. There’s a wide variety of readymade section elements in this web page builder to accelerate your site-building process. Save time in designing sections just by dragging and dropping the readymade section elements of your choice!

More Features of Elementor

WP Page Builder

Pricing Plans

This Plugin is free and it is free for a lifetime. it has also some paid versions which have extra features.

These are the Annual plans

image 41

These are lifetime Plans

image 42

Nimble Page Builder

Nimble Page Builder is a fast and agile page builder plugin for WordPress powered by Press Customizr. This plugin allows live customization, darg and drop, widgets and all these thing. Nimble Builder uses native WordPress action hooks, which makes it compatible with all WordPress themes.

image 48

Nimble Page Builder Features:

Drag and Drop Editor

This plugin allows simple drag, Drop, and customize editing. This has one of the fastest and easy editors in WordPress. Drag and drop neatly pre-designed sections and customize them in a real-time preview.

Compatible with any WordPress contexts

The plugin works for home, Pages, Posts, custom posts, types, archives, and every other context of WordPress.

Embed Shortcodes 

Nimble page builder allows you yo add shortcodes and use them for your side anywhere.and see the result in a real-time preview.

Responsive Editing

Responsiveness is the backbone of your site. The plugin allows responsive editing ti its users. Switch to mobile view, and tweak every element to make it look perfect on any device.

More Features

Nimble Page Builder

Pricing Plans

it is a Free plugin available on plugin section of wp-Admin.

Move a WordPress Site with the Duplicator Plugin

The process of moving a site from one server to another is a very important and difficult task. The main risk during site migration is Downtime. Which can happen with the possibility of data loss? In this article, we will explain how to move a WordPress site with the Duplicator plugin.

This will allow you to move your site from any other platform directly to CyberPanel or other control panels.

Table Of Contents

  1. Duplicator Plugin Setup
  2. Export site using Duplicator Plugin
  3. Setup site on the new server

Duplicator Plugin Setup:

Duplicator Plugin gives WordPress users the ability to copy, move, migrate, or clone any WordPress site. You can easily copy, move, and transfer your website from one server to another. You can also move your site from local to live server direct. First, we need to know how to install and set up the Duplicator plugin on our site.

Install Duplicator Plugin:

Duplicator Plugin is a free WordPress plugin. And available to install in the Plugins section of the WordPress Admin Dashboard. There are many ways to install WordPress plugins. Follow these steps to install the Duplicator plugin.

Install from Plugin section:

To install the plugin directly from the WordPress plugin directory. You have to visit the WordPress admin Dashboard then ‘Plugin’->Add New.

move a WordPress site with the Duplicator plugin

After clicking the Add New button. Here you have to find the duplicator in the search box. And you will get the first result of your desired plugin. Click Install Now to install this plugin.

image 26

Once the plugin is installed, it is time to activate the Duplicator plugin. Press the Activate button to activate.

image 28

Once you activate the plugin you can see Duplicator option in the menu section of Admin Dashboard.

image 30

Export site using Duplicator Plugin:

Once you’ve installed the Duplicator plugin, it’s time to prepare your site for migration. Follow these steps to move your site using the plugin.

You can see the Duplicator plugin in the left-side menu.

Now click on “Duplicator > Packages”. You can see this screen.

image 31

Its time to start the process. Click the ‘Create New‘ button.

image 32

After clicking Create New, you will be given 3 options:

  1. Setup
  2. Scan
  3. Build

1-Setup

You have four options during set up phase.

  1. Name: (Give the Name to make a file).
  2. Storage: (You can select where to save the file).
  3. Archive: (Check Archive files).
  4. Installer: (See the settings for installer file).
image 33

After checking them all, click on the Next button for the next step.

2-Scan

In the next step, you can see the scanning for export.

image 34

After the scan is complete, you will need to check its status and click Yes to build.

image 35

3-Build

After completing the build phase, you can see this screen.

image 36

From here you can get one-click download or archive and installer two files.

Setup site on the new server:

After the successful download of the installer and archive or .zip file. Now it’s time to move the site to another server. Follow the steps to do so.

Upload Installer and Archive File:

Upload both installer and archive files to your server. Always upload your file to the public_html folder of your site. You can upload using an FTP account. In the case of CyberPanel, you can also upload files from the File Manager in Website Manager. Follow the tutorial below to upload using FTP.

http://help.dugeo.com/m/faq/l/175136-how-to-upload-to-our-ftp-server

Install WordPress Website Using Installer

Now, it’s time to run the installer setup on your server. To do this, you need to go to your website address /installer.php at the end. Like www.abc.com/installer.php

If everything is fine up to this step, the next step is the extraction of the Archive file.

Extract the Archive

After visiting the installer page, you will see a screen like this:

extra archive

Click the Next button to proceed after checking the options.

Database Setup

Now create a database to transfer your site. Follow the database creation process.

Run the Installer

The Duplicator plugin works best with empty databases. Hence, before moving forward, you need to remove all previous data.

Next, the database window will open. You need to check the checkbox named tables to select all the tables in the database. Next, click the Drop button to remove the selected tables.

cloudways database

Click the Yes button.

install database

Data Replacement

Once you reached the 4th step click the YES button, you will be given a URL, Path, and Title automatically.

image 37

Now, click the Next button.

Test the Live Site

If it all works, you’ll see “Step 4 of 4: Test Site”. There you’ll want to click the “Site Login” button, and log in to your WordPress site using the same username and password as you have on the remote site.

step 4: download

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 optimize WordPress site using LSCache Plugin

Learn from Niel Patel as to why slow speed is a killer for your online business and let see how you can easily speed up your website.

WordPress is a free Content Management System (CMS) used by more than 60 million websites, WordPress is one of the most popular CMS solutions. Considering the popularity of this CMS, optimizing WordPress sites to load quickly is very important and sometimes it is difficult. PageSpeed of any website is one of the major factors for both usability and SEO. In this article, we will discuss how you can improve the loading speed of your WordPress site using LSCache Plugin.

Table of Contents

  1. What is PageSpeed or Page Optimization?
  2. Factors that affect the PageSpeed of a WordPress site.
  3. How to improve PageSpeed.
  4. How to check PageSpeed.
  5. Benefits of PageSpeed.

1. What is PageSpeed or Page Optimization?

Basically PageSpeed means that how quickly a web page load when a visitor clicks on the link or types in the URL. Usually, a visitor expects that their pages load quickly and this imparts a good first impression on them. PageSpeed not only creates a good impression but also improve search ranking as it affects the SEO

2. Factors that affect the PageSpeed of a WordPress site:

  1. Un-optimized media (Large-sized images and videos)
  2. Un-used CSS and JS
  3. Un-Minified CSS and JS
  4. Excessive Use of Plugins and Widgets (In-active and unnecessary plugins)
  5. WordPress Theme (Theme Choice is important)
  6. Poor Choice of Hosting Service.

3. How to improve PageSpeed:

Follow the steps mentioned below to improve overall speed of your WordPress site.

3.1 Optimize or Reduce media size:

Use of Images and videos make the content more beautiful and attractive but a common mistake is to upload pictures and video directly without any optimization. Always optimize media like videos and images before uploading it on site for use. Use the latest jpg/jpeg version only, PNGs should only be used when transparency is needed. Lower images result in smaller page sizes hence a boost to Pagespeed.

For the images that have been uploaded already, you can also use WordPress plugins for image optimization.

Most Common Image Optimization Plugins:

  1. LiteSpeed Cache
  2. Imagify
  3. Optimole
  4. ShortPixel Image Optimizer

There are many image optimization plugins on WordPress plugins directory, let see how we can use LiteSpeed Cache plugin to optimize images:

  1. Click on LiteSpeed Cache -> Image Optimization. 
  2. Click on Send for Optimization button until all the images are optimized
  3. Once optimization is completed click on Gather image Data.
  4. Check the Image information section on the right side, it shows the optimization status. Green ticks suggest complete optimization.
Image Optimization
  1. Go on the Image Optimization Settings Option on screen.
  2. Check all the options as shown in the picture.
Image Optimization

3.2 Minify HTML, CSS and JS Files:

Minification of HTML, CSS, and JS files are some of the most common and important steps to increase page speed.  Google PageSpeed Insights and/or any other page speed tool always recommends this.

This issue happens due to the white spaces and extra CSS and JS  on the website page.

You can fix these issues manually or use a WordPress plugin to do so. Some plugins are listed below.

  1. LiteSpeed Cache
  2. Autoptimize
  3. JCH Optimize

Minify CSS and JS using LiteSpeed Cache:

  1. Click on LiteSpeed Cache -> Page Optimization -> JS Settings
  2. Change your settings according to the image below
  3. Follow this guide in case this setting breaks any functionality or visual structure of your site
Js Optimization
  1. Click on LiteSpeed Cache -> Page Optimization -> CSS Settings
  2. Change your settings according to the image below
  3. Follow this guide in case this setting breaks any functionality or visual structure of your site
CSS Setings

3.3 Excessive Use of Plugins and Widgets:

Excessive use of Plugins and Widgets can also slow down your PageSpeed. Always take care of extra and unnecessary Plugins and Widgets. Uninstall all in-active and unused plugins from sites. Never add any unused widgets.

Delete extra/inactive Plugins

  1. Click on Plugins->Installed plugins -> InActive
  2. Click on the Delete option right below the plugin name
Uninstall Plugin

3.4 Theme Choice:

The choice of theme to run the site is very important. Always choose a lite-weight theme for your site. Unlicensed/nulled themes slow down PageSpeed of your site so always use a licensed theme for the site.

3.5 Choice of Hosting service:

Hosting service is one of the main reasons behind the low PageSpeed. To run a  site on a shared server may be good from a financial point of view but it usually fails to deliver good loading times on peak traffic hours. So always use a good web hosting provider for your site to achieve a better PageSpeed, SEO, and traffic.

4. How to Check PageSpeed:

There are many ways to check the page speed of any site. A lot of sites are there to check the Page Speed of any site. Google also offers a tool called Google PageSpeed Insights for this.

Some sites that can help you to check various factors affecting your PageSpeed:

How to optimize WordPress site using LSCache Plugin

5. Benefits of high PageSpeed:

  1. PageSpeed improves search engine rankings
  2. It is important for SEO
  3. It ensures a good first impression on the visitor
  4. Also, help to decrease the Bounce Rate so visitors love to navigate between pages

Read More: HOW TO CHANGE TIMEZONE ON LINUX SERVER

Follow US on Facebook / Twitter  for updates.