When it comes to WordPress Website hosting, VPS (Virtual Private Server) and Managed WordPress hosting are two of the best choices, each designed to meet different needs. So, understanding the benefits of VPS and Managed WordPress hosting is essential for businesses and individuals to make the best informed decision. This article explores the unique advantages of each option, helping you determine which one is the best fit for your requirements.

While VPS hosting often presents a more cost-effective option compared to Managed WordPress Hosting, it requires a higher level of technical expertise. Managing a VPS involves handling server configurations, security protocols, and customizations—tasks that can be challenging for those without a solid technical background. On the other hand, Managed WordPress Hosting simplifies the process by taking care of these technical responsibilities for you, allowing you to focus more on growing your business. However, this convenience comes at a premium, and the service may also come with some limitations on customization and flexibility.

VPS Hosting: Flexibility and Control

1. Customizability and Control: VPS offers a separate partition on a physical server, giving users the freedom to customize their environment. This means you can install and configure any software you need, set up custom firewalls, and make changes to the server settings to optimize performance and security.
2. Scalable Resources: With VPS, scaling resources up or down is straightforward, accommodating the fluctuating traffic and resource demands of a growing website. This scalability ensures that you pay only for the resources you use, making VPS a cost-effective solution for websites experiencing growth.
3. Enhanced Performance: Since VPS hosting provides dedicated resources, your website benefits from consistent performance. This is crucial for websites with high traffic or resource-intensive applications, ensuring smooth operation without the risk of being affected by other users’ activities.
4. Advanced Security Features: VPS hosting allows for advanced security measures tailored to your specific needs. You can implement robust firewalls, intrusion detection systems, and secure VPNs, providing a higher level of security compared to shared hosting environments.

Managed WordPress Hosting: Convenience and Performance

1. Optimized for WordPress: Managed WordPress hosting is specifically tailored for WordPress websites, offering an environment that’s optimized for its performance and security needs. This includes features like automatic updates, specialized caching, and enhanced security configurations that are fine-tuned for WordPress.
2. Ease of Management: This hosting type takes care of all technical aspects, including updates, backups, and security. It’s an ideal solution for users who prefer to focus on content creation and business growth rather than server management and technical maintenance.
3. Expert Support: Managed WordPress hosting providers usually offer expert support from individuals who specialize in WordPress. This means you can expect quick and knowledgeable assistance with any WordPress-related issues, which can be invaluable for maintaining a smooth-running website.
4. Built-in Performance Enhancements: These services often come with built-in caching and performance optimization tools, which can significantly improve website loading times and overall user experience. This is particularly beneficial for SEO and retaining visitors on your site.

Choosing Between VPS and Managed WordPress Hosting

The choice between VPS and Managed WordPress hosting should be guided by your specific needs:

• VPS Hosting is more suitable for those who require full control over their hosting environment, need to host multiple websites, or have unique software requirements. It’s ideal for tech-savvy individuals or businesses with IT support that can manage and maintain the server.
• Managed WordPress Hosting is best for users who want a hassle-free hosting experience, primarily focusing on running a WordPress site. It’s perfect for individuals or businesses that prefer to outsource technical management to focus more on content and business development.

List of Best Choices to Host WordPress on VPS

1. DigitalOcean
   • Offers flexible and scalable VPS options.
   • Known for its simplicity and developer-friendly environment.
   • One-click WordPress installation available.
2. Linode
   • Provides powerful and affordable VPS hosting.
   • Great performance and reliability.
   • Comprehensive documentation and support for WordPress installation.
3. Vultr
   • High-performance VPS with a global data center presence.
   • Easy-to-use interface and one-click WordPress deployment.
   • Competitive pricing and scalable resources.
4. Hetzner
   • Offers powerful and cost-effective VPS hosting solutions.
   • Known for its high performance and reliability.
   • Flexible configurations and excellent support for WordPress.
5. Amazon Lightsail
   • Part of the Amazon Web Services ecosystem.
   • Simplified VPS management with pre-configured WordPress instances.
   • Scalable and reliable infrastructure backed by AWS.
6. Kamatera
   • Offers customizable VPS solutions with high performance.
   • 24/7 technical support and 99.95% uptime guarantee.
   • Easy-to-use management console for WordPress deployment.
7. InMotion Hosting
   • Provides managed VPS hosting tailored for WordPress.
   • High-speed performance and excellent customer support.
   • Free website migration and automated backups.
8. A2 Hosting
   • Known for its speed and optimized WordPress environments.
   • Managed VPS options with root access.
   • Free SSL, SSD storage, and 24/7 support.
