davidbgk
/
larlet-fr-david-cache
Obserwuj 1
Gwiazdka 0
Forkuj 0
Kod Wydania 0 Aktywność
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 Commity
1 Gałąź
Drzewo: df9a5c5108
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z 'df9a5c5108'
${ noResults }
larlet-fr-david-cache/cache/2020/fc97310297178a549eab5c5f9e8.../index.md

index.md 25KB
Czysty Normal View Historia

Moar cache
4 lat temu
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 123456789101112131415 
  1. title: Why 543 KB keep me up at night

  2. url: https://www.matuzo.at/blog/why-543kb-keep-me-up-at-night/

  3. hash_url: fc97310297178a549eab5c5f9e8a334f

  4. 

  5. <p>Some background: About three years ago I specialized in web accessibility. Now it’s not just my job to make sure that the websites I build are accessible, but the websites of others, too. I’m a front-end developer, but also a consultant and auditor. I’m employed for about a year now as well, and I have to evaluate a lot more third party web products than I used to.</p>

  6. <h2 id="something-has-changed">Something has changed</h2>

  7. <p>A friend recently sent me the link to a website and asked me for feedback, because I had experience with the content management system their client was using.<br/>I <a href="/blog/beyond-automatic-accessibility-testing-6-things-i-check-on-every-website-i-build/">checked a few things</a> and then browsed through the website with <a href="https://developer.mozilla.org/en-US/docs/Tools">Dev Tools</a> and the network panel open. The homepage had a page weight of <strong>4.1 MB (6.7 MB uncompressed)</strong>. I thought, “<em>Aight, that’s not great, but there are a bunch of images, so I guess it’s okay</em>”. Then I visited a page with a header, footer, sidebar navigation and a short paragraph <strong>(543 KB / 1.6 MB uncompressed)</strong> and I thought “<em>Nice, noticeably below 1 MB, that’s pretty good.</em>”.</p><p>And then it hit me.<br/>What the hell did just happen? <strong>543 KB</strong> on a simple text-only page is OK? Fuck no, it’s not.</p><p>How and when did I get to the point where I would consider a page weight of 4 MB on a large page and 500 KB on a small page normal? This got me thinking (and writing obviously). This is not an exception. The quality of most websites I audit and evaluate is bad. Somehow we've collectively decided that it’s okay to publish garbage.<br/>When I say we, I don’t just mean us developers. The reason could be a developer who doesn’t care enough, but it could also be a team lead, product owner or client who simply doesn’t give devs enough time to care about quality. Causes for that could be a lack of awareness, tough deadlines, short release cycles, or focus on development of new features instead of improvement of existing code.<br/>When I say garbage, I mean slow, inaccessible, annoying, stressful, or intrusive web experiences.</p><h3 id="slow">Slow</h3><p>I need 1.6 MB of JavaScript (7.2 MB uncompressed) to display a table with my billing history.</p><figure class="figure figure--full"><a href="https://res.cloudinary.com/dp3mem7or/image/upload/v1582717566/articles/543kb/adobe_j.jpg" rel="noopener"><span class="content__image-wrapper"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy content__image" data-src="https://res.cloudinary.com/dp3mem7or/image/upload/c_scale,w_1300/v1582717566/articles/543kb/adobe_j.jpg" alt="Logged in on adobe.com. Screenshot."/></span></a><figcaption>Billing history on adobe.com</figcaption></figure><h3 id="inaccessible">Inaccessible</h3><p>Many accessibility issues derive from bad markup. I could show a screenshot of any website here, but you’ll find some common mistakes on <a href="https://www.htmhell.dev/">HTMHell</a>.</p><figure class="figure figure--full"><a href="https://www.htmhell.dev/10-section-is-no-replacement-for-div/" rel="noopener"><span class="content__image-wrapper"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy content__image" data-src="https://res.cloudinary.com/dp3mem7or/image/upload/c_scale,w_1300/v1582719885/articles/543kb/htmhell.jpg" alt="htmhell.com. Screenshot."/></span></a><figcaption>A submission on HTMHell showing many nested section and article elements.</figcaption></figure><h3 id="annoying">Annoying</h3><p>No, the first thing I want to do when I visit your website is not to sign up for a newsletter.</p><figure class="figure figure--full"><a href="https://res.cloudinary.com/dp3mem7or/image/upload/v1582780558/articles/543kb/sitepoint.jpg" rel="noopener"><span class="content__image-wrapper"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy content__image" data-src="https://res.cloudinary.com/dp3mem7or/image/upload/c_scale,w_1300/v1582780558/articles/543kb/sitepoint.jpg" alt="Overlay on the sitepoint.com hopmepage. Screenshot."/></span></a><figcaption>Sitepoint trying to lure users into signing up for their newsletter by giving away a free book.</figcaption></figure><h3 id="stressful">Stressful</h3><p>Only 5 rooms left! Limited-time deal!! 2 other people looked for your dates in the last 10 minutes!!! I will never ever book anything on your website!!!!</p><figure class="figure"><a href="https://res.cloudinary.com/dp3mem7or/image/upload/v1582780558/articles/543kb/booking.jpg" rel="noopener"><span class="content__image-wrapper"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy content__image" data-src="https://res.cloudinary.com/dp3mem7or/image/upload/c_scale,w_800/v1582780558/articles/543kb/booking.jpg" alt="Room selection screen on booking.com. Red and orange messages stressing people to book quickly."/></span></a><figcaption>booking.com trying to stress me in 3 different places into booking a room.</figcaption></figure><h3 id="intrusive">Intrusive</h3><p>ZDNet misuses the cookie consent dialog to trigger the push notifications prompt.</p><figure class="figure"><a href="https://res.cloudinary.com/dp3mem7or/image/upload/v1582780558/articles/543kb/zdnet.jpg" rel="noopener"><span class="content__image-wrapper"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy content__image" data-src="https://res.cloudinary.com/dp3mem7or/image/upload/c_scale,w_1300/v1582780558/articles/543kb/zdnet.jpg" alt="Cookie dialog shows, click Allow, notifications prompt shows. "/></span></a><figcaption>A tweet by Šime Vidas explaining what he discovered on ZDNet.</figcaption></figure><p>I don’t know if it has always been like that or if the quality of what we publish online has gotten worse with <a href="https://css-tricks.com/innovation-cant-keep-the-web-fast/">advancing technological possibilities on the web</a> (faster networks, more powerful tools and new APIs). <strong>The web is in bad shape - we need to readjust our understanding of what quality means</strong> and what we can expect our users to put up with.</p><p>Now you might think, “<em>Dude, chill. 543 KB? That’s not bad, even on a 3G connection that site should load in a reasonable time.</em>”.</p>

  8. <h2 id="why-543-kb-might-be-bad">Why 543 KB might be bad</h2>

  9. <p>Yes, I know, it depends. 543 KB aren't always bad, but on that specific page there's only a single image (the logo ~20 KB) and a single paragraph. So why then is the page still relatively large, where are the remaining 523 KB coming from?</p><p>Let's break it up and see what we could take into account when we evaluate the total transferred bytes.</p><h3 id="page-weight">Page weight</h3><p>Even in times of 4G or 5G, optimizing for fast download is important. People don’t always surf the web under the best conditions. Build your website for someone who visits it at Starbucks using Starbucks WIFI and not for someone who’s connected to their own fast internet at home.</p><p>The website we’re talking about now is an Austrian website, in German language, accessed mostly by Austrians via Austrian networks. We’re a country with affordable and fast data. Don’t get me wrong, the page weight is definitely too big, but I’d argue that it's not the biggest issue, especially if they’re caching efficiently and prioritizing asset loading correctly (spoiler alert: they’re not… ).</p><h3 id="dom-size">DOM size</h3><p>Many and deeply nested elements result in a large DOM tree, which can affect runtime, memory and load performance negatively.</p><p>A large DOM tree in combination with complicated styles might have a bad effect on page rendering. In his talk <em>“</em><a href="https://www.technica11y.org/performance-and-the-accessibility-tree"><em>The Intersection of Performance and Accessibility</em></a><em>”</em> <a href="https://ericwbailey.design/">Eric W. Bailey</a> gives an example of a form based on Material Design that caused the screen reader Voice Over to crash because of its massive DOM size.</p><blockquote><p>To make a material design radio input, you need six HTML elements containing nine attributes with a DOM depth of three. You also need 66 CSS selectors containing 141 properties which weighs in at 10k when minified. You also need 2374 lines of JavaScript which weighs in at 30k when minified. All of this will get you a radio input.</p></blockquote><p>Another factor is JavaScript. Updating complex DOM structures can get expensive, changes at one level in the DOM tree can cause changes at every level of the tree, which leads to more time being spent <a href="https://gist.github.com/paulirish/5d52fb081b3570c81e3a">performing reflow</a>. DOM operations can become a performance bottleneck, but there’s more to consider, like storing references to a large number of nodes, which might overwhelm the memory capabilities of devices. Creating DOM nodes only when needed and destroying them when no longer needed helps with that.</p><p>If you don’t write your markup carefully and enable compression on the server, your HTML document might end up having multiple hundred kilobytes, although it should be somewhere in the lower tens. By writing carefully I mean only creating DOM nodes you need and adding extra divs and spans only when necessary. In React, <a href="https://reactjs.org/docs/fragments.html">Fragments</a> might help with that.</p><pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">class</span> <span class="token class-name">Columns</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span></span><br/><span class="highlight-line">  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br/><span class="highlight-line">    <span class="token keyword">return</span> <span class="token punctuation">(</span></span><br/><span class="highlight-line">      <span class="token operator">&lt;</span>React<span class="token punctuation">.</span>Fragment<span class="token operator">&gt;</span></span><br/><span class="highlight-line">        <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span>Hello<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span></span><br/><span class="highlight-line">        <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span>World<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span></span><br/><span class="highlight-line">      <span class="token operator">&lt;</span><span class="token operator">/</span>React<span class="token punctuation">.</span>Fragment<span class="token operator">&gt;</span></span><br/><span class="highlight-line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span><br/><span class="highlight-line">  <span class="token punctuation">}</span></span><br/><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><p>A fragment just returns the content within the fragment without an extra wrapper <code>div</code>.</p><p><a href="https://developers.google.com/web/tools/lighthouse/audits/dom-size">Google recommends</a> less than 1500 nodes total, a maximum depth of 32 nodes, and no parent node with more than 60 child nodes.</p><h3 id="css">CSS</h3><p>There are 11 style sheets with a total weight of 97 KB (566 KB uncompressed). Only by looking at the numbers it’s hard to tell if there are a lot of unused rules in there, but 566 KB of minified CSS is definitely not something that can be ignored. I'm not saying that refactoring their CSS is a must, but I’d at least consider taking another look at what goes into the CSS bundle. Sometimes it’s not even our fault that bundle sizes are too big. Many content management systems or plug-ins come with huge JS and CSS files where only a fraction of the code is needed.</p><p>Another thing worth considering is splitting up the main CSS file by media feature, especially if the assets are served via HTTP2.</p><pre class="language-html"><code class="language-html"><span class="highlight-line"/><br/><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>main.css<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span></span><br/><span class="highlight-line"/><br/><span class="highlight-line"/><br/><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>medium.css<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(min-width: 768px)<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span></span><br/><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large.css<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(min-width: 1024px)<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span></span><br/><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>print.css<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>print<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span></span></code></pre><p>Before HTTP2 this was kinda considered a bad practice, but with HTTP2 multiplexing, the number of requests that can be sent to the server at the same time is no longer limited. The big advantage of splitting CSS into multiple files is that browsers will download all of them, but only those needed to fulfill the current context will block rendering,</p><p>Read more about the topic in Harry Roberts fantastic article <a href="https://csswizardry.com/2018/11/css-and-network-performance/">CSS and Network Performance</a>.</p><h3 id="fonts">Fonts</h3><p>Font files can get pretty big, a <a href="https://www.zachleat.com/web/comprehensive-webfonts/">good font loading strategy</a> is essential. Fonts are sometimes a necessary evil, but one file is a 34 KB Font Awesome file. SVGs might be a better choice, because they're more flexible than icon fonts for animation and styling, and a SVG sprite with just the icons needed and not the whole set of icons might end up being much smaller.</p><p>It’s been years since I’ve used services like Font Awesome, SVGs have so much <a href="https://css-tricks.com/icon-fonts-vs-svg/">more advantages over icons fonts</a>.</p><h3 id="javascript-and-bundle-sizes">JavaScript and bundle sizes</h3><p>There are 22 JS files with a total file size of 320 KB (886 KB compressed). This is way too much considering that there’s only a navigation and a share button on this page.</p><p>I will not bash JavaScript, I love JS and I enjoy writing it. I’m not great at it though, and I’d argue that most of us aren’t. Lack of knowledge paired with a language that can easily fuck up performance is dangerous. That’s why I’m very cautious of what I’m doing and which 3rd party plugins I’m using.</p><figure class="figure figure--full"><a href="https://res.cloudinary.com/dp3mem7or/image/upload/v1582780558/articles/543kb/addy.jpg" rel="noopener"><span class="content__image-wrapper"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy content__image" data-src="https://res.cloudinary.com/dp3mem7or/image/upload/c_scale,w_1300/v1582780558/articles/543kb/addy.jpg" alt="Addy Osmani on the left on stage at #PerfMatters conf. A slide on the right “Stop taking fast networks, CPU &amp; high RAM for granted”."/></span></a></figure><p>I’ve watched Addy Osmani’s <a href="https://www.youtube.com/watch?v=X9eRLElSW1c&amp;feature=emb_title">The Cost of JavaScript</a> the other day, which is also one reason I’m writing this article. I was blown away by so many things he said. Here’s a summary of my highlights:</p><ul><li>JavaScript is one of the most expensive parts of your site, reduce how much JS you ship.</li><li>Small JavaScript bundles improve download speeds, lower memory usage, and reduce CPU costs.</li><li>Avoid large bundles <strong>(50KB+)</strong>.</li><li>Post-Download, executing JavaScript is the dominant cost.</li><li>The differences between a low-end phone and high-end phone are huge.</li><li>Fast JavaScript means fast at download, parse and compile, and execute.</li><li>Avoid large inline scripts.</li><li>If possible, split your JS code.</li><li>Audit JS regularly.</li><li>Make performance part of the conversation.</li><li>Stop taking fast networks, fast CPU, and high RAM for granted.</li><li>Test on real phones and networks.</li></ul><p>Watch the talk or <a href="https://v8.dev/blog/cost-of-javascript-2019">read the article</a>, I promise you’ll love it.</p><p>If you know more about performance than I do (and you probably do), you might be shouting at the screen <em>“You didn’t consider this and that”</em>. Fair enough, but this post is not about how to optimize those 543 KB. It was my attempt to show you that we can’t expect whatever we produce and put online to be fine. We have to be much more considerate, we have to take a second and third look, and constantly challenge our decisions. Sometimes, even just slowing down can make a difference. As <a href="https://hankchizljaw.com/wrote/keeping-it-simple-with-css-that-scales/">Andy Bell recently discovered</a> while reviewing a larger codebase, stepping back and ignoring time pressure for a moment can help with seeing things clearly.</p><blockquote><p>We had two or three grid systems, some fluid type and some utility driven type that conflicted <strong>and</strong> a card component that was pretty much a website in itself. If I had slowed down and stepped back, I could have seen these problems, but I didn’t. So seriously, slow down and you will save so much time.</p></blockquote><p><a href="https://hankchizljaw.com/" rel="noopener">Andy Bell</a></p><p>By the way, the 543 KB page scored 11 points on the Lighthouse performance test.</p>

  10. <h2 id="why-bother">Why bother?</h2>

  11. <p>Why is a website I'll probably never visit again bothering me so much?<br/>Because someone decided that it was good enough to go live. The problem is not this specific website or how fast it loads, but that <strong>shipping seems to be so much more important than performance, usability, accessibility, or user experience</strong>. Again, I know it’s not always up to us, because often we just have to publish something we don’t agree with, but the least we can do is to educate others why some decisions might be harmful, and try to improve things in whatever ways we can.</p><blockquote><p>It’s becoming increasingly clear that web performance isn’t solely an engineering problem, but a problem of people.</p></blockquote><p><a href="https://css-tricks.com/innovation-cant-keep-the-web-fast/">Jeremy Wagner</a></p>

  12. <h2 id="whats-good-enough">Whats good enough?</h2>

  13. <p>I started this article with the question “how good is <em>good enough</em>”. I can’t answer it for all of us, because it depends on our personal experience and capabilities. What I consider good enough might not live up to the expectations of others, but there are standards and best practices we can follow.</p><p>Here are a few things I (as a front-end dev) believe have to happen before a website can go online.</p><ul><li><a href="https://validator.w3.org/">Validate your HTML.</a></li><li>Test in many browsers. There’s a world beyond Firefox and Chrome. Check Opera, Firefox Mobile, Brave, Edge, or Samsung Internet, just to name a few. Safari can be a bitch, too.</li><li>Test on low budget phones, if you really want to see how well your website performs.</li><li><a href="https://developers.google.com/web/tools/lighthouse">Run Lighthouse</a> and try to score 100 in the accessibility, best practices, and SEO audits. Scoring 100 in performance is hard, but strive for a score above 90.</li><li>Check how your site performs on a slow connection by <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">throttling it in Dev Tools</a>.</li><li>Put <a href="https://www.youtube.com/watch?v=H4FzW9oFObs">your mouse aside</a> and use your website with the keyboard only.</li><li><a href="https://dequeuniversity.com/screenreaders/">Test your site with screen readers</a>.</li><li>Go through <a href="https://thedaviddias.dev/">David Dias</a>' fantastic <a href="https://frontendchecklist.io/">Frontend Checklist</a>.</li></ul><p>There’s more, but if we all did at least that, our users would be much happier. I know you might be thinking: <em>“We don’t have the budget for that.”</em>. But that’s the point: you should have it. <em>“It’s online and works in most browsers”</em> is not enough. We have to make performance, accessibility, usability, and user experience part of the conversation.</p><p>By the time you’ve reached this paragraph, you’ve downloaded 837 KB of data. Can that be improved? Most definitely. Is this website 100% accessible? Probably not. Did you get the best possible user experience? I guess no, I don’t know shit about UX.<br/>If my own website isn’t perfect, who am I to lecture you? Well it’s not about publishing perfect websites. That’s not possible for many different reasons, but it’s important that we’re conscious of what we’re shipping to our users. It’s important that we care about our users and about the quality of our products and that our standards become higher than they are at the moment.</p><blockquote><p>Good websites need time.<br/>Great websites need a lot of time.</p><p>For content, for graphics, for interaction, for organization, for findability, usability, accessibility and that dash of delight that makes it special.</p><p>Don’t build throw-away websites, build websites that last.</p></blockquote><p><a href="https://mobile.twitter.com/yatil/status/1230899701802770442">Eric Eggert</a></p>

  14. <h2>Resources</h2>

  15. <ul><li><a href="https://www.technica11y.org/performance-and-the-accessibility-tree">Performance and the Accessibility Tree</a></li><li><a href="https://developers.google.com/web/tools/lighthouse/audits/dom-size">Uses An Excessive DOM Size</a></li><li><a href="https://areknawo.com/dom-performance-case-study/">DOM performance case study</a></li><li><a href="https://developers.google.com/web/fundamentals/performance/rendering/">Rendering Performance</a></li><li><a href="https://css-tricks.com/innovation-cant-keep-the-web-fast/">Innovation Can’t Keep the Web Fast</a></li><li><a href="https://www.filamentgroup.com/lab/5g/">5G Will Definitely Make the Web Slower, Maybe</a></li><li><a href="https://hankchizljaw.com/wrote/keeping-it-simple-with-css-that-scales/">Keeping it simple with CSS that scales</a></li></ul>