{"id":7366,"date":"2020-04-08T14:35:49","date_gmt":"2020-04-08T09:35:49","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=7366"},"modified":"2020-04-18T15:48:00","modified_gmt":"2020-04-18T10:48:00","slug":"cloudinary-wordpress-review","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/cloudinary-wordpress-review\/","title":{"rendered":"Cloudinary WordPress Plugin Review"},"content":{"rendered":"

Performance is crucial for websites because nobody likes slow web pages. From user experience to search engine rankings, it directly affects everything. A fast loading site can help you generate a potential lead, on the other hand, a slow webpage can easily turn away potential customers.<\/span><\/p>\n

The web is all about user experience. <\/span>If a user has to wait too long for a web page to load, chances are he might close the page even before it loads and never come back<\/b>. No matter how good your content or product is. If you fail to show that you care about your customers on your webpage, you can\u2019t win their trust. <\/span><\/p>\n

Talking about the performance, the biggest chunk of the web pages consist of media (images\/videos). <\/span>Optimization of media assets can lead to a huge performance boost<\/b>. But it is also important to not lose media quality during this process because they are the main source of leads as well. That\u2019s why due care should be taken in the process to achieve an optimal level of media optimization. <\/span><\/p>\n

Like anything on the web, there are tons and tons of ways to optimize images and videos. I have tried a number of WordPress plugins and third-party solutions to optimize media. Each solution has its benefits and limitations. It could be frustrating to find a way a solution that works for you.<\/span><\/p>\n

\ud83c\udf1f Cloudinary<\/strong> is one of such solutions that I discovered a few years ago and it stands out among all for me. Ever since I have started using it, I have never had to look back. I have integrated it into multiple projects and I couldn\u2019t be more satisfied. Cloudinary is a one-stop-shop for all my media serving, uploading, and optimizing problems.<\/span><\/p>\n

Cloudinary also used to have an old WordPress plugin but they recently updated it and launched the version 2<\/a>. This new version is a game changer. WordPress & Cloudinary<\/a> are now very well integrated. Today, I am going to talk about this plugin. In particular, I will be talking about how you can get started with it and how it can help you improve your web performance.<\/span><\/p>\n

So, let\u2019s jump in!<\/span><\/p>\n

\ud83d\ude80 Cloudinary<\/span><\/h2>\n
\"Cloudinary<\/a><\/p>\n<\/div>\n

Founded in 2011, <\/span>Cloudinary<\/span><\/a> is an industry leader in cloud-based image and video management solutions. <\/span>It allows users to upload, store, manage, manipulate, and deliver images\/videos on almost all platforms<\/b>. They started out of Israel and managed to grow big during this short span. In 2015, they opened their headquarters in Palo Alto and in 2019, the company moved to Santa Clara, California. <\/span><\/p>\n

\n

\ud83d\udd25<\/span><\/h2>\n

During this time, they also managed to grow a huge customer base. They currently <\/span>serve over 550,000 customers<\/b> by <\/span>managing over 25B media assets<\/b> on their platform. Their <\/span>customer includes big names like Forbes, Under Armour, NBC, Virgin, Fiverr, Buzz Feed, TED, Uber, and more<\/b>. <\/span><\/p>\n<\/div><\/div>\n

According to Inc. Magazine, Cloudinary is the gold standard of managing media. Over the years they have grown their solutions and keep adding new items to the list. They have plugins and extensions for different platforms for easy integration. They also rock a great API to serve the media. And everything is extensively documented<\/a> \u2014 making it super easy to get started.<\/span><\/p>\n

With all that said, let\u2019s take a look at its WordPress plugin<\/a> and see how it actually works!<\/span><\/p>\n

\ud83d\udcaf Getting Started<\/span><\/h2>\n

Cloudinary WordPress plugin allows you to upload, migrate, manage, import, and serve images and videoes using its WordPress plugin. It supports both <\/span>classic and Gutenberg editors<\/b>. Apart from that, it also<\/span> supports individual, taxonomy<\/b>, and global level transformation<\/b>. Which comes quite handy if you want to conditionally transform your media. <\/span><\/p>\n

Now, before we get started, I am going to create a post with a couple of images. We will perform a test on it to see how it performs. Then, we will configure Cloudinary and see what difference it makes. Later on, we will take a detailed look at its configuration and what you can achieve with it. <\/span><\/p>\n

\ud83d\ude1f Page Speed Before Cloudinary<\/span><\/h2>\n

I have created a post with a couple of stock images of New York City from Unsplash. I ran a page speed test and below are the results. Bear in mind that I am running a fresh installation of WordPress with the default 2020 theme and without any optimization. Also, it is being served on the web through a local server. <\/span><\/p>\n

The score is 81 \u2014 not too bad but still, it\u2019s a fresh installation with no other content\/load. The scenario could be quite different for a production site. Now, let\u2019s jump on to setting up Cloudinary on our WordPress installation and see how it goes. <\/span><\/p>\n

\"Pagespeed<\/a><\/div>\n

\u2699\ufe0f Installation & Configuration<\/span><\/h2>\n

Installing and configuring the Cloudinary WordPress plugin is quite simple and straight forward. If you have ever installed a plugin before, you should be fine. However, in any case, follow the quick steps below to install and configure the plugin. <\/span><\/p>\n

\u2192 Step #0<\/span><\/h3>\n

The very first step is to download and activate the Cloudinary WordPress plugin<\/a> from your WordPress admin panel. Or you can download the plugin zip file<\/a> and follow along.<\/span><\/p>\n

\u2192 Step #1 <\/span><\/h3>\n

Once you have downloaded the plugin, go to the WordPress admin dashboard and navigate to <\/span>Plugins > Add New<\/b>. Click on <\/span>Add New <\/b>button on the top, then click on <\/span>Choose File<\/b> and select the <\/span>.zip<\/b> file that you have downloaded before. After that hit the <\/span>Install Now <\/b>button and activate it after installation.<\/span><\/p>\n

\"Install<\/a><\/div>\n

\u2192 Step #2<\/span><\/h3>\n

Once you have installed it, you will see a new item in the sidebar named Cloudinary. It will probably have a red dot with 1 written on it, indicating 1 task needs attention. You need to link it to your Cloudinary account before you start using it. <\/span><\/p>\n

Click on it and it will take you to the plugin dashboard. It will show you a button saying [Connect to Cloudinary<\/strong>]. I have also shown this in the screenshot below.<\/span><\/p>\n

\"Connect<\/a><\/div>\n

In case if you have not already created a Cloudinary account, go create one. You can <\/span>signup for free on Cloudinary<\/span><\/a>. <\/span><\/p>\n

\u2192 Step #3<\/span><\/h3>\n

Once you click on the button, it takes you the Connect tab of the Cloudinary Plugin. Now it requires an environment variable URL. You can find the URL in your Cloudinary dashboard. It will look something like below. <\/span>You can directly copy the URL from your Cloudinary dashboard. Take a look at the image below to see how:<\/p>\n

\"Cloudinary<\/a><\/div>\n

So only paste that in part in the input section and hit Save Connection button. It will check the validity of the URL, if correct, it will automatically connect your account. <\/span><\/p>\n

\"Cloudinary<\/a><\/div>\n

Once it has successfully connected your account, it will give you a success message saying [<\/span>\u2705 Connected to Cloudinary<\/strong>]. Now you will be able to see and access two more tabs in the Cloudinary menu, namely Global Transformations<\/strong> and Sync Media<\/strong>. That\u2019s where you can configure things in detail. <\/span><\/p>\n

That\u2019s all you need to get up running with Cloudinary on WordPress. Note that <\/span>Cloudinary has been connected with your WordPress site using the default configurations<\/b>. In the default configuration, <\/span>all of your new media gets synced automatically and served in auto optimized quality<\/b>.<\/span><\/p>\n

Now, upload any media on your site and take a look at its source. You will find that it will be served from Cloudinary. It\u2019s because Cloudinary has transformed your media and now serving the optimized version automatically. Now, without diving any further into the configuration let\u2019s take a look at the page speed. <\/span><\/p>\n

\ud83d\ude03 Page Speed After Cloudinary<\/span><\/h2>\n

We have the Cloudinary plugin up and running with the default configuration. But since we had uploaded the media files before activating the plugin, it will not be automatically synced to our Cloudinary cloud instance. First, we need to sync it manually. <\/span><\/p>\n

To sync the media, go to the admin dashboard and navigate to <\/span>Cloudinary > Sync Media <\/b>and click on the Sync All Media to Cloudinary button. <\/span>It will take a while and all the assets will be optimized and synced to our Cloudinary cloud<\/b>. Now, it will serve our assets from Cloudinary.<\/span><\/p>\n

To check this, let\u2019s open our previous post again and take it through the page speed test. Below are the results we get by merely turning on the plugin. <\/span><\/p>\n

\"Page<\/a><\/div>\n

The best part is, we have not yet touched any configurations yet while the change in the speed is significant. Even if you take a look at the images by placing them side by side you will be hardly open to spot the difference. <\/span>That\u2019s what I love about Cloudinary. It optimizes your images without compromising the quality<\/b>. \ud83d\udcaf<\/span><\/p>\n

I have placed both images side by side for you. Take a look at it below. Looks pretty dope, right!? Now, let\u2019s jump on the configuration details of the plugin.<\/span><\/p>\n

\"Before<\/a><\/div>\n

\ud83c\udf08 Image Transformations<\/span><\/h2>\n

Cloudinary WordPress Plugin offers mainly two things, Image Transformation, and Video Transformation. I will be touching Image Transformations in detail and Video Transformation is quite similar to it. <\/span><\/p>\n

In order to access Image Transformations, go to <\/span>Cloudinary > Global Transformations<\/b>. The transformation settings for Images and Videos both can be accessed from here. By default, it\u2019s on the Image Settings page.<\/span><\/p>\n

\n

\"Cloudinary<\/p>\n<\/div>\n

\ud83c\udf6d Global Transformations<\/span><\/h3>\n

Before going to the Global Transformations settings, it\u2019s necessary to understand that Cloudinary offers three levels of transformations.<\/span><\/p>\n