Optimizing Speed With Page Rules

Web performance is more than just moving static files closer to visitors; it's about ensuring that every page renders as fast and efficiently as possible.

Learn how Page Rules can help you take control of Cloudflare’s content optimization features to take your domain’s performance to the next level.

To purchase Page Rules, visit the Cloudflare dashboard.

Overview

In the above video you will learn how to:

  • Increase security and performance by enforcing secure domain connections
  • Eliminate threats before they reach your domain with targeted firewall protection
  • Block spammers, bots, and malicious crawlers from accessing critical resources
  • Stop bots from harvesting email addresses with on-the-fly email obfuscation
  • Protect sensitive information from suspicious visitors with server side excludes

Video Transcript

Web performance is more than just moving static files closer to visitors; it is also about ensuring that every page renders as fast and efficiently as possible. In this videowe’lllook at how Page Rules can help you take control of Cloudflare’s content optimization features to take your domain’s performance to the next level.

Always Use HTTPS

HTTP/2 is designed to improve page load times with features like TCP connection multiplexing, server push, stream priority, and header compression. HTTP/2 is enabled on all Cloudflare accounts, but in order to take advantage of it you need to ensure that your content is being served over HTTPS. With Page Rules, this is simple:

With SSL is enabled, create a Page Rule for HTTP that includes an asterisk before and after your domain, and select “Add a Setting” > Always Use HTTPS.

This URL pattern that includes HTTP, with an asterisk before and after your domain ensures that any subdomains, directories or query strings referencing your domain will be forced over HTTPS.

Once you click Save and Deploy, new and returning visitors attempting to connect to your domain over HTTP will be redirected to HTTPS. Keep in mind that this option should generally be the first rule you set in Page Rules. Unless you have a special case, be sure to reorder this rule to appear at the top of your set.

Cache Level, Edge Cache and Browser TTL

By default, Cloudflare caches the most popular types of static content by extension for all account types. Storing resources on Cloudflare’s global CDN means that visitors will fetch those resources from a Cloudflare edge server closest to their geographic location. More advanced caching and performance options can be leveraged by using the various Cache Level settings.

The Cache Everything setting provides the most aggressive caching mode available. This option targets all available resources beyond Cloudflare’s default types, including HTML, JSON data, and movie files and stores them on Cloudflare’s edge servers.

In the core-assetsdirectoryof my domain I’ve stored resources like javascript dependencies, company logos, videos, case study pdfs and other assets. I’ve applied the Cache Everything setting to make sure that ALL of the resources are cached. The URL pattern includes an asterisk after the forward slash so that all subdirectories will be included.

Since the resources within the core-assetsdirectorywill rarely change I’ve applied an Edge Cache TTL of a month as well. Edge Cache TTL instructs Cloudflare on how often it should attempt to request new content from your origin server. If a resource were to change in this area and I wanted to force a refresh before the set TTL time, the Purge Cache feature in the Caching section of the dashboard gives you the ability to force the refresh of a specific file or directory.

Browser Cache TTL instructs the user’s browser how often it should attempt to request new content from Cloudflare. Since the media in this folder doesn’t change often, I’ve set the TTL for a full day.

Rocket Loader

As a final optimization, I’ve enabled Rocket Loader to speed up the loading of my JavaScript files. Rocket Loader will take all the scripts on your page, including third party scripts, and asynchronously load them, bundling all the script requests into a single request over which multiple responses can be streamed.

RocketLoader will make sure that all of the scripts on your page will not block the content of your page from loading, and will use LocalStorage to intelligently store scripts so they aren't fetched unless necessary.

Conclusion

In this video you learned how Page Rules enables you to better take advantage of Cloudflare’s features to increase the performance of your domain.

The number of Page Rules available to your domain is limited by plan type. If you need more Page Rules, Cloudflare now offers you the ability to purchase more Page Rules a la carte. Be sure to visitor our plans page for more information at: www.cloudflare.com/plans