MacMost Now 918: Safari Timeline Recording

Using the developer tools built into Safari, you can see how long it take to load a web page, and which elements of the page may be holding things up. Developers can use this tool to optimize their web sites.

Video Transcript: Hi this is Gary with MacMost Now. On today's episode let me show you how to use Timeline Recording in Safari.
Here is a technique specifically for web developers. Even if you just maintain your own website you may be interested in how well your website performs. How fast it loads and if there is a problem loading where that problem is in the page.
So you can do this in Safari using Safari developer tools in something called Timeline Recording. It is built into Safari and it is a very useful tool. Let me show you how to get it going.
The first thing we need to do is to go into Safari Preferences and go to Advanced. Turn on the Develop menu in the menu bar. Now we have this whole develop menu here. Now to view Timeline Recording we've got the ability to start Timeline Recording but we don't necessarily want to start it now. The page is already loaded. We just want to be able to view it and reload the page so we can see how long it takes to load each element.
So let's go to the Web Inspector here which will bring up all the tools here at the bottom of the screen. From there we can click the little clock icon here which will bring up the timeline. Now it is empty because we haven't done anything yet. The page was loaded before we brought this up. So I'm going to simple refresh this page right here and we will see Timeline Recording take place. There we go.
Now you can see here as it loads all the elements of the page it basically lists all the elements here, and I can scroll through, these are all the elements on this page, and I can see a timeline of how long it took to load each one. You can see, for instance, loading the basic html here and then it started loading different elements for the page and it continued through here until the page is finally completed with the last element being loaded.
Now you also get tons of information about each individual element and if you want to find out about something in particular you can click the little arrow here and it will bring it up. In this case it is an image. It actually shows me the image. It could show you code. It could show you all sorts of things about the element and it gives you some information here on the left. You can use the back arrow there to go back.
I can also expand the timeline here if I am not interested so much in this information just to see what is going on. So it just shows me the timeline now.
I can see that each element actually shows two things. One is this lighter area here which is the time when it was first requested. Then the dark element here starts when it is actually loading. So there basically the latency. The request and then the loading time. So a large image or a large file like the original html shows a short period of wait and then a longer period, 316ms, to load that.
Of course this is going to be heavily dependent on your connection at home. So just because you see it take a couple of seconds to load a page doesn't mean that somebody else will. Somebody with a slower connection may see twenty seconds to load the page while somebody with a very fast connection may see one second to load a page.
The important thing is not exactly how long it took to load the page but how long each element took. You can go and see if there is an element here that had a long latency or an element that took a long time to load. Perhaps there was an image that was too big or maybe latency because it is hitting another server. A lot of these, for instance, are hitting other servers for analytics, for ad serving, things like that, that are out of my control for this page but it is interesting to see how long things like the Facebook "Like" button took to load. You can see it was a little bit of a delay there and you may want to weigh that against whether or not it is worth having on the page.
You also notice here at the top it breaks out the different elements into Network Requests, Layout & Rendering, and JavaScript. So the Network Requests are all the things that have to do with the server and serving up the data. You can see that finishes fairly quickly. There is a little bit more time spent laying out items and in addition to that you see the JavaScript not only takes longer but it just continues to run even after the page is already loaded. Of course there are menus and things on many web pages that continue to use JavaScript even after the page is fully loaded.
So for experienced web developers, of course, you will be able to use this to recognize when something may be taking too long to load on a page and see if you can improve that. Even if you are not a pro doing this with the website you've got may enlighten you to some things. For instance you may have included some graphics or some widgets from other services and you can find out by using this that might be delaying loading the page. You can decide whether or not it is worth keeping on your website.
Hope you found this useful. Until next time this is Gary with MacMost Now.

Comments: 2 Responses to “MacMost Now 918: Safari Timeline Recording”

Helen

10 years ago

Thank you so much for this video. The info you just gave for FREE is worth a lot of money to people like me. So I am very grateful for your offering and always look forward to my newsletter arriving. I will certainly LIKE this page.

Claire Gehrett

I had no idea what Timeline was. I first saw it under Facebook, now I understand what Timeline is. I always learn so much from you and your videos. Thank you once again, Gary.d

Comments Closed.

MacMost Now 918: Safari Timeline Recording

Comments: 2 Responses to “MacMost Now 918: Safari Timeline Recording”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information