The “Profiles” tab gives us a better way to see what’s going on. We could make changes and run the timeline again and again, but that’s just shooting in the dark. The timeline tells us how long our code took to run, but that doesn’t help us know what’s going on while it’s running. I want to make my code run faster, but I’m not sure what’s making it slow. That’s not bad, but it’s not great for such a small page. the time between the first request for the page and the final painting of the page in the browser - is 1.25 seconds. I run it three times and take the average, in case my computer runs slowly during the first test. (To start recording once Chrome Developer Tools is open, click the “Timeline” tab, and then the small black circle icon for “Record” at the very bottom of the window.) Chrome is smart about not starting to record until the page starts to load. To establish our baseline, we’ll start recording in the “Timeline” tab, load our page and then stop the recording. Chrome also offers an excellent tool for event tracing, called Speed Tracer. Firebug has some profiling tools, too, but the WebKit browsers (Chrome and Safari) are best at profiling code and showing timelines. Click the “Tools” menu under the little wrench to open it. The profiler is part of Chrome Developer Tools, which is always available in Chrome. For this article, we’ll use Chrome Developer Tools. The baseline will let you know whether you’re making improvements and help you make tradeoffs.

Time to profile the page and make it faster.Īlways start performance-improvement projects with a baseline understanding of how fast or slow your application already is. The page loads pretty fast, but it still takes a moment and blinks a little before it paints. Generating my rainbow colors was a little tricky, so I got help from “ Making Annoying Rainbows in JavaScript.”

Javascript download chrome