How to use statically CDN on a wordpress blog

How to use Statically CDN on a WordPress blog

Because if you are hosting your blog on shared hosting then chances are that you will soon run out of server resources.

Advertisement

This means that you will need to upgrade your hosting plan which will cost you extra money.

So, you might ask what is statically cdn and how it can help my WordPress blog.

What is Statically CDN?

According to the developer of statically.io Frans Allen, statically is a free CDN for developers that helps web developers in serving their files through a cdn ( content delivery network ) throughout the world.

Advertisement

It has lots of features like resizing images just by changing the URL, taking a screenshot of a site, serving the images of your website through cdn. You can also use it to deliver CSS, JS, SVG, HTML, and XML files through a cdn.

You can follow Frans Allen on Twitter at @fransallen.

How can statically cdn help my WordPress blog?

Statically cdn can help you a lot in increasing your site’s speed by serving the images of your site from powerful and fast edge servers.

Advertisement

This means that when a visitor’s browser requests for an image on your blog then instead of fetching the image from your origin server the image will be fetched from these edge servers that have your image cached with them.

Statically cdn also helps in reducing your site’s bandwidth usage. Because on a WordPress blog like mine almost 90% of the bandwidth is used by images. So, that’s why you must use statically cdn for your blog.

After I started using statically on this site the bandwidth usage almost dropped by 70%. Which is a lot.

Advertisement

So, now let’s see how we can add statically cdn to our WordPress blog. I will be showing you two ways to do this. The first method is recommended for beginners.

Add statically using a plugin -

The easiest way to add statically cdn to your WordPress blog is to use the statically plugin. This is the recommended method as it is very easy to set it up and it also provides you some extra features like converting your images to webp version and clearing the cache.

Now let’s see how we can install and set up statically plugin on our WordPress blog.

Advertisement

1. First go to your WordPress admin dashboard and then on the left sidebar go to plugins and click “add new”.

How to use Statically CDN on a wordpress blog - using statically plugin - step1

2. Now in the search bar you will need to search for “Statically”. Click install and after that click on the activate button.

How to use Statically CDN on a wordpress blog - using statically plugin - step2

3. You can access the statically plugin settings by clicking on the icon in the sidebar of the admin dashboard.

Advertisement
How to use Statically CDN on a wordpress blog - using statically plugin - step3

4. Now for statically plugin to work you will need an API key which you can make by going to the link shown here.

How to use Statically CDN on a wordpress blog - using statically plugin - step4

5. Once you are in the statically.io website scroll a little bit down and here you can now get an API key by filling up the information required. Add your email, domain name without www and then accept the privacy policy and click “Generate API key”.

How to use Statically CDN on a wordpress blog - using statically plugin - step5

6. Now after clicking the Generate API Key button you will get an API Key that you will need to copy. Make sure you keep this API key somewhere safe.

Advertisement
How to use Statically CDN on a wordpress blog - using statically plugin - step6

7. Now go to your statically settings again and paste the API key that you copied. And click on Save changes.

How to use Statically CDN on a wordpress blog - using statically plugin - step7

8. By default Statically will serve your blog visitors the webp version of images which if you want to keep then you can keep it but if you don’t want statically to change your image type then you will need to go to “Speed” to fix this.

How to use Statically CDN on a wordpress blog - using statically plugin - step8

9. Here you will need to untick the “Automatically generate webp versions” and then click on the save changes button.

Advertisement
How to use Statically CDN on a wordpress blog - using statically plugin - step9

10. Now to check if statically cdn is working on your WordPress blog or not and serving images through cdn. You will need to open an incognito tab in your browser and type your blog URL. 

Here you will need to select any image and right-click on it and then click on the “open image in new tab”.

How to use Statically CDN on a wordpress blog - using statically plugin - step10

11. Here you can see whether the image is being served through Statically cdn or not. You will see cdn.statically.io at the beginning of the URL which means it’s working fine.

Advertisement
How to use Statically CDN on a wordpress blog - using statically plugin - step11

After the setup finishes make sure you check all the features of your blog whether they are working properly or not.

Now let us see the second method which is more flexible meaning that you could add other cdn providers also using this method.

Add statically using CDN Enabler -

