A Look at JAMstack’s Speed, by the Numbers

css-tricks.com css-tricks.com3 years ago in #Dev Love262

People say JAMstack sites are fast — let’s find out why by looking at real performance metrics! We’ll cover common metrics, like Time to First Byte (TTFB) among others, then compare data across a wide section of sites to see how different ways to slice those sites up compare. First, I’d like to present a small analysis to provide some background. According to the HTTPArchive metrics report on page loading, users wait an average of 6.7 seconds to see primary content. First Contentful Paint (FCP) – measures the point at which text or graphics are first rendered to the screen. The FCP distribution for the 10th, 50th and 90th percentile values as reported on August 1, 2019. If we are talking about engagement with a page (Time to Interactive), users wait even longer. The average time to interactive is 9.3 seconds. Time to Interactive (TTI) – a time when user can interact with a page without delay. TTI distribution for the 10th, 50th and 90th percentile values as reported on August 1, 2019. State of the real user web performance The data above is from lab monitoring and doesn’t fully represent real user experience. Real users data based taken from the Chrome User Experience Report (CrUX) shows an even wider picture. ​​I’ll use data aggregated from users who use mobile devices. Specifically, we will use metrics like: Time To First Byte TTFB represents the time browser waits to receive first bytes of the response from server. TTFB takes from 200ms to 1 second for users around the world. It’s a pretty long time to receive the first chunks of the page. TTFB mobile speed distribution (CrUX, July 2019) First Contentful Paint FCP happens after 2.5 seconds for 23% of page views around the world. FCP mobile speed distribution (CrUX, July 2019) First Input Delay FID metrics show how fast web pages respond to user input (e.g. click, scroll, etc.). CrUX doesn’t have TTI data due to different restrictions, but has FID, which is even better can reflect page interactivity. Over 75% of mobile user experiences have input delay for 50ms and users didn’t experience any jank. FID mobile speed distribution (CrUX, July 2019) You can use the queries below and play with them on this site. Data from July 2019 [ { “date”: “2019_07_01”, “timestamp”: “1561939200000”, “client”: “desktop”, “fastTTFB”: “27.33”, “avgTTFB”: “46.24”, “slowTTFB”: “26.43”, “fastFCP”: “48.99”, “avgFCP”: “33.17”, “slowFCP”: “17.84”, “fastFID”: “95.78”, “avgFID”: “2.79”, “slowFID”: “1.43” }, { “date”: “2019_07_01”, “timestamp”: “1561939200000”, “client”: “mobile”, “fastTTFB”: “23.61”, “avgTTFB”: “46.49”, “slowTTFB”: “29.89”, “fastFCP”: “38.58”, “avgFCP”: “38.28”, “slowFCP”: “23.14”, “fastFID”: “75.13”, “avgFID”: “17.95”, “slowFID”: “6.92” } ] BigQuery #standardSQL SELECT REGEXP_REPLACE(yyyymm, ‘(d{4})(d{2})’, ‘1_2_01’) AS date, UNIX_DATE(CAST(REGEXP_REPLACE(yyyymm, ‘(d{4})(d{2})’, ‘1-2-01’) AS DATE)) * 1000 * 60 * 60 * 24 AS timestamp, IF(device = ‘desktop’, ‘desktop’, ‘mobile’) AS client, ROUND(SUM(fast_fcp) * 100 / (SUM(fast_fcp) + SUM(avg_fcp) + SUM(slow_fcp)), 2) AS fastFCP, ROUND(SUM(avg_fcp) * 100 / (SUM(fast_fcp) + SUM(avg_fcp) + SUM(slow_fcp)), 2) AS avgFCP, ROUND(SUM(slow_fcp) * 100 / (SUM(fast_fcp) + SUM(avg_fcp) + SUM(slow_fcp)), 2) AS slowFCP, ROUND(SUM(fast_fid) * 100 / (SUM(fast_fid) + SUM(avg_fid) + SUM(slow_fid)), 2) AS fastFID, ROUND(SUM(avg_fid) * 100 / (SUM(fast_fid) + SUM(avg_fid) + SUM(slow_fid)), 2) AS avgFID, ROUND(SUM(slow_fid) * 100 / (SUM(fast_fid) + SUM(avg_fid) + SUM(slow_fid)), 2) AS slowFID FROM `chrome-ux-report.materialized.device_summary` WHERE yyyymm = ‘201907’ GROUP BY date, timestamp, client ORDER BY date DESC, client State of Content Management Systems (CMS) performance CMSs should have become our saviors, helping us build faster sites. But looking at the data, that is not the case. The current state of CMS performance around the world is not so great. TTFB mobile speed distribution comparison between all…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply