How to Setup Cloudflare Cache for WordPress – Configure Best Practices

Hosting

May 24, 2021

How to Setup Cloudflare Cache for WordPress – Configure Best Practices

If you are looking to setup Cloudflare Cache for WordPress then you have landed in the right place. In this article, we will focus on optimizing WordPress with Cloudflare.The following post is focused on how to use Cloudflare for the following:

Accelerate WordPress 22 worldwide without modifying your current hosting (for nearly all cases)
Easily enhancing TTFB
Dealing with traffic spike on viral content or event blog without expanding hosting resources
Speeding up the loading process of HTML similar to static content
Growing website availability

It is possible to work on all the above points without spending much. You may need to pay anywhere in the range of 0 to $30/month. It depends on the website as well as the approach of implementation.

Over the years, I found a remarkable feature entitled ‘Cache Everything’ through a newsletter of Cloudflare in my mailbox.

Accelerating WordPress on a limited budget can be difficult.

Owing to my profound interest, I began experimenting on this topic to comprehend how the entire theory works and how it can be utilized in a practical approach for WordPress.

I will share the whole method for deploying the Cache Everything page rule through WordPress. Also, I will share its advantages and disadvantages, potential issue, and everything necessary you may want to know.

The ‘Cloudflare Cache Everything’ is a special page rule which enables you to carry out Full Page Cache on CDN. The same makes sure that your origin server would use a fewer number of resources.

What is Cloudflare 9 Cache Everything Page Rule?

Mostly, when Cloudflare setup is done, it only caches the static files such as JavaScripts, Stylesheet, Images, etc. However, it does not work on vanilla HTML.
Due to the above reason, the static content loads rapidly; however, HTML always puts up with. Several users denounced that after they use Cloudflare, their TTFB got a boost. Look at an example here:

Now the question arises what the cause of this problem is?

Your website TTFB 52, relies on your location of Performance testing. It also depends upon the location of your website server, cache status, server load, DNS, etc.
For instance, if your website servers are positioned in the USA and test the performance from the exact location, the TTFB would execute faster than other regions. It is one of the most significant reasons why I always suggest picking server location according to your target audience nation”.

If you are an author of a blog that possesses a worldwide audience, you might want to accelerate WordPress performance globally.

The solution is as follows:

Full Site Delivery with Cloudflare is a method to run most of the website contents, chiefly HTML from the CDN. The same is possible through the Cloudflare Cache Everything Page rule. This rule is beneficial for enabling caching of HTML to boost web performance.

Prerequisite understanding to setup FSD with Cloudflare:

DNS – You should be familiar with the meaning of grey and orange record at Cloudflare on the DNS page 15
Cloudflare – You should be comfortable with its settings
W3TC 63 – It is an excellent help for FSD.
Cloudflare HTTP Header response – For this, you should know Cache-Control 12 header, status code, CDN HIT and MISS response, etc.

When you accidentally enable only page rule, it will lead to some issue in your WordPress. Make sure to read this before proceeding further. This is because it needs specific logical settings to let things work efficiently.The same is applicable just for a standard blog. Implement it if you understand the thing you are doing.After successfully following this guide for several blogs, there remains the odd of committing errors. Also, it might not be suitable for every WordPress having a dynamic frontend, mainly I don’t suggest for the Forum or WooCommerce.The present guide should not be implemented other than responsive theme where the mobile and desktop theme is varying. Moreover, you must not serve the WebP images via .htaccess coding using this method.The Disqus Native WordPress comment application is likewise supported; however, it needs some extra steps to work more efficiently in a CDN scenario.The same not function with specific web hosting that conveys its own cache. Firstly, disable it before proceeding with the implementation.Not suggested for EZOIC users since they place a no-cache header.

How to properly enable Cloudflare HTML caching?

Step-1: Dealing with Page cache through W3TC using real-time purge Control:

Pro: Simpler for blogs that update frequently.
When combined along with a CDN, it offers excellent performance. It is recommended to try BunnyCDN. But if you do not use CDN, there will be an adverse impact on the static resource performance. This is because of the low cache HIT ratio and the full purge caused by W3TC Cloudflare extensions.

Now follow these substeps:

Setup W3TC plugin precisely as illustrated in this guide. Make sure not to modify anything within the Browser settings portion.
Follow the path: Extensions > Enable Cloudflare
You must use Cloudflare API key 3
Carry out all such necessary settings

Now you have the W3 Total Cache plugin ready to carry out an automatic purge of the Cloudflare page cache over the Post Modifications.Step-2: Configure Cloudflare 9 Settings:Aim: Configuration of cache such that it does not influence any other section.

Retain the Respect Existing Headers; do not override it. It is significant to follow the W3TC Browser cache settings.
Now, set up the Cloudflare Page rule.

(The below two are required for the most nuanced performance.)The first one is for Login page security, whereas the second is for carrying out a Full page cache when following the origin header.Note: Make sure not to use the ‘Edge Cache’ rule within the Cloudflare; else, it will supersede the origin header poorly. Moreover, it may serve internal page to the unidentified visitor.The following settings are shown after careful tests on different websites.

Tip: For skipping Page cache for some URLs, set Cache Level: Standard.

Suggested things to carry out after following the present guide:

You might not wish to cache WordPress.com toolbar. So, it is better to conceal it for unidentified visitors.

add_action('after_setup_theme', 'remove_admin_bar');


function remove_admin_bar() {


if (!current_user_can('administrator') && !is_admin()) {


 show_admin_bar(false);


}


}

The newest version of WordPress can better deal with the commenting. Hence, you can skip this step.

// First comment redirection


function redirect_first_time_commenters( $url, $comment ) {


// get count of user comment


$comment_count = get_comments( array
( 'author_email' => $comment->comment_author_email, 'count' => true ) );


// if this is the user first comment, redirect to the "Thank You" Page


if ( 1 == $comment_count ) {


$url = 'https://hostingxp.com/thank-you-for-commenting/';


}


return $url;


}


add_filter( 'comment_post_redirect', 'redirect_first_time_commenters', 10, 2 );

Remove Admin Traffic from the Google Analytics console.
Now configure the ‘BunnyCDN’ for improving the static content HIT cache ratio and maintain a good balance for the performance.
Conceal frontend Login/Sign up stuff. (You can avoid this method in the present case/)

FAQs:

1. Can Cloudflare FSD (Full Site Delivery)be used with any other plugin other than W3TC?

Not at all recommended for WP Rocket, WP Fastest Cache, WP Super Cache, and many, mostly may lead to cf-cache-status: MISS because of preventive Cache-Control header for that particular document. This is why I do not recommend anything other than W3TC to fulfill this need.

2. Help! My site is broken while purging cache

Discussed previously How to Fix W3 Total Cache Fatal Error that comes while Purge 14

3. How do debug things are functioning correctly?

The Chrome Developer tool proves to the best tool for this. You can use its Networking tab to supervise HTTP response.

4. Is Cloudflare free plan enough?

In the majority of the cases, it is enough. For WooCommerce or some other cookie support, the need may arise to use its Business plan with a price of $200/month. If you need the most affordable option, go for ‘Sucuri 3’ WAF which simply offers identical features.

Summing-up:

After carefully following this guide, you can undoubtedly enhance performance. Also, there will be a significant reduction in server load.When Cloudflare Cache Everything is used, the problematic things faced are:

Excluding cache on the exact time
Managing Cache-Control header to serve the web page efficiently
Balancing better HIT ratio

The aforementioned method is usually reliant on the W3 Total Cache Plugin that comes with below facts:

When you exclude Cloudflare HTML cache, there will be exclusion of Cloudflare whole cache (CSS, HTML, JS, images) similar to using the “Purge everything” button. Is this good? No.
Hence, I advised making use of the ‘BunnyCDN’ for maintaining a distinct hostname when you want to cache static content of WordPress.

This method with CDN is excellent for implementing on a news site that requires real-time purge functionality.However, several bloggers might not need to update that excessively

The alternative approach is:

Maintain the Cloudflare configuration as well as rest function code as it is.
Prevent the use of ‘BunnyCDN.’
Make sure to configure Browser cache for all the static resources across long-term (for example 1 year)
Refrain from entirely using W3TC
Set Cache-Control plugin according to the one shown in the following screenshot. Every configuration is just for the Document web page working on HTML. The same is essential for setting up purge rules depending on the TTL. Read the below section to understand more:

max-age: It refers to browser cache: Since I believe that blog is dynamic, I will not recommend using Browser cache.s-max-age: It is controllable according to TTL, so the content will automatically expire, and CDN needs to revalidate and automatically serve a new version.

How does it function?

Your cache is expected to terminate at a specific time.
It is always allowed to purge whether you are doing it manually or automatically. Why does it? Begin from 600 seconds TTL. Now gradually increase once you become an experienced one.
Now, what for the static content? Cache-Control, you need to know that it is variable according to HTTP requests. Hence, we can add an extra Browser Cache header, especially for the resources such as /wp-content/ as well as /wp-includes/ through a Page rule of Cloudflare. Alternatively, it is not required if you have already done with .htaccess and have used the respect existing header.

