{"id":357637,"date":"2021-12-07T11:01:05","date_gmt":"2021-12-07T19:01:05","guid":{"rendered":"https:\/\/css-tricks.com\/?p=357637"},"modified":"2022-03-02T11:41:19","modified_gmt":"2022-03-02T19:41:19","slug":"test-your-product-on-a-crappy-laptop","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/test-your-product-on-a-crappy-laptop\/","title":{"rendered":"Test Your Product on a Crappy Laptop"},"content":{"rendered":"\n<p>There is a huge and ever-widening gap between the devices we use to make the web and the devices most people use to consume it. It\u2019s also no secret that&nbsp;<a href=\"https:\/\/almanac.httparchive.org\/en\/2020\/page-weight\" rel=\"noopener\">the average size of a website is huge<\/a>, and it\u2019s only going to get larger.<\/p>\n\n\n\n<p>What can you do about this? Get your hands on a&nbsp;<a href=\"https:\/\/en.wiktionary.org\/wiki\/craptop\" rel=\"noopener\">craptop<\/a>&nbsp;and try to use your website or web app.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Craptops are cheap devices with lower power internals. They oftentimes come with all sorts of third-party apps preinstalled as a way to offset its cost\u2014apps like virus scanners that are resource-intensive and difficult to remove.&nbsp;<a href=\"https:\/\/www.google.com\/search?q=cheap+laptop\" rel=\"noopener\">They\u2019re everywhere<\/a>, and they\u2019re not going away anytime soon.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">My son just got his school district-issued Chromebook that he\u2019s expected to use for the next 10 years until he graduates high school\u2026<br><br>Makes me think there\u2019s gonna be (if there isn\u2019t already now) a somewhat large market for web-based software that works on old hardware.<\/p>&mdash; Dave Rupert (@davatron5000) <a href=\"https:\/\/twitter.com\/davatron5000\/status\/1429866381831544836?ref_src=twsrc%5Etfw\" rel=\"noopener\">August 23, 2021<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>As you work your way through your website or web app, take note of:<\/p>\n\n\n\n<ul><li>what loads slowly,<\/li><li>what loads so slowly that it\u2019s unusable, and<\/li><li>what doesn\u2019t even bother to load at all.<\/li><\/ul>\n\n\n\n<p>After that, formulate a plan about what to do about it.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-industry-average\">The industry average<\/h3>\n\n\n<p>At the time of this post, the most common devices used to read CSS-Tricks are powerful, modern desktops, laptops, tablets, and phones with up-to-date operating systems and plenty of computational power.<\/p>\n\n\n\n<p>Granted, not everyone who makes websites and web apps reads CSS-Tricks, but it is a very popular industry website, and I\u2019m willing to bet its visitors are indicative of the greater whole.<\/p>\n\n\n\n<p>In terms of performance, the qualities we can note from these devices are:<\/p>\n\n\n\n<ul><li>powerful processors,<\/li><li>generous amounts of RAM,<\/li><li>lots of storage space,<\/li><li>high-quality displays, and most likely a<\/li><li>high-speed internet connection<\/li><\/ul>\n\n\n\n<p>Unfortunately, these qualities are not always found in the devices people use to access your content.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-survivor-bias\">Survivor bias<\/h3>\n\n\n<p>British soldiers in World War I were equipped with a <a href=\"https:\/\/en.m.wikipedia.org\/wiki\/Brodie_helmet\" rel=\"noopener\">Brodie helmet<\/a>, a steel hat designed to protect its wearer from overhead blasts and shrapnel while conducting trench warfare. After its deployment, field hospitals saw an uptick in soldiers with severe head injuries.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"800\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_B13C84C7D4B6AB9ED42C1F2FD3D94853B744A63D6319A50AF7E67DD56B0186D5_1636938323910_7c6be96973a7d58ae6462bf559b2f6a9-2.jpg?resize=602%2C800&#038;ssl=1\" alt=\"A grizzled British soldier smiling back at the camera, holding a Brodie helmet with a large hole punched in it. Black and white photograph.\" class=\"wp-image-357648\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_B13C84C7D4B6AB9ED42C1F2FD3D94853B744A63D6319A50AF7E67DD56B0186D5_1636938323910_7c6be96973a7d58ae6462bf559b2f6a9-2.jpg?w=602&amp;ssl=1 602w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_B13C84C7D4B6AB9ED42C1F2FD3D94853B744A63D6319A50AF7E67DD56B0186D5_1636938323910_7c6be96973a7d58ae6462bf559b2f6a9-2.jpg?resize=226%2C300&amp;ssl=1 226w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Source: <a href=\"https:\/\/historydaily.org\/lucky-british-soldier-shows-off-damaged-helmet-1917\" rel=\"noopener\">History Daily<\/a><\/figcaption><\/figure>\n\n\n\n<p>Because of the rise in injuries, British command considered going back to the drawing board with the helmet\u2019s design. Fortunately, a statistician pointed out that the dramatic rise in hospital cases was because people were surviving injuries that previously would have killed them\u2014before the introduction of steel the British Army used felt or leather as headwear material.<\/p>\n\n\n\n<p>Survivor bias is the logical error that focuses on those who made it past a selection process. In the case of the helmet, it\u2019s whether you\u2019re alive or not. In the case of websites and web apps, it\u2019s if a person can load and use your content.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/twitter.com\/estellevw\/status\/1027305654501826560\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"lies-damned-lies-and-statistics\">Lies, damned lies, and statistics<\/h3>\n\n\n<p>People who can\u2019t load your website or web app don\u2019t show up as visitors in your analytics suite. This is straightforward enough.<\/p>\n\n\n\n<p>However, the \u201cuse\u201d part of \u201cload and use your content\u201d is the important bit here. There\u2019s a certain percentage of devices who try to access your product that will be able to load enough of it to register a hit, but then bounce because the experience is so terrible it is effectively unusable.<\/p>\n\n\n\n<p>Yes, I know analytics can be more sophisticated than this. But through the lens of survivor bias, <a href=\"https:\/\/simonhearne.com\/2022\/survorship-bias-in-webperf\/\" rel=\"noopener\">is this behavior something your data is accommodating<\/a>?<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"blame\">Blame<\/h3>\n\n\n<p>It\u2019s easy to go out and get a cheap craptop and feel bad about a slow website you have no control over. The two real problems here are:<\/p>\n\n\n\n<ol><li>Third-party assets, such as the very analytics and CRM packages you use to determine who is using your product and how they go about it. There\u2019s no real control over the quality or amount of code they add to your site, and setting up the logic to block them loading their own third-party resources is difficult to do.<\/li><li>The people who tell you to add these third-party assets. These people typically aren\u2019t aware of the performance issues caused by the ask, or don\u2019t care because it\u2019s not part of the results they\u2019re judged by.<\/li><\/ol>\n\n\n\n<p>What can we do about these two issues? Tie abstract, one-off business requests into something more holistic and personal.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"bear-witness\">Bear witness<\/h3>\n\n\n<p>I know of organizations who do things like \u201cTesting Tuesdays,\u201d where moderated usability testing is conducted every Tuesday. You could do the same for performance, even thread this idea into existing usability testing plans\u2014slow websites aren\u2019t usable, after all.<\/p>\n\n\n\n<p>The point is to construct a regular cadence of seeing how real people actually use your website or web app, using real world devices. And when I say real world, make sure it\u2019s not just the average version of whatever your analytics reports says.<\/p>\n\n\n\n<p>Then make sure everyone is aware of these sessions. It\u2019s a powerful thing to show a manager someone trying to get what they need, but can\u2019t because of the choices your organization has made.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"craptop-duty\">Craptop duty<\/h3>\n\n\n<p>There are roughly 260 work days in a year. That\u2019s 260 chances to build some empathy by having someone on your development, design, marketing, or leadership team use the craptop for a day.<\/p>\n\n\n\n<p>You can run Linux from a Windows subsystem to run most development tooling. Most other apps I\u2019m aware of in the web-making space have a Windows installer, or can run from a browser. That should be enough to do what you need to do. And if you can\u2019t, or it\u2019s too slow to get done at the pace you\u2019re accustomed to, well, that\u2019s sort of the point.<\/p>\n\n\n\n<p>Craptop duty, combined with usability testing with a low power device, should hopefully be enough to have those difficult conversations about what your website or web app really needs to load and why.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"dont-tokenize\">Don\u2019t tokenize<\/h3>\n\n\n<p>The final thing I\u2019d like to say is that it\u2019s easy to think that the presence of a lower power device equals the presence of an economically disadvantaged person. That\u2019s not true. Powerful devices can become circumstantially slowed by multiple factors. Wealthy individuals can, and do, use lower-power technology.<\/p>\n\n\n\n<p>Perhaps the most important takeaway is poor people don\u2019t deserve an inferior experience, regardless of what they are trying to do. Performant, intuitive, accessible experiences on the web are for everyone, regardless of device, ability, or circumstance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There is a huge and ever-widening gap between the devices we use to make the web and the devices most people use to consume it. It\u2019s also no secret that&nbsp;the average size of a website is huge, and it\u2019s only going to get larger. What can you do about this? Get your hands on a&nbsp;craptop&nbsp;and [&hellip;]<\/p>\n","protected":false},"author":230513,"featured_media":357655,"comment_status":"open","ping_status":"closed","sticky":false,"template":"art-direction\/eoy-2021.php","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Test Your Product on a Crappy Laptop by @ericwbailey","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[18996,4],"tags":[529],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/old-monitors.jpg?fit=1000%2C500&ssl=1","jetpack-related-posts":[{"id":250705,"url":"https:\/\/css-tricks.com\/practical-guide-progressive-web-apps-organisations-dont-know-anything-progressive-web-apps\/","url_meta":{"origin":357637,"position":0},"title":"A practical guide to Progressive Web Apps for organisations who don\u2019t know anything about Progressive Web Apps","date":"January 30, 2017","format":false,"excerpt":"Sally Jenkinson: Progressive Web Apps (sometimes referred to as PWAs, because everything in tech needs an acronym) is the encapsulating term for websites following a certain approach, that meet particular technical criteria. The \"app\" involvement in the name isn\u2019t an accident \u2013 these creations share much of the functionality that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":269325,"url":"https:\/\/css-tricks.com\/going-offline\/","url_meta":{"origin":357637,"position":1},"title":"Going Offline","date":"April 11, 2018","format":false,"excerpt":"Jeremy Keith has written a new book all about service workers and offline functionality that releases at the end of the month. The first chapter is posted on A List Apart. Now that the latest versions of iOS and macOS Safari support service workers, I can\u2019t think of a better\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/website-offline.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255125,"url":"https:\/\/css-tricks.com\/making-web-complicated\/","url_meta":{"origin":357637,"position":2},"title":"Are we making the web too complicated?","date":"May 23, 2017","format":false,"excerpt":"Exactly as I did the other week, Laurie Voss saw a tweet about the complication of front-end development and responded. From the outside, front end development in 2017 looks pathologically overcomplicated. Is this a fair perception? If so, why is it happening? \u2014 Pinboard (@Pinboard) May 21, 2017 The replies\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":298572,"url":"https:\/\/css-tricks.com\/weekly-platform-news-web-apps-in-galaxy-store-tappable-stories-css-subgrid\/","url_meta":{"origin":357637,"position":3},"title":"Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS Subgrid","date":"November 7, 2019","format":false,"excerpt":"In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox 70, and a new study confirms that users prefer to tap into content rather than scroll through it. Let's get into the news. Securely generated passwords in Firefox\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/wpn-20191107.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20223,"url":"https:\/\/css-tricks.com\/w3conf-tomomi-imura-mobile-web-real-life-examples-of-html5-for-mobile\/","url_meta":{"origin":357637,"position":4},"title":"[W3Conf] Tomomi Imura: &#8220;Mobile Web: Real Life Examples of HTML5 for Mobile&#8221;","date":"February 22, 2013","format":false,"excerpt":"Tomomi Imura (@girlie_mac) works on the Open Web at Nokia and talked about real life use cases for HTML5 on mobile devices. These are my notes from her presentation at W3Conf in San Francisco as part of this live blog series. The changes in mobile devices over the last 10\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":296196,"url":"https:\/\/css-tricks.com\/weekly-platform-news-emoji-string-length-issues-with-rounded-buttons-bundled-exchanges\/","url_meta":{"origin":357637,"position":5},"title":"Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled Exchanges","date":"September 19, 2019","format":false,"excerpt":"In this week's roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new way to share web apps between devices, even when they are offline. The JavaScript string length of emoji characters A single rendered\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/wpn-20190919.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/old-monitors.jpg?fit=1000%2C500&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357637"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/230513"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=357637"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357637\/revisions"}],"predecessor-version":[{"id":364877,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357637\/revisions\/364877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/357655"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=357637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=357637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=357637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}