9. Bluehost
   • Offers VPS hosting specifically optimized for WordPress.
   • User-friendly interface and strong performance.
   • Free domain, SSL certificate, and 24/7 support.
10. HostGator
    • Reliable and affordable VPS hosting with WordPress optimization.
    • Scalable resources and comprehensive support.
    • Free website migration and cPanel for easy management.
11. SiteGround
    • High-performance VPS hosting with managed WordPress features.
    • Excellent customer support and robust security.
    • Free daily backups and SSL certificates.

List of Best Choices for Managed WordPress Hosting

1. WP Engine
   • Renowned for its performance and reliability.
   • Offers automatic updates, daily backups, and robust security features.
   • 24/7 customer support and staging environments.
2. Kinsta
   • Built on Google Cloud Platform for excellent speed and reliability.
   • Automatic daily backups, free SSL, and CDN included.
   • User-friendly dashboard and 24/7 expert support.
3. Flywheel
   • Optimized for creative agencies and freelancers.
   • Offers free migrations, nightly backups, and built-in caching.
   • User-friendly interface and great customer support.
4. Rocket.net
   • Built for speed with edge hosting and CDN included.
   • Automatic updates, daily backups, and free SSL.
   • 24/7 support and exceptional performance.
5. Pressable
   • Managed by the same company behind WordPress.com.
   • Automatic updates, free SSL, and CDN.
   • 24/7 expert support and performance monitoring.
6. Liquid Web
   • High-performance managed WordPress hosting.
   • Automatic updates, daily backups, and free SSL.
   • Excellent customer support and staging environments.
7. A2 Hosting
   • Optimized for speed and performance.
   • Free SSL, CDN, and automatic updates.
   • 24/7 support and free site migration.
8. Pagely
   • Enterprise-level managed WordPress hosting.
   • Built on Amazon Web Services for scalability and performance.
   • Advanced security features, automatic updates, and daily backups.
9. Cloudways
   • Managed hosting with a choice of cloud providers (AWS, Google Cloud, etc.).
   • Offers performance optimization and 24/7 support.
   • Free SSL, automated backups, and staging environments.
10. Nexcess
    • Managed WordPress hosting by Liquid Web.
    • Automatic updates, daily backups, and built-in CDN.
    • Advanced security features and 24/7 support.
11. Pressidium
    • High-performance managed WordPress hosting.
    • Enterprise-grade infrastructure and security.
    • Automatic updates, daily backups, and 24/7 support.
12. Pantheon
    • Managed WordPress hosting focused on performance and scalability.
    • Automated workflows and developer-friendly features.
    • Free SSL, automated backups, and staging environments.
13. SiteGround
    • Known for excellent customer service and performance.
    • Offers automatic updates, daily backups, and built-in caching.
    • Free SSL, CDN, and staging environment.

In conclusion, VPS hosting offers flexibility, control, and scalability, making it ideal for growing websites with specific requirements. Managed WordPress hosting, on the other hand, provides a convenient, optimized, and worry-free solution for WordPress users, emphasizing performance and support. Understanding these benefits will help you make an informed choice that aligns with your website’s needs and your technical expertise.

The post VPS vs Managed WordPress Hosting For WordPress Websites appeared first on Wadiweb.

So, in your WordPress theme add this code into functions.php

function custom_mime_types( $mime_types ) {
$mime_types['avif'] = 'image/avif'; // Adding .avif
return $mime_types;
}
add_filter( 'mime_types', 'custom_mime_types' );

function add_avif_upload_support( $checked, $file, $filename, $mimes ) {
if ( ! $checked['type'] ) {
$check_filetype = wp_check_filetype( $filename, $mimes );
$ext = $check_filetype['ext'];
$type = $check_filetype['type'];
$proper_filename = $filename;

    if ( $type && 0 === strpos( $type, 'image/' ) && $ext !== 'svg' ) {
        $checked = compact( 'ext', 'type', 'proper_filename' );
    } else {
        $checked = array( 'ext' => false, 'type' => false, 'proper_filename' => false );
    }
}

return $checked;

}
add_filter( 'wp_check_filetype_and_ext', 'add_avif_upload_support', 10, 4 );

Now you should be able to upload AVIF images into your WordPress website with no problems!.

The post Enable uploading AVIF Images on WordPress website appeared first on Wadiweb.

We will be using Sharp Js Library which is an great library for optimizing, resizing , It also has many other features that will help you to improve your images with ease. In this article, we will focus on resizing images using Sharp.