This method requires you to add some code in your WordPress functions.php so make sure you have a backup before proceeding any further. This method is only recommended for advanced users.

Advertisement

1. First, go to plugins>Add new. Now here you will need to search for “CDN enabler”. Click install and then click on activate.

How to use Statically CDN on a wordpress blog - using cdn enabler - step1

2. To access cdn enabler settings, you will need to go to settings, and there you will get the cdn enabler option. Click on it.

How to use Statically CDN on a wordpress blog - using cdn enabler - step2

3. Now here in the CDN hostname you will need to type “cdn.statically.io”. And after that in CDN Exclusions, you need to add some strings that will not be cached. Here are the strings that you need to exclude – .php, .js, .json, .mp4, .pdf, .apk, .css

Advertisement
How to use Statically CDN on a wordpress blog - using cdn enabler - step3

4. After that go down a little and remove the default API key and Zone ID and then click on Save.

How to use Statically CDN on a wordpress blog - using cdn enabler - step4

5. Now you will need to go to Appearance>theme editor and select the functions.php file. If there is no theme editor option then you will need to download a file manager plugin.

How to use Statically CDN on a wordpress blog - using cdn enabler - step5

6. Scroll down to the bottom of the functions.php file and then add this code to it.

Advertisement
add_filter( 'cdn_enabler_contents_after_rewrite', 'filter_cdn_enabler_contents_after_rewrite' );

function filter_cdn_enabler_contents_after_rewrite( $rewritten_contents ) {

    $rewritten_contents = str_replace( 'cdn.statically.io/img/netmiko.com/', 'cdn.statically.io/img/netmiko.com/img/mydomain.com/', $rewritten_contents );
    $rewritten_contents = str_replace( 'cdn.statically.io\/img\/netmiko.com\/', 'cdn.statically.io\/img\/netmiko.com\/img\/mydomain.com\/', $rewritten_contents );

    return $rewritten_contents;
}
How to use Statically CDN on a wordpress blog - using cdn enabler - step6

In the place of mydomain you will need to add your domain name. And then click on the Update file button.

Go to your site in incognito tab to check if it’s working properly. You can always contact me on twitter or comment below if something is not working.

Does using statically cdn increase image loading speed?

Yes, it does, using statically cdn has helped me a lot in increasing my site’s load speed because my origin servers don’t need to provide the users with the same image again and again.

Advertisement

Instead, the images are fetched from fast edge servers that have that image cached with them. Statically cdn has helped me in reducing the image load speed from 0.4 seconds to 0.2 seconds. Which doesn’t sound like a lot but is a very big difference when it comes to user experience.

image speed test with and without statically cdn

Is statically cdn free?

Yes, statically cdn is currently free and has no limit on any bandwidth. You can use it on an unlimited amount of websites with unlimited bandwidth.

You can also donate to statically.io on its official website to keep it running. And follow its founder Frans Allen on Twitter here for updates regarding statically.

Advertisement

Is it safe to use statically?

It is completely safe to use statically cdn. If you face any problem like broken images or weird redirects then you can just disable the plugin and the problem will be fixed.

 If you are unable to access the admin dashboard then you could just go to your web hosting file manager and go to wp-content>plugins and then rename the statically plugin folder which will disable it.

You can also try and use the second method if the first method creates any problem in your WordPress blog.

Advertisement

Is there any alternative to statically cdn?

Yes, there is a very good alternative to statically cdn, which is jetpack cdn ( photon ).

But the problem is that the jetpack plugin is very bulky meaning that the plugin will slow down your WordPress blog which is the thing that we are trying to prevent.

So, I would recommend you to use statically cdn in your blog.

Advertisement

I will soon make a post on how you can use jetpack cdn on your WordPress blog without the jetpack plugin. Until then you can use statically. I will link to the blog post here as soon as I post it.

Use Jetpack Image CDN with using Jetpack plugin.

If you liked this post and it helped you in making your WordPress blog faster then make sure to share it with your friends and family and also recommend it to someone who needs it.

If you face any problem while setting up statically cdn then do comment below and I will fix the problem for you. Thank you.

Leave a Comment

Your email address will not be published. Required fields are marked *