For page rule:

*example.com/wp-*

Make a rule where browser cache TTL: The time duration you can keep is 14 days or later. Generally, longer is better because it is the static content.
Make one more rule for Cache Level: Standard (Ensure to stay away from caching everything now.) It is used here since /wp-* will cover only static resources; it does not work on HTML.

How to Change Your WordPress Homepage – 3 Methods

WordPress

HostingXP Staff Writer

December 28, 2020

How to Change Your WordPress Homepage – 3 Methods

In this article, we explain how to change your WordPress Homepage using 3 easy methods:The tone of your website depends on its homepage. If your homepage is not showcasing the appropriate content or does not appear how you imagined it, you may need to make some modifications. But this can be a daunting task if you do not hold enough experience in building websites.The good news to note is that WordPress offers you lots of possibilities for modifying your homepage. This task is not at all difficult. Certain ways are available to implement this so that your homepage conveys your message appropriately.The following guide discusses the WordPress homepage. It also discusses the reason to change it. The later section highlights several ways to change and personalize your homepage. Look below:What Is the WordPress Homepage (And Reason to Change Yours)?Your homepage is like the welcome mat of your website. Any visitor will first observe this page whenever they type in your website’s URL. Hence, it is vital to lay a powerful first impression.The homepage must serve the visitors with a plain view of your website’s idea and what service it can provide them. Generally, slack’s homepage performs an outstanding job of showcasing the product and obtaining people’s attention.As default with several WordPress themes, your homepage showcases your recent blog posts.However, there is a change if you wish to feature something different. This holds if you do not have a blog or not the focus of your website.You may wish to modify your homepage all through the years. If you intend to showcase an event or holiday sale, you can update the page to broadcast that promotion. Alternatively, it suggests that there are ample reasons to modify your WordPress homepage.Since your homepage fixes the tone for your whole website, you must know how to modify it as a site owner. Continue reading this detailed guide:How to Set a Static Homepage:

In case you do not wish to represent your blog posts on the front page of your website, you can set a static homepage. This kind of page showcases content that does not change often. On a WordPress site, there can be a homepage and a distinct blog page.For the creation of your homepage, log in to your admin dashboard. So, follow the below path:Pages > Add NewGive a name to your WordPress homepage, and then click on the ‘Publish’ button. Now repeat these steps another time to make your blog page.By now, your pages are ready, so you can inform WordPress for what purpose they are to be used.Follow the below path:Settings > Reading page

Now in the ‘Your Homepage Displays’ options, choose ‘A static page.’ After that, from the dropdown menus, select your homepage and posts page.When you are carrying out such steps, you might need to place your website in maintenance mode. Doing this shows visitors a message that you set instead of a general error page or a nonfunctioning website. In case you already receive some amount of traffic to your website, it is important to consider this before modifying your homepage.For the setup of this feature, you can use the WP Maintenance Mode plugin.This plugin allows you to convey a custom message to the visitors of your site. Also, it enables you to make a custom message, which allows the visitors to know that your site will resume working quickly.3 Methods to Change Your WordPress Homepage:Now your homepage is already set up, so it is now time to design it and include some content.Look at the 3 various tools to accomplish this task:

With the use of the Theme Customizer to Edit Your Homepage:

Several WordPress themes will offer you a fundamental homepage design along with a few options for modifying it. It is easy to access such options through the Theme Customizer.Beginning from your admin area, you need to click on the Appearance > Customize to open the tool. It is found that the corresponding customizer presents you with a live preview when you are editing your homepage. Henceforth, you can observe how your modifications influence the look of your website.But such modifications will not take effect unless you click on the ‘Publish’ button. Hence, you can give it a try.Based on your theme, there may be varied options for the modifications you can implement. You can navigate through the menu tabs, or you can also click on any area through a blue pencil icon for making edits:If your theme contains numerous templates for different pages of your website, you can start by exploring each template.Certain themes provide you options for the position to include your sidebar. Alternatively, you can completely discard that element to see a full-width page:There may be some parts of the homepage that you would not use. You can discard them using the theme customizer.This is easy to implement by searching for the element within the menu, and then you need to click on the eye icon beside the name of the section:It is possible to bring back any parts you have removed previously by clicking on the same icon. Also, you can drag the items inside the column if you want to modify their order.

Editing Your WordPress Homepage Using the Block Editor:

Though you modified the theme customizer, you may want some more changes via the Block Editor. The Block Editor provides you more options for modifying the layout and design of your homepage.Firstly, look for your homepage in the admin dashboard. You need to click on ‘Pages’ and then choose whatever page you set as homepage. Using the Block Editor, you can add various kinds of content to your homepage. It is possible to start with some text that introduces visitors to your website and the purpose.For getting started, click on the page, and begin typing. You will see that a suitable paragraph block will be automatically prepared.You can even choose the block on your own after clicking on the plus symbol. This can be done from the topmost left corner of the screen or whenever it shows up inside the editor window. Next, you can choose or find out the paragraph block.After there is text in the place, it is possible to use the block settings menu to customize it further. Within ‘Text settings,’ you can modify your text’s size by choosing a preset or custom size. Also, you can incorporate a drop cap for a few additional style points.For inclusion of some color into your paragraph, use the ‘Color settings.’ You will be presented with a collection of predefined colors to let you choose easily. Alternatively, you can use a custom brand color.You will probably wish to incorporate some images within your homepage.For that, click on the plus symbol and choose the ‘Image’ block.It is possible to use the resultant block for uploading an image. You can choose the image from your existing Media Library or include one through a URL. A toolbar is present above the block. You can use it to change the alignment of the image or move it vertically across the page.If you want to include a caption, there is a space available beneath the image to incorporate one.Now you can continue to add the required number of blocks. For accessing more blocks, click on the plus symbol. Now either navigate or search the resultant menu.To see all the blocks for which you have access, click on ‘Browse all.’For instance, to understand this, if you want to incorporate a combination of text and media, use the distinct paragraph and image blocks. Rather, you may try a Media & Text block.This block allows you to display media as well as written content in the particle block, in various configurations:For removing a block, click the 3 vertical dots within the toolbar over it and select ‘Remove Block.’ Using these tools, it is easy to design any homepage you want.

Modifying Your WordPress Homepage Using the Classic Editor:

If you want to work with the Classic Editor, still, you can make an eye-catching homepage. For that, begin from the dashboard of WordPress admin.Now click on ‘Pages’ and choose the page which you assign as homepage.For the addition of text, start typing. By default, the text will be a paragraph. However, you can use the dropdown menu to make a heading or title.The corresponding dropdown menu allows you to modify the text from a paragraph into diverse headings.The toolbar besides this drop-down area allows you to perform more changes in your text. You can italicize or bold it, modify the alignment, and make numbered or bulleted lists. Also, you can include a blockquote to your page if you want.In this toolbar, you can include links in your copy. A button is available to add a ‘read more’ tag. This feature can be beneficial if you add articles on your website but do not plan to show the homepage’s full texts.The final button in the sequence will open another set of tools. So, you will get more options for changing the style of your text. For example, you can vary the size or add colors.Additionally, you can add some media or images to your page through the Classic Editor. For that, click on the ‘Add Media’ button, and you will see a new window opened. To add new files to your media library, you can select the ‘Select Files’ button.There is the flexibility to upload files from your device to include them into your Media Library.From this window, it is possible to access the files uploaded previously by clicking on the ‘Media Library’ tab. Now choose the file you want to add, and then click on the ‘Insert into page’ button.Now the image will show up on your page. The options for the file are easy to access by just clicking on it. For the image, you can alter the alignment, do editing, or remove it.After insertion of the image, you can vary the alignment.To observe how your homepage looks, click on the ‘Preview’ button. After you liked the page’s appearance, click on the ‘Publish’ button to save all the changes. Now, these changes will be reflected on your website.Optional: Check Out the Twenty Twenty-One Theme:If you prefer using the block editor, you can look at the Twenty Twenty-One theme, known as the latest default theme in WordPress 5.6.Basically, the Twenty Twenty-One theme offers great flexibility and function well on various types of websites. It contains simple fonts and a low-key, pastel color pattern. Also, it makes complete use of the patterns that are pre-defined block layouts, which can be further edited to meet your needs.Such dedicated layouts and the minimalism of Twenty-One make the theme a perfect choice for creating an extremely customized homepage. No need to use any third-party page builder.Steps to Build a Menu for Your Homepage:When you are working on the homepage, you need to consider the navigation menu. This menu probably shows up on most of the pages of your website. Moreover, it can be beneficial for visitors who landed on your homepage for the first time.From the admin dashboard, follow the below path:Appearance > Menus

If there are no menus yet, you will be asked to make one. Alternatively, you can choose the ‘Create Menu’ button. Keep in mind that your menu needs a name to differentiate it from other menus you may create.The succeeding step is to include pages in the menu. Either you can add them separately, or checkmark ‘Auto adds pages’ boxes for automatic addition of all top-level pages.If you like to choose the pages manually, choose the ‘View All’ tab in the left column. Now check to mark the boxes you want to include and then click on the ‘Add to Menu’ button:It is easy to automatically add the top-level pages or choose the pages on your own.After adding your pages to the menu, you can set the sequence in which they will show up. This is easy to accomplish by just dragging and dropping the menu items in the place.If you prefer to include some items inside others to make a dropdown menu, it is possible. This allows you to include more links in your navigation. When you do it, the appearance will be clutter-free.You need to drag the child page below and somewhat to the parent page’s right part.Lastly, based on your theme, there may be a few options on the menu’s position to be shown on your page.Famous options highlight the footer, over the top part of the page, and sidebars (right or left). In case the default menu options are not sufficient for you, you can use some other plugins to expand your menu features.

Summary:

An elegant homepage can let visitors accurately understand the actual purpose of your website. Once you set the WordPress homepage properly, it can work as an efficient tool for your blogs, e-commerce sites, etc.In certain scenarios, you need to modify your homepage to reveal your brand message, a new service you want to offer, or a new theme. Fortunately, WordPress offers various ways to modify and edit your WordPress homepage. This can be done in 3 ways:

With the Theme Customizer to edit your homepage
Editing your homepage using the block editor
Modifying your homepage using the classic editor

Rank Math vs All in One SEO vs Yoast – Side by Side Comparison

Das

December 28, 2020

Rank Math vs All in One SEO vs Yoast – Side by Side Comparison

If you are looking for a fair comparison between Rank Math vs All in One SEO vs Yoast, you have landed in the right place.We are talking about the best SEO plugins, and what else can we talk about except Yoast SEO? If we take the populist opinion of most of the bloggers and website owners out there, Yoast would be the right one. Thankfully, there are many more options available for the best SEO performance of your blog or website.Of them, Rank Math SEO and All in One SEO pack should be an excellent choice by almost every standard. Didn’t your teachers and friends tell you that depending on one single solution would not be a wise one? Why go with that one option just because everyone else is doing the same?So, to help you make a call, here is a complete comparison between Yoast SEO, Rank Math, and All in One SEO.

Yoast SEO

Well, that is the perfect solution ever. Yoast has been the red-hot favorite for the bloggers out there. Yoast provides you access to a host of flexible benefits and lets you have control over a lot of things other than just SEO.You can set up titles, meta descriptions, and slug for your content. You can even configure social sharing options with Yoast. And all these tasks can be achieved on a per post basis. You can also set the options for sitemaps and add a little schema. And all those tasks are rather easy and straightforward enough.The basic version is available for free and provides you access to almost every option to achieve the best possible SEO. However, if you are looking for the best advanced options, you can go with the Pro version or the add-ons based on your requirements. The Pro version provides you access to a few advanced features that include

Local SEO
Video SEO
Internal link recommendations

However, the plugin does come with a few drawbacks as well.If you are a beginner concerning SEO, you will find all the features beautiful and exciting. It offers you several recommendations and suggestions. A few advanced users claim that a few recommendations provided by the Yoast plugin tend to be just over the edge.The prime among these complaints is that it tends to encourage keyword stuffing. It does not recognize the essence of LSI keywords. If you have been someone well versed with SEO, you will find that LSI or long-tail keywords help an effective ranking. The consistent prodding to avoid passive voices and use only one stop word are a few other issues we found a little over the top.Of course, Yoast is a powerful and efficient performer. But, it also comes with a lot of unneeded information, and in a way, it tries to take complete control over your content and every other element on your WordPress dashboard.If you are starting, Yoast should be the right one for you, and you will indeed benefit from it. However, if you are fed up with the unneeded recommendations, you would need to look at the alternatives.

Rank Math SEO

Rank Math is a comparatively new entrant when it comes to the best WordPress plugins for SEO. It has been impressive enough with its features and has captured a considerable audience among the SEO plugins.It is rather easy to understand and implement — it comes with almost all the features offered by Yoast. The schema implementation provided by Rank Math is considerably better than Yoast.Yoast focusses more on the usability and features than on the looks. On the other hand, Rank Math has an attractive interface. Understanding and using it would be slightly more accessible and more uncomplicated.The features offered by Rank Math considerably outnumber the ones on both Yoast and All in One SEO. Another feature that would make it one of the exciting options would be that it is entirely free and does not come with any additional features. Of course, the developers have been looking ahead to launch the premium version for the plugin soon.The plugin helps you create rich snippets for your content. You can choose the pieces based on the type of content. Some options would include articles, courses, books, job posting, local business, and reviews.And most importantly, if you are considering moving from Yoast to SEO, you can access a one-click migration option. You need to install Rank Math and opt for the import process. What makes it even more effective and efficient is that it offers most of the free features when the other options provide the elements at a premium cost.If you are using Rank Math, you would need to opt for account creation with the service. Once you create an account, you need to assign your website to begin setting up your plugin. Yoast lets you configure it, but all the settings need to be configured manually.

All In One SEO

This has so far been a strong competitor to Yoast for a long. The number of installs as recorded officially are more than those for Yoast. All in One SEO is an excellent option for use with your sites because it is bloat-free. The application is exceptionally slim, making it one of the preferred options you would want to go with.It offers you plenty of features and functions concerning a powerful SEO strategy. Some of the features offered by All in One SEO would be

XML sitemap
Automatic meta information
WooCommerce integration
Google integration
Custom post support.

One of the best options we loved the most with the tool is that it does not automatically enable all the features and modules. You can manually enable or disable the features based on your actual requirements.The plugin is extremely user-friendly. It works exceptionally well enough for both advanced users and beginners. In case you do not like the unneeded recommendations that Yoast throws onto your face, All in One SEO should be the prime choice.

The comparison – Rank Math vs All in One SEO vs Yoast

The chart here should provide you a good enough information about the best features offered by each of them –

Features and particulars	Rank Math	Yoast SEO	All in One SEO
Pricing	Free	Free and Premium	Free and Premium
Pre-selected settings	Yes	No	No
Setup wizard	Yes	No	No
Auto Canonical URLs	Yes	Yes	Yes
LSI keyword integration	Yes	No	No
Tracking keyword ranking	Yes	No	No
Search Console Integration	Yes	Yes	No
Schema Snippets	Yes	Yes	No
SEO Warnings	Yes	Yes	Yes
Post Preview	Yes	Yes	No
Custom post type	Yes	Yes	Yes
Focus Keyword	Yes	Yes	Yes
Internal linking	Yes	No	No
XML sitemap	No	No	No
Module-based design	Yes	No	No
SEO Breadcrumbs	Yes	Yes	Yes
Multi-site compatibility	Yes	Yes	Yes
Import/Export Redirections	Yes	No	Yes
robots.txt Editor	Yes	Yes	Yes
.htaccess Editor	Yes	Yes	Yes
Ping Search Engines	Yes	Yes	Yes

Which among them would we recommend?

Well, Yoast has always been a clear winner for many of us, which we have been using for a long time. However, Rank Math is a good option for many of the requirements. The best part is it is entirely free and does not have any premium version.Of course, comparing the different SEO plugins can be a little tricky. Each of them comes with various features, and there would be extremely different use cases with each of them.Yoast and All in One SEO have a more robust user base, while Rank Math is a relatively new plugin. It does need a few improvements, but still, we would rate it good enough.

Best Practices and Steps to reduce HTTP requests in WordPress Posts

WordPress

Das

December 28, 2020

Best Practices and Steps to reduce HTTP requests in WordPress Posts

If you are a website owner, slow page load times should be a tremendous concern for you. You attempt to add more resources to the website to ensure that you have access to more user engagement. Some of these elements you would want to add up include images, infographics, videos, and a whole lot of graphics.While it helps you improve your website’s value, it can also have a negative side to it as well. All the resources you add up to your site will increase the load on your server. It will now need to generate more HTTPS or HTTP requests to communicate with your visitors’ browsers. And these requests can slow your website down.WordPress is one of the most powerful and widely used platforms for creating websites, and we will today cover how to handle HTTP requests on a WordPress website. We will try to understand what exactly are HTTP requests and how to keep track of them.

What is HTTP Server Requests?

Before we can tackle how to reduce the HTTP requests, we need to understand what exactly they are and how they affect your website.An HTTP request is when a browser sends a request to your website to serve some information. When a user visits your web page through a browser, the browser sends requests to the web application and renders the information available on the page on your server. If the browser makes only a few requests to the website in question, it will load faster.Let us check what happens when a user visits your webpage.

The browser sends a request to your website, or to be more precise, your web server.
Your web server is where your page is hosted.
The web server sends a file containing a particular web page. This can carry a lot of information that includes images, videos, text, and everything on your page.
The browser will then render this page on your page.
If the page has not received all the information on the page, it sends another request for additional information.