Sharp requires Node.js to be installed on your Operating System, which you can download below. ( I recommend downloading and installing the stable version for your operating system ).

Sharp is a high-speed Node.js module to convert large images in standard formats to smaller, web-friendly JPEG, PNG, WebP, GIF, and AVIF images of varying dimensions.

Using Sharp to resize your images is very easy to do, and we will go through the steps to resize your images in bulk for your website.

1- Install Sharp Library

The first step is installing Sharp using npm or yarn

Open your command line terminal in this folder, -I use Gitbash– then run the following command

NPM

If you have npm installed then run this line.

npm i sharp

Yarn

Or you can replace npm install with yarn add if you have yarn in your system.

yarn add sharp

It should install the required packages within moments.

Script

Now we should create a new file that will contain our code to resize images, Create a file name index.js and add the following code.

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");

The packages are Sharp Library(sharp) which we just installed earlier, Filesystem (fs), and path (path) packages which should already.

Now let’s create a folder that will contain our original images we will name (images). and another folder for outputting resized images we will name (output).

The packages and folders should look something like this

Images Resizing Structure

You can clone the structure and the code from the GitHub repo Sharp Images Optimization

We will add the original images that we will resize to the (images) folder.

const directoryName = "images";

const fileNames = fs.readdirSync(directoryName);

directoryName variable is the images folder name, and filesNames variable we get to loop through for resizing using Sharp.

