8 Awesome Features of Staticaly Free CDN (Content Delivery Network)

Content Delivery Network (CDN) is an important part in improving application/website performance for global users. Due to the global network infrastructure network, CDN service is rarely be free.

In this article, you will learn about Staticaly, a free multi-network CDN, and how to use it to speed up your application, images, WordPress, and more.

What is CDN?

Content Delivery Network (CDN) is a geographically distributed network of servers that provide fast delivery of website assets, including HTML pages, JavaScript files, CSS style sheets, images, videos, etc.

CDN speed up web content delivery by serving cache content from the server nearest to the user’s location, which improves website performance. It also helps to reduce hosting bandwidth cost, while provides content availability and redundancy.

With the distributed nature, CDN can handle more traffic and withstand hardware failure than origin servers. CDN may also help to protect website against bad bots and DDoS attacks.

Who is Staticaly?

Staticaly is a free, multi-network CDN to serve your static files. Unlimited quota. Unlimited bandwidth. Awesome!

It is an open source project maintained by Marsble. Staticaly founder, Frans Allen is a tech entrepreneur in Indonesia. He leads a team of 7 developers at Staticaly.

Another project core team member is Taufik Nurrohman, who is the founder of Mecha CMS, a flat-file content management system with no dependencies.

Their goal is to make static files easy to manage and fast to deliver.

Yes, Staticaly is totally 100% forever free and unlimited.

They have no plan to offer paid version of Staticaly yet. Even then, it will be a separated service at a different domain, Frans told RunCloud.

Staticaly is a Multi-network CDN

Staticaly is a multi-network CDN with data centers around the globe.

The global CDN network is powered by 4 CDN providers: Cloudflare, Fastly, CDN77, and BunnyCDN.

Currently, Staticaly has 10 data centers in Jakarta (2), Singapore (2), Frankfurt (1), Amsterdam (2), Ashburn (1), Los Angeles (1), and Hong Kong (1).

Staticaly has a healthy infrastructure. If a CDN data center is not available (down), Staticaly CDN will re-route to another data center.

Staticaly has served over 6 TB data and over 8 millions unique visitors.

HTTP/2 and Brotli for all traffic

Staticaly comes with modern technologies and uses HTTP/2 for all the network traffic. HTTP/2 improves performance by multiplexing, using only 1 TCP connection to deliver assets between a browser and a website.

Staticaly also uses Brotli, Google developed lossless file compression format, for smaller compressed file size than Gzip and faster file delivery speed.

8 Awesome Staticaly CDN features

Staticaly is under active development. They add new features from time to time. For now, Staticaly offer the following features:

1. Git Repo CDN: Free CDN for raw files from GitHub, GitLab, and Bitbucket with proper Content-Type header.
2. Imgpx: Free image optimization, modification, and acceleration
3. WordPress static files CDN: Free CDN for WordPress files
4. Favicons CDN: API for favicons
5. Libs: Serve all popular framework libraries (React, jQuery, Boostrap, etc)
6. Flag Icons CDN: CDN for flag icons that support resize and auto generate WebP image format
7. Screenshot: Capture website screenshot on the fly
8. Google Fonts mirror (coming soon): Serve Google Fonts via Staticaly CDN

Staticaly Cache Behavior

By default, Staticaly CDN cache expiration is set to 1 year for every files via Cache-control header, except the master branch of your Git repository. Staticaly will reflect new changes pushed to master branch within 24 hours.

For a project under development, you add a query string ?env=dev to your file URL to bypass Staticaly CDN cache.

Example: https://cdn.staticaly.com/gh/jquery/jquery-dist/master/dist/jquery.min.js?env=dev

For now, you cannot manually purge Staticaly CDN files. Please use this form to submit a purge file request.

1. Staticaly for Git repositories (Github, Gitlab, Bitbucket)

Set up Staticaly CDN for your Git repository is easy. All you need is the user id, repository name, tag, and filename. Staticaly supports Github (gh), Gitlab (gl), and Bitbucket (bb).

How to use? (Github – gh)

https://cdn.staticaly.com/gh/:user/:repo/:tag/:file

Example: https://cdn.staticaly.com/gh/jquery/jquery-dist/master/dist/jquery.min.js

2. Imgpx — image acceleration and modification

Imgpx is an unique feature offered by Staticaly. It is not only CDN for images but it also can resize and optimize your images on-the-fly.

The supported image file types are PNG, JPG, GIF, BMP. Support for SVG is coming soon. The maximum supported image size is up to 60MB.

CDN for image

Adds https://cdn.staticaly.com/img/ at the beginning of your image URL to serve it using Imgpx CDN.

Example: https://cdn.staticaly.com/img/i.imgur.com/3QrPToe.jpg

Resize image

You can make Staticaly to resize your origin image on-the-fly to your target image resolution (pixels) and serve it via CDN using a query parameter ?w= and ?h=. Resize by percentage (%) is coming soon.

Example: https://cdn.staticaly.com/img/i.imgur.com/3QrPToe.jpg?w=400&h=266

Custom image compression level

Not satisfy with the Imgpx default image compression? You can control the image compression by providing ?quality=:number argument on the URL. The image file size is according to the image compression level. Lower quality has a higher compression and smaller file size.

Example: https://cdn.staticaly.com/img/i.imgur.com/3QrPToe.jpg?quality=10 (Image quality 10)

Auto WebP image generation

