A slow website isn’t just frustrating to use; it loses you customers before you even know you have them! In fact, on mobile devices, a study by Google found that you lose over 50% of viewers if your page takes longer than 3 seconds to load. How fast your website can load and display the information your customers need directly impacts your funnel at the top level, to say nothing of bottom line losses. In this article, we’ll cover three important metrics for website speed (time to first byte, time to first draw, and time to usability) and discuss briefly what can be down about slowness in each. Once you understand how each of them impacts your users, head over to Google’s PageSpeed Insights tool to learn more about how long your site takes to load.
Time to First Byte
Time to First Byte (TTFB) refers to the time between a user entering your site URL in their browser to the time their browser receives the first piece of data the server has responded with. A low TTFB isn’t just important for overall site speed; it also helps your search rankings: of all the different ways to measure site speed, a poor TTFB is the only speed metric Google will lower your search ranking for.
An ideal TTFB is under 200 milliseconds. The best way your engineering team can help you lower your TTFB is to ensure your server code is as optimized as possible (for example, many corporate websites can benefit from static site generators, eliminating the need for heavy server code and dramatically speeding the site up). You can also use content delivery networks (CDNs) to put static assets geographically close to your users, reducing the number of hops images and data must make to travel from your server to the end user.
Time to First Draw
Time to First Draw (TTFD) is the amount of time needed for the user to see the first content on their screen of any kind, taking less than a second in ideal scenarios. In the best case, this would be your site as it would be displayed in its entirety; you can bring this time down ensuring your site JavaScript isn’t blocking page rendering and minimizing the number of additional files needed from the server before the page can be rendered (for example, it can sometimes be far better to show the client your site before custom fonts have loaded – at least then they can see the content, even if it won’t look as perfect as it can for another second or two).
Source: A Facebook-style motion placeholder (Courtesy michalsnik/vue-content-placeholders, MIT licensed)
However, some sites simply need more time to determine what the user should be seeing or need to fetch additional data before being ready to display things. In these cases, placeholders (such as a motion placeholder, shown above) can be helpful in indicating to your user that your site is preparing to show them content even though it’s not quite ready yet. In a different vein, Discord, a chat application targeted towards online gamers and streamers, shows inside jokes from popular video games as it loads its web interface. Your placeholders don’t have to be dry or empty, and your options for ensuring a fast TTFD are nearly endless – just don’t show your customer a blank white page as you load lest you lose the lead!
Time to Usability
Time to Usability is concerned with the amount of time required before your site content is completely visible and your clients can click around, view text and images, and interact with your site fully. No more than two to three seconds should pass between the user first entering your address or clicking your link and being presented with a fully functional site.
To reduce Time to Usability, engineers might need to focus on optimized code paths for your application or site and developing using asynchronous/non-blocking JavaScript practices. Consider also separating application logic (which ensures buttons, menus, etc. are functioning) from less-vital page components that could stand to be delayed by a second or two (for example, an image slider or fancy graphics effect).
There are a wide variety of tools available to help you analyze and understand how your page load time affects your users; Google PageSpeed Insights or WebPageTest are great places to start and get basic metrics on how quickly your site loads.
Once you and your engineering team have tuned your site to be as fast and zippy as possible, you can use Google Analytics to track user engagement and gather hard data on the retention rewards your optimization has reaped you. Of course, don’t forget that Chartio supports Google Analytics as a data source! Try a free trial today and see how we can help you make powerful analytics easy and simple.