I mostly build websites using ReactJS, VueJS, and other static site generators after that. It was fun. I’ve full control over everything. When I deploy it, I use Netlify or similar static hosting services, and after updating content, I simply push it to GitHub. Within a few seconds, my site is live on different edge servers all around the world. CDN will cache all pages and static files. I don’t have to worry about minification, caching, image optimization etc. All are just a toggle way. I loved the experience!

I came back to WordPress for creating a blog about development. Yes, static site generators can do it. But I don’t want to reinvent the wheel, and I’m already a big fan of WordPress.

Coming back from static sites, optimizing WordPress is cumbersome. When I left WordPress year again, I was using W3 Total Cache!

Glad to see that there are new cache plugins in the market, like WP Rocket, LiteSpeed cache, Swift Performance etc. All are great, but configuring them is still painful, and the performance is still nowhere near static sites.

When I came back to WordPress for my blog, I asked one of the most expensive hosting providers: “Hey, I’ve traffic from the US and India, my server is in the US, so TTFB to India is pretty high”.

They replied, “there will be network latency since your WordPress site is in the US server.”

I felt something wrong. A lot of updates have happened in the Cloud technologies and seems like WordPress still lags behind.

We need a complete solution that can perform like static sites, without leaving the advantages of WordPress. It should be easy to configure too. Not like W3 Total Cache!

Why not a few more Flying * plugins

When I started building a complete solution called FlyingPress, a few of them asked “why not create more small plugins as you did before, that does one functionality well, as modules. So we can choose accordingly…”

A more number of plugins creates more conflicts. If you’re in our Facebook group, you might see posts every day where one of my plugins conflicted with some other cache plugin.

For example, when using Flying Images and Flying Scripts together, we have to parse the HTML twice, which is slightly resource intensive. If it’s a single plugin that does both of them, we’ve to parse HTML only once.

Another example, when you’ve Cache Enabler plugin activated, it starts capturing HTML before Flying Scripts (since ‘C’ starts before ‘F’ in plugins order). So it creates conflicts!

We need a single solution that will take care of everything, without creating conflicts, without eating too many resources, without needing a speed optimization expert.

What is FlyingPress

FlyingPress is an all in one solution to WordPress sites that take care of everything. From page caching, CDN to image optimization.

Any non-techie should be able to create super-fast WordPress sites without going to too many tutorials or multiple plugins for speed optimization.

It should automate all possible optimizations so that users don’t have many headaches.

How FlyingPress Optimize for Core Web Vitals

FlyingPress from the ground up was for a better user experience. We entirely wrote critical css generation and other libraries from scratch to get the best performance.

Both WP Rocket and LiteSpeed cache generate critical css. But I was never happy with their results.

Here is the comparison of core web vital metrics in my blog (wpspeedmatters.com) using different cache plugins:

WP Rocket:

LiteSpeed Cache:

FlyingPress:

If you carefully look at the screenshots generated, you’ll notice a few things:

• No layout shifts – As you can see in the screenshots, FlyingPress from the second frame itself rendered with any layout shifts. Avoiding such layout shifts helps in reducing Cumulative Layout Shifts.
• Fast rendering – While WP Rocket and LiteSpeed cache displayed the blog post imagine 6th frame, FlyingPress showed it from the second frame itself, without even need of placeholder. FlyingPress uses several techniques like preloading above fold images, exclude above fold images from lazy loading, use native lazy load, our own super-fast JS lazy load lib etc. All of such optimizations helps in reducing First Contentful Paint and Largest Contentful paint.

FlyingCDN – Optimizations on the fly!

We already offload 90% of the optimizations externally. By enabling FlyingCDN, you can offload CSS/JS minify and image optimization to CDN.

Here are some of the features:

Cloudflare vs FlyingCDN

Cloudflare is a CDN + proxy. FlyingCDN is just a CDN. So FlyingCDN is not an alternative to Cloudflare. You can use Cloudflare along with FlyingCDN.

FlyingCDN provides many features that are currently not available in Cloudflare or are very costly. 

One example is geo-replication. It will replicate files across different regions so that there will be very low latency even for uncached files.

Here is a comparison of FlyingCDN and Cloudflare features:

	Cloudflare	FlyingCDN
Bandwidth pricing	Free	$3/100GB
Geo-replication
Nearest PoP routing	Business plan ($200/m)
Image compression	Pro plan ($20/m)
WebP conversion	Pro plan ($20/m)
Resized images for mobile	Business plan ($200/m)

Why no Unlimited plan or LTD

Many of the paid plugins in the WordPress ecosystem provide an unlimited plan and sometimes LTD (lifetime deals) too.

