W H I T E PA PE R

How Cloudflare
optimizes web content
for faster page loads

11 888888 9999 FLARE
FLARE || enterprise@cloudflare.com
enterprise@cloudflare.com || www.cloudflare.com
www.cloudflare.com

INDEX

Executive Summary

3

What is content optimization?

4

Faster web protocols

5Image optimization and compression

6

Video optimization and delivery

8Compression

8

About Cloudflare10

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

2

Executive Summary
Study after study has confirmed that consumers expect fast, seamless experiences when they use websites andweb apps. If your website is not fast and performant, you are likely missing out on huge business opportunities.
There are three main areas where Cloudflare can boost your web performance: server responsiveness, network
latency, and content optimization. This paper puts a spotlight on the third area: content optimization.
We will go over how Cloudflare optimizes your content to ensure your users have a superior customer experience.
Cloudflare does this by supporting the latest and fastest web protocols, optimizing images and video for fastest
delivery, and using modern compression techniques to reduce file size.

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

3

W H AT I S CO N T E N T O P T I M IZ AT I O N?

Cloudflare content optimization
For any web property, a variety of components make up the content that needs to be delivered from the origin
server to the end user, including images, video, CSS and JavaScript files, and HTML.
The Cloudflare global network spans 250+ cities in more than 100 countries. We cache static assets across ournetwork and always direct end users to the closest data center, minimizing latency. We create an optimized versionof your original assets in a much smaller file size. By optimizing both content file size and network paths, we offer
super fast load times on the shortest possible path to the user.
Cloudflare enables you to:•

Use faster protocols to vastly reduce network latency and to reprioritize content so large resources, such as
JavaScript files, do not block the page from loading•

Optimize and compress images to speed up load times•

Convert video files using modern codecs to simplify streaming•

Efficiently compress files for faster loading using Brotli and gzip compression

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

4

1. Faster web protocols
Cloudflare is an industry leader in supporting new and more efficient web protocols.
HTTP/2 is much faster and more efficient than HTTP/1.1, the earlier version of HTTP that isstill in wide use on the Internet, thanks to a number of added features and improvements
to the protocol.
HTTP/2 Prioritization: In HTTP/2, developers have hands-on, detailed control over prioritization,or the order in which content loads. This allows them to maximize page load speed, even acrossdifferent browsers, to a degree that was not possible in HTTP/1.1.
In the context of web performance, prioritization refers to the order in which pieces of content
are loaded. Prioritization affects a webpage’s load time. Certain resources may block the rest of the page fromloading if they have to load first: these are known as render-blocking resources.
Large JavaScript files, for instance, may not need to load right away for page functionality, but if they have to load
before the rest of the content does, they can delay the user’s ability to interact with the content. By prioritizing
large JavaScript files last, developers ensure the rest of the page loads first and loads more efficiently.
Currently, Cloudflare is the only CDN (content delivery network) provider to support HTTP/2 prioritization. Inaddition, Cloudflare has built a prioritization engine specifically for resource handling in HTTP/2 so that all
webpages load faster on any browser. Developers are able to customize prioritization if desired, but you can also
use Cloudflare’s default settings to automatically speed up load times.
Multiplexing: HTTP/2 also delivers data more efficiently than HTTP/1.1 by sending several content elements at once
instead of one at a time. In HTTP/2, when a client makes a request for a webpage, the server sends several streamsof data to the client simultaneously, instead of sending one thing after another. This method of data delivery isknown as multiplexing.
Other HTTP/2 speed improvements include:•Header compression: Smaller HTTP headers can reach client devices faster•

Server push: Servers can deliver content before client devices request it, cutting down the number of round trips•Stream priority: Browsers can request which assets they want to receive first for more efficient page loading•As a result of all these improvements, websites using HTTP/2 load up to 14% faster1 than those using HTTP/1.1•Enabling HTTP/2 makes your web properties load faster and more efficiently, before the rest of your content
is even optimized

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