fileNames.forEach((file) => {

  const fileFormat = getExtension(file);
  let sh = sharp("./images/" + file);

  if( 'jpg' == fileFormat ) {
    sh.jpeg({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } 
});

function getExtension(filename) {
  let ext = path.extname(filename || "").split(".");

  return ext[ext.length - 1];
}

Now we will loop through all images that are jpg formatted, and set those images’ quality to 80 (percent) you can set the number higher or lower. you can read more about available options for image optimization (Output Images).

Resizing Images use the method resize, and we will keep images same dimensions, width is set to 900 (PX), this will make the images’ width to 900 Pixels and the height will be resized accordingly with the same dimensions.

You can check more options from (Resizing Images) Options.

Add similar logic for WebP and PNG formatted images

fileNames.forEach((file) => {

  const fileFormat = getExtension(file);
  let sh = sharp("./images/" + file);

  if( 'jpg' == fileFormat ) {
    sh.jpeg({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if ('png' === fileFormat) {
    sh.png({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if('webp' === fileFormat){
    sh.webp({lossless:true, quality: 80, alphaQuality: 100, force: true}).resize(
        {fit: sharp.fit.contain, width: 900}
      )
  }
});

function getExtension(filename) {
  let ext = path.extname(filename || "").split(".");

  return ext[ext.length - 1];
}

The final code in index.js file should be

// Packages
const sharp = require("sharp");
const fs = require("fs");
const path = require("path");

// Original Images directory
const directoryName = "images";

// Get file names
const fileNames = fs.readdirSync(directoryName);

// Loop through images
fileNames.forEach((file) => {

  // Get image format (extension)
  const fileFormat = getExtension(file);

  console.log("fileFormat", fileFormat)
  if (fileFormat === "svg") {
    console.log("SVGs are not processed in this script at the moment");
    return;
  }
  let sh = sharp("./images/" + file);

  if( 'jpg' == fileFormat ) {
    sh.jpeg({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if ('png' === fileFormat) {
    sh.png({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if('webp' === fileFormat){
    sh.webp({lossless:true, quality: 80, alphaQuality: 100, force: true}).resize(
        {fit: sharp.fit.contain, width: 900}
      )
  }


  console.log('output/' + file);
  let fileNameWOExtension = file.replace(/\.[^/.]+$/, "");

  console.log(fileNameWOExtension);


  sh.toFile('output/' + `${file}`, function (err, info) {
    // console.log(info);
    if(err) {
      console.log(err + "Error occurred while optimization process")
    }
  })
});

// Get Image Extension
function getExtension(filename) {
  let ext = path.extname(filename || "").split(".");

  return ext[ext.length - 1];
}

After finishing the code and organizing our folders Let’s add our images and test resizing images

In images folder we have about 25 images free from pexels, images varying in size so we will use Sharp to resize those images making their width 900 Pixels and the height will resize to the same aspect ratio.

Run the following command in the Visual Studio Code terminal (or Git bash or any other terminal to run your commands).

node index.js

You should see the console logs appear in the terminal while resizing images. The time of resizing images depends on the size and quantity of the images. So 25 images didn’t take more than 2 seconds.

So, let’s see images before and after resizing dimensions

Before Resizing

After Resizing

Conclusion

Resizing images using Sharp doesn’t require much work after the initial setup. you can resize your images very fast and with many custom options available.

Learn how to optimize images for your website to be production ready (How to Optimize Images for Your Website).

The post How to Resize Images for Your Website appeared first on Wadiweb.

• WordPress optimizing plugins. (Mostly Paid)
• Websites for Optimizing Images. (Freemium)
• Optimizing Images Using JS Libraries. (Free)

Optimizing Images Using JS Libraries

Optimizing Images through writing a simple JS script is free and easy and my choice which I use on most of my posts and pages. JS libraries can scale easily you can optimize hundreds of images with just a few lines of code at -almost- no cost.

There are many JS libraries for optimizing images out there but we will focus on Imagemin which is the most popular and used, Imagemin is open source JavaScript Library and easy to use, and with great documentation.

• Imagemin

Imagemin requires Node.js to be installed on your Operating System, which you can download below. ( I recommend downloading and installing the stable version for your operating system ).

Imagemin

Imagemin package is a great choice for optimizing your images, with a simple script you can crop, resize, and compress your images to reduce the size of images, reducing webpages size.

Using Imagemin package is very straightforward and simple, you can go through its documentation and available options here.

The first step to using Imagemin after installing Node.js is to install the packages that we are going to use.

Now, create a Folder for optimizing images.

Open your command line terminal in this folder, -I use Gitbash– then run the following command

npm install imagemin imageminJpegtran imageminPngquant imageminWebp

Or you can replace npm install with yarn add if you have yarn in your system.

yarn add imagemin imageminJpegtran imageminPngquant imageminWebp

It will take a minute to finish installing the packages, and there should be [node_modules]folder.

Now we will create a file (index.mjs) to write up our code for optimizing images.

1- Include the packages

import  imagemin from 'imagemin';
import  imageminJpegtran from 'imagemin-jpegtran';
import  imageminPngquant from 'imagemin-pngquant';
import imageminWebp from 'imagemin-webp';

2- Add code for optimizing the images

(async () => {
	const files =  await imagemin(['images/*.{jpg,png}'], {
		destination: 'output',
		plugins: [
			imageminWebp(
				{
					quality: 80,
				}
			)
		]
	});

    console.log(files);
    console.log('Images optimized');
})();

3- Create a folder inside the same directory named (images) which will include your original images.

4- Save the file and then from the terminal run the following command

node index.mjs

5- New folder named (output) should appear -as per our code you can change it from the destination – containing the optimized images which will be formatted WebP.

If you want to use the Code we use for our optimizing Image on Imagemin you can find the code here.

Testing Optimizing Images

Now that you’re familiar with how to optimize images using Imagemin. I will display some results Before and After optimizing my images on one of my pages.

Wadi Gallery Grid for Elementor Page is basically a page full of images and videos so having optimized images is a necessity.

Before Optimizing Images Results

Using tools.pingdom.com here are the page results before images optimization

Page size is 11.3 MB and Load time is 3.37 seconds.

Images size takes the lion’s share of the page size more than 90% percent of page size is images!. Images take 10.2 MB of the total page size. That is why image optimization is necessary for any modern website that relies on images to create appealing web pages.

After Optimizing Image Results

Now after doing the images optimization process using Imagemin and covert all images to WebP format here are the results

As you can see the web page size dropped from 10.2 MB to 3.6 MB by just doing image optimization which doesn’t take more than 5 minutes after the initial setup of Imagemin!

Images now take about 72% of the web page size from more than 90% of the page size before images optimization – considering that Gallery Grid for Elementor demo page is a gallery for media images and videos I think it is very reasonable- that is a good improvement on a web page.

Conclusion

As you can see, image optimization for web pages is a necessity for every aspect of your website, whether to have a faster page for your users or better SEO that will help your web pages to rank on Search.

The post How to Optimize Images For Your Website appeared first on Wadiweb.

The initial release of Wadi Addons For Elementor was about 11 widgets for Elementor, but now it is 14 widgets – we have added three new Elementor widgets since we released plugin.

Currently we are working on adding new Widgets and enhancing the existing ones. Also creating demo pages for each of widgets, and also providing documentation and videos for each Elementor Widget we add to make it easier to navigate through widgets features and available options.

Wadi Carousel For Elementor Page Builder is the first demo page we have designed, but soon all widgets will have their own demo pages.

If you have installed the plugin and used it please let us know what you think. We would love to hear your feedback.

The post Wadi Addons For Elementor Page Builder appeared first on Wadiweb.