How to setup Photon CDN in WordPress without JetPack

We all have amazing images on our site, and almost all of us use CDN or Content Delivery Network to deliver our images as fast as possible. In this article, I will share the best way to use Photon CDN without installing JetPack in WordPress.

One of the reasons I don’t use JetPack is that “It makes my site slow”, that’s it. I want my site to be loaded as fast as possible, without having to bulk up my site with unwanted plugins.

Sure, JetPack has some really cool features, but the only cool feature I like is the Photon CDN. Okay let’s get started on How to setup Photon CDN in WordPress without JetPack.

Note: Make sure to test this 1st in the development site, then make it live. I am not responsive if you break your site.

Step 1: Remove or Disable Cache Plugins

Assuming you are on a development environment, you will have to remove or disable all cache plugins. Since cache plugins store static files, you might not see much of a difference if cache is enabled.

So, I highly recommend you disable your cache plugin first. Don’t worry, we are not disabling them forever. Only for few moments, until we get our Photon CDN to work.

Step 2: Setting up Photon CDN

For this, I would like to thank the GitHub user Zachary Scott for creating this plugin.

This is a simple PHP file, that you will need to install it as a plugin, in your WordPress site. Since we are working on a local development server, let’s test this plugin.

Here’s the GitHub link, if you want to directly download this plugin:

wpcom-cdn PHP File

If you want to directly copy this code to your code editor, you can use this Gist embed:

Step 3: Creating Photon CDN Plugin

Now that you have the PHP code, let’s create a zip file with the same name. For example, I am going to use the 7zip tool, which is a free archive creation application.

Once you have your 7zip tool installed, go to your PHP file, right click and select archive as zip, as shown below.

Once you have created the zip file, you will see something like this.

Step 4: Installing Photon CDN Plugin in WordPress

Okay, make sure you are on a local development environment. Now, let’s install the plugin, but before that, let’s see the difference. I will 1st create a screenshot of the before installing plugin of the image URL. Here it is:

As you can see, before installing the plugin, the images are loaded from my localhost URL.

Now, let’s install the plugin, by going to plugins, and upload plugin, and choose the zipped file that you created.

Now let’s activate the plugin, and once activated, you will see something like this.

Step 5: Testing Photon CDN

Great, our plugin is now installed and activated. It’s time to test our site now. Remember, we are on a local development server. You the images would be broken. Your site will look something like that.

If you see something like this on your local development server, that’s completely fine. Because we need to check first, that the Photon CDN is loaded properly on the front-end.

Let’s check that. Go to the front-end of your site and right click the image and select inspect element. You should see something like this:

Here, you can see that, before the localhost URL we have “http://i3.wp.com/” this indicates that our Photon CDN is loaded. But we can also see that the images are broken, right? That’s okay for now.

Now let’s test this on our live server. But before that Backup, Backup, and Backup that’s right, you need to backup your site, before you test anything, or even try anything new.

If you don’t know how to backup your site, you can simply browse through YouTube on how to backup WordPress site, or check out this video

Restore a WordPress blog from Backup using All-in-One WP Migration

Once your WordPress live site is backed up, it’s time to install our Photon CDN plugin. But before that let me take a screenshot of my live site without the plugin. Here it is:

Here, you can see that my images are loaded from, well my site. All the images are loading from the URL https://primeinspire.com/.

Our goal is to load that from the Photon CDN URL. Okay, let’s install our plugin now. Here’s a screenshot of the plugin installed on live site:

Great, our site still works fine. Now it’s time to test the plugin, that if it works. Let’s go to plugins and enable all cache a plugins and then let’s load our site in a private window. Now we can inspect an image and get the result.

As you can see in the above image, our site is now showing images from Photon CDN without installing the JetPack Plugin.

Conclusion

You can go ahead and test this on your site, but am going to say this again and again, make sure to backup your site before trying anything new. Also, it’s a really good idea to test your plugin on a local development server first. Finally we are able to load Photon CDN with the JetPack plugin.

Make sure to share this article with everyone you know who needs this.

Learn WordPress Theme Development

It’s a very good idea to learn something that you don’t know. Since you are into WordPress, it would be a great idea to learn how to build your own custom WordPress themes from scratch.

If you are interested, you can take my course “WordPress Theme Development Course with Bootstrap 5 (2022)” on Udemy.

Throughout this course, you will learn how to build and design your own theme with Bootstrap 5, not just that, but also the theme you build will be lighting fast.