Thus if your site has a lot of information, the number of HTTP requests will be higher, and therefore the website tends to load slower. Each text, image, video embeds, CSS, and JavaScript files on your page will need separate HTTP requests.

How can HTTP requests affect your website performance?

The effect of the HTTP requests on the webpage performance can be dependent on the webpage content. Amazon once calculated that just a second’s delay in loading time causes a revenue loss of around $ 1.6 billion per year!Ideally speaking, it has been estimated that a site can lose around 40 percent of visitors if it loads in more than three seconds. Google has categorically stated that the site load speed is an important ranking factor.Different reasons can affect your website performance on account of HTTP requests. Principal among them would be the number of HTTP requests or other files and the size of these files. Both these elements can have severe consequences on the loading times on your website. More data will translate into more HTTP requests, and bigger files will mean that the applications will take a longer time to be fulfilled.How does this affect the user experience? Well, put yourself in the visitor’s shoes, and you will understand how frustrating it can be to wait for a site that has a longer loading time. The experience will be all the more difficult for those visitors on a mobile device.

How can you track the HTTP Requests on your website?

Reducing the HTTP requests on your site will need you to understand how many +requests your site sends. There are a few tools that can help you track the HTTP requests to your website.

Chrome Developer Tools

The Chrome browser offers you an excellent option in finding the right number of HTTP requests to your website. Here is how you can achieve the task.Access Developer Tools from your Chrome settings and then click on the Network tab.You can check the number of requests and the time taken by each of them.

Google PageSpeed Insights

It is a tool specifically designed to check your website performance and loading speeds. Coming from Google itself, it should be an excellent option to find more about your return. It can also help you get more information on the server requests and how to handle them.Apart from a host of other details, it also lets you check the server requests and how to take care of them.You can use several other tools that include GTMetrix, Pingdom, and a host of different devices.

How to reduce the number of HTTP Requests in WordPress?

You can opt for several options if you are looking for the best methods to reduce the HTTP requests in your WordPress site. A few of the tips can includeHere are a few tips that can be helpful enough in your quest.

Method 1 – Delete the unused data files

The primary culprits in the case of HTTP requests are the images on your website. However, they need not be the only culprit. Most of the time, the plugins and data files can also increase the number of HTTP requests.Check if you have added any plugins, themes, programs, and other tools that you are no longer using. Uninstall the unneeded plugins and other data files that you do not need any longer.

Method 2 – Keep your file sizes to the minimum level

The best option to keep your service requests to the minimum would be to make sure that your file sizes are small enough. The best way to optimize the images would be to reduce the file sizes. Optimizing the image size can be the right option through the use of plugins or other means.You have access to plenty of tools and plugins that can help you automate the images’ compression. It will help you automate the image optimization without your need for any intervention. Your pictures will remain in high resolution while keeping your file sizes smaller.

Opt for Lazy Loading

Lazy loading refers to the pictures’ loading only when a user scrolls down while browsing your site. This will mean only those images and files will load within the visible area of the web page that is being rendered.That would mean the browser will not send the HTTP requests for the files and images that the visitor is yet to encounter.

Minify and combine CSS and JavaScript Files.

WordPress sites come with plenty of JS and CSS files. Merging them can help you send them as part of one request than sending each of the data separately.Ideally speaking, the CSS files should be placed in the header of the page, while the JavaScript should be placed in the site’s footer. You can minimize the HTML, JavaScript, and CSS files. There are a few tools and plugins that can help you achieve the task. A few caching plugins can help you minify the CSS and JavaScript files.

Limit the presence of the externals resources and files

Several external resources can result in causing HTTP requests. Some of those would include

External images – The external images can in the form of comments. You can disable them through the settings on your WordPress installation. Go to Settings -> Discussion.
Custom fonts –Limit the number of fonts and styles. While custom fonts can help you work fast, they can tend to be creating extra requests.
Social Media buttons – While they may be the best marketing options, they also end up causing additional requests. You would indeed want to remove references to the networks you do not use much often.
Video embeds – They can be an excellent option for improving your site and its content. But, at the same time, they would generate additional requests.

Use a Caching Plugin

A caching plugin like W3 Total Cache can be an excellent option to handle the HTTP requests. Of course, they do not reduce the total HTTP requests to your site but can help ensure that the new offers are cut down for the new visitors.Opting for a CDN or Content Delivery Network can be yet another excellent option. You can go with Cloudflare or other similar services. It will also be helpful enough to ensure that the HTTP requests are offloaded to other servers.

Fix the render-blocking CSS and JavaScript images

Making the CSS and JavaScript codes on your site asynchronous can be an excellent option for reducing the HTTP requests in WordPress. You can either defer or make them asynchronous. Now, what does that mean?The browser will load your site from top to bottom. When it encounters a CSS or JavaScript file and not asynchronous, your browser stops everything else until the data is loaded completely. In case the file loads asynchronously, the browser will load the rest of the web page as it is downloading the JavaScript or CSS file. You can achieve the task with the plugins specifically designed for the job.

The Closing Thoughts

Having complete knowledge of how many HTTP requests your site makes can help you understand how to reduce them. That way, you would be able to speed up the performance of your website.There is no specific number of requests that the experts treat as being the best. Ideally, you should have around 10 to 30 file requests at the maximum per page. However, it may not be realistic as larger websites will need more than that for their visual appeal and the content. The dynamic content is the sure-shot way of achieving a better user experience, increasing the HTTP request. As per the experts, the best HTTP requests per page should be around 100. Make sure you aim for less than that threshold.

How to Reduce or Stop excessive DOM size in WordPress?

WordPress

Das

December 28, 2020

How to Reduce or Stop excessive DOM size in WordPress?

If you go through the PageSpeed insights information for your website, one of the most likely entries you would witness can include the message that says “Excessive DOM size.” How would you be able to stop receiving the error message on your WordPress website?But before finding the right options to resolve the issue and discover how to stop Excessive DOM size error, it may be a good idea to understand what exactly this message means.

What is DOM?

DOM refers to the Document Object Model. When your browser receives an HTML document, it accepts it in the form of a tree-like structure. The browser converts it into a tree-like structure.The page is then rendered and painted, making use of the CSS and JavaScript elements.The DOM consists of the following items, or more correctly called elements.

The Nodes – The HTML elements in the DOM are referred to as Nodes. They are comparable to the leaves on a tree.
Depth – Th length of the branch on a tree is called depth. For instance, in the above image, the span has a depth of 4 – HTML -> body -> p -> span.

The resources like Lighthouse and Google Page Insights typically flag the site has to have an excessive DOM size when it observes the following conditions –

A total of more than 1500 nodes.
A depth is greater than 32 nodes.
A parent node with more than 60 child nodes.

All that appears to be too technical, right? Well, that is exactly how those things work. For now, it should be enough to note that an excessive DOM size can translate into a slower loading website.Either the page will load considerably slower, or the JavaScript on the page will load slower. The ultimate effect that an Excessive DOM size can have on your website is slower loading time.

How can it affect your website performance?

The loading time on your website has a lot to do with your website’s performance in terms of traffic. A delay of more than three seconds can cause more than 40 percent of the visitors to move away from your site. Even a second’s delay can cause a severe issue with your conversion rate and cause slow traffic.If you do not want to lose the customers or whopping traffic to your website, the right option would be to ensure that you take care of the excessive DOM size.It can cause the following issues and result in severe problems on your WordPress site performance. Some of them, maybe.

It increases the TTFB or the time for the first byte. This can further increase the loading time.
Higher parse and render time is another issue caused by a more massive DOM tree.
It can also increase memory usage to a considerable extent.

How to reduce excessive DOM size?

Well, unlike the other issues that you would address on your WordPress site, the excessive DOM size may not be that easy enough. That is precisely what would explain why the tools like GTMetrix and PageSpeed insights do not provide a straight and direct option to take care of the error message.It would ideally need you to redesign the webpage right from scratch. In case you are facing this error on more than one page on your site, it may be a clear sign that you need to look for some action. Now that you are an expert or an advanced user of WordPress, the best option you can opt for is to check out a few tips that can help you address the concern to some extent.Some of the options that can help you tackle the issue of an excessive DOM size can include

Split the larger pages into the multiple pages

If you have a significant page that contains everything you do? In that case, it may be a good idea to split it into various pages. Instead of including the items like services, contact forms, products, blog posts, and testimonials in one page, you can split them into their pages.Of course, you can later interlink them together. You can link to them from the header and navbar.

Lazyload the images

Lazyload all the photos. Of course, it may not Reduce the DOM size. It can also help you opt for a workaround, where you can improve the page load speeds. It may be an excellent idea to lazyload YouTube videos as well. You can use a few specific plugins for the purpose.

Limit the number of posts per page

Limiting the number of jobs per page can be yet another plus point. Paginating the rest of the sheets can help you take care of the excessive DOM size issue. You can also limit the related posts count on the page.

Avoid too many specializations.

If your theme is using too many devs, it can increase the DOM size. Check if you have any options within your theme or plugin to disable any of the unwanted options. Some of these features may be useful for improving your website’s performance, but a host of them may not be used for most of the needs.