5

2. Image optimization and compression
Image optimization is the process of preparing images to load quickly across a variety ofdevices and screen sizes. Non-optimized images can massively slow down a website.
There are several ways to speed up image loading, from optimizing the images themselvesto speeding up the behind-the-scenes processes involved in loading the images.
Resizing for a variety of screen sizes:
Using high-quality images is important for keeping users engaged, but image files do not need
to be massive. Smaller images in terms of file size load faster. Overly large images or highresolution images can have a huge impact on page load time, and they are usually unnecessary.
Consider this photo of Cloudflare’s Lava Lamp Wall:

On a regular DPI screen, these images look the same, yet the image on the right takes more than 20 times moredata to load.
To keep image files as small as possible, images should be optimized for the specific screen size they are loading
on. Larger images should only load for larger screens; on smaller screens, smaller images can be used so that theyload even faster; full-resolution images should not be used at all.
This requires a ton of work from developers to resize images and to maintain a catalog of image variants formultiple device types. However, Cloudflare Image Resizing does this automatically, creating multiple copies froma single master file and serving them from Cloudflare’s cache. This significantly reduces the number of images
you need to manage and maintain in your catalog. The result: Faster page load times across all devices, fromsmartphones to desktops, and a better user experience.

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

6Automatic conversion to WebP
Parallel streaming of progressive images is possible by leveraging HTTP/2 prioritization.
To stream images in parallel, the server prioritizes image data in the following way:
The image header that contains the image size is very high priority, because the browser needs
to know the size as soon as possible to do page layout. The image header is small, so it doesn’thurt to send it ahead of other data. Loading this first prevents the page from “jumping” as therest of the images load.
The minimum amount of data in the image required to show a preview of the image has amedium priority.
The remainder of the image data is low priority. Browsers can stream it last to refine image
quality once there’s no rush, since the page is already fully usable.

Parallel streaming for progressive images
Progressive image loading is a method for reducing the time it takes for images to load.
Progressive images initially load at a lower quality level, but load more information over time.
In this way, the image loads quickly at first, and then within seconds it improves in quality.
The user does not have to wait for the page to load yet still gets the benefits of ahigh-quality image.
Cloudflare offers parallel streaming of progressive images: streaming multiple images at once
instead of one at a time. In addition to being more efficient, parallel streaming helps eliminate
page jumps as the page loads, improving the user experience.
Parallel streaming of progressive images is possible by leveraging HTTP/2 prioritization. To stream images inparallel, the server prioritizes image data in the following way:
The image header that contains the image size is very high priority, because the browser needs to know the size
as soon as possible to do page layout. The image header is small, so it doesn’t hurt to send it ahead of other data.
Loading this first prevents the page from “jumping” as the rest of the images load.
The minimum amount of data in the image required to show a preview of the image has a medium priority.
The remainder of the image data is low priority. Browsers can stream it last to refine image quality once there’s norush, since the page is already fully usable.

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

73. Video optimization and delivery
Consumers today expect to be able to interact with a variety of content as they visit web
properties and use apps. Video content is more important for user engagement now than ever.
However, slow-loading video content can have a negative impact on user engagement. Nonoptimized embedded video can slow down page load times, frustrating users.3 Each 1-second
buffering delay in video playback results in a 5.8% percent increase in user abandonment
rates.4 Fortunately, Cloudflare helps you optimize the video encoding and delivery process.
Cloudflare Stream is an online video platform that supports modern video encoding sopublishers do not have to continually update to more efficient codecs. It is an end-to-end
platform; eliminating the need to maintain a video streaming infrastructure. In addition, the Cloudflare global
network vastly speeds up streaming delivery times to end users around the world, and it optimizes video resolution
for the end user via our HTML5 player.
Cloudflare Stream supports modern video streaming protocols such as MPEG-DASH and HLS. Adaptive bitratestreaming is a feature of these protocols; adaptive bitrate streaming dynamically adjusts video quality in responseto network conditions, so that users always get the best possible video quality without waiting for the video tobuffer for several seconds.