Imgpx will automatically generate a copy of WebP image format for every image served. WebP is a new image format developed by Google that produces a smaller file size of comparable image quality to the older JPEG format.

3. Staticaly for WordPress

You can use Staticaly to serve your WordPress website files via its global CDN network. It helps to improve WordPress performance and reduce server load.

Staticaly supports WordPress core files (wp-includes directory), themes, and plugins. Here are the Staticaly URL formats for each of them:

• WordPress core:

   https://cdn.staticaly.com/wp/c/:version/wp-includes/:file

• WordPress theme:

  https://cdn.staticaly.com/wp/t/:theme_name/:version/:file

• WordPress plugin:

  https://cdn.staticaly.com/wp/p/:plugin_name/:version/:file

Example: Serve WordPress core file “dashicons.min.css” file using Staticaly CDN

https://cdn.staticaly.com/wp/c/latest/wp-includes/css/dashicons.min.css

WordPress plugins for Staticaly (Coming soon)

The official Staticaly WordPress plugin will available in the middle of 2019. It will help WordPress users to experience faster and better static files. The plugin will enable you to:

• Replace WordPress static files with Staticaly CDN
• Load images and compress them with Staticaly Imgpx
• Edit and crop images on the fly
• Reduce origin server load

Don’t wait!

Here are 3 ways to use Staticaly CDN on your WordPress website now!

Method #1: Jetpack Photon for Staticaly Imgpx

We can replace Jetpack plugin’s Photon function with Staticaly Imgpx to use the free CDN for website images. All we need to do is replace Photon CDN URL (i0.wp.com) to Staticaly Imgpx URL (cdn.staticaly.com/img).

1. Make sure you have enable Jetpack feature “Serve images from our global CDN”
2. Add this code into your theme’s functions.php:

   function staticaly_photon_url($cdn)
   {
   $cdn = 'https://cdn.staticaly.com/img';
   return $cdn;
   }
   add_filter('jetpack_photon_domain', 'staticaly_photon_url', 10, 1);

3. Now your website images will be served via Staticaly CDN!

Method #2: CDN Enabler for Staticaly Imgpx

CDN Enabler is a simple free WordPress plugin for CDN developed by KeyCDN company. Follow these steps to setup Staticaly Imgpx CDN using CDN Enabler:

1. Install and activate CDN Enabler
2. At CDN Enabler setting page, paste https://cdn.staticaly.com/img/WWW.YOURDOMAIN.COM into CDN URL (Remember to replace WWW.YOURDOMAIN.COM to your WordPress domain name)
3. At Included Directories, fill in: wp-content,wp-includes
4. At Exclusion, fill in: .php, .js, .css, .woff, .woff2, .ttf, .txt, .xml, .rar, .zip, .apk, .json (we only use CDN for image here)
5. KeyCDN API Key and Zone ID fields should be empty
6. Save the settings.
7. Now your website is faster!

(Source)

Method #3: WP Rocket for Staticaly Imgpx

WP Rocket is a popular premium WordPress caching plugin with CDN support. Here is how to setup WP Rocket to use Staticaly Imgpx CDN to serve website images:

1. Open WP Rocket plugin settings in WordPress admin panel
2. Click CDN tab then fill in CNAME CDN(s) with cdn.staticaly.com/img/:DOMAIN, where :DOMAIN is the domain or URL of your WordPress site without protocol (http/https). Example: cdn.staticaly.com/img/runcloud.io
3. Set this CDN CNAME only for images (reserved for Images)
4. Make sure you tick Enable Content Delivery Network
5. Save changes.
6. Now your website is faster!

(Source)

4. Staticaly Favicons CDN

Favicons CDN is a free Favicon API to easily get favicon for a domain

How to use?

https://cdn.staticaly.com/favicons/:domain

Example

https://cdn.staticaly.com/favicons/runcloud.io

5. Staticaly Libs

Libs allows you to load popular framework libraries like React, jQuery, Bootstrap, and others.

How to use?

 https://cdn.staticaly.com/libs/:name/:version/:file

Example

https://cdn.staticaly.com/libs/react/16.7.0/umd/react.production.min.js

6. Staticaly Flag Icons CDN

Are you using flag icons for your website or application? Flag Icons CDN will serve your flag icons via Staticaly CDN with resize and auto WebP features.

How to Use?

https://cdn.staticaly.com/misc/flags/:country_code.svg
https://cdn.staticaly.com/misc/flags/:country_code.png

Examples

• https://cdn.staticaly.com/misc/flags/us.svg
• https://cdn.staticaly.com/misc/flags/us.png?w=100

7. Staticaly Screenshot

Screenshot is a service to capture website screenshot on-the-fly.

How to use?

 https://cdn.staticaly.com/screenshot/:url

Example

https://cdn.staticaly.com/screenshot/runcloud.io

8. Staticaly Google Fonts mirror (coming soon)

Staticaly Google Fonts mirror will serve Google Fonts via its multi-network CDN.

How to use?

 https://cdn.staticaly.com/fonts/google/css?family=:fonts

Example

https://cdn.staticaly.com/fonts/google/css?family=Roboto

Summary

Now you learn about 8 awesome features of Staticaly free CDN. Which one is your favorite feature and how would you use it? Please tell us in the comment.

Disclosure: RunCloud is one of the Platinum Sponsors who are supporting Staticaly project.

Categories: Tips & Tricks, Tutorials