Start render: The time at which a site’s content starts to visually display in the browserĪlso useful for this is WPT’s timeline view, which lets us see how the page progressively renders over the course of recorded keyframes.Time to first byte: the time it takes for the site to return the first byte of its response content.Fortunately for us, a site can typically be used long before it has finished loading, so again, the weight doesn’t need to impact the wait!įor measuring perceived performance in WPT, I tend to look at these values: However, there are also values in the summary table that tell us a bit more about how fast a site feels, and how soon it can be used. They’re areas that we can dramatically improve by optimizing our file sizes (images, fonts, JavaScript, CSS) and minimizing the number of third party sites we reference for ads and social widgets. The metrics mentioned above represent areas we’ve traditionally looked to when reviewing performance at a high-level. This particular page weighs in at 8-9 megabytes including all of its assets and advertising (its weight seems to vary depending on the ads in play), which costs over $1 dollar (US) to access, even in developed regions of the world like Germany! There’s even a new column telling you how much that page costs to load in various parts of the world (which ties into Tim Kadlec’s excellent site, ). Overall page weight: the combined weight of the page’s HTML and all the files that it references (CSS, javascript, images, fonts, etc.).Overall page load time: the time it takes all of the page’s assets to finish loading.This summary table provides some useful numbers, like: In truth, most sites of that scale perform similarly to this one, so it's just one of many examples we could use. Here’s a glance at the summary table you see when you run WPT on a site, in this case, I tested an article page on the new responsive on a 3G connection from an Android device in Dulles, Virginia, USA using the Chrome browser:Ī quick note: I should point out here that while this particular example website can use some performance improvements, this post is not meant to be a critique of Wired's site specifically. In short, WPT’s web interface allows you to test a site in a variety of browser/device/location combinations and receive loads of rich information about how that site loaded and what you can do to improve it. Nowadays, that’s hardly the case.Īmongst a few others, sits at the top of the list of tools I find irreplaceable in profiling performance today. Part of the reason we hadn’t focused heavily on perceived performance in the past was due to a lack of good tools to analyze the events that take place while our pages load. Measuring Overall & Perceived Performance to 'Measuring Overall & Perceived Performance' # But today there are techniques we can use in addition to file optimization that have an arguably larger impact on how soon our users can see and use the content we’re delivering. At the root of this distinction is a performance metric that the web community has only recently begun to discuss and prioritize, known as perceived performance.įormerly, much of the focus in web performance was concerned with optimizing assets like images and fonts, which does make for a shorter overall page load time. When I talk about web performance, I like to use the phrase, “weight does not need to increase wait.” To be clear, that’s not because the weight of a webpage doesn’t matter-it most definitely does-but rather because we can often ( usually, even) deliver a usable representation of a web page’s content very quickly, even if that page is quite large and asset-heavy as a whole.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |