Firefox DevTools

Firefox DevTools

Your page is slow

Image by reddit user MatlockJr

It should be fast

Tools

2001: A Space Odyssey

about:mozilla

More than just open source:

Image by Sean Martell

about:me

Image by waxingmind.wordpress.com

about:me

I've worked on:

about:me

I'm working on memory tooling:

Use Firefox Aurora

Page Load

Photo by wwarby on Flickr

Prioritize Above-the-Fold Content

Content Belongs at the Top

Bad:

        <html>
          <body>
            <div class="navigation-sidebar">…</div>
            <div class="content">…</div>
          </body>
        </html>
      

Content Belongs at the Top

Good:

        <html>
          <body>
            <div class="content">…</div>
            <div class="navigation-sidebar">…</div>
          </body>
        </html>
      

Example: MDN

Example: MDN

Good:

Bad:

Inlining Essential Resources

Using the csscoverage command

Open the developer toolbar with Shift + F2 or via Tools > Web Developer > Developer Toolbar menu item.

Using the csscoverage command

Finding Essential CSS Rules

          <head>
            <link href="my-full-stylesheet.css" rel="stylesheet" />
          </head>
          <body>
            <div class="content">…</div>
            <script> debugger; </script>
            <div class="navigation-sidebar">…</div>
          </body>
      

Finding Essential CSS Rules

Results

          <head>
            <style>
              /* … essential above-the-fold CSS rules … */
            </style>
            <link href="non-essential.css" rel="stylesheet" />
          </head>
          <body>
        
          </body>
      

Network Monitor

Network Monitor

Maximize Caching

Maximize Caching

Maximize Caching

Request / Response Timings

Page Perf

http://en.wikipedia.org/wiki/Hummingbird

console.time()

console.time()

        console.time("my label");
        doStuff();
        doSomeOtherStuff();
        doTheLastThing();
        console.timeEnd("my label");
      

console.time()

console.profile()

console.profile()

        console.profile("my label");
        doStuff();
        doSomeOtherStuff();
        doTheLastThing();
        console.profileEnd("my label");
      

console.profile()

        console.profile("my label");
        console.time("my label");
        doStuff();
        doSomeOtherStuff();
        doTheLastThing();
        console.timeEnd("my label");
        console.profileEnd("my label");
      

JS Profiler Performance Tool

JS Profiler Performance Tool

Sampling Profiler:

Paint Flashing

Paint Flashing

To start paint flashing:

Reflow Logging

Reflow Logging

Reflow Logging

Asynchronous reflow ☺

Synchronous reflow ☹

Canvas Debugger

Get Involved!

https://wiki.mozilla.org/DevTools/GetInvolved

Resources

Thanks!

@FirefoxDevTools

@fitzgen

https://wiki.mozilla.org/DevTools/GetInvolved

Photo by Ivan Kislov