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.