I’m not against unlimited plans or LTD. It works great for some products, and I’ve even run LTD my previous startup.

However, it’s not possible in FlyingPress.

As I’ve mentioned before, FlyingPress is not just a plugin. We do many resource-intensive tasks, like removing unused css at our Google Cloud server cluster. So our server costs are pretty high. Unlimited plans or LTD is too risky.

We also wanted to prevent abuse by using the same account by multiple persons.

Similar case for LTD, it helps us to make quick money. But will put the business at risk in the long term. I want FlyingPress to be a sustainable business.

More than 100 websites? Contact us for custom pricing.

We’re not stopping here.

We’re still not close by the goal of delivering HTML pages from edge servers with <30ms latency worldwide, no matter which hosting you’re in or where is your server location. Our TTFB Optimizer is a work in progress and will be a game-changer in WordPress.

We’ve only set up the basement.

What is ShortPixel?

ShortPixel is an image compression service/plugin. It compresses all your images in WordPress media automatically, with best the best quality to compression ratio.

What is ShortPixel Adaptive Images?

While ShortPixel only compresses images, ShortPixel Adaptive Images compress images, resize and deliver them as WebP on the fly from their own CDN.

Why BunnyCDN?

One of the fastest CDN with 37+ pops and extremely cheap!

You can read my review and comparison here:

Also Read

• CCDN

BunnyCDN Review, Comparison & Setup Guide for WordPress

• byGijo Varghese
• June 22, 2019

Configure BunnyCDN for ShortPixel Adaptive Images

Create an account in BunnyCDN if you haven’t created yet.

Go to ‘Pull Zones’ and create a new one.

In the host name, enter the name you want. In the Origin URL enter “https://no-cdn.shortpixel.ai/”.

Now go to your ShortPixel Adaptive Images settings -> Advanced.

In the API URL, enter name your put in the following format:

Done! Your images will now be served via BunnyCDN + ShortPixel Adaptive Images!

You can also add your own custom subdomain to BunnyCDN (optional).

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!

With proper optimizations, I was able to achieve 100/100 on Google PageSpeed Insights.

If YouTube or Vimeo embeds are slowing down your site, this guide is for you.

Why YouTube/Vimeo Video Embeds are Slow?

When you embed a YouTube or Vimeo video, it creates an iframe and loads several resources.

• Downloads an HTML file, one CSS, two/three (heavy) JS files which are more than 500KB
• Extra DNS lookups to www.youtube.com, i.ytimg.com etc
• Render blocking JavaScript

To better understand here are some data from Pingdom and GTmetrix after analyzing a page with YouTube (results are almost the same if you use Vimeo).

I hope that made clear these embeds are slow. Let’s see some solutions that can speed up YouTube or Vimeo video embeds in WordPress.

Solution #1: Remove Videos

Just kidding

Solution #2: Lazy Load and Show Preview Image

Just like lazy load images, you can also lazy load videos. By doing so, only a placeholder image will be loaded. All the necessary scripts, iframe, video player etc will be loaded only after the user clicks on the play button.

Demo

Pros:

• Keep your videos on YouTube/Vimeo itself
• Save server bandwidth and storage costs
• Switch quality and resolution based on device and network speed

Cons:

• No autoplay
• YouTube/Vimeo branding
• Adds JavaScript for lazy loading (~10KB)

How to Lazy Load Youtube/Vimeo Videos in WordPress

If you’re using FlyingPress go to iFrame settings and turn on “Lazy load iFrames” and “Use Placeholder image for YouTube iFrames”.

• Lazy Load by WP Rocket – Lazy load images, iframes and YouTube videos, less than 10KB
• WP YouTube Lyte – Developed by the same guys behind Autoptimize
• Lazy Load for Videos – Lazy load both Vimeo and YouTube

Solution #3: Self Host Videos

Uploading videos to YouTube is ideal if you’ve many videos in a post/page and you already have a YouTube channel and you want to grow that together.

However, if you’re using videos just for the hero section or above the fold content, then the above solution might not be the best. Directly embedding YouTube/Vimeo will make it slow too. In such a case, you can self-host videos and embed them.

By self-hosting, you can also remove the fear of “will YouTube/Vimeo delete my video in future?”.

Demo

Pros:

• Autoplay
• No single line of JavaScript or CSS needed
• Full control over video, fully customizable
• Ideal for background videos
• No branding

Cons:

• Need a CDN
• Storage space for videos, either in server or CDN storage (push zone)
• Same video file delivered for mobile and desktop, fast and slow networks

How to “Properly” Self Host Videos in WordPress

You’ve may have already heard that self-hosting videos is a bad idea and you should never do it. But I would say, if you “properly” do it, there is nothing wrong it.