A few other tips may include:

Reduce the number of widgets and sections within your web pages.
Use a more straightforward web page builder.
Avoid the unneeded codes.
Check if using a different theme can resolve the issue.

Paginate In-line comments – If you have hundreds of comments, this can also affect DOM size. Paginate comments by going to Settings -> Discussion -> Break comments into pages.
Limit number of related posts count – Try to limit the number of related posts count to 3 or maybe 4.

The Concluding Thoughts

Well, those were a few tips that can assist you in opting for the best possible page speed. The advice and solutions in the above discussion should ideally help you achieve the best results in reducing the excessive DOM size.Necessarily, you would need to focus on reducing the unwanted clutter on your website. This should go a long way in promoting the website loading time to a considerable extent.External References:

WordPress.Org
WPSpeedMatters

What is the Best Way to Setup and Install W3 Total Cache Plugin

Plugins

Das

December 28, 2020

What is the Best Way to Setup and Install W3 Total Cache Plugin

A faster website is what makes us like it and follow it. So, let us say you have a website, most probably on WordPress. The first thing you would want with your website is to make it load fast!No beating around the bush there. There should be no two thoughts about it. A faster website makes your visitors happy and goes a long way in improving your site’s performance. If you have a quicker loading site, people will buy from you, or you will be able to achieve that whopping traffic growth.But wait – getting your site load faster will mean you need to understand things like caching minification of codes and something called content delivery. If you are a new blogger, all those things can get more robust and complicated, right?That is where caching plugins come into play. How about speeding up your website without spending a penny and without having to wonder about that technical know-how? We have a solution – the W3 Total Cache. It is an excellent and powerful free plugin for your WordPress site that can drastically improve your website’s performance.

Do you need a W3 Total Cache?

A million-dollar question. And the answer is a thumping YES. If you are looking for cache-based content optimization for your website, W3 Total Cache is currently the best plugin you can opt for. It handles multiple caching requirements on your site and can considerably improve the loading times and general performance.It can apply multiple caching algorithms to your pages and enhance the responsiveness of your website considerably.WordPress comes with a lot of dynamically rendered static content. Of course, the terms may appear to be too technical, but the crux of the matter is the plugin caches many static elements on your page, and thus, your web server does not need to do a lot of things. This eases the load on the servers, and your website loads faster.

How to install W3 Total Cache?

This can be quite overwhelming. W3 Total Cache has an annoyingly massive number of options. In fact, unlike most other plugins you use with WordPress, it has more than 15 different menu options. The dizzying list of options you can configure can, indeed, make it an overwhelming experience for a newbie in the blogging world.Let us now break down the things one by one and see how to configure W3 Total Cache.

Step 1 – Install W3 Total Cache

Well, this should be the most straightforward part of setting up your W3 Total cache plugin. You will need to install it using the method you do for installing any other plugin.Go to your WordPress admin dashboard and enter the Plugins section. Click on Add New and search for W3 Total Cache. Click on the right search result and install it. Once the plugin is installed, activate it. The steps here should be self-explanatory.

Step 2 – Configure W3 Total Cache

This is the complicated part and perhaps the primary reason you are here. The settings section has 19 different sections or tabs. Most of the settings come predefined in some sections, while you need to configure a few as per your preferences.Let us break down the tabs and explain them in detail.

General Tab

This is the first step towards configuring your W3 Total Cache. Here, we will enable or disable each of the features and then configure them appropriately in the next sections. That would mean you need to set your General Settings before others.

Page Cache

In the Page Cache section, choose Enable to apply cache settings across the entire website. You are using this plugin will mean you would want to enable cache. No rocket science here!In the Page Cache Method, choose Disk Enhanced if it is not selected by default.

Minify

Do note that minification can, at times, break your site. To avoid any such issues, it is advisable to exercise caution while setting it up. Minifying the static files on your website can help you reduce the load on the servers.The minification will compress most of the CSS and JavaScript codes on your site. Configure it to Auto so that the plugin will take care of all the minification needs. Once configured, check your website for any signs of issues on your site.Do note that many hosting providers suggest not using minification. If you are not a tech-savvy blogger or site owner, we would recommend not enabling it.

Opcode Cache

Leave it at default.

Database Cache

It would be practical to leave it unchanged. This is used to cache the database queries. It can, however, stress your server resources, and tinkering with it would not be advisable.

Object Cache

This, too, can be quite heavy on your resources, and we would advise leaving it not enabled.

Browser Cache

This setting saves a copy of your website on the user’s browser. This will be the best option to reduce the calls to your browser and load the site faster in subsequent searches. Enable it as in the image here.

CDN

If you are using CDN or Content Delivery Network such as Cloudflare, you would need to configure it. The steps will depend on the exact CDN you are using. Discussing this setting is beyond the scope of this tutorial. Assuming you are not using any CDN, leave this unchanged.Leave the next set of configurations at the default value. These would include Reverse Proxy, User Experience, Statistics, fragment cache, monitoring, and licensing.

Miscellaneous

These can be optional. Enabling all of them is optional. It is preferable to leave the settings at their default values.

Debug

This is for debugging purposes. If you aren’t using those debugging activities, it is wiser to keep them unaltered.

Import /Export

This setting is used for importing your W3 Total Cache settings to another site. This can help configure the settings for the plugins in one go for multiple locations. It isn’t essential for us at the moment, and we will leave it unchanged.That concludes the settings in the General Settings. Based on what we have changed or enabled in this section, we will cover the next chapters in W3 Total Cache Settings.

Page Cache Tab

Now that we have enabled the Page Cache option in the General settings, we will now fine-tune it further. Make sure you are configuring all cache settings with due diligence. Practically speaking, you would want to enable page caching across all pages.Ensure that you have enabled SSL before enabling SSL Cache.Aliases may not be useful for most of the websites out there. It would be a good idea to leave it as it is.

Preload Cache

This can be useful in building a cache even before your visitors visit the page. Make sure you enter your XML sitemap here. Make sure you check the option for Preload the post cache upon publish events to ensure that the page rebuilds the cache each time you publish new content or make changes to the site.Leave all other values at default.

Purge Policy

This section will clarify which parts need to have the cache purged when you publish a new post and add something to your site.

Advanced

In the Advanced section, you can exempt a few browsers from receiving the cached version. Or even apply some of the exceptions to caching rules.Just enable the Compatibility mode and leave all other settings to their default value.

Minify Tab

Like in the case of page cache, we will fine-tune the minification settings we have enabled previously.

General

It is advised to keep all the settings at their default value and not change anything.

HTML and XML

Enable all the options here except for the option Don’t Minify feeds.

JS

Follow the image below for the right settings you need to configure.

CSS

The picture here should help you set it properly.

Advanced

This section lets you configure the default interval for minification and garbage collection. You can leave the default settings unchanged.We will leave the other two options as we have not enabled them – Database Cache and Object cache.

Browser Cache tab

The section comes with the options for fine-tuning the browser cache.

General

Most of the default settings should help you get things done. Make sure the checkbox for Set Last-Modified Header is enabled.Also, make sure that gzip compression options and Prevent caching of objects after settings change options are enabled. This will let the browsers know the recently cached files. You will have the same options in the subsequent CSS and JS HTML & XML and Media sections. Please leave all of them at their default values.The rest of the sections can be left to their default values. They are designed for use with advanced users. Under standard conditions, the stings and configurations we have discussed here should get most of the tasks done.Well, that was how you could set up and configure your new WordPress site. The powerful caching plugin should ideally make your website run faster and offer an exciting user experience to your visitors.Please note that the settings we have outlined in this configuration are meant for the newbies and those bloggers who are not much well versed in the complexities of website hosting and optimizing.

How to find .htaccess file in WordPress – Missing Create or Regenerate

WordPress

Das

August 13, 2020

How to find .htaccess file in WordPress – Missing Create or Regenerate

If you are hosting your website on WordPress or for that matter on any of the Apache web services, you would be aware of the file or feature labeled as .htaccess. What is this file all about, and what does it do? Why is it so crucial in your WordPress installation? Let us check out the complete details about the .htaccess file and how to use it for your needs.

Related: What is a .htaccess File?

What is .htaccess file?

A .htaccess file is a configuration file designed for an Apache webserver. A WordPress site uses the Apache web server, and a .htaccess file is the essential part of the webserver in this context.The .htaccess file is hidden (that explains the dot at the beginning of the filename), and the data has no extension of any nature. The data comes with the rules that govern the functionality of your WordPress site and the server that runs it.The .htaccess file comes with a host of activities and functions. One of the significant tasks that it performs would include controlling the way the permalinks on your site are displayed. In fact, in many cases, the .htaccess file is not created until you have configured your first permalink.In most of the websites, this is the sole function that a .htaccess file performs. However, there are few other options that you can work with the .htaccess file. A few examples would include setting up the 301 redirects or improving the security of your site. Some of the plugins you add to your website, and the dashboard adds up their code to the .htaccess file to improve the plugin functionality.Well, there are a few highly technical concepts involved with the .htaccess file, and most of them may not be needed for your understanding unless you are a professional involved in the web development or programming.