4. Compression
Reducing file size increases loading speed, which is why compression is such an important
technology for optimizing your content for the Internet. A compressed file will load much fasterthan an uncompressed one, as less data needs to be transferred.
Brotli compression is one of the most effective types of compression available today for web
content. In wide use since it was developed in 2016, Brotli compression is supported by all
major browsers. It works by compressing text using a dictionary of common phrases. Thismakes it well-suited for compressing HTML, CSS, and JavaScript files, cutting fractions of asecond off your page load time.
Brotli compression is lossless: it does not impact or reduce the quality of your content. However, it does reduce filesize by a greater degree than other types of compression:•HTML files compressed with Brotli are 21% smaller than those compressed with gzip

•JavaScript files are 14% smaller than gzip

•CSS files are 17% smaller than gzip5

Cloudflare customers can toggle on Brotli compression within the Cloudflare Dashboard with a single click.
Cloudflare also offers gzip compression in case Brotli is not supported by a customer (gzip compression alsospeeds up content, but not by as much as Brotli compression).

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

8Conclusion
Improving the performance of your Internet-facing properties requires a multifaceted approach that involves
minimizing network latency, improving server responsiveness, and reducing file sizes. Cloudflare can minimize theeffort involved to optimize web assets and significantly improve page load times. Contact Cloudflare today to set
up a trial or evaluation and experience the benefits of a faster Internet.

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

9About Cloudflare
Cloudflare, Inc. is on a mission to help build a better Internet. Cloudflare’s platform protects and accelerates
any Internet application online without adding hardware, installing software, or changing a line of code. Internetproperties powered by Cloudflare have all web traffic routed through its intelligent global network, which getssmarter with every request. As a result, they see significant improvement in performance and a decrease in spamand other attacks. Cloudflare was named to Entrepreneur Magazine’s Top Company Cultures 2018 list and ranked
among the World’s Most Innovative Companies by Fast Company in 2019. Headquartered in San Francisco, CA,
Cloudflare has offices in Austin, TX, Champaign, IL, New York, NY, San Jose, CA, Seattle, WA, Washington, D.C.,
Lisbon, London, Munich, Beijing, Singapore, and Sydney.

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

10E N D N OT ES

1.

Griffin, Jonathan. “HTTP/2 vs HTTP/1.” The Webmaster, https://www.thewebmaster.com/hosting/2015/
dec/14/what-is-http2-and-how-does-it-compare-to-http1-1/. Accessed 11 February 2020.

2.

“A new image format for the Web.” Google Developers, https://developers.google.com/speed/webp.
Accessed 11 February 2020.

3. How to Fix Video That’s Slowing Down Your Page Load Time.” Jonesen, https://jonesen.com/blog/howto-fix-video-thats-slowing-down-your-page-load-time/. Accessed 9 August 2019.
4. Krishnan, S. Shunmuga and Ramesh K. Sitaraman. “Video Stream Quality Impacts Viewer Behavior:
Inferring Causality Using Quasi-Experimental Designs.” IEEE, https://people.cs.umass.edu/~ramesh/Site/HOME_files/ imc208-krishnan.pdf. Accessed 9 August 2019.
5.

Jain, Ankit. “Brotli vs Gzip Compression. How we improved our latency by 37%.” OYOTech(Medium), https://medium.com/oyotech/how-brotli-compression-gave-us-37-latency-improvement14d41e50fee4. Accessed 12 February 2020.

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com

11

W H I T E PA PE R

© 2022 Cloudflare Inc. All rights reserved. The Cloudflare logo is atrademark of Cloudflare. All other company and product names may be
trademarks of the respective companies with which they are associated.

1 888 99 FLARE | enterprise@cloudflare.com | www.cloudflare.com