Step 1: Compress Video

There are many online and offline compressors available that can compress videos. But what I would suggest is to upload the video to YouTube and download it back. You’ll get the best-compressed video!

Step 2: Upload Video & Serve from CDN

You can upload the video files directly to ‘Media’ and enable CDN. But what I would suggest is to upload videos to a CDN that have push zone (storage). Thus you save server disk usage, save server bandwidth and will be easy in future to migrate the site to another host/server.

There are many CDN providers which provide a push zone. My favourite one is BunnyCDN. It has storage and edge servers designed for video delivery. It’s very reliable and cheap.

Goto BunnyCDN and create an account. Add a new storage zone and upload your videos.

Also Read

• CCDN

BunnyCDN Review, Comparison & Setup Guide for WordPress

• byGijo Varghese
• June 22, 2019

Once uploading is complete, grab the URL of the video (you’ll need to connect it to a pull zone).

Step 3: Embed Video in WordPress

Embedding the video is pretty easy. Add a ‘Custom HTML’ block and add the following snippet.

<video width="100%" controls>
  <source src="VIDEO_URL" type="video/mp4">
</video>

Replace VIDEO_URL with yours and you’re good to go.

By default, the placeholder image will be the first frame in the video. If you want you can place a custom image.

<video width="100%" placeholder="IMAGE_URL" controls>
  <source src="VIDEO_URL" type="video/mp4">
</video>

This is the native video player in the browser. No external JavaScript or CSS is downloaded for this. The video tag is highly customizable. You can find more options in it here.

Bonus Tip

If none of the solutions works for you, at least preconnect to the YouTube or Vimeo domains. By doing this you tell the browser: “hey, I’ll need to make TCP connection and SSL handshake to these domains very soon, so do them now”. You could save 200-300ms which browsers spend for connecting to domains.

Paste the following code the head tag:

For YouTube:

<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://i.ytimg.com">
<link rel="preconnect" href="https://i9.ytimg.com">
<link rel="preconnect" href="https://s.ytimg.com">

For Vimeo:

<link rel="preconnect" href="https://player.vimeo.com">
<link rel="preconnect" href="https://i.vimeocdn.com">
<link rel="preconnect" href="https://f.vimeocdn.com">

Conclusion

One solution won’t fit for all. Each has its own pros and cons. Go with the one that works for you. If you’re self-hosting, make sure you enable a CDN especially if you upload videos directly to ‘Media’, it’s a must!

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!

Here is the detailed guide about BunnyCDN, its review, comparison, and how to set it up on your WordPress site.

Use coupon code “WPSPEEDMATTERS”.

Key features

• Only the fly image optimization
• Resize image based on user
• Minify CSS and JavaScript
• WebP Support
• Video delivery
• HTTP/2
• Brotli & GZip
• Override expire headers
• Bandwidth overdraft protection
• Cache query strings
• Instant purging files or entire zones
• Cloud storage

Bunny Optimizer – The differentiator

BunnyCDN comes with built-in optimization for Images, CSS and JavaScript.

Images can be converted to WebP, compressed and resized based on the device (mobile/desktop) on the fly. This is something most CDN providers doesn’t provide.

Pricing

Their pricing is as follows:

Suppose you’re currently serving around 50 GB of bandwidth per month, and most traffic is from America, it will cost 50 x 0.01 = $0.5 per month. That’s pretty cheap, right?

There is also a minimum recharge of $10 per year. Image optimization costs extra at $9.50 per month.

BunnyCDN vs KeyCDN vs Cloudflare

BunnyCDN, KeyCDN and Cloudflare are some of the top CDN providers for WordPress.

Also Read

• CCDN

Top 5 CDN Providers for WordPress (Free & Paid)

• byGijo Varghese
• May 12, 2019

If you look at the pricing and features, without a doubt BunnyCDN is a winner!

Note that Cloudflare doesn’t provide any sort of image optimization in the free plan. Even if you generate WebP images in the server, Cloudflare can’t deliver them conditionally. Image optimization is crucial since it weighs 80% of your total web page size.

Also Read

• OOptimization

4 Levels of Image Optimization in WordPress

• byGijo Varghese
• June 6, 2019

Performance

Data Centers

Number of Data Centers != High Performance

It may feel like Cloudflare will have the best performance since it has 155+ data centres. But in reality, you need very high traffic to cache all the files in all the data centres.

Suppose your website has 100 images. In Cloudflare, it takes 155 x 100 = 15,500 requests to cache these files in all their data centres. However in the case of BunnyCDN it’s only 35 x 100 = 3,500 requests.

This is also referred to as a cache hit ratio. For me, the cache hit ratio in Cloudflare is around 50-60%. While that of in BunnyCDN, it’s around 70-90%.

How to Setup BunnyCDN in WordPress

Setting up BunnyCDN in WordPress is pretty easy.

Create Pull Zone in BunnyCDN

Create an account in BunnyCDN and create a new Pull Zone. A ‘Pull Zone’ tells BunnyCDN from where to pull the content/files (i.e. your website)

Once setup is done, you’ll get something like this:

The ‘hostname’ is the only one we want.

By default, you’ll get a hostname like something.b-cdn.net. But you can connect your own subdomain like cdn.your-site.com by adding CNAME to DNS settings.

Configure CDN in WordPress

If you’re using a cache plugin like FlyingPress, then go to its CDN settings and enter the above CDN URL.

If you’re not using any cache plugin, you can install the CDN Enabler plugin to do the same. But it’s highly recommended to use a cache plugin in WordPress.

Recommended Settings for BunnyCDN

BunnyCDN can give pretty good results with the default settings. But there are a few settings that can give more.

Force SSL

Force SSL so that it will automatically redirect all non-https requests to https

Set Cache Expiration

You can set how long the files will be cached in the browser and their edge server. Set it to 1 year. This will increase cache hit ratio and decrease load to your origin server.

Enable Dynamic WebP support

If your server can send WebP images conditionally based on the browser, you can enable “Browser WebP Support”. This will tell BunnyCDN to deliver separate files for browsers with and without WebP support.

Add Canonical Headers

Canonical headers tell search engines where is the origin URL for the file. It’s good SEO.

Enable Bunny Optimizer

Bunny Optimizer will compress images, resize and deliver them as WebP based on the user’s device. This can result in a 50-70% smaller web page size and 2-3x overall speed.

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!

If your server is in the US and some of your visitors are from India. The data has to travel halfway around the globe, which adds up 200-300 ms to every request.

CDN or Content Delivery Network is a network of servers spread across the globe. These servers are designed for serving static files. So if you have an image and put that into a CDN, it will be cached in all the servers. When a user requests for that file, instead of serving it from the original server, CDN provider will serve it from the nearest location to the user.

Why should I use a CDN?

I hope that’s pretty clear from the screenshot.

CDN increase the speed of your website by serving static files like images, css, js from the nearest location of your server. That will reduce the load time as well you offload 95% of the work in your server to external providers. Thus your server got more resources to handle PHP and MySQL.

Here are some potential benefits of integrating a CDN:

• Faster website
• Less load to server, better performance
• Offload bandwidth costs from the origin server
• Faster crawling for search engine, hence better SEO

Managed hosting providers with CDN

Before digging deep into external CDN providers, double-check whether your hosting provider already has a built-in CDN.

Here are some of them:

• Kinsta (uses KeyCDN)
• Cloudways (uses StackPath)

Comparison of CDN providers for WordPress

Cloudflare

Cloudflare is one of the fastest CDN providers that powers 15% of the Internet! Unlike other CDN providers, Cloudflare works as an HTTP proxy. What this means for you is an easy setup. Just add your website to Cloudflare and you’re good to go.

Also Read

• CCloudflare

10 Benefits of Integrating Cloudflare in WordPress

• byGijo Varghese
• April 18, 2019

BunnyCDN

BunnyCDN is a premium CDN which have a very good performance (almost equivalent to Cloudflare). BunnyCDN is also optimized for delivering large files like video.

I’m a big fan of BunnyCDN and use it in my every site instead of Cloudflare CDN.

Also Read

• CCDN

BunnyCDN Review, Comparison & Setup Guide for WordPress

• byGijo Varghese
• June 22, 2019

KeyCDN

KeyCDN is another premium CDN provider. Fast, reliable and used by premium managed WordPress hosting providers like Kinsta.

Jetpack

Jetpack is from Automattic, the company behind WordPress. The main difference with other CDN providers is that Jetpack is completely free. Even with the features like image compression, WebP support etc!

However, due to the following reasons, I don’t use it:

• No purging of the cache
• Low-quality image compression
• Inconsistent response time
• Multiple domains (i0.wp.com, i1.wp.com, or i2.wp.com)

Cloudinary

Cloudinary is not just a CDN, it’s more like a Google Drive for images. They’re the pioneers in image optimization.

Cloudinary uses Akamai as the CDN under the hood, one of the best CDN providers ranked in top 3 by cdnperf.com

Conclusion

There are plenty of CDN providers out there. I’ve only selected the best in each category, with unique features based on price. Each of them of their own pros and cons. Go through each of them in detail and select the one which suits you.

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!