How to find the .htaccess file on WordPress?

Just in case you need to make a few changes to your .htaccess file, you would need to find the file. The .htaccess file would not be available as such on the WordPress dashboard under normal circumstances.However, the .htaccess file is usually hidden, and there are a few reasons that it has been designed so. Making changes to the .htaccess file is not recommended. The direct changes to the site can be risky and can break your site in a few cases. If you are not careful enough, you may end up breaking some core or other functionality of your website. You may also end up bringing down the entire site.Before you can make any kind of changes to your .htaccess file, it may be a great idea to take a few precautions. A few of those necessary actions can include

Backing up your site – This can help you revert to the correct version, should anything go bad with your site because of the wrong edits and changes to any files including the .htaccess file.
Opt for a staging site – You can launch a staging site and check the changes you are looking to make. You can get the website or the changes live only after you have found out that there are no issues whatsoever with the site.
Downloading the .htaccess file to your computer – You can download the file to your computer and make changes to the live website. If something goes wrong, you can revert the original file.

How to access the .htaccess file for your WordPress site? Well, the best option is to use the FTP (sFTP recommended) connection to connect to your website. The best method to access the FTP connectivity is to use the option FileZilla. You will have access to the details like Host, username, and password would be available through your hosting cPanel. Enter them in the respective fields, and you should be connected to your site instantly.Once you are connected to your website through the FileZilla client application, you can have access to the file and folders on your site. The records on the left side indicate the data on your local computer, and those on the right would be the ones on the server. You just need to drag and drop the files between them.So, this is where you would locate your .htaccess file. You would find the file named by your domain’s name on the right quadrant of the FTP client. This would be your root directory. Choose the folder and check the list of folders under it. You should find the .htaccess file located under it.If you want to view the contents of the file, right-click on it and click on View. The file will be launched in a default text editor. You can easily edit the data here. Once you have made the changes to the data, you can save the file. You will be asked if you want to upload the changed data to the server. If you are sure you have done nothing wrong, you can upload the edited file and you are done!What if you cannot find the .htaccess file in the root folder in the above tutorial? That would mean the record has not yet been created. You can force your WordPress installation to create the file. This can be done through the WordPress dashboard on your site.Here is how to do it –

Login to your WordPress dashboard.
Go to Settings -> Permalinks.
Click on the Save Changes option. You do not need to make any changes. Just save the changes.

Now, you can launch FileZilla once again and look into the root folder. You should find the .htaccess file over there.

How can the .htaccess file be useful, and what can you do with it?

Well, you found it right away – how to find the .htaccess file and perhaps, edit it. So, what kind of changes would you want to make? Well, there are several changes you would want to make here. But a word of caution though – unless you are aware of what you are doing, never make any kind of changes to the file.Here are a few changes you would be able to make here –

Setting up a 301 Redirect

If you have recently changed a post on your site or changed the permalink for the page, you can set up a redirect. This is how you would be able to do it –Add up a new line to your .htaccess file.

Redirect 301 /oldpage.html http://www.yoursite.com/newpage.html

Replace oldpage.html with the old permalink, yoursite.com, with your domain name and newpage.html with the new permalink. You can add a line for each of the redirects you want to add to the site.You can add up a line to divert your traffic to the HTTPS site from a non-secure site. There are a few security-related changes that you can make to improve the security level of your website.

Any other option to find your .htaccess file?

While the FTP method is one of the best and most popular options to have access to your .htaccess file, there are a few simple and more accessible options you can opt for if you are looking to get access to your .htaccess data and perhaps edit it.

Using cPanel

The cPanel refers to the control panel of your site through the hosting service provider. You can find your .htaccess file through the cPanel easily.Here is how you would be able to do it –

Launch the cPanel on your favorite browser and log in to it.
Go to the File manager.
Check if the option for showing hidden files is enabled. If not, it will allow it.
You should find the .htaccess file on your root directory. You should ideally find it on the public_html folder.
Right-click on the file and choose View.

That does it. You have successfully located the .htaccess file on your WordPress site.The exact steps would be dependent upon the instructions offered by your hosting provider.

Using Yoast Plugin

Most of the WordPress users opt for the Yoast plugin for SEO purposes. If you are one of them, you can use the plugin to have access to your .htaccess file.Here is how you would be able to do it –

Launch your WordPress dashboard.
Locate the option SEO and then Tools
Locate the option File Editor and click on it

You should find the option for the .htaccess file. You should also be able to edit it here. However, before you write it, you can save the five on your local drive.In addition to the .htaccess file, you can also have access to the robots.txt file.

The Concluding Thoughts

Those were a few steps and tips to find your .htaccess file on your WordPress site. Please note that you can use any of the methods above to get access to your .htaccess data. Please note that editing the .htaccess file is not anyone’s game. Please ensure that you do not indulge in unneeded editing that can break your site.Now that you are aware of how to find the .htaccess file on your WordPress site, please do share your views and opinion with us. Also, use the comments box below to share any of the difficulties you may have come across.

Zeslecp vs Vestacp – Which One is Better for Digital Ocean

Hosting

Das

March 30, 2020

Zeslecp vs Vestacp – Which One is Better for Digital Ocean

If you are looking for a smart hosting control panel, then do check out our Zeslecp vs Vestacp comparison.If you are into blogging or website creation, you know what a control panel is. It is where you control every aspect of your website hosting. However, which among these control panel options would we prefer? Of course, there are several control panels like Plesk and CPanel. But, almost all of them offer you access to a few additional features at a premium cost. If you do not want to pay that extra cost, it may be a good idea to opt for other open-source options.If you are using Digital Ocean for hosting your websites and blogs, you would have come across two major types of Control Panels. Which would we recommend to the Digital Ocean users among VestaCP and ZesleCP? Well, that would need us to delve a little deeper into these Control Panels.

Zesle CP – An Overview

Like you might have already found out from the above introduction, Zesle CP is a control panel for the web hosting service and provides you access to complete control over your hosting web service.It is quite simple and easy to install and offers you access to every essential task that you need to work with. It is indeed a practical tool for both professionals and personal users alike. The panel lets you control the hosting of your website, managing each of your files, setting up your website, and controlling the mailbox. The Control panel is available in both free and premium variants.It offers you plenty of features making it one of the excellent options to go with. To begin with, it is incredibly lightweight and does not hog your resources. That would also make it a faster alternative for your Control Panel requirements. The high degree of optimization should ideally make it one of the excellent choices. It takes under three minutes to install and set up.It is also one of the most secure options you can opt for. It provides you with access to frequent and timely updates. The firewall, monitoring, and reporting functions offered by the tool would make it one of the excellent options you would want to opt for. If you want a safer website, ZesleCP should be the right one for you.Almost all the core features in a Control Panel are free on Zesle CP. You may need to go with the premium features if you are looking to opt for a few select features. Unlimited website hosting through multiple domains is what would make it one of the preferred options. You can set up unlimited domains on the service.The multiple PHP versions and compatibility with them is yet another excellent feature you would find and appreciate with the Zesle CP. Whether you want PHP 5.6, 6.0, or 7.2, Zesle CP lets you make changes as per your preferences. The control panel also enables you to create your own custom NameServers as well.The Zesle CP control panel offers you access to free SSL certifications like Letsencrypt, which would do away the need for getting access to SSL certification form other sources.

Minimum System Requirements –

Zesle CP requires the following minimum system requirements.

Operating System – Ubuntu 16/18, CentOS 7. Versions for other variants of Linux are expected to arrive soon
RAM – 1 GB
Storage – Minimum 10 GB
CPU – 1 GHz clock speed

VestaCP – What is this all about?

If you are on VPS hosting, VestaCP should be an excellent option for your requirements. If you are someone who does not like setting up everything, it may be a great idea to opt for VestaCP. It is a free and open-source control panel for your hosting needs.The service can be configured using NGINX, Apache, or other reverse options as well. The service works with VPS hosting, and this is precisely why it is one of the best options for the Digital Ocean. VestaCP is extremely easy and straightforward to use. The uncluttered user interface is what would make it one of the much-preferred options.The security features offered by the platform is what would make it one of the most preferred options for controlling your hosting. It comes with integration with Fail2ban and Let’s Encrypt. An excellent backup system is yet another considerable addition that makes it one of the perfect options from the security point of view. The built-in backup tool can handle automatic backups with ease. It can backup websites, databases, email accounts, and everything.

Minimum System Requirements –

Vesta CP requires the following minimum system requirements.

Operating System – Most Linux distributions that include RHEL, CentOS, Debian, and Ubuntu
RAM – 512 MB
Storage – Minimum 20 GB
CPU – 1 GHz clock speed

If you want to get started right away, click here.

Zeslecp vs Vestacp – Which should one go With?

