Skip navigation

Dr. FLARE

A visually interactive Chrome extension for users to see the benefits of using Cloudflare platform.

Keywords

Chrome extension, Chrome APIs, JavaScript, Cloudflare, Content Delivery Network (CDN)

Overview

Many Cloudflare users often ask, "My site is still slow, why is that?". Well, there are too many factors need to be considered, such as cache hit ratio, slow initial HTML page load, network condition, web server condition, etc. In most cases, users haven't optimized their cache hit ratio.

In order to optimize cache hit ratio while using Cloudflare, users need to read multiple Knowledge Base articles to fully understand how each Cloudflare feature works together, and then analyze it by checking Network tab. Yes, it's possible but not conveninent enough.

My ex-colleague Ricky(JAEJUN) Yu (open new window) suggested an idea of having a tool that provides an instant feedback on images on a web page based on those cache status. After many iterations of desinging & developing processes, we decided to focus on the two main components, image painting and dashboard. We built this tool having the users who do not have much experience with Content Delivery Network (CDN) service or Cloudflare platform in mind.

Video

Involvement

  • Applies color filtering to paint images on a site based on each image’s cache status and provides a dashboard that summarizes and analyzes network requests by utilizing Cloudflare special headers.
  • Designed the tool to be compatible with many different types of web technologies, especially for the image painting component.
  • Listed as one of Cloudflare Community Tips and suggested in an official Cloudflare Knowledge Base article (See the additional resources section).

FAQ

  • Where is this extension getting request details from?

    The extension utilizes the built-in Chrome API (open new window) to receive request information from the DevTool Network tab (open new window) .

  • Why did you go with Chrome extension?

    Chrome extension has access to powerful built-in Chrome APIs, such as Network tab listener. Not only Chrome is one of the most popular browsers these days but also users can easily download and install the extension on their Chrome.

  • Will this be available to Firefox users?

    This is definitely in our TO-DO list, but we don't have any concrete ETA yet.

  • What are the things that the extension can/cannot do?

    Can:
    - Analyze Cache/Miss/External ratio of sites.
    - Apply color filters to visualize Cache/Miss/External contents on a page.
    - Check whether Cloudflare features (Railgun/Image Resizing/Polish/Auto-Minifying) are applied to their site or not.

    Cannot:
    - Check site loading time. Other third-party tools, such as WebPageTest (open new window) , might be a better alternative for loading time test.
    - Perform Cloudflare vs. Origin Page Load speed test. Recommend Cloudflare Troubleshooting and optimizing site speed (open new window) KB article.
    - Provide insights into other Cloudflare features that don't return any unique response headers. For example, Page Rule, Workers, and etc.