So, that was all about what Zesle CP and Vesta CP have on offer. If you are a Digital Ocean user, which among them should you choose to go with? Well, that would be a tricky question in most probability.However, it may be recommended to go with the Vesta CP as it offers you a completely free and open-source functionality concerning the control panel. Moreover, it also provides you access to enhanced performance standards and wider control in its own right. The control panel gives you access to a host of features that include Web Server, DNS server, Database Server, Mail Server, and FTP Server.Of course, there are other alternatives like panel for the Digital ocean users, but if you want to choose the one among Zesle CP and Vesta CP, we would recommend you to go with Vesta CP. It offers you plenty of advantages that you would want to focus on.

The Closing Thoughts

Well, that should have adequately answered your questions. If you are a Digital Ocean user and want to look at the best Control Panel options, choosing between Zesle CP and Vesta CP should be easy enough with the information shared in this compilation.Make a well-informed choice between the two compelling alternatives among Vesta CP and Zesle CP. Share your experiences with us.

How to Enable Mobile First Indexing in Google Search Console?

HostingXP Staff Writer

August 10, 2019

How to Enable Mobile First Indexing in Google Search Console?

Mobile compatibility has been one of the enormous changes that have been introduced in recent times for web development. If you are a person well versed with the game of SEO, you would understand the importance of websites that offer 100% smartphone compatibility.Improving your mobile site directly helps in improving your traffic and other search engine metrics. Google has been focussing on the mobile-friendliness of your website as a prime metric for the indexing, ranking as a critical metric to drive search traffic.Google has been sending notifications well in advance to webmasters to ensure that your site is ready for Mobile first indexing.

What is Mobile first indexing?

If you are into SEO or digital marketing for a long time, you will understand the intricacies that the genre stands for. You would be well aware of the fact that mobile-friendliness has been one of the primary metrics that Google checks out for determining the ranking for your site.Google recently enforced a couple of new changes in the way it indexes web content. These changes are bound to drastically affect your search engine rankings – whether for good or bad. That would be something beyond the scope of this post.So what is Mobile first indexing? The explanation should be clear enough from the name itself. Mobile first indexing would simply mean that Google will use mobile versions of the websites for indexing and ranking your websites.This is in sharp contrast to the earlier times where the desktop version took precedence over the mobile version of a website. Most of the tools even today are configured to analyze your site based on the desktop version.In any case, we would expect it to change quite soon, what with the focus of Google on the mobile-friendliness of a website.

Why Mobile first Indexing?

It is self-explanatory, right? It should not be a question that would need any sort of extra analysis. Mobile phones have become one of the most ubiquitous devices, and we have been using them for practically all purposes.The growing use of mobile phones and their usage for day to day browsing and other tasks over the internet have made them extremely important. For a lot of people, the mobile device is the primary computer. It explains why mobile-first initiative from Google is focussed on the mobile-friendliness of your website.The technical definition of a Mobile First indexing would mean “crawling, indexing, and ranking of webpages. Typically, Google bots have typically used the desktop version of a page. It may cause viewability issues for mobile users when the desktop version is vastly different from the mobile version.

Mobile-first indexing means that we’ll use the mobile version of the page for indexing and ranking, to better help our — primarily mobile — users find what they’re looking for.”.

Google will crawl your site from smartphone browsers context instead of as a desktop browser. That should be the essence of how the new crawling and indexing techniques will work.Do note that the Mobile-first index is not a separate one from what we have been witnessing as of now. It will be a single indexing option and will focus on the unique index. There will not be separate index options for mobile and desktop. The Mobile-First Index will mean that Google will index the mobile version of the particular website and not the desktop version.

How will it impact your rankings?

Well, mobile optimization of websites has begun for over a few months now. Most of the sites have turned mobile friendly. In any case, check if your site is entirely user-friendly when visited through a mobile browser.Googlebot will crawl your website as a smartphone browser. It will index whatever it finds. The ranking of your website will be dependent upon what the smartphone user-agent on the Googlebot finds on your site. That should include the speed of the website as well.If your site looks and displays the same both on desktop and mobile, it will not make any specific difference to you. You will not be affected if you have opted for making your website mobile-friendly.If you do not have separate versions for the mobile and desktop, the change should not affect you much. The mobile and desktop versions will remain the same. However, you would need to ensure that the desktop version is well optimized for the mobile screen. There are times where you have opted for a design that adjusts to the screen that the content is rendered. Even in those cases, you will not find any considerable difference.Make sure your site is mobile friendly if you are using separate URLs for mobile and desktop. The indexing from the mobile site will take precedence over the desktop version, and if your mobile version has nay issues for speed or any other similar problems, you will end up finding your ranking severely affected.

How to check if your site is enabled for Mobile first indexing?

Google has issued the guidelines for enabling the mobile first indexing on the websites.

With effect from July 1, 2019 – all the new sites (that would mean all the sites created after July 1, 2019, or the ones that were first indexed on Google after the date) will be enabled for the Mobile First indexing.

For the existing sites, Google will continue to evaluate until moving to the full mobile-first world.That should not mean the existing sites can continue with the older design. Opting for a mobile-friendly website should be the norm going forward. More on that later in this post.How to check mobile first indexing status on your site? Well, Google lets you know! If you are using Google Search Console (like every website owner should be doing), you would have already received the notification has been enabled on your website. You need to login to your Google Search Console and check for the notifications served in recent past.If you have multiple websites under a single Google Search Console account, you would ideally get a batch notification to indicate that the mobile first indexing has been enabled on your site.To check if the website has been enabled for the mobile first indexing, follow the steps featured here –

Visit your Google Search Console
Locate the message board on your Google Search Console.
You should find a message that starts with something like “Mobile-First indexing enabled.”

That should confirm you whether your website has been enabled for the mobile first indexing as yet.Another way you can check it would be to find which crawler is indexing your website. This again can be done with the help of Google Search Console. Follow the steps here below –

Log in to your Google Search Console.
Look for the settings
You should find the crawler used for indexing your website.
Look for the Crawl as an option and find what does it say. If you find Googlebot smartphone, your site is enabled for mobile first indexing. On the other hand, the Googlebot desktop will mean your site is not yet enabled for the mobile first indexing.

How to Enable Mobile First Indexing on your site?

Well, Google Search Console is the answer. It will let you know the status of whether the Mobile first indexing has been enabled on your website. However, if the site is not allowed; there is nothing you would be able to do.Yes, indeed. You will no be able to enable the mobile first indexing on your website in any way. Google has to do it at their end. The changeover is happening gradually, and your site too will be enabled quite soon. Keep waiting and checking for the status to ensure that the service has been enabled for you.You may, perhaps, get in touch with Google to let them know that your site has not yet been enabled. In any case, Google follows its own schedule, and you should find the site allowed for mobile first indexing in due course of time.

What if your site is not mobile friendly?

Having said that, we will recommend opting for AMP or other options to ensure that your site is mobile friendly and the new mobile first indexing does not affect you much.In any case, mobile-friendliness of the website in the future, and you should make sure that the site is mobile friendly before it is too late. Whether your site is mobile-friendly or not, it will ultimately be moved to the mobile-first indexing system. It should be worthwhile that you turn it into a mobile-friendly website.There are a few pointers that may be worth checking. Make sure you have only one URL. A separate mobile URL may be a thing of the past. Not only separate URLs for mobile and desktop but make sure you remove all the services that tend to provide different content based on the various devices. Instead of opting for the separate accessibility services, it would be a good idea to build the accessibility services directly into the site that has been otherwise optimized for a mobile device.Google recommends using a single URL for both mobile and desktop clients. However, Google will continue to support the separate URLs and responsive design; it still advises against the use of different URLs to avoid confusion for the users and search engines.Make sure you meet at least the following conditions –

More straightforward navigation across both mobile and desktop versions
Faster loading times.
Technical SEO

Do note that Google will not check whether your website is mobile-friendly when migrating you to the Mobile first indexing regime. That would mean, you need to ensure that the website is mobile-friendly. This will help you avoid any ranking issues in the future.If you want to check if your site is mobile-friendly or not, it may be a good idea to get it checked through the Mobile-friendliness tester. The tool will let you know any issues that may be affecting the mobile-friendliness of your site and suggest improvements.

The Concluding Thoughts

That was all we have for the new Mobile first indexing option put forward by Google. While there is no way to enable the Mobile first indexing on your website or disable it, knowing the positives and negatives of the changeover will help you have your website ranked appropriately.Ensure that you have taken all the precautions and improved the mobile-friendliness of your site. Once that done, you would not need to worry about the mobile-first indexing, which is set to be the future for all the websites.

How to Submit Sitemap to Google for WordPress Sites without a Plugin?

SEO
WordPress

HostingXP Staff Writer

August 10, 2019

How to Submit Sitemap to Google for WordPress Sites without a Plugin?

You are a website owner and have been creating websites after website. You would carefully develop content and post it on the site. However, the web content you create using WordPress or any other CMS solutions will be intelligible and useful only for human beings.Search engines may find it a little difficult to understand it properly. That is precisely where the sitemap comes to the fore. You are expected to submit your sitemap to Google or other search engines for being able to rank better and let search engines understand it correctly.

What is a Sitemap? Before you Submit Sitemap to Google!

Well, the name should in itself let out what is it. A sitemap is a map of all the content on your site. It provides a complete idea about your website and its contents for the search engines and humans alike.A sitemap can be beneficial for both search engine optimization and usability. There are two types of sitemaps – XML sitemaps and HTML sitemaps. Each of the sitemap types come with their own set of benefits. Let us check out the functionality in more exceptional detail.

XML sitemap and HTML Sitemap – An Overview

An XML sitemap is an option that can help search engines find all the content on your website. It includes the URL addresses of all the content on your website that is publicly visible. However, your human visitors will perhaps not have a look at it.An XML sitemap lists all the URLs of your website and a select list of other elements. The additional information would involve the number of images on each of the URLs. It also includes details on when the content was modified. You can even have a separate sitemap for the photos and other media types. The XML Sitemap is specifically designed for the search engines alone.The HTML Sitemap is more useful for human visitors than the search engines. However, that should not mean that it does not serve any useful purpose from the SEO point of view.While the XML sitemap is a mere collection of codes, the HTML sitemap is an actual page designed on your website. It is created for making it helpful for the site visitors to navigate through the website. The HTML content will help find the most famous content in an easily accessible manner.In sharp contrast to the XML sitemap, the HTML sitemap consists of links to all your content on the site. This can be ideally useful for human visitors to reach your favorite content right away. It is purely in a human-readable format and does not need you to know any coding.Which one should you prefer? Well, both of them have their advantages. The XML sitemap is an excellent option from the SEO point of view. It is used to tell Google or other search engines about all your content.This can help rank your content because the sitemap is quite useful enough in letting Google know about all the content on your site. Though not all your content is inserted in the search results, it can help you improve the chances of better ranking.It also lets you share the additional information on the content and any metadata changes to it to Google and other search engines such as Bing or Yahoo. Some of the additional information shared with search engines would include how often the page has been changed when the page was updated etc. Also, are there any alternative languages used on the site.The HTML sitemap, on the other hand, is beneficial for humans. It is an option for human visitors to understand the structure of the site and access the content with ease. It may not be mainly be directed towards the SEO benefits in its entirety.An HTML sitemap can be considered to be a group of internal links and can be an excellent option to spread the link juice (Authority) accordingly around the site. It can also provide access to Google crawlers to find the content more positively for quicker indexing.From the Google point of view, Google recommends creating a sitemap but does not make it a penalizable offense if you have not created a sitemap.

How to create a Sitemap on WordPress?

Well, that was how sitemaps could be beneficial on a website. However, how would you create a Sitemap in WordPress? The tutorial should provide you with an input into the best options and tips to create an XML sitemap.There are several options to create a sitemap on WordPress, but since we are not interested in creating a sitemap with the use of plugins, we will use the other route. WordPress does provide you access to a Sitemap Generator Tool.You can make use of the functionality through the multiple options like a cloud-based option, desktop programs, and through a WordPress plugin.Here are the steps involved in the creation of sitemap on WordPress –

Visit the site for XML sitemap Generator tool.
Scroll down and click on Online sitemap generator option.
Enter the details like your site URL and other aspects of your site on the online generator.

Enter the following details inappropriate places –

Enter the URL of your website homepage
Choose the option to calculate the modified date
Choose the change frequency
Choose the default crawl priority
Enter your Email address
Click on the option Generate Sitemap.

You may also click on the option More Settings to toggle and configure the more advanced options. Do note that it would be advisable to opt for the advanced settings only if you are confident enough of handling them. For most of the generalized performance, it may not be needed to opt for the More Settings option.The generation of the sitemap will take time depending upon the size of the website. If your site is smaller enough, it should take a while for generating the sitemap. If your site is more extensive enough, it may be needed to wait a little longer.Once the sitemap is created, you have the option to download the requisite sitemaps. The online sitemap generator lets you the sitemap in four formats – XML sitemap, HTML sitemap, RSS sitemap, and Text Sitemap.Once the sitemap is downloaded, you will need to upload it to the root folder of your website. Then, submit it to Google or any other search engines of your choice.

How to submit Sitemap to Google or other search engines?

That completes the task of creating a sitemap is much simple and more straightforward. Creating a sitemap is just a part of the job. Unless you submit the sitemap to Google, it would not be a good option. The best option is to submit the sitemap to most of the major search engines.You will need to have a Google Search Console account for submitting your sitemap to Google. We assume you also have access to a similar webmaster tool of their own. We will not go into the details of how to set up a Google Search Console account. How to set up a Google Search Console account is beyond the scope of this post.Here are the steps involved in submitting your sitemap to Google Search engine –

Login to your Google Search Console.
Click on your website. If you have multiple web properties under one Search Console account, you will need to choose the account you would want to add the sitemap to.
Choose the Dashboard for the site
Locate and find the option Crawl under the left side pane.
Click on Sitemaps

Once on the page, click on the option Add/test sitemap. You should find the option at the top right corner. Now add the location for your sitemap and click on Submit. That does it. You have successfully submitted your sitemap to Google Search Console.Please note that there are several options in the form of plugins that can help you get the best out of the sitemap creation. Some of the excellent plugins that can assist you in adding and submitting a sitemap to search engines include the following:

Yoast SEO plugin,
All in One SEO Pack,
XML Sitemap &
Google News Feed

They would indeed simplify the task of creating a sitemap.

A Few FAQs on Sitemaps for the WordPress Site

Well, even after understanding the differences and basic concepts involved in creating your sitemaps and submitting it to your search engines, here are a few questions that you would want to answer –Q – Is there any need for updating the sitemap manually? A – Not necessarily. The sitemaps – whether XML and HTML are updated regularly. There is no need for updating the sitemap on a manual basis.Q – Will Google index all the content on your sitemap?A – Sitemaps are used to make google find all the content, but that should not mean all your content will be indexed. The decision ultimately rests with Google (or for that matter, any other search engine).Q – Is there any specific number of pages that a sitemap supports?A – A single sitemap supports only up to 50,000 pages or URLs. However, you need not worry if your site exceeds that number. You can always create multiple sitemaps and collect them through a sitemap index file.

The Concluding Thoughts

In essence, the sitemaps are designed to be one of the best options for use with the SEO improvement of your site. They do come with several advantages, most of which have already been explained in the previous paragraphs.Make sure that you are using at least one XML sitemap and one HTML sitemap for your site. The former will serve you the best from the SEO point of view, while the later will be beneficial for the human visitors to your website would benefit from.Of course, that should not mean your site will achieve the best search engine rankings just because you have a sitemap, but it does serve you in that quest.

What is Cloudflare 9 Cache Everything Page Rule?

The solution is as follows:

Prerequisite understanding to setup FSD with Cloudflare:

How to properly enable Cloudflare HTML caching?

FAQs:

Summing-up:

The alternative approach is:

How does it function?

For page rule:

Summary:

Yoast SEO

Rank Math SEO

All In One SEO

The comparison – Rank Math vs All in One SEO vs Yoast

Which among them would we recommend?

What is HTTP Server Requests?

How can HTTP requests affect your website performance?

How can you track the HTTP Requests on your website?

Chrome Developer Tools

Google PageSpeed Insights

How to reduce the number of HTTP Requests in WordPress?

Method 1 – Delete the unused data files

Method 2 – Keep your file sizes to the minimum level

Opt for Lazy Loading

Minify and combine CSS and JavaScript Files.

Limit the presence of the externals resources and files

Use a Caching Plugin

Fix the render-blocking CSS and JavaScript images

The Closing Thoughts

More on HostingXP:

What is DOM?

How can it affect your website performance?

How to reduce excessive DOM size?

Split the larger pages into the multiple pages

Lazyload the images

Limit the number of posts per page

Avoid too many specializations.

A few other tips may include:

The Concluding Thoughts

Do you need a W3 Total Cache?

How to install W3 Total Cache?

Step 1 – Install W3 Total Cache

Step 2 – Configure W3 Total Cache

General Tab

Page Cache

Minify

Opcode Cache

Database Cache

Object Cache

Browser Cache

CDN

Miscellaneous

Debug

Import /Export

Page Cache Tab

Preload Cache

Purge Policy

Advanced

Minify Tab

General

HTML and XML

JS

CSS

Advanced

Browser Cache tab

General

More on HostingXP:

What is .htaccess file?

How to find the .htaccess file on WordPress?

How can the .htaccess file be useful, and what can you do with it?

Setting up a 301 Redirect

Redirect 301 /oldpage.html http://www.yoursite.com/newpage.html

Any other option to find your .htaccess file?

Using cPanel

Using Yoast Plugin

The Concluding Thoughts

More Reading:

Zesle CP – An Overview

Minimum System Requirements –

VestaCP